@extends('layout.app')
 @section('title', 'Vehicle Type List')

 @push('header_script')
     <link rel="stylesheet" href="{{ asset('theme/assets/vendor/datatables/dataTables.bs5.css') }}">
     <link rel="stylesheet" href="{{ asset('theme/assets/vendor/datatables/dataTables.bs5-custom.css') }}">
     <link rel="stylesheet" href="{{ asset('theme/assets/vendor/datatables/buttons/dataTables.bs5-custom.css') }}">
     <link rel="stylesheet" href="{{ asset('theme/assets/sweetalert/sweet-alert.css') }}" type="text/css">
 @endpush

 @section('content')
     <div class="app-hero-header d-flex align-items-center">
         <ol class="breadcrumb">
             <li class="breadcrumb-item">
                 <a href="javascript:void(0);">Vehicle Type List</a>
             </li>
         </ol>

         <div class="ms-auto d-lg-flex flex-row">
             <div class="d-flex flex-row gap-1 day-sorting">
                 <a href="{{ route('vehicle-type.create') }}" class="btn btn-sm btn-primary">
                     <i class="ri-add-circle-fill"></i> Add
                 </a>
             </div>
         </div>
     </div>

     <div class="app-body">
         <div class="row gx-3">
             <div class="col-sm-12">
                 <div class="card">
                     <div class="card-body">

                         <div class="table-responsive">
                             <table id="datatable" class="table truncate m-0 align-middle">
                                 <thead>
                                     <tr>
                                         <th>S.No.</th>
                                         <th>Vehicle Type</th>
                                         <th>Image</th>
                                         <th>Action</th>
                                     </tr>
                                 </thead>
                                 <tbody>
                                 </tbody>
                             </table>
                         </div>

                     </div>
                 </div>
             </div>
         </div>
     </div>
 @endsection

 @push('footer_script')
     <script src="{{ asset('theme/assets/vendor/datatables/dataTables.min.js') }}"></script>
     <script src="{{ asset('theme/assets/vendor/datatables/dataTables.bootstrap.min.js') }}"></script>
     <script src="{{ asset('theme/assets/vendor/datatables/custom/custom-datatables.js') }}"></script>
     <script src="{{ asset('theme/assets/sweetalert/sweet-alert.min.js') }}"></script>

     <script>
         $('#datatable').DataTable({
             processing: true,
             serverSide: true,
             stateSave: true,
             responsive: true,
             ajax: {
                 url: '{{ route('vehicle-type.getData') }}',
             },
             columns: [{
                     data: 'DT_RowIndex',
                     name: 'DT_RowIndex',
                     orderable: false,
                     searchable: false
                 },
                 {
                     data: 'name',
                     name: 'name'
                 },
                 {
                     data: 'image',
                     name: 'image',
                     orderable: false,
                     searchable: false
                 },
                 {
                     data: 'action',
                     name: 'action',
                     orderable: false,
                     searchable: false
                 },
             ]

         });

         function deleteIt(id) {
             swal({
                     title: "Are you sure?",
                     text: "You will not be able to recover this data!",
                     type: "warning",
                     showCancelButton: true,
                     confirmButtonColor: '#DD6B55',
                     confirmButtonText: 'Yes, I am sure!',
                     cancelButtonText: "No, cancel it!",
                     closeOnConfirm: false,
                     closeOnCancel: false,
                     cancelButtonClass: 'btn-default btn-md waves-effect',
                     confirmButtonClass: 'btn-danger btn-md waves-effect waves-light',
                 },
                 function(isConfirm) {
                     if (isConfirm) {
                         $.ajax({
                             url: '{{ url('vehicle-type') }}/' + id,
                             type: 'DELETE',
                             dataType: "JSON",
                             data: {
                                 "_token": "{{ csrf_token() }}"
                             },
                             success: function() {
                                 $("#datatable").DataTable().draw(false);
                             }
                         });
                         swal("Deleted!", "Vehicle type has been deleted!", "success");
                     } else {
                         swal("Cancelled", "Data is safe :)", "error");
                     }
                 });
         }
     </script>
 @endpush