@extends('admin.master')

@section('title')
    Cars
@endsection

@section('content')
    <div class="mt-4">
        <div class="row g-4">
            <div class="col-md-12">
                <div class="row g-3 mb-4">
                    <div class="col-auto">
                        <h2 class="mb-0">Cars</h2>
                    </div>
                </div>
                <div class="d-flex justify-content-end mb-5">
                    <a href="{{ route('admin.cars.create') }}" class="btn btn-primary">Add New Car</a>
                </div>
                <div class="row g-3 mb-4">
                    <table class="table table-bordered table-sm mt-5" id="carTable">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Title</th>
                                <th>Brand</th>
                                <th>Car Model</th>
                                <th>Price</th>
                                <th>Year</th>
                                <th>Created At</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                    </table>
                </div>

            </div>
        </div>
    </div>
@endsection
@section('javascript')
    <!-- DataTables -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
    <!-- SweetAlert2 -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $(document).ready(function() {

            $('#carTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('admin.cars.index') }}",
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'title',
                        name: 'title'
                    },
                    {
                        data: 'brand_id',
                        name: 'brand_id'
                    },
                    {
                        data: 'car_model_id',
                        name: 'car_model_id'
                    },
                    {
                        data: 'price',
                        name: 'price'
                    },
                    {
                        data: 'year',
                        name: 'year'
                    },
                    {
                        data: 'created_at',
                        name: 'created_at'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    }
                ]
            });
        });

        // Delete Car
        $(document).on('click', '.delete-car', function() {
            let id = $(this).data('id');
            let url = "{{ route('admin.cars.destroy', ':id') }}".replace(':id', id);

            Swal.fire({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: url,
                        type: 'DELETE',
                        data: {
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(res) {
                            if (res.code === '1' || res.code === 1) {
                                successToast(res.message || 'Car deleted successfully');
                                $('#carTable').DataTable().ajax.reload();
                            } else {
                                dangerToast(res.message || 'Something went wrong.');
                            }
                        },
                        error: function(xhr) {
                            let errors = xhr.responseJSON?.errors;
                            let msg = '';
                            if (errors) {
                                $.each(errors, function(key, value) {
                                    msg += value[0] + '\n';
                                });
                                dangerToast(msg);
                            } else {
                                dangerToast('Something went wrong.');
                            }
                        }
                    });
                }
            });
        });
    </script>
@endsection