@extends('administrative.layouts.main')
@section('title', 'Vehicles')
@section('content')
    <x-breadcrumb />

    <div class="flex justify-between items-center mt-5">
        <div>
            <h4 class="text-2xl font-semibold">Vehicle</h4>
        </div>

        <div class="">
            <x-button :link="true" :url="route('administrative.vehicle.delete.page')" variant="red" size="sm">
                <i class="fas fa-trash-alt me-1"></i> Vehicle Delete
            </x-button>

            <x-button :link="true" :url="route('administrative.vehicle.create')" variant="blue" size="sm">
                <i class="fas fa-plus me-1"></i> Add New
            </x-button>
        </div>
    </div>

    <div class="mt-6 rounded-lg bg-white p-4 shadow-[0_0_10px_0_rgba(183,192,206,0.2)]">
        <table id="datatables" class="table">
            <thead>
                <tr>
                    <th>SL</th>
                    <th>Customer</th>
                    <th>Terminal Id</th>
                    <th>Identifier</th>
                    <th>Bst ID</th>
                    <th>Vehicle Type</th>
                    <th>VRN</th>
                    <th>Engine Number</th>
                    <th>Chassis Number</th>
                    <th>Group</th>
                    <th>Status</th>
                    <th class="disabled-sorting text-right">Actions</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
@endsection
@section('pageScripts')
    <script>
        $(document).ready(function() {
            $('#datatables').DataTable({
                layout: {
                    topEnd: {
                        search: {
                            placeholder: 'Search...'
                        }
                    }
                },
                lengthMenu: [10, 25, 50, {
                    label: 'All',
                    value: -1
                }],
                pageLength: 25,
                language: {
                    search: ""
                },
                scrollX: true,
                processing: true,
                serverSide: true,
                ajax: '{{ route('administrative.vehicle.data') }}',
                columns: [{
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'customer_name',
                        name: 'customer_name'
                    },
                    {
                        data: 'terminal_id',
                        name: 'terminal_id'
                    },
                    {
                        data: 'identifier',
                        name: 'identifier'
                    },
                    {
                        data: 'bst_id',
                        name: 'bst_id'
                    },
                    {
                        data: 'vehicle_type',
                        name: 'vehicle_type'
                    },
                    {
                        data: 'vrn',
                        name: 'vrn'
                    },
                    {
                        data: 'engine_number',
                        name: 'engine_number'
                    },
                    {
                        data: 'chassis_number',
                        name: 'chassis_number'
                    },
                    {
                        data: 'group',
                        name: 'group',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'vehicle_status',
                        name: 'vehicle_status',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'action',
                        name: 'action',
                        searchable: false,
                        orderable: false,
                    }
                ]
            });
        });

        function deleteData(rowid) {
            let url = '{{ route('administrative.vehicle.destroy', ['id' => ':id']) }}';
            url = url.replace(':id', rowid);
            swal.fire({
                    title: "Are you sure?",
                    text: "Once deleted, you will not be able to recover this imaginary file!",
                    icon: "warning",
                    buttons: true,
                    dangerMode: true,
                })
                .then((willDelete) => {
                    if (willDelete) {
                        axios.delete(url).then(res => {
                            if (res.data == 'success') {
                                swal.fire({
                                    icon: "success",
                                    button: false,
                                    timer: 1000,
                                });
                                $('#datatables').DataTable().ajax.reload(null, false);
                            }
                        });
                    } else {
                        swal("Your imaginary file is safe!");
                    }
                });
        }
    </script>
@endsection