@extends('layout.app')
@section('title','Assigned Trucks List')
@push('header_script')
    <link rel="stylesheet" href="{{asset('theme/assets/vendor/datatables/dataTables.bs5.cs')}}s">
    <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);">Assigned Trucks 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('truck-assign.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">
                        <!-- Table starts -->
                        <div class="table-responsive">
                            <table id="datatable" class="table truncate m-0 align-middle">
                                <thead>
                                <tr>
                                    <th>S.no.</th>
                                    <th>Code</th>
                                    <th>Assigned Truck</th>
                                    <th>Driver Name</th>
                                    <th>Father Name</th>
                                    <th>Mobile No.</th>
                                    <th>Address/City</th>
                                    <th>DL No.</th>
                                    <th>Assign Date</th>
                                    <th>Unassign</th>
                                    <th>Action</th>
                                </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="unAssignModal" data-bs-backdrop="static" data-bs-keyboard="false"
         tabindex="-1" aria-labelledby="unAssignModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="unAssignModalLabel">
                        Truck Unassign
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                {!! Form::open(['route' => ['truck-unassign.store'],'onsubmit'=>'BtnSubmit.disabled = true', 'class'=>'row g-3 needs-validation',  'method' => 'post', 'autocomplete'=>'off']) !!}
                <div class="modal-body m-2">
                    <div class="row">
                        <div class="col-sm-6">
                            <label class="form-label">Employee Code<span class="text-danger">*</span></label>
                            <div class="form-group">
                                <input type="hidden" name="truck_assign_id" id="truck_assign_id" readonly value=""
                                       class="form-control">
                                <input type="text" name="code" id="code" readonly value=""
                                       class="form-control readonly">
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <label class="form-label">Driver Name<span class="text-danger">*</span></label>
                            <div class="form-group">
                                <input type="hidden" name="employee_id" id="employee_id" readonly value=""
                                       class="form-control">
                                <input type="text" name="employee_name" id="employee_name" readonly value=""
                                       class="form-control readonly">
                            </div>
                        </div>
                        <div class="col-sm-6 mt-1">
                            <label class="form-label">Vehicle No.<span class="text-danger">*</span></label>
                            <div class="form-group">
                                <input type="hidden" name="vehicle_id" id="vehicle_id" readonly value=""
                                       class="form-control">
                                <input type="text" name="vehicle_no" id="vehicle_no" readonly value=""
                                       class="form-control readonly">
                            </div>
                        </div>
                        <div class="col-sm-6 mt-1">
                            <label class="form-label">Status<span class="text-danger">*</span></label>
                            <div class="form-group">
                                <input type="text" name="status" id="status" readonly value="Unassigned"
                                       class="form-control readonly">
                            </div>
                        </div>
                        <div class="col-sm-12 mt-1">
                            <label class="form-label">Leave Date<span class="text-danger">*</span></label>
                            <div class="form-group">
                                <input type="date" name="leave_date" id="leave_date" required value="{{date('Y-m-d')}}"
                                       class="form-control">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                            Close
                        </button>
                        <button type="submit" id="BtnSubmit" class="btn btn-primary">
                            Submit
                        </button>
                    </div>
                    {!! Form::close() !!}
                </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('truck-assign.getData') }}',
            },
            columns: [
                {data: 'DT_RowIndex', name: 'DT_RowIndex', searchable: false},
                {data: 'code', name: 'code'},
                {data: 'vehicle_no', name: 'vehicle_no'},
                {data: 'employee_name', name: 'employee_name'},
                {data: 'father_name', name: 'father_name'},
                {data: 'mobile_no', name: 'mobile_no'},
                {data: 'address', name: 'address'},
                {data: 'driving_licence_no', name: 'driving_licence_no'},
                {data: 'assign_date', name: 'assign_date'},
                {data: 'un_assign', name: 'un_assign'},
                {data: 'action', name: 'action', orderable: false, searchable: false},
            ]
        });

        function unAssign(id) {
            $.ajax({
                url: '{{route('getAssignTruckData')}}',
                type: 'GET',
                data: {assign_truck_id: id},
                success: function (response) {
                    //console.log(response);
                    $('#truck_assign_id').val(response.truck_assign_id);
                    $('#code').val(response.code);
                    $('#employee_name').val(response.employee_name);
                    $('#employee_id').val(response.employee_id);
                    $('#vehicle_no').val(response.vehicle_no);
                    $('#vehicle_id').val(response.vehicle_id);
                    $('#unAssignModal').modal('show'); // Correct usage with quotes
                }
            });
        }


        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('truck-assign') }}/' + id,
                            type: 'delete',
                            dataType: "JSON",
                            data: {
                                "_token": "{{ csrf_token() }}"
                            },
                            success: function () {
                                $("#datatable").DataTable().draw(false);
                            }
                        });
                        swal("Deleted!", "Data has been deleted!", "success");
                    } else {
                        swal("Cancelled", "Data is safe :)", "error");
                    }

                });
        }
    </script>
@endpush