@extends('front.layouts.master')
@section('title', isset($title) ? $title : 'Home')
@section('description', isset($description) ? $description : '')
@section('keywords', isset($keywords) ? $keywords : '')
@section('content')

<!-- Breadcrumb Area -->
<div class="breadcrumb-area">
  <div class="container">
    <div class="breadcrumb-wrap text-center">
      <h2 class="page-title">{{ __('Protected Areas') }}</h2>
      <ul class="breadcrumb-pages">
        <li class="page-item"><a class="page-item-link" href="{{ route('front') }}">{{ __('Home') }}</a></li>
        <li class="page-item">{{ __('Protected Areas') }}</li>
      </ul>
    </div>
  </div>
</div>

  <!-- Work Area  -->
  <div class="about-us-area section">
    <div class="container">
      <div class="rscnProtectedAreaSectionBox">
        <div class="rscnProtectedAreaSection">
          <img src="{{ asset('frontend/assets/images/protectedAreaMap.svg') }}" class="rscnProtectedAreaMap rscnProtectedAreaMapEn" />
          <img src="{{ asset('frontend/assets/images/protectedAreaMapAr.svg') }}" class="rscnProtectedAreaMap rscnProtectedAreaMapAr" />
          <button type="button" id="rscnProtectedAreaPin-1" style="background-color: {{area('ajloun')['color_code']}};"  
          class="rscnProtectedAreaPin btn p-0 ajloun protectedArea"
          data-attr="{{ route('protected-area.show', 'ajloun') }}" data-bs-toggle="modal"
          data-bs-target="#protectedArea1"></button>
          <button type="button" id="rscnProtectedAreaPin-2" style="background-color: {{area('shaumari')['color_code']}};"  
          class="rscnProtectedAreaPin btn p-0 azraq protectedArea"
          data-attr="{{ route('protected-area.show', 'shaumari') }}" data-bs-toggle="modal"
          data-bs-target="#protectedArea1"></button>
          <button type="button" id="rscnProtectedAreaPin-3" style="background-color: {{area('azraq')['color_code']}};"  
          class="rscnProtectedAreaPin btn p-0 shaumari protectedArea"
          data-attr="{{ route('protected-area.show', 'azraq') }}" data-bs-toggle="modal"
          data-bs-target="#protectedArea1"></button>
          <button type="button" id="rscnProtectedAreaPin-4" style="background-color: {{area('mujib')['color_code']}};"  
          class="rscnProtectedAreaPin btn p-0 mujib protectedArea"
          data-attr="{{ route('protected-area.show', 'mujib') }}" data-bs-toggle="modal"
          data-bs-target="#protectedArea1"></button>
          <button type="button" id="rscnProtectedAreaPin-5" style="background-color: {{area('dana')['color_code']}};"  
          class="rscnProtectedAreaPin btn p-0 dana protectedArea"
          data-attr="{{ route('protected-area.show', 'dana') }}" data-bs-toggle="modal"
          data-bs-target="#protectedArea1"></button>

          <button type="button" id="rscnProtectedAreaPin-7" style="background-color: {{area('yarmouk')['color_code']}};"  
          class="rscnProtectedAreaPin btn p-0 protectedArea"
          data-bs-toggle="modal" data-attr="{{ route('protected-area.show', 'yarmouk') }}"
          data-bs-target="#protectedArea1"></button>
          <button type="button" id="rscnProtectedAreaPin-8" style="background-color: {{area('dibeen')['color_code']}};"  
          class="rscnProtectedAreaPin btn p-0 protectedArea"
          data-bs-toggle="modal"data-attr="{{ route('protected-area.show', 'dibeen') }}"
          data-bs-target="#protectedArea1"></button>
          <button type="button" id="rscnProtectedAreaPin-9" style="background-color: {{area('dahek')['color_code']}};"  
          class="rscnProtectedAreaPin btn p-0 protectedArea"
          data-bs-toggle="modal" data-attr="{{ route('protected-area.show', 'dahek') }}"
          data-bs-target="#protectedArea1"></button>
          <button type="button" id="rscnProtectedAreaPin-10" style="background-color: {{area('burqu')['color_code']}};"  
          class="rscnProtectedAreaPin btn p-0 protectedArea"
          data-bs-toggle="modal" data-attr="{{ route('protected-area.show', 'burqu') }}"
          data-bs-target="#protectedArea1"></button>
          <button type="button" id="rscnProtectedAreaPin-11" style="background-color: {{area('fifa')['color_code']}};"  
          class="rscnProtectedAreaPin btn p-0 protectedArea"
          data-bs-toggle="modal" data-attr="{{ route('protected-area.show', 'fifa') }}"
          data-bs-target="#protectedArea1"></button>
          <button type="button" id="rscnProtectedAreaPin-12" style="background-color: {{area('bird_observatory_aqaba')['color_code']}};"  
          class="rscnProtectedAreaPin btn p-0 protectedArea"
          data-bs-toggle="modal" data-attr="{{ route('protected-area.show', 'bird_observatory_aqaba') }}"
          data-bs-target="#protectedArea1"></button>

          {{-- <button type="button" id="rscnProtectedAreaPin-6" class="rscnProtectedAreaPin btn p-0"></button> --}}
        </div>
        <div class="rscnProtectedAreaKeys">
          <ul class="list-unstyled">
            <li>
              <div class="rscnProtectedAreaKeyItem" style="--protectedArea-bg-color-var: {{area('ajloun')['color_code']}};" >{{ protectedArea('ajloun') }},{{ protectedArea('dibeen') }},{{ protectedArea('yarmouk') }}
              </div>
            </li>
            <li>
              <div class="rscnProtectedAreaKeyItem" style="--protectedArea-bg-color-var: {{area('mujib')['color_code']}};">{{ protectedArea('mujib') }}
              </div>
            </li>
            <li>
              <div class="rscnProtectedAreaKeyItem" style="--protectedArea-bg-color-var: {{area('fifa')['color_code']}};">
              {{ protectedArea('dana') }},{{ protectedArea('fifa') }},{{ protectedArea('shaumari') }}</div>
            </li>
            <li>
              <div class="rscnProtectedAreaKeyItem" style="--protectedArea-bg-color-var: {{area('azraq')['color_code']}};">
              {{ protectedArea('azraq') }}, {{ protectedArea('bird_observatory_aqaba') }}</div>
            </li>
            <li>
              <div class="rscnProtectedAreaKeyItem" style="--protectedArea-bg-color-var: {{area('dahek')['color_code']}};">
              {{ protectedArea('dahek') }},{{ protectedArea('burqu') }}</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <!-- Modal -->
  <div class="modal fade" id="protectedArea1" tabindex="-1" aria-labelledby="protectedArea1Label" aria-hidden="true">
    <div class="modal-dialog rscnProtectedAreaModal">
      <span class="rscnArrowPopover"><i class="fas fa-caret-left"></i></span>
      <div class="modal-content border-0">
        <div class="modal-header justify-content-center border-0">
          <h5 class="modal-title" id="protectedArea1Label"></h5>
        </div>
        <div class="modal-body d-flex p-0">
          <table class="table table-bordered mb-0 rscnProtectedAreaTable">
            <thead>
              <tr>
                <th>
                  <div class="d-flex align-items-center">
                    <img src="{{ asset('frontend/assets/images/animals.svg') }}">
                    <span class="ms-3">{{ __('Animals') }}</span>
                  </div>
                </th>
              </tr>
            </thead>
            <tbody id="animal-table">

            </tbody>
          </table>
          <table class="table table-bordered mb-0 rscnProtectedAreaTable">
            <thead>
              <tr>
                <th>
                  <div class="d-flex align-items-center">
                    <img src="{{ asset('frontend/assets/images/plants.svg') }}">
                    <span class="ms-3">{{ __('Plants') }}</span>
                  </div>
                </th>
              </tr>
            </thead>
            <tbody id="plant-table">
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  @push('post_script')
  <script type="text/javascript">
     $(document).on('click',
       '#rscnProtectedAreaPin-1,#rscnProtectedAreaPin-2,#rscnProtectedAreaPin-3,#rscnProtectedAreaPin-4,#rscnProtectedAreaPin-4,#rscnProtectedAreaPin-5,#rscnProtectedAreaPin-6,#rscnProtectedAreaPin-7,#rscnProtectedAreaPin-8,#rscnProtectedAreaPin-9,#rscnProtectedAreaPin-10,#rscnProtectedAreaPin-11,#rscnProtectedAreaPin-12',
       function(event) {
         event.preventDefault();
         $('#exampleModal').modal('show');
         let href = $(this).attr('data-attr');
         $.ajax({
           url: href,
           beforeSend: function() {
             $('#animal-table').html('');
             $('#plant-table').html('');
           },
           success: function(result) {
            var lang = $('html').attr('lang');
             animalText ='';
             plantText ='';
             var html;
             $.each(result, function(index, row) {
              var name = row.en_name;
              if(lang == 'direction-ltr' ){  name = row.en_name }else{name = row.fr_name}
              $('#protectedArea1Label').text(name)
               $.each(row.area_animal, function(index, animal) {
                var nameAnimal = animal.en_name;
                if(lang == 'direction-ltr' ){  nameAnimal = animal.en_name }else{nameAnimal = animal.fr_name}
                $('#animal-table').append('<tr id="area-animal-content"><td class="rscnDataTxt">' + nameAnimal + '</td></tr>')
               });
               $.each(row.area_plant, function(index, plant) {
                var namePlant = plant.en_name;
                if(lang == 'direction-ltr' ){  namePlant = plant.en_name }else{namePlant = plant.fr_name}
                 $('#plant-table').append(' <tr id="area-plant-content" class="rscnAreaTd"><td class="rscnDataTxt">' + namePlant + '</td></tr>');
               });
             })

           },
           complete: function() {
  
           },
           error: function(jqXHR, testStatus, error) {
             console.log(error);
             alert("Page " + href + " cannot open. Error:" + error);
             $('#loader').hide();
           },
           timeout: 8000
         })
       });
    </script>
    @endpush
    @endsection