@include('layouts.header')

<div class="container-fluid">
    <div class="row">
        <div class="page-header">
            <label for="">Filter by Location</label>
            <select id="pageSelect" class="custom-select">
                <option value="">Select an option</option>
                <option value="{{url('chn_leavebytype') }}">CHENNAI</option>
                <option value="{{ url('vl_leavebytype') }}">VELLORE</option>
            </select>
       
         <div class="showbox">
            <a href="{{ url('causal') }}" class="btn btn-info">Available CL</a>
            <a href="{{ url('leave_by_month') }}" target="_self" class="btn btn-primary">By Month</a>
            <a href="{{ url('lpolicy') }}" target="_blank" class="btn btn-info">Leave Policy</a>
        </div>
    </div> 
</div>

    <div class="card">
    <div class="section-title">Leave  Details for the year 2025</div>
        <span for="loc">Filter By</span>
        <select class="custom-control loc-dropdown" name="location" id="location">
                <option value="">Branch</option>
                <option value="AMSC">CHENNAI</option>
                <option value="AMSV">VELLORE</option>
        </select>


          <span for="month">Filter By</span>
            <select class="custom-control month-dropdown" name="month" id="month">
                <option value="">Month</option>
                <option value="January">January</option>
                <option value="February">February</option>
                <option value="March">March</option>
                <option value="April">April</option>
                <option value="May">May</option>
                <option value="June">June</option>
                <option value="July">July</option>
                <option value="August">August</option>
                <option value="September">September</option>
                <option value="October">October</option>
                <option value="November">November</option>
                <option value="December">December</option>
            </select>
    </div>
    <div class="clearfix"></div>
    <div class="row">
        <table class="table table-bordered" id="leave">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Employee code</th>
                    <th>Employee Name</th>
                    <th>MONTH</th>
                    <th>StartDate</th>
                    <th>EndDate</th>
                    <th>LeaveCount</th>
                </tr>
            </thead>
            <tbody>
                @foreach($leaves as $leave)
                <tr>
                    <td>{{ $leave->Detail_Id }}</td>
                    <td>{{ $leave->EmployeeCode }}</td>
                    <td>{{ $leave->ename }}</td>
                    <td>{{ date('F', strtotime($leave->StartDate)) }}</td>
                    <td>{{ date('d-M-Y', strtotime($leave->StartDate)) }}</td>
                    <td>{{ date('d-M-Y', strtotime($leave->EndDate)) }}</td>
                    <td>{{ $leave->LeaveCount }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
        <div id="pdfViewer" style="display: none;">
                 <iframe id="pdfIframe" width="100%" height="600px"></iframe>
         </div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdn.datatables.net/v/dt/dt-2.2.1/datatables.min.css" rel="stylesheet"> 
 <script src="https://cdn.datatables.net/v/dt/dt-2.2.1/datatables.min.js"></script>
<script>
      $(document).ready(function() {
        dataTable = $('#leave').DataTable({
    /* "columnDefs": [
            {
                "targets": 0,
                "visible": false
            }
        ]*/
       });
    });

    $('.month-dropdown').on('change', function(e){
      var month = $(this).val();
         $('.month-dropdown').val(month)
       dataTable.column(3).search(month).draw();
    });


 $('.loc-dropdown').on('change', function(e){
      var location = $(this).val();
          $('.loc-dropdown').val(location)
       dataTable.column(1).search(location).draw();
    });


/*$('#openPdfButton').click(function() {
    // Make AJAX request to get the PDF URL from the controller
    $.ajax({
      url: '{{ url('lpolicy') }}',
      method: 'GET',
      success: function(response) {
        // Show the iframe and set the source to the PDF path
        $('#pdfViewer').show();
        $('#pdfIframe').attr('src', response.document_path);
        
        // Open the PDF in a new tab
        window.open(response.document_path, '_blank');
      },
      error: function() {
        alert('Error loading the document');
      }
    });
  });*/
  </script>

<script>
 $('#pageSelect').change(function() {
        var selectedPage = $(this).val();
        if (selectedPage) {
                window.location.href = selectedPage;
            }
        });
</script>
  @include('layouts.footer')