@include('admin.include.header')
@include('admin.include.sidebar')

<style>
    .status-card {
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        transition: transform 0.2s, box-shadow 0.2s;
        background-color: white;
    }

    .status-card:hover {
        transform: scale(1.05);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    }

    .status-card h4 {
        font-size: 1.2em;
        padding: 10px 0;
    }

    .icon {
        font-size: 1.5em;
        margin-bottom: 10px;
    }
</style>
<style>
    .icon-btn {
        background: transparent;
        border: none;
        padding: 0;
        margin-right: 6px;
        cursor: pointer;
    }

    .icon-btn i {
        color: #000000;
        font-size: 15px;
    }

    .icon-btn i.fa-trash {
        color: #dc3545;
    }

    .icon-btn:hover {
        background: transparent;
        opacity: 0.8;
    }
</style>

<div class="d-flex flex-row flex-column-fluid px-10">
    <div class="main d-flex flex-column flex-row-fluid">
        <div class="content flex-column-fluid" id="kt_content">

            <div class="card card-custom gutter-b">
                <div id="card_message">
                    @if(session('success'))
                    <div class="alert alert-success alert-dismissible fade show">
                        {{ session('success') }}
                        <button type="button" class="close" data-dismiss="alert">&times;</button>
                    </div>
                    @endif

                    @if (session('error'))
                    <div class="alert alert-danger m-2 alert-dismissible fade show">
                        {{ session('error') }}
                        <button type="button" class="close" data-dismiss="alert">
                            <span>&times;</span>
                        </button>
                    </div>
                    @endif
                </div>

                <div class="card-header border-0 pt-6 pb-0">
                    <div class="card-title">
                        <h3 class="card-label">Vehicles</h3>
                    </div>
                    <div class="card-toolbar">
                        <button type="button" class="btn btn-dark" data-toggle="modal" data-target="#createVehicleModal">
                            Add New
                        </button>
                    </div>
                </div>

                <div class="card-body p-5" style="overflow:auto">
                    <table class="table table-bordered" id="vehicles_table" style="width:100%"></table>
                </div>

            </div>
        </div>
    </div>
</div>
<!-- Create Vehicle Modal -->
<div class="modal fade" id="createVehicleModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">

            <form action="{{ route('vehicles.store') }}" method="POST">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title">Create Vehicle</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>

                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12 mb-3">
                            <label>Unit Number *</label>
                            <input type="text" name="unit_number" class="form-control" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label>Type *</label>
                            <select name="type" class="form-control" required>
                                <option value="">Select Type</option>
                                <option value="truck">Truck</option>
                                <option value="trailer">Trailer</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label>VIN *</label>
                            <input type="text" name="vin" class="form-control" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label>Plate Number</label>
                            <input type="text" name="plate_number" class="form-control" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label>Year</label>
                            <input type="number" name="year" class="form-control" min="1900" max="{{ date('Y') }}">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label>Make</label>
                            <input type="text" name="make" class="form-control">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label>Model</label>
                            <input type="text" name="model" class="form-control">
                        </div>
                        <div class="col-md-12 mb-3">
                            <label>Status *</label>
                            <select name="status" class="form-control" required>
                                <option value="active" selected>Active</option>
                                <option value="inactive">Inactive</option>
                            </select>
                        </div>

                    </div>
                </div>

                <div class="modal-footer">
                    <button type="submit" class="btn btn-dark">Save Vehicle</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                </div>
            </form>
        </div>
    </div>
</div>


<!-- Edit Vehicle Modal -->
<div class="modal fade" id="editVehicleModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">

            <form id="editVehicleForm">
                @csrf
                <input type="hidden" name="vehicle_id" id="edit_vehicle_id">

                <div class="modal-header">
                    <h5 class="modal-title">Edit Vehicle</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>

                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12 mb-3">
                            <label>Unit Number *</label>
                            <input type="text" name="unit_number" id="edit_unit_number" class="form-control" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label>Type *</label>
                            <select name="type" id="edit_type" class="form-control" required>
                                <option value="">Select Type</option>
                                <option value="truck">Truck</option>
                                <option value="trailer">Trailer</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label>VIN *</label>
                            <input type="text" name="vin" id="edit_vin" class="form-control" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label>Plate Number</label>
                            <input type="text" name="plate_number" id="edit_plate_number" class="form-control">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label>Year</label>
                            <input type="number" name="year" id="edit_year" class="form-control" min="1900" max="{{ date('Y') }}">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label>Make</label>
                            <input type="text" name="make" id="edit_make" class="form-control">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label>Model</label>
                            <input type="text" name="model" id="edit_model" class="form-control">
                        </div>
                        <div class="col-md-12 mb-3">
                            <label>Status *</label>
                            <select name="status" id="edit_status" class="form-control" required>
                                <option value="active">Active</option>
                                <option value="inactive">Inactive</option>
                            </select>
                        </div>

                    </div>
                </div>

                <div class="modal-footer">
                    <button type="submit" class="btn btn-dark">Update Vehicle</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                </div>

            </form>

        </div>
    </div>
</div>

@include('admin.include.footer')

<script>
    var table;
    $(document).ready(function() {
        table = $('#vehicles_table').DataTable({
            processing: true,
            serverSide: false,
            ajax: "{{ route('vehicles.data') }}",
            scrollY: '70vh',
            scrollX: true,
            order: [],
            dom: '<"top"lf><"clear"><"buttons"B>rt<"bottom"ip><"clear">',
            buttons: ['copy', 'csv'],
            columns: [{
                    data: 'id',
                    title: 'ID'
                },
                {
                    data: 'unit_number',
                    title: 'Unit Number'
                },
                {
                    data: 'vin',
                    title: 'VIN'
                },
                {
                    data: 'plate_number',
                    title: 'Plate Number'
                },
                {
                    data: 'year',
                    title: 'Year'
                },
                {
                    data: 'type',
                    title: 'Type'
                },
                {
                    data: 'status',
                    title: 'Status',
                    render: function(data) {
                        if (data == 'active') {
                            return '<span style="background-color:#28a745; color:white; padding:3px 8px; border-radius:5px; font-size:1.1rem;">Active</span>';
                        } else {
                            return '<span style="background-color:#6c757d; color:white; padding:3px 8px; border-radius:5px; font-size:1.1rem;">Inactive</span>';
                        }
                    }
                },

                {
                    data: null,
                    title: 'Action',
                    orderable: false,
                    searchable: false,
                    render: function(data, type, row) {
                        return `
            <button class="icon-btn editBtn" 
                data-id="${row.id}"
                data-unit_number="${row.unit_number}"
                data-vin="${row.vin}"
                data-plate_number="${row.plate_number}"
                data-make="${row.make}"
                data-model="${row.model}"
                data-year="${row.year}"
                data-type="${row.type}"
                data-status="${row.status}"
                title="Edit">
                <i class="fa fa-pen"></i>
            </button>

            <button class="icon-btn deleteBtn" data-id="${row.id}" title="Delete">
                <i class="fa fa-trash"></i>
            </button>

            <button class="icon-btn viewBtn" data-id="${row.id}" title="View">
                <i class="fa fa-eye"></i>
            </button>
        `;
                    }
                }
            ]
        });
        $('#createUserForm').submit(function(e) {
            e.preventDefault();
            let formData = new FormData(this);

            $.ajax({
                url: "{{ url('/procurements/add') }}",
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                success: function(response) {
                    $('#createUserModal').modal('hide');
                    $('#createUserForm')[0].reset();
                    table.ajax.reload();
                    $('#card_message').html(`
                <div class="alert alert-dark m-2 alert-dismissible fade show">
                    ${response.success}
                    <button type="button" class="close" data-dismiss="alert">
                        <span>&times;</span>
                    </button>
                </div>
            `);
                },
                error: function(xhr) {
                    let msg = xhr.responseJSON?.error || "Something went wrong";
                    $('#card_message').html(`
                <div class="alert alert-danger m-2 alert-dismissible fade show">
                    ${msg}
                    <button type="button" class="close" data-dismiss="alert">
                        <span>&times;</span>
                    </button>
                </div>
            `);
                }
            });
        });
        $('#createUserModal').on('show.bs.modal', function() {
            $(this).find('form')[0].reset();
        });
        $(document).ready(function() {
            $(document).on('click', '.editBtn', function() {
                let button = $(this);
                $('#edit_vehicle_id').val(button.data('id'));
                $('#edit_unit_number').val(button.data('unit_number'));
                $('#edit_vin').val(button.data('vin'));
                $('#edit_plate_number').val(button.data('plate_number'));
                $('#edit_make').val(button.data('make'));
                $('#edit_model').val(button.data('model'));
                $('#edit_year').val(button.data('year'));
                $('#edit_type').val(button.data('type'));
                $('#edit_status').val(button.data('status'));

                $('#editVehicleModal').modal('show');
            });
            $('#editVehicleForm').submit(function(e) {
                e.preventDefault();
                let vehicleId = $('#edit_vehicle_id').val();
                let formData = new FormData(this);

                $.ajax({
                    url: `/vehicles/update/${vehicleId}`,
                    type: 'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        $('#editVehicleModal').modal('hide');
                        $('#editVehicleForm')[0].reset();
                        $('#vehicles_table').DataTable().ajax.reload();
                        Swal.fire({
                            icon: 'success',
                            title: 'Updated!',
                            text: response.success,
                            timer: 2000,
                            showConfirmButton: false
                        });
                    },
                    error: function(xhr) {
                        let msg = xhr.responseJSON?.errors ?
                            Object.values(xhr.responseJSON.errors).flat().join('<br>') :
                            "Something went wrong";
                        Swal.fire({
                            icon: 'error',
                            title: 'Error!',
                            html: msg
                        });
                    }
                });
            });
            $(document).on('click', '.viewBtn', function() {
                let vehicleId = $(this).data('id');
                window.location.href = "{{ url('vehicles') }}/" + vehicleId + "/overview";
            });
        });
        $(document).on('click', '.deleteBtn', function() {
            let vehicleId = $(this).data('id');

            Swal.fire({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes, delete it!',
                cancelButtonText: 'Cancel',
                customClass: {
                    confirmButton: 'btn btn-dark',
                    cancelButton: 'btn btn-secondary'
                },
                buttonsStyling: false,
                reverseButtons: true
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: `/vehicles/delete/${vehicleId}`,
                        type: 'DELETE',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(response) {
                            $('#vehicles_table').DataTable().ajax.reload();

                            $('#card_message').html(`
                        <div class="alert alert-success alert-dismissible fade show">
                            ${response.message}
                            <button type="button" class="close" data-dismiss="alert">&times;</button>
                        </div>
                    `);

                            Swal.fire({
                                title: 'Deleted!',
                                text: response.message,
                                icon: 'success',
                                confirmButtonText: 'OK',
                                customClass: {
                                    confirmButton: 'btn btn-dark'
                                },
                                buttonsStyling: false
                            });
                        },
                        error: function(xhr) {
                            $('#card_message').html(`
                        <div class="alert alert-danger alert-dismissible fade show">
                            Something went wrong
                            <button type="button" class="close" data-dismiss="alert">&times;</button>
                        </div>
                    `);
                        }
                    });
                }
            });
        });

    });
</script>