@extends('layout.main')

@section('content')

<div class="container-fluid">
    <div class="row justify-content-center">
      <div class="col-12">
        <h2 class="h3 mb-3 page-title">{{ __('nav.available_days')}}</h2>
        <div class="row mb-4 items-align-center">
          <div class="col-md">
            
          </div>
          <div class="col-md-auto ml-auto text-right">
            
          </div>
        </div>
        
        <table class="table border table-hover bg-white datatables" id="dataTable-1" >
          <thead>
            <tr role="row">
              
              <th><div class="d-flex align-items-right">{{__('nav.date')}}</div></th>
              <th> {{__('nav.status')}} </th>
              <th> {{__('nav.action')}} </th>
            </tr>
          </thead>
          <tbody>
            @forelse($data as $result)
            <tr>
              <td><div class="d-flex align-items-right">{{$result->date}}</div></td>
              <td>@if($result->available == 1)<span class="dot dot-lg  bg-success mr-2"></span> Available @else @endif </td>
              <td>
                <div class="hstack gap-2 fs-15">
                    @if(Auth::user()->can('legal-appointment-delete'))
                    <button  type="button" class="btn btn-sm btn-danger"  data-toggle="modal" data-target="#modal-delete{{$result->id}}"><i class="fe fe-trash-2 fe-16"></i></button>
                    <div class="modal fade"  id="modal-delete{{$result->id}}" tabindex="-1" aria-labelledby="modal-new-address" aria-hidden="true">
                        <div class="modal-dialog  modal-dialog-centered">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h6 class="modal-title" id="staticBackdropLabel">
                                    </h6>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                      <span aria-hidden="true">×</span>
                                    </button>
                                    
                                </div>
                                <div class="modal-body">
                                    <form action="{{route('appointments.delete_appointment_available',$result->id)}}" method="post">
                                        @csrf
                                        @method('DELETE')
                                    <div class="row gy-3">
                                        <div class="col-xl-6">
                                            <H2>Are you Sure ?</H2>
                                            <p>You won't be able to revert this!</p> 
                                        </div>                                       
                                    </div>
                                
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
                                    <button type="submit" class="btn btn-danger">Yes, Delete It</button>
                                </div>
                            </form>
                            
                            </div>
                        </div>
                    </div>
                    @endif
                </div>
               
              </td>
              
            </tr>
            @empty  
            @endforelse
          </tbody>
        </table>
      </div>
    </div> <!-- .row -->
  </div> <!-- .container-fluid -->
@endsection
@push('scripts')
    {{-- <script src='{{ asset('dashboard/js/jquery.dataTables.min.js')}}'></script> --}}
    <script src='{{ asset('dashboard/js/dataTables.js')}}'></script>
    {{-- <script src='{{asset('dashboard/js/dataTables.bootstrap4.min.js')}}'></script> --}}
    <script src='{{asset('dashboard/js/dataTables.buttons.js')}}'></script>
    <script src='{{asset('dashboard/js/buttons.dataTables.js')}}'></script>
    <script src='{{asset('dashboard/js/pdfmake.min.js')}}'></script>
    <script src='{{asset('dashboard/js/vfs_fonts.js')}}'></script>
    <script src='{{asset('dashboard/js/buttons.html5.min.js')}}'></script>
    <script src='{{asset('dashboard/js/buttons.print.min.js')}}'></script>
    <script>
      $('#dataTable-1').DataTable({
        autoWidth: true,
        "lengthMenu": [
          [16, 32, 64, -1],
          [16, 32, 64, "All"]
        ],
        layout: {
        topStart: {
            buttons: [ 
              {
                        extend: 'csv',
                        exportOptions: {
                            columns: ':not(:last-child)'  // Excludes the last column from the export
                        }
                    },
                    {
                        extend: 'pdf',
                        orientation: 'portrait',
                        exportOptions: {
                            columns: ':not(:last-child)'
                        }
                    }
            ]
        }
    }
      });
    </script>
@endpush('scripts')