@extends('frontend.layouts.app')

@section('title')
	| Town Plans
@endsection

@section('styles')
    <style>
    	@font-face {
		  src: url('{{ public_path('css/fonts/Pyidaungsu-2.5_Regular.tff') }}');
		  /*font-family: Pyidaungsu;*/
		}
		.library-book.my p{
		  	font-family: Pyidaungsu;			
		   	text-align: justify;
		    line-height: 30px;
		}
        .library-book.en p{
            text-align: justify;
            line-height: 30px;
        }
    	/* .page-banner {
    		background-image: url('{{ asset('images/inside_banner_touse_1.jpg')}}'); 
    		background-repeat: no-repeat;
    		margin-top: -50px;
    		position: relative;
    		height: 180px;
    	}
    	.inner-banner {
    		height: 180px;
    	}
    	.banner-text {
		    display: inline-block;
		    padding-top: 50px;
		    margin-top: 40px;
		    color: #fff;
    	} */
      .item:nth-of-type(odd) div.item-content {
      background-color: gray;
      color: #fff;
      }
      .item:nth-of-type(odd) div.item-content h4{
        color: #fff;
      }
          
      .item:nth-of-type(even) div.item-content {
      background-color:#f8f9fa;
      }

      .modal.modal-fullscreen .modal-dialog {
        width: 100vw;
        height: 100vh;
        margin: 0;
        padding: 0;
        max-width: none; 
      }

      .modal.modal-fullscreen .modal-content {
        height: auto;
        height: 100vh;
        border-radius: 0;
        border: none; 
      }

      .modal.modal-fullscreen .modal-body {
        overflow-y: auto; 
      }
    	
    </style>
@endsection

@section('content')
{{-- <div class="page-banner">
	<div class="text-center inner-banner">
		<div class="banner-text">
			<h1 class="text-center font-weight-bold">TOWN PLAN LISTS</h1>
		</div>
	</div>
</div>	 --}}
<div id="banner" style="background-image: url({{ asset('images/inside_banner_touse_1.jpg') }}); position: relative; margin-top: -50px;">
  <h1 class="text-center text-white mt-5">TOWN PLAN LISTS</h1>
</div>
<div class="container library-book {{App::getLocale()}}">
	<div class="col-md-12 bg-white py-5 px-4">		
    <div class="row" style="min-height: 60vh;">
    	<div class="col-md-4">
        <div class="">
          <div class="row">                        
            <div class="form-group col-md-12">                
              <input type="text" placeholder="Search by title..." name="keyword" id="keyword" class="form-control" autocomplete="off">
            </div>
          </div>
        </div>
        <div class="bg-light pt-3">
            <div class="col-md-12">
                <div class="row">       
                      <div class="form-group col-md-12">
                        <label for="filter_region_id"> Statr or Region : </label>                 
                        <select class="form-control" id="filter_region_id" name="filter_region_id">
                          <option value=""> -- All -- </option>
                          @foreach ($stateOrRegions as $stateOrRegion)
                              <option value="{{ $stateOrRegion->id }}" >{{ $stateOrRegion->name }}</option>
                          @endforeach
                        </select>
                      </div>
                      <div class="form-group col-md-12">
                        <label for="filter_township_id"> Township : </label>                 
                        <select class="form-control" id="filter_township_id" name="filter_township_id">
                          <option value=""> -- All -- </option>
                        </select>
                      </div>  
                </div>
            </div>
        </div>
      </div>
      <div class="col-lg-8">
        @guest
        <div class="col-md-12">
          <p>If you want read book, login <a href="{{ route('login.for.ebook') }}">here</a>.</p>
        </div>
        @endguest
        
        <div class="col-md-12">
          <div class="row" id="dynamic_data">                        
              <div class="col-md-12 mb-3 bg-secondary text-white" id='loader' style='display: none; height: 50px;'>
                  <div class="text-center text-white p-2 item-content">
                      Loading....
                  </div>
              </div>                            
          </div>
        </div>
      </div> 
      <!-- col-lg-8 -->        
    </div>
	</div>

  <!-- Model for Pdf viewer -->
  <div class="col-md-12">
    <div class="row">      
      <!-- Modal -->
       <div class="modal fade modal-fullscreen" id="pdfModal" role="dialog">
        <div class="modal-dialog modal-full">     
         <!-- Modal content-->
         <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">Town Plan</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
          </div>
          <div class="modal-body"> </div>
         </div>
        </div>
       </div>  
       <!-- Modal -->
    </div>
  </div>

  <!-- Alert for authentication -->
  <!-- Modal -->
  <div class="modal fade" id="authAlertModal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="">
            @guest
              You are not logined in website!
            @endguest
            @auth
              Your accouont is not approved.
            @endauth
          </h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          @guest
            {{ __('Please register to read the Books') }}
          @endguest
          @auth
            {{ __('The admin team will approve to you within 24 hours.') }}
          @endauth
        </div>
        <div class="modal-footer">
          @guest
          <a href="{{url('login-for-ebook')}}"class="btn btn-success">Sign in </a>
          <a href="{{url('register-for-ebook')}}"class="btn btn-primary">To Register </a>
          @endguest
        </div>
      </div>
    </div>
  </div>

</div>

@endsection

@push('scripts')
  <script>
    $(function(){
      fetch_records();

      $(document).on('click', '.pagination a', function(event){
        event.preventDefault(); 
        let page = $(this).attr('href').split('page=')[1];
        fetch_records(page);
       });
      // Search by keyword
      $('#keyword').keyup(function(){
        fetch_records();
      });

      $(document).on('change', '#filter_region_id', function(){
        fetch_township_by_region();
      });

      $(document).on('change', '#filter_township_id', function(){
        fetch_records();
      });

      $(document).on('click', '.viewFile', function(event){
        event.preventDefault();
        
        @guest
          $('#authAlertModal').modal('show');
          return 
        @endguest
        @auth
          // The user is authenticated...
          @if(!auth()->user()->is_approved)
            $('#authAlertModal').modal('show');
            return 
          @endif
          let townPlanID = $(this).data('id');
          // AJAX request
          $.ajax({
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            url:"/en/town-plan/view-file",
            type: "post",
            datatype: "html",
            data: {id: townPlanID},
            success: function(response){ 
              // Add response in Modal body

              $('#pdfModal .modal-body').empty();

              $('#pdfModal .modal-body').html(response);

              // Display Modal
              $('#pdfModal').modal('show'); 
            }
          });
        @endauth

     });

    });

    // fetch township by region code
      function fetch_township_by_region(){
        let state_or_region_id = $('#filter_region_id').val()
        $.ajax({
            headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            url: "/en/ajax/townships-by-region",
            type: 'post',
            dataType: 'json',
            data: { state_or_region_id :  state_or_region_id},
            success: function(result){
                $('#filter_township_id').empty();
                $('#filter_township_id').append('<option value=""> -- All -- </option>');
                if (Array.isArray(result) && result.length) {
                        $.each(result, function(key, value){
                            let option = '<option value="'+value.id+'">'+value.name+'</option>';
                            $('#filter_township_id').append(option);
                        });
                }
                // fetch records
                fetch_records();
            }
        });
      }

      // fetch data
      function fetch_records(page = ""){
        let data = getRequestData();
        // console.log(data.book_types);
        data.page = page;
        $.ajax({
          headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
          url:"/en/town-plan",
          data: data,
          type: "get",
          datatype: "html",
          beforeSend: function(){
            $("#loader").show();
          },
          success:function(data) {
            $('#dynamic_data').html(data);
          },
          complete:function(data){
            // Hide image container
            $("#loader").hide();
          }
        });
      }
      // get filter request values
      function getRequestData(){
        // let book_types = [];
        // $.each($("input[name='book_type']:checked"), function(){
        //     book_types.push($(this).val());
        // });
        return {
          keyword : $('#keyword').val(),
          filter_region_id : $('#filter_region_id').val(),
          filter_township_id : $('#filter_township_id').val(),
          limits : $('#limits').val(),
        }
       }
  </script>
@endpush