@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.legal_issues')}}</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('legal_issues.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('legal_issues.status',0)}}">{{__('nav.pending')}} <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('legal_issues.status',1)}}">{{__('nav.processing')}} <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('legal_issues.status',2)}}">{{__('nav.resolved')}} <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">
            {{-- <span class="small bg-white border py-1 px-2 rounded mr-2 d-none d-lg-inline">
              <a href="#" class="text-muted"><i class="fe fe-x mx-1"></i></a>
              <span class="text-muted">Status : <strong>Pending</strong></span>
            </span>
            <span class="small bg-white border py-1 px-2 rounded mr-2 d-none d-lg-inline">
              <a href="#" class="text-muted"><i class="fe fe-x mx-1"></i></a>
              <span class="text-muted">April 14, 2020 - May 13, 2020</span>
            </span>
            <button type="button" class="btn" data-toggle="modal" data-target=".modal-slide"><span class="fe fe-filter fe-16 text-muted"></span></button>
            <button type="button" class="btn"><span class="fe fe-refresh-ccw fe-16 text-muted"></span></button> --}}
          </div>
        </div>

        <table class="table border table-hover bg-white datatables" id="dataTable-1" >
          <thead>
            <tr role="row">
              <th>{{__('nav.issue_id')}}</th>
              <th>{{__('nav.client_id')}}</th>
              <th>{{__('nav.title')}}</th>
              <th>{{__('nav.document')}}</th>
              <th> {{__('nav.status')}} </th>
              <th> {{__('nav.assigned_to')}} </th>
              <th> {{__('nav.action')}} </th>
            </tr>
          </thead>
          <tbody>
            @forelse($data as $result)
            <tr>
              <td>{{ $result->issue_id }}</td>
              <td>{{$result->client_id}}</td>
              <td>{{ $result->title}}</td>
              <td>{{ $result->uploaded_file_name}} </td>
              <td><span class="dot dot-lg  {{$result->class}} mr-2"></span> {{ $result->issue_status}} </td>
              <td> @if($result->assigned_to != null) {{ optional($result->assignee)->name}} @else @endif </td>
              <td>
                <div class="hstack gap-2 fs-15">
                    @if( Auth::user()->can('legal-issues-pending-view'))<a aria-label="anchor" href="{{route('legal_issues.show', $result->slug)}}" title="View Issue" class="btn btn-sm btn-success"><i class="fe fe-eye fe-16"></i></a>@endif
                    @if(Auth::user()->can('legal-issues-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('legal_issues.destroy',$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')