@extends('frontend.layouts.app')

@section('title')
	| Library Book Lists
@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">LIBRARY BOOKS 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">LIBRARY BOOKS LIST</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">
                  @foreach ($types as $key => $type_name)
                    <label> 
                      <input type="checkbox" name="book_type" value="{{$key}}" class="filter_type" @if($key == \App\Http\Models\Book::P_BOOK) checked @endif>
                      {{$type_name}} 
                    </label><br />
                  @endforeach
              </div>--}}
              <div class="form-group col-md-12">
                <label for="filter_sector_id"> Sector : </label>
                <select class="form-control" id="filter_sector_id" name="filter_sector_id">
                  <option value=""> -- All -- </option>
                  @foreach ($sectors as $sector)
                      <option value="{{ $sector->id }}" >{{ $sector->name }}</option>
                  @endforeach
                </select>
              </div>                        
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-8">
        @if (session()->has('success'))
        <div class="container">
            <div class="alert alert-success fade show" role="alert">
              <button type="button" class="close" data-dismiss="alert">
                <i class="fa fa-times"></i>
              </button>
              <strong>Success!</strong>
              {{ __('SuccessMessageLogin') }}
            </div>
        </div>
        @endif
        @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>        
    </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">Library Book</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
              {{ __('AlertMessageTitleRegister') }}
            @endguest
            @auth
              {{ __('AlertMessageTitleApproval') }}
            @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
            {{ __('AlertMessageBodyRegister') }}
          @endguest
          @auth
            {{ __('SuccessMessageRegister') }}
          @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_type, #filter_sector_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/library-book/view-file",
            type: "post",
            datatype: "html",
            data: {id: townPlanID},
            success: function(response){ 
              // Add response in Modal body

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

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

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

    });

      // 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/library-book",
          data: data,
          type: "get",
          datatype: "html",
          beforeSend: function(){
            $("#loader").show();
          },
          success:function(data) {
            $('#dynamic_data').html(data);
            $("#loader").hide();
          },
          complete:function(data){
            // Hide image container
          }
        });
      }
      // 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(),
          book_types: book_types,
          sector_id : $('#filter_sector_id').val(),
          limits : $('#limits').val(),
        }
       }
  </script>
@endpush