@extends('admin.layout')

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

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

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

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

    .vehicle-images {
        display: flex;
        gap: 5px;
        flex-wrap: wrap;
        align-items: center;
    }

    .vehicle-image-item {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
    }

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

    .vehicle-image-label {
        font-size: 9px;
        color: #6c757d;
        margin-top: 2px;
    }

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

    .history-back-btn {
        box-shadow: 0px 9px 12px -2px #66328E1F;
    }
</style>


@section('content')
    <div>

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

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

            <div class="d-flex align-items-center">

                <a href="{{ route('web_sell_vehicle') }}" class="btn btn-icon bg-white me-2 history-back-btn" title="Back">

                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />

                        <path d="M15 6l-6 6l6 6" />

                    </svg>

                </a>


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

            </div>

        </div>


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

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

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

            <div class="row mb-3 mt-4 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>


                {{-- FILTERS --}}
                <div class="col-lg-8 col-12 mb-3">

                    <div class="row g-2">

                        {{-- STATUS --}}
                        <div class="col-md-4 col-12">

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

                                <option value="">
                                    Status
                                </option>

                                <option value="approved">
                                    Approved
                                </option>

                                <option value="rejected">
                                    Rejected
                                </option>

                            </select>

                        </div>


                        {{-- NAME --}}
                        <div class="col-md-4 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-4 col-12">

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

                                <div class="search-field">

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

                                    <input type="tel" id="mobileSearch" placeholder="Mobile Number" class="w-100"
                                        autocomplete="off" inputmode="numeric" pattern="[0-9]*">

                                </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="webSellVehicleHistoryTable" 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>

                    <tbody>
                    </tbody>

                </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>


    {{-- =========================================================
     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() {

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

            let table = $('#webSellVehicleHistoryTable').DataTable({

                processing: true,

                serverSide: true,

                ajax: {

                    /*
                     * IMPORTANT:
                     * Correct route name
                     */
                    url: "{{ route('web_sell_vehicle.historyData') }}",

                    type: "GET",

                    data: function(d) {

                        /*
                         * Status filter
                         */
                        d.status_filter =
                            $('#statusFilter').val();

                    },

                    error: function(xhr) {

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

                    }

                },


                searching: true,

                lengthChange: false,

                info: true,

                pageLength: 10,

                autoWidth: false,

                order: [],


                columnDefs: [

                    {
                        targets: '_all',

                        className: 'text-nowrap align-middle'
                    }

                ],


                columns: [

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

                    {
                        data: 'DT_RowIndex',

                        name: 'DT_RowIndex',

                        orderable: false,

                        searchable: false
                    },


                    /* =================================================
                       FULL 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
                    ================================================= */

                    {
                        data: 'images',

                        name: 'images',

                        orderable: false,

                        searchable: false,

                        defaultContent: '-'
                    },


                    /* =================================================
                       STATUS
                    ================================================= */

                    {
                        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();

                }
            );


            /* =========================================================
               STATUS FILTER
            ========================================================== */

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

                    table.draw();

                }
            );


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

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

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


                    if (value === 'All') {

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

                    } else {

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

                    }

                }
            );


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

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

                    /*
                     * Clear inputs
                     */
                    $('#nameSearch').val('');

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

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

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


                    /*
                     * Clear all DataTable searches
                     */
                    table
                        .search('')
                        .columns()
                        .search('');


                    /*
                     * Reset page length
                     */
                    table
                        .page
                        .len(10)
                        .draw();

                }
            );


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

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

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

                    let title =
                        $(this).attr('data-title');


                    if (!src) {
                        return;
                    }


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


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


                    /*
                     * Bootstrap 5 modal
                     */
                    let modalElement =
                        document.getElementById(
                            'imagePreviewModal'
                        );


                    if (
                        typeof bootstrap !== 'undefined'
                    ) {

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

                        modal.show();

                    } else {

                        /*
                         * Fallback for Bootstrap 4
                         */
                        $('#imagePreviewModal')
                            .modal('show');

                    }

                }
            );


            /* =========================================================
               CLEAR IMAGE WHEN MODAL CLOSES
            ========================================================== */

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

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

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

                }
            );

        });
    </script>
@endsection