@extends('frontend.layout')
@section('page_title', 'List of Pharmacists')

@section('content')

<section class="section">
    <div class="container">
        
        <div class="row" style="height: max-content !important;">
            <div class="col-md-12" style="border-left: 5px solid green;margin-left:10px; margin-bottom: 20px;">
                <h2 style="margin:0px;">Pharmacists</h2>
            </div>
        </div>
        

        <div class="row">
             <div class="col-md-2 mb-4">
                <h4>Filter By:</h4>
            </div>
            <div class="col-md-2 mb-4 col-sm-12">
                <select name="pharmacist_name" id="pharmacist_name" data-placeholder="Select Name">
                    @foreach($pharmacists as $pharmacist)
                        <option value="{{ $pharmacist->pharmacist_name }}">{{ $pharmacist->pharmacist_name ?? ''}}</option>
                    @endforeach
                </select>
            </div>
            
            <div class="col-md-2 mb-4 col-sm-12">
                <select name="registration_no" id="registration_no" data-placeholder="Select Reg. No">
                    @foreach($pharmacists as $pharmacist)
                    <option value="{{ $pharmacist->registration_no }}">{{ $pharmacist->registration_no ?? '' }}</option>
                    @endforeach
                </select>
            </div>      
            
            <div class="col-md-2 mb-4 col-sm-12">
                <select name="university" id="university" data-placeholder="Select University">
                    @foreach($pharmacists as $pharmacist)
                        <option value="{{ $pharmacist->university }}">{{ $pharmacist->university ?? ''}}</option>
                    @endforeach
                </select>
            </div>
            
            <div class="col-md-2 mb-4 col-sm-12">
                <select name="company" id="company" data-placeholder="Select Company">
                    @foreach($pharmacists as $pharmacist)
                        <option value="{{ $pharmacist->company }}">{{ $pharmacist->company ?? ''}}</option>
                    @endforeach
                </select>
            </div> 
            
            
            <div class="col-md-1 mb-4">
                <button onclick="clearFilter()" class="btn btn-danger">Clear</button>
            </div>
            
            <div class="col-xs-12 margin-b-5 table-responsive">
                <table class="table table-striped" style="margin-top: 20px !important;">
                    <thead>
                        <tr class="bg-success text-white" style="color: #fff !important;">
                            <th class="text-white">Pharmacist's Name</th>
                            <th class="text-white">Grade</th>
                            <th class="text-white">Registration No</th>
                            <th class="text-white">University Name</th>
                            <th class="text-white">Company Name</th>
                            <th class="text-white">Designation</th>
                        </tr>
                    </thead>
                    <tbody id="refTbody">
                        @foreach($pharmacists as $pharmacist)
                            <tr>
                                <td>{{$pharmacist->pharmacist_name ?? ''}}</td>
                                <td> {{$pharmacist->grade ?? ''}}</td>
                                <td>{{$pharmacist->registration_no ?? ''}}</td>
                                <td>{{$pharmacist->university ?? ''}}</td>
                                <td>{{ $pharmacist->company }}</td>
                                <td>{{ $pharmacist->designation }}</td>
                            </tr>
                        
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</section>


@endsection

@section('styles')
  <!-- Select2 -->
  <!--<link rel="stylesheet" href="{{asset('backend_assets/bower_components/select2/dist/css/select2.min.css')}}">-->
  <style>
      .select2-container .select2-selection--single {
          box-sizing: border-box;
          cursor: pointer;
          display: block;
          height: 35px;
          user-select: none;
          -webkit-user-select: none;
          background: #fff !important;
          box-shadow: 5px 5px 12px #fdfd;
        }
        
        .select2-results {
            display: block;
            min-height: max-content;
            max-height: 300px;
            overflow-y: auto;
        }
        
        .other-comb:hover {
            background: green;
            color: #fff;
        }
        
         .other-comb:hover a{
            color: #fff;
        }
        
        .modal-body {
          padding: 20px !important;
          max-height: 600px;
          overflow-y: auto;
        }
        
        .mb-4 {
            margin-bottom: 10px;
        }

  </style>
@endsection

@section('scripts')
<script src="{{ asset('backend_assets/bower_components/jquery/dist/jquery.min.js') }}"></script>
  <!-- Select2 -->
  <script src="{{asset('backend_assets/bower_components/select2/dist/js/select2.full.min.js')}}"></script>
<script>
    $(document).ready(function(){
        
        init();
        
        $(document).on("change","#pharmacist_name", loadData)
        $(document).on("change","#university", loadData)
        $(document).on("change","#registration_no", loadData)
        $(document).on("change","#company", loadData)
        
    });
    
    
    function loadData(){
        let 
        pharmacist_name = $('#pharmacist_name').val() ?? '',
        university = $('#university').val() ?? '',
        registration_no = $('#registration_no').val() ?? '',
        company = $('#company').val() ?? '',
        _token = `{{ csrf_token()}}`;
        
        $.ajax({
            url     : `{{ route('loadPharmacists')}}`,
            method  :'POST',
            data    : {pharmacist_name, university, company, registration_no, _token},
            beforeSend(){
                // Request sending
            },
            success(data){
                 let html = "";
                 
                 data.forEach(pharmacist => {
                     html += `<tr>
                                <td>${pharmacist.pharmacist_name ?? ''}</td>
                                <td>${pharmacist.grade ?? ''}</td>
                                <td>${pharmacist.registration_no ?? ''}</td>
                                <td>${pharmacist.university ?? ''}</td>
                                <td>${ pharmacist.company ?? '' }</td>
                                <td>${ pharmacist.designation ?? '' }</td>
                        </tr> 
                        `;
                        
                 })
                $('#refTbody').html(html);
            },
            error(err){
                $('#refTbody').html('<tr><td colspan="6" class="text-center">Error loading data. Please try again.</td></tr>');
            }
        })
    }
    
    
    function init(){
        $('#pharmacist_name').select2({
            theme: 'bootstrap4'
        }).val(null).trigger("change");
        
        $('#university').select2({
            theme: 'bootstrap4'
        }).val(null).trigger("change");
        
        $('#registration_no').select2({
            theme: 'bootstrap4'
        }).val(null).trigger("change");
        
        $('#company').select2({
            theme: 'bootstrap4'
        }).val(null).trigger("change");
        
    }
    
    
    function clearFilter(){
        $('#pharmacist_name').val(null).trigger("change");
        $('#university').val(null).trigger("change");
        $('#registration_no').val(null).trigger("change");
        $('#company').val(null).trigger("change");
        
        loadData();

    }
</script>
@endsection