@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.appointments')}}</h2>
        <div class="row mb-4 items-align-center">
          <div class="col-md">
            <ul class="nav nav-pills justify-content-start">
              <li class="nav-item">
                <a class="nav-link @if($status === 'all') active bg-transparent pr-2 pl-0 text-primary @else text-muted px-2 @endif " href="{{ route('appointment.status','all')}}">{{__('nav.all')}} <span class="badge badge-pill bg-primary text-white ml-2"></span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link @if($status === '0') active bg-transparent pr-2 pl-0 text-primary @else text-muted px-2 @endif  " href="{{route('appointment.status',0)}}">{{__('nav.scheduled')}} <span class="badge badge-pill bg-white border text-muted ml-2"></span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link @if($status == 1)  active bg-transparent pr-2 pl-0 text-primary @else text-muted px-2 @endif  " href="{{route('appointment.status',1)}}">{{__('nav.completed')}} <span class="badge badge-pill bg-white border text-muted ml-2"></span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link @if($status == 3)  active bg-transparent pr-2 pl-0 text-primary @else text-muted px-2 @endif  " href="{{route('appointment.status',3)}}">{{__('nav.confirmed')}} <span class="badge badge-pill bg-white border text-muted ml-2"></span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link @if($status == 4)  active bg-transparent pr-2 pl-0 text-primary @else text-muted px-2 @endif  " href="{{route('appointment.status',4)}}">{{__('nav.rescheduled')}} <span class="badge badge-pill bg-white border text-muted ml-2"></span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link @if($status == 2)  active bg-transparent pr-2 pl-0 text-primary @else text-muted px-2 @endif  " href="{{route('appointment.status',2)}}">{{__('nav.cancelled')}} <span class="badge badge-pill bg-white border text-muted ml-2"></span></a>
              </li>
            </ul>
          </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>{{__('nav.appointment_id')}}</th>
              <th>{{__('nav.client_id')}}</th>
              <th>{{__('nav.venue')}}</th>
              <th>{{__('nav.duration')}}</th>
              <th> {{__('nav.status')}} </th>
              @if (Auth::user()->hasRole('admin') )<th> {{__('nav.assigned_to')}} </th> @endif
              <th> {{__('nav.action')}} </th>
            </tr>
          </thead>
          <tbody>
            @forelse($data as $result)
            <tr>
              <td>{{ $result->issue_id }}</td>
              <td>{{$result->client->name}}</td>
              <td>{{ $result->venue}}</td>
              <td> <span>{{$result->appointment_date}}</span>
                <p>{{$result->appointment_time}} to {{$result->appointment_end_time }}</p>
             </td>
              <td><span class="dot dot-lg  {{$result->class}} mr-2"></span> {{ $result->issue_status}} </td>
              @if (Auth::user()->hasRole('admin'))<td>{{optional($result->attorney)->name}}</td>@endif
              <td>
                <div class="hstack gap-2 fs-15">
                    @if( Auth::user()->can('legal-appointment-update'))<a aria-label="anchor" href="{{route('appointments.show', $result->slug)}}" title="View Appointment" class="btn btn-sm btn-success"><i class="fe fe-eye fe-16"></i></a>@endif
                    @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.destroy',$result->slug)}}" 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')