@extends('admin.layout')

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

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

    .image-modal-wrapper {
        position: relative;
        display: inline-block;
        max-width: 100%;
        background: #fff;
        padding: 8px;
        border-radius: 12px;
    }

    .custom-modal-close {
        position: absolute;
        top: -12px;
        right: -12px;
        background: #ff4d49;
        color: #fff;
        border: 2px solid #fff;
        border-radius: 50%;
        width: 30px;
        height: 30px;
        font-size: 16px;
        line-height: 1;
        cursor: pointer;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        z-index: 1056;
    }

    .custom-modal-close:hover {
        background: #e03e3d;
    }
</style>

@section('content')

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

    <h5>

        <button type="button"
            class="btn btn-icon bg-white me-2"
            style="box-shadow: 0px 9px 12px -2px #66328E1F;">

            <a href="{{ route('admin.stock_list') }}">

                <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"
                    class="icon icon-tabler">

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

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

                </svg>

            </a>

        </button>

        Sold List

    </h5>


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

        {{-- =========================================================
             FILTERS
        ========================================================== --}}

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

            {{-- Page Length --}}
            <div class="col-md-1 col-6">

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


            {{-- Brand Name Search --}}
            <div class="col-md-2 col-12">

                <input type="text"
                    id="searchBrand"
                    class="form-control"
                    placeholder="Search Brand">

            </div>


            {{-- Vehicle Model --}}
            <div class="col-md-2 col-12">

                <input type="text"
                    id="searchModel"
                    class="form-control"
                    placeholder="Vehicle Model">

            </div>


            {{-- Customer Name --}}
            <div class="col-md-2 col-12">

                <input type="text"
                    id="searchCustName"
                    class="form-control"
                    placeholder="Customer Name">

            </div>


            {{-- Customer Mobile --}}
            <div class="col-md-2 col-12">

                <input type="text"
                    id="searchCustMobile"
                    class="form-control"
                    placeholder="Customer Mobile">

            </div>


            {{-- Reset --}}
            <div class="col-md-1 col-6">

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

                    Reset

                </button>

            </div>


            {{-- Export --}}
            <div class="col-md-1 col-6">

                <button
                    type="button"
                    id="exportBtn"
                    class="btn btn-label-secondary w-100 p-2">

                    Export

                </button>

            </div>

        </div>


        {{-- =========================================================
             SOLD VEHICLES TABLE
        ========================================================== --}}

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

            <table class="table"
                id="soldVehiclesTable">

                <thead>

                    <tr>

                        <th>S.No</th>

                        <th>Image</th>

                        <th>Brand</th>

                        <th>Vehicle Details</th>

                        <th>Sold Price</th>

                        <th>Sold To</th>

                        <th>Payment Status</th>

                    </tr>

                </thead>

                <tbody>
                </tbody>

            </table>

        </div>

    </div>


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

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

        <div class="modal-dialog modal-dialog-centered text-center">

            <div class="modal-content bg-transparent border-0 shadow-none d-flex align-items-center">

                <div class="image-modal-wrapper shadow-lg">

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

                        &times;

                    </button>

                    <img
                        id="modalPreviewImage"
                        src=""
                        alt="Vehicle Preview"
                        class="img-fluid rounded"
                        style="max-height:75vh; object-fit:contain;">

                </div>

            </div>

        </div>

    </div>


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

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

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


    <script>
        $(document).ready(function() {

            // =========================================================
            // DATATABLE
            // =========================================================

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

                processing: true,

                serverSide: true,

                searching: false,

                lengthChange: false,

                info: true,

                ordering: false,

                pageLength: 10,

                ajax: {

                    url: "{{ route('sold_list_data') }}",

                    data: function(d) {

                        // IMPORTANT:
                        // This sends Brand NAME, not Brand ID
                        d.search_brand =
                            $('#searchBrand').val();

                        d.search_model =
                            $('#searchModel').val();

                        d.search_cust_name =
                            $('#searchCustName').val();

                        d.search_cust_mobile =
                            $('#searchCustMobile').val();

                    }

                },

                columnDefs: [

                    {
                        targets: '_all',
                        className: 'text-nowrap align-middle'
                    }

                ],

                columns: [

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

                    {
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },


                    // =================================================
                    // IMAGE
                    // =================================================

                    {
                        data: 'vehicle_image_display',
                        name: 'vehicle_image',
                        orderable: false,
                        searchable: false
                    },


                    // =================================================
                    // BRAND NAME
                    // =================================================

                    {
                        data: 'brand_name',
                        name: 'brand_name',
                        orderable: false,
                        searchable: false
                    },


                    // =================================================
                    // VEHICLE DETAILS
                    // =================================================

                    {
                        data: 'vehicle_details',
                        name: 'vehicle_model',
                        orderable: false,
                        searchable: false,
                        className: 'text-center'
                    },


                    // =================================================
                    // SOLD PRICE
                    // =================================================

                    {
                        data: 'selling_price',
                        name: 'selling_price',
                        orderable: false,
                        searchable: false
                    },


                    // =================================================
                    // SOLD TO
                    // =================================================

                    {
                        data: 'sold_to_display',
                        name: 'sold_to',
                        orderable: false,
                        searchable: false
                    },


                    // =================================================
                    // PAYMENT STATUS
                    // =================================================

                    {
                        data: 'payment_status',
                        name: 'payment_status',
                        orderable: false,
                        searchable: false
                    }

                ]

            });


            // =========================================================
            // CUSTOM SEARCH
            // =========================================================

            $('#searchBrand, #searchModel, #searchCustName, #searchCustMobile')
                .on('keyup', 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() {

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

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

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

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

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

                table.page
                    .len(10)
                    .draw();

            });


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

            $(document).on(
                'click',
                '.view-image-modal',
                function() {

                    let imgSrc =
                        $(this).data('img');

                    $('#modalPreviewImage')
                        .attr('src', imgSrc);

                    let imageModal =
                        new bootstrap.Modal(
                            document.getElementById(
                                'imagePreviewModal'
                            )
                        );

                    imageModal.show();

                }
            );


            // =========================================================
            // EXPORT CSV
            // =========================================================

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

                const button = this;

                button.disabled = true;

                button.innerHTML = 'Processing...';


                setTimeout(function() {

                    let csv = [];

                    let rows =
                        document.querySelectorAll(
                            "#soldVehiclesTable tr"
                        );


                    rows.forEach(function(row) {

                        let cols =
                            row.querySelectorAll(
                                "th, td"
                            );

                        let rowData = [];


                        cols.forEach(function(col) {

                            rowData.push(
                                '"' +
                                col.innerText
                                    .replace(
                                        /"/g,
                                        '""'
                                    ) +
                                '"'
                            );

                        });


                        csv.push(
                            rowData.join(",")
                        );

                    });


                    const blob =
                        new Blob(
                            [csv.join("\n")],
                            {
                                type: "text/csv;charset=utf-8;"
                            }
                        );


                    const url =
                        URL.createObjectURL(
                            blob
                        );


                    const link =
                        document.createElement(
                            "a"
                        );

                    link.href = url;

                    link.download =
                        "sold_vehicle_list.csv";

                    link.click();

                    URL.revokeObjectURL(url);


                    button.disabled = false;

                    button.innerHTML = 'Export';

                }, 500);

            });

        });
    </script>

@endsection