@extends('admin.layout')

<link rel="stylesheet" href="{{ asset('assets/css/table_filter.css') }}">

<style>
    .dt-search {
        display: none !important;
    }

    .dropdown-toggle-no-caret::after {
        display: none !important;
    }

    .view-img-btn {
        transition: 0.2s ease;
        cursor: pointer;
    }

    .view-img-btn:hover {
        transform: scale(1.08);
    }

    .ajax-toast-container {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 99999;
    }

    .ajax-toast {
        min-width: 320px;
        max-width: 420px;
        background: #fff;
        border-radius: 12px;
        padding: 14px 16px;
        display: flex;
        align-items: center;
        gap: 12px;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
        position: relative;
        overflow: hidden;
    }

    .ajax-toast-success {
        border-left: 4px solid #198754;
    }

    .ajax-toast-error {
        border-left: 4px solid #dc3545;
    }

    .ajax-toast-icon {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 18px;
        flex-shrink: 0;
    }

    .ajax-toast-success .ajax-toast-icon {
        background: #d1e7dd;
        color: #198754;
    }

    .ajax-toast-error .ajax-toast-icon {
        background: #f8d7da;
        color: #dc3545;
    }

    .ajax-toast-content {
        flex: 1;
    }

    .ajax-toast-title {
        font-weight: 700;
        font-size: 14px;
        margin-bottom: 2px;
    }

    .ajax-toast-message {
        font-size: 13px;
        color: #6c757d;
    }

    .ajax-toast-close {
        border: 0;
        background: transparent;
        font-size: 20px;
        color: #6c757d;
        cursor: pointer;
        line-height: 1;
    }

    .ajax-toast-progress {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 3px;
        width: 100%;
        background: currentColor;
        opacity: 0.35;
        animation: ajaxProgress 3s linear forwards;
    }

    .ajax-toast-success .ajax-toast-progress {
        color: #198754;
    }

    .ajax-toast-error .ajax-toast-progress {
        color: #dc3545;
    }

    @keyframes ajaxProgress {
        from {
            width: 100%;
        }

        to {
            width: 0%;
        }
    }

    @keyframes ajaxFadeOut {
        from {
            opacity: 1;
            transform: translateX(0);
        }

        to {
            opacity: 0;
            transform: translateX(30px);
        }
    }

    #previewImage {
        object-fit: contain;
        width: 100%;
        max-height: 70vh;
    }

    .vehicle-image-wrapper {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .vehicle-image-item {
        position: relative;
        display: inline-block;
        text-align: center;
    }

    .vehicle-image-item img {
        width: 48px;
        height: 48px;
        object-fit: cover;
        border-radius: 7px;
        border: 1px solid #dee2e6;
        cursor: pointer;
        display: block;
    }

    .vehicle-image-item img:hover {
        border-color: #0d6efd;
    }

    .vehicle-image-label {
        font-size: 9px;
        text-align: center;
        color: #6c757d;
        margin-top: 3px;
        display: block;
        line-height: 1;
    }

    .status-option {
        cursor: pointer;
    }

    .status-option:hover {
        background: #f8f9fa;
    }
</style>


@section('content')
@include('admin.layout.toast')
<div>

    {{-- =========================================================
         PAGE HEADER
    ========================================================== --}}

    <div class="d-flex align-items-center justify-content-between mb-3">

        <h5 class="fw-bold mb-0">
            Vehicle Request
        </h5>

        <a
            href="{{ route('web_sell_vehicle.history') }}"
            class="btn btn-primary"
        >

            <i class="ti tabler-history me-1"></i>

            History

            <i class="ti tabler-arrow-right ms-1"></i>

        </a>

    </div>


    {{-- =========================================================
         MAIN CARD
    ========================================================== --}}

    <div class="card p-3 mt-4">

        {{-- =====================================================
             FILTER
        ====================================================== --}}

        <div class="row mt-4 pt-4 mb-3 align-items-center">

            {{-- PAGE LENGTH --}}

            <div class="col-auto mb-3">

                <select
                    id="pageLength"
                    class="form-select"
                >

                    <option value="10">10</option>

                    <option value="25">25</option>

                    <option value="50">50</option>

                    <option value="100">100</option>

                    <option value="All">All</option>

                </select>

            </div>


            {{-- SEARCH --}}

            <div class="col-lg-7 col-12 mb-3">

                <div class="row g-2">

                    {{-- NAME --}}

                    <div class="col-md-6 col-12">

                        <div class="search-cluster w-100">

                            <div class="search-field">

                                <i class="ti tabler-user"></i>

                                <input
                                    type="text"
                                    id="nameSearch"
                                    placeholder="Name"
                                    class="w-100"
                                    autocomplete="off"
                                >

                            </div>

                        </div>

                    </div>


                    {{-- MOBILE --}}

                    <div class="col-md-6 col-12">

                        <div class="search-cluster w-100">

                            <div class="search-field">

                                <i class="ti tabler-phone"></i>

                                <input
                                    type="text"
                                    id="mobileSearch"
                                    placeholder="Mobile Number"
                                    class="w-100"
                                    autocomplete="off"
                                >

                            </div>

                        </div>

                    </div>

                </div>

            </div>


            {{-- RESET --}}

            <div class="col-lg-2 col-12 mb-3">

                <button
                    class="btn btn-secondary w-100"
                    id="resetBtn"
                    type="button"
                >

                    Reset

                </button>

            </div>

        </div>


        {{-- =====================================================
             TABLE
        ====================================================== --}}

        <div class="table-responsive pt-0 pb-2">

            <table
                class="table"
                id="webSellVehicleTable"
                style="width:100%;"
            >

                <thead>

                    <tr>

                        <th>S.No</th>

                        <th>Full Name</th>

                        <th>Phone Number</th>

                        <th>City</th>

                        <th>Vehicle Reg No</th>

                        <th>Images</th>

                        <th>Status</th>

                    </tr>

                </thead>

            </table>

        </div>

    </div>

</div>


{{-- =========================================================
     IMAGE PREVIEW MODAL
========================================================== --}}

<div
    class="modal fade"
    id="imagePreviewModal"
    tabindex="-1"
    aria-hidden="true"
>

    <div class="modal-dialog modal-dialog-centered modal-lg">

        <div class="modal-content">

            <div class="modal-header">

                <h5
                    class="modal-title"
                    id="imageModalTitle"
                >
                    Vehicle Image Preview
                </h5>

                <button
                    type="button"
                    class="btn-close"
                    data-bs-dismiss="modal"
                    aria-label="Close"
                ></button>

            </div>


            <div class="modal-body text-center">

                <img
                    id="previewImage"
                    src=""
                    class="img-fluid rounded"
                    alt="Vehicle Image"
                >

            </div>

        </div>

    </div>

</div>


{{-- =========================================================
     STATUS CONFIRMATION MODAL
========================================================== --}}

<div
    class="modal fade"
    id="statusConfirmModal"
    tabindex="-1"
    data-bs-backdrop="static"
    data-bs-keyboard="false"
>

    <div class="modal-dialog modal-sm modal-dialog-centered">

        <div class="modal-content rounded-4 text-center p-4 py-5">

            <h5 class="fw-bold mb-2">
                Are you sure!!
            </h5>

            <p class="text-muted mb-0">
                Are you confirm to change status?
            </p>


            <div
                class="d-flex justify-content-center align-items-center gap-3 mt-4"
            >

                <button
                    type="button"
                    class="btn btn-outline-primary"
                    id="cancelStatusBtn"
                    data-bs-dismiss="modal"
                >
                    Cancel
                </button>


                <button
                    type="button"
                    id="confirmStatusBtn"
                    class="btn btn-danger"
                >
                    Yes, Sure
                </button>

            </div>

        </div>

    </div>

</div>


{{-- =========================================================
     AJAX TOAST
========================================================== --}}

<div
    id="ajaxToastContainer"
    class="ajax-toast-container"
></div>


{{-- =========================================================
     JQUERY
========================================================== --}}

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>


{{-- =========================================================
     DATATABLE
========================================================== --}}

<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>


<script>

$(document).ready(function () {

    /* =========================================================
       VARIABLES
    ========================================================== */

    let pendingUpdateData = null;


    /* =========================================================
       CLOSE TOAST
    ========================================================== */

    function closeAjaxToast() {

        const toast =
            document.getElementById('ajaxToast');

        if (!toast) {
            return;
        }

        toast.style.animation =
            'ajaxFadeOut 0.4s forwards';

        toast.addEventListener(
            'animationend',
            function () {
                toast.remove();
            },
            {
                once: true
            }
        );
    }


    /* =========================================================
       SHOW TOAST
    ========================================================== */

    function showAjaxToast(
        message,
        type = 'error'
    ) {

        const container =
            document.getElementById(
                'ajaxToastContainer'
            );

        if (!container) {
            return;
        }


        const oldToast =
            document.getElementById(
                'ajaxToast'
            );

        if (oldToast) {
            oldToast.remove();
        }


        const isSuccess =
            type === 'success';


        const toast =
            document.createElement('div');


        toast.id =
            'ajaxToast';


        toast.className =
            `ajax-toast ${
                isSuccess
                    ? 'ajax-toast-success'
                    : 'ajax-toast-error'
            }`;


        toast.innerHTML = `

            <div class="ajax-toast-icon">

                ${
                    isSuccess
                        ? '✓'
                        : '⚠'
                }

            </div>


            <div class="ajax-toast-content">

                <div class="ajax-toast-title">

                    ${
                        isSuccess
                            ? 'Success'
                            : 'Error'
                    }

                </div>


                <div class="ajax-toast-message">

                    ${message}

                </div>

            </div>


            <button
                type="button"
                class="ajax-toast-close"
            >
                ×
            </button>


            <div class="ajax-toast-progress"></div>

        `;


        toast
            .querySelector(
                '.ajax-toast-close'
            )
            .addEventListener(
                'click',
                closeAjaxToast
            );


        container.appendChild(toast);


        setTimeout(
            function () {
                closeAjaxToast();
            },
            3000
        );

    }


    /* =========================================================
       DATATABLE
    ========================================================== */

    const table =
        $('#webSellVehicleTable').DataTable({

            processing: true,

            serverSide: true,

            searching: true,

            lengthChange: false,

            info: true,

            pageLength: 10,

            autoWidth: false,

            order: [],


            ajax: {

                url:
                    "{{ route('web_sell_vehicle.data') }}",

                type:
                    "GET",


                error: function (xhr) {

                    console.error(
                        'DataTable Ajax Error:',
                        xhr.responseText
                    );


                    let message =
                        'Unable to load vehicle requests.';


                    if (
                        xhr.responseJSON &&
                        xhr.responseJSON.message
                    ) {

                        message =
                            xhr.responseJSON.message;

                    }


                    showAjaxToast(
                        message,
                        'error'
                    );

                }

            },


            columnDefs: [

                {
                    targets: '_all',

                    className:
                        'text-nowrap align-middle'
                }

            ],


            columns: [

                /* =================================================
                   S.NO
                ================================================== */

                {
                    data:
                        'DT_RowIndex',

                    name:
                        'DT_RowIndex',

                    orderable:
                        false,

                    searchable:
                        false
                },


                /* =================================================
                   NAME
                ================================================== */

                {
                    data:
                        'full_name',

                    name:
                        'full_name',

                    defaultContent:
                        '-'
                },


                /* =================================================
                   PHONE
                ================================================== */

                {
                    data:
                        'phone_number',

                    name:
                        'phone_number',

                    defaultContent:
                        '-'
                },


                /* =================================================
                   CITY
                ================================================== */

                {
                    data:
                        'location_city',

                    name:
                        'location_city',

                    defaultContent:
                        '-'
                },


                /* =================================================
                   VEHICLE REGISTRATION
                ================================================== */

                {
                    data:
                        'vehicle_registration_no',

                    name:
                        'vehicle_registration_no',

                    defaultContent:
                        '-'
                },


                /* =================================================
                   IMAGES
                   
                   IMPORTANT:
                   Controller must return `images`
                   as HTML.
                ================================================== */

                {
                    data:
                        'images',

                    name:
                        'images',

                    orderable:
                        false,

                    searchable:
                        false,

                    defaultContent:
                        '-'
                },


                /* =================================================
                   STATUS
                   
                   Controller must return `status`
                   as HTML dropdown.
                ================================================== */

                {
                    data:
                        'status',

                    name:
                        'status',

                    orderable:
                        false,

                    searchable:
                        false,

                    defaultContent:
                        '-'
                }

            ]

        });


    /* =========================================================
       NAME SEARCH
    ========================================================== */

    $('#nameSearch').on(
        'keyup',
        function () {

            table
                .column(1)
                .search(this.value)
                .draw();

        }
    );


    /* =========================================================
       MOBILE SEARCH
    ========================================================== */

    $('#mobileSearch').on(
        'keyup',
        function () {

            table
                .column(2)
                .search(this.value)
                .draw();

        }
    );


    /* =========================================================
       PAGE LENGTH
    ========================================================== */

    $('#pageLength').on(
        'change',
        function () {

            const value =
                $(this).val();


            if (value === 'All') {

                table
                    .page
                    .len(-1)
                    .draw();

            } else {

                table
                    .page
                    .len(
                        parseInt(value, 10)
                    )
                    .draw();

            }

        }
    );


    /* =========================================================
       RESET
    ========================================================== */

    $('#resetBtn').on(
        'click',
        function () {

            $('#nameSearch').val('');

            $('#mobileSearch').val('');

            $('#pageLength').val('10');


            table
                .search('')
                .columns()
                .search('')
                .page
                .len(10)
                .draw();

        }
    );


    /* =========================================================
       IMAGE PREVIEW
    ========================================================== */

    $(document).on(
        'click',
        '.view-img-btn',
        function () {

            const src =
                $(this).attr('data-src');


            const title =
                $(this).attr('data-title') ||
                'Vehicle Image Preview';


            if (!src) {
                return;
            }


            $('#previewImage')
                .attr('src', src);


            $('#imageModalTitle')
                .text(title);


            const modalElement =
                document.getElementById(
                    'imagePreviewModal'
                );


            const modal =
                bootstrap.Modal.getOrCreateInstance(
                    modalElement
                );


            modal.show();

        }
    );


    /* =========================================================
       STATUS OPTION CLICK
    ========================================================== */

    $(document).on(
        'click',
        '.status-option',
        function (e) {

            e.preventDefault();


            const id =
                $(this).data('id');


            const status =
                $(this).data('status');


            if (!id || !status) {
                return;
            }


            pendingUpdateData = {

                id:
                    id,

                status:
                    status

            };


            const modalElement =
                document.getElementById(
                    'statusConfirmModal'
                );


            const modal =
                bootstrap.Modal.getOrCreateInstance(
                    modalElement
                );


            modal.show();

        }
    );


    /* =========================================================
       CONFIRM STATUS UPDATE
    ========================================================== */

    $('#confirmStatusBtn').on(
        'click',
        function () {

            if (!pendingUpdateData) {
                return;
            }


            const $btn =
                $(this);


            const $cancelBtn =
                $('#cancelStatusBtn');


            const originalText =
                $btn.html();


            $btn
                .prop(
                    'disabled',
                    true
                )
                .html(`

                    <span
                        class="spinner-border spinner-border-sm me-1"
                        role="status"
                        aria-hidden="true">
                    </span>

                    Processing...

                `);


            $cancelBtn.prop(
                'disabled',
                true
            );


            $.ajax({

                url:
                    "{{ route('web_sell_vehicle.updateStatus') }}",

                type:
                    "POST",


                data: {

                    _token:
                        "{{ csrf_token() }}",

                    id:
                        pendingUpdateData.id,

                    status:
                        pendingUpdateData.status

                },


                success:
                    function (response) {

                        const modalElement =
                            document.getElementById(
                                'statusConfirmModal'
                            );


                        const modal =
                            bootstrap.Modal.getOrCreateInstance(
                                modalElement
                            );


                        modal.hide();


                        if (
                            response.success
                        ) {

                            table.ajax.reload(
                                null,
                                false
                            );


                            showAjaxToast(
                                response.message ||
                                'Status updated successfully!',
                                'success'
                            );

                        } else {

                            showAjaxToast(
                                response.message ||
                                'Failed to update status.',
                                'error'
                            );

                        }

                    },


                error:
                    function (xhr) {

                        const modalElement =
                            document.getElementById(
                                'statusConfirmModal'
                            );


                        const modal =
                            bootstrap.Modal.getOrCreateInstance(
                                modalElement
                            );


                        modal.hide();


                        let message =
                            'Something went wrong. Please try again.';


                        if (
                            xhr.responseJSON &&
                            xhr.responseJSON.message
                        ) {

                            message =
                                xhr.responseJSON.message;

                        }


                        showAjaxToast(
                            message,
                            'error'
                        );

                    },


                complete:
                    function () {

                        $btn
                            .prop(
                                'disabled',
                                false
                            )
                            .html(
                                originalText
                            );


                        $cancelBtn.prop(
                            'disabled',
                            false
                        );


                        pendingUpdateData =
                            null;

                    }

            });

        }
    );


    /* =========================================================
       IMAGE MODAL CLEAR
    ========================================================== */

    $('#imagePreviewModal').on(
        'hidden.bs.modal',
        function () {

            $('#previewImage')
                .attr('src', '');


            $('#imageModalTitle')
                .text(
                    'Vehicle Image Preview'
                );

        }
    );


    /* =========================================================
       STATUS MODAL CLEAR
    ========================================================== */

    $('#statusConfirmModal').on(
        'hidden.bs.modal',
        function () {

            pendingUpdateData =
                null;

        }
    );

});

</script>

@endsection