@extends('admin.layout')

@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">

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

    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">


    <style>
        /* =========================================================
                       PAGE
                    ========================================================= */

        .gallery-page {
            width: 100%;
        }

        .gallery-page-header {
            margin-bottom: 18px;
        }

        .gallery-page-title {
            font-size: 20px;
            font-weight: 600;
            color: #4b4656;
            margin: 0;
        }


        /* =========================================================
                       ADD BUTTON
                    ========================================================= */

        .gallery-add-btn {
            min-width: 135px;
            height: 42px;
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            font-weight: 500;
        }


        /* =========================================================
                       CARD
                    ========================================================= */

        .gallery-card {
            width: 100%;
            border: 0;
            border-radius: 10px;
            overflow: hidden;
        }

        .gallery-card-body {
            padding: 0;
        }


        /* =========================================================
                       FILTER AREA
                    ========================================================= */

        .gallery-toolbar {
            padding: 18px 20px;
            border-bottom: 1px solid #eeeeee;
        }

        .gallery-length {
            width: 85px !important;
            height: 42px;
            border-radius: 7px;
        }

        .gallery-search {
            width: 260px;
            height: 42px;
            border-radius: 7px;
        }

        .gallery-export-btn {
            height: 42px;
            min-width: 100px;
            border-radius: 7px;
        }


        /* =========================================================
                       TABLE WRAPPER
                    ========================================================= */

        .gallery-table-wrapper {
            width: 100%;
            overflow-x: auto;
        }


        /* =========================================================
                       TABLE
                    ========================================================= */

        #galleryTable {
            width: 100% !important;
            margin: 0 !important;
            border-collapse: collapse !important;
        }


        /* =========================================================
                       TABLE HEADER - LIGHT MODE
                    ========================================================= */

        #galleryTable thead th {
            height: 48px;
            padding: 12px 15px;
            background: #fff;
            color: #4b4656;
            font-size: 14px;
            font-weight: 600;
            text-align: center;
            vertical-align: middle;
            white-space: nowrap;

            border-top: 0 !important;
            border-left: 0 !important;
            border-right: 0 !important;
            border-bottom: 1px solid #e5e5e5 !important;
        }


        /* =========================================================
                       TABLE BODY - LIGHT MODE
                    ========================================================= */

        #galleryTable tbody td {
            height: 82px;
            padding: 10px 15px;
            color: #6f6b7d;
            font-size: 15px;
            text-align: center;
            vertical-align: middle;

            border-left: 0 !important;
            border-right: 0 !important;
            border-bottom: 1px solid #eeeeee !important;
        }

        #galleryTable tbody tr:last-child td {
            border-bottom: 0 !important;
        }


        /* =========================================================
                       COLUMN WIDTH
                    ========================================================= */

        #galleryTable th:nth-child(1),
        #galleryTable td:nth-child(1) {
            width: 15%;
            text-align: left;
            padding-left: 28px;
        }

        #galleryTable th:nth-child(2),
        #galleryTable td:nth-child(2) {
            width: 55%;
            text-align: center;
        }

        #galleryTable th:nth-child(3),
        #galleryTable td:nth-child(3) {
            width: 30%;
            text-align: center;
        }


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

        .gallery-image {
            width: 64px;
            height: 64px;
            object-fit: cover;
            border-radius: 8px;
            cursor: pointer;
            display: inline-block;
            transition: transform 0.2s ease;
        }

        .gallery-image:hover {
            transform: scale(1.06);
        }


        /* =========================================================
                       DELETE BUTTON
                    ========================================================= */

        .delete-gallery-btn {
            width: 36px;
            height: 36px;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 7px;
        }

        .delete-gallery-btn i {
            font-size: 16px;
        }


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

        #galleryTable_wrapper .dataTables_info {
            padding: 20px;
            color: #6f6b7d;
            font-size: 14px;
        }

        #galleryTable_wrapper .dataTables_paginate {
            padding: 14px 20px 18px 0;
        }

        #galleryTable_wrapper .dataTables_paginate .paginate_button {
            min-width: 40px;
            height: 40px;
            margin-left: 5px;
            padding: 10px 13px !important;
            border-radius: 7px !important;
            border: 0 !important;
            background: #f6f6f7 !important;
            color: #6f6b7d !important;
        }

        #galleryTable_wrapper .dataTables_paginate .paginate_button.current {
            background: #e95420 !important;
            color: #fff !important;
        }

        #galleryTable_wrapper .dataTables_paginate .paginate_button:hover {
            background: #e95420 !important;
            color: #fff !important;
        }


        /* =========================================================
                       HIDE DEFAULT DATATABLE SEARCH
                    ========================================================= */

        #galleryTable_wrapper .dataTables_filter {
            display: none;
        }

        #galleryTable_wrapper .dataTables_length {
            display: none;
        }


        /* =========================================================
                       MODAL
                    ========================================================= */

        #imagePreviewModal .modal-content {
            border: 0;
            border-radius: 14px;
        }

        #previewImage {
            max-height: 500px;
            max-width: 100%;
            object-fit: contain;
        }


        /* =========================================================
                       DARK MODE
                       Supports Bootstrap data-bs-theme + dark-style
                    ========================================================= */

        html[data-bs-theme="dark"] .gallery-card,
        html[data-bs-theme="dark"] .gallery-card-body,
        html[data-bs-theme="dark"] .gallery-toolbar,
        html[data-bs-theme="dark"] .gallery-table-wrapper,

        body.dark-style .gallery-card,
        body.dark-style .gallery-card-body,
        body.dark-style .gallery-toolbar,
        body.dark-style .gallery-table-wrapper {
            background: #2f3349 !important;
        }


        /* =========================================================
                       DARK MODE - PAGE TITLE
                    ========================================================= */

        html[data-bs-theme="dark"] .gallery-page-title,
        body.dark-style .gallery-page-title {
            color: #d9d9e3 !important;
        }


        /* =========================================================
                       DARK MODE - TABLE
                    ========================================================= */

        html[data-bs-theme="dark"] #galleryTable,
        body.dark-style #galleryTable {
            background: #2f3349 !important;
            color: #b6b6c3 !important;
        }


        /* =========================================================
                       DARK MODE - TABLE HEADER
                    ========================================================= */

        html[data-bs-theme="dark"] #galleryTable thead,
        body.dark-style #galleryTable thead {
            background: #2f3349 !important;
        }

        html[data-bs-theme="dark"] #galleryTable thead th,
        body.dark-style #galleryTable thead th {
            background: #2f3349 !important;
            color: #d9d9e3 !important;

            border-top: 0 !important;
            border-left: 0 !important;
            border-right: 0 !important;
            border-bottom: 1px solid #464b63 !important;
        }


        /* =========================================================
                       DARK MODE - TABLE BODY
                    ========================================================= */

        html[data-bs-theme="dark"] #galleryTable tbody,
        body.dark-style #galleryTable tbody {
            background: #2f3349 !important;
        }

        html[data-bs-theme="dark"] #galleryTable tbody tr,
        body.dark-style #galleryTable tbody tr {
            background: #2f3349 !important;
        }

        html[data-bs-theme="dark"] #galleryTable tbody td,
        body.dark-style #galleryTable tbody td {
            background: #2f3349 !important;
            color: #b6b6c3 !important;

            border-left: 0 !important;
            border-right: 0 !important;
            border-bottom: 1px solid #464b63 !important;
        }


        /* =========================================================
                       DARK MODE - ROW HOVER
                    ========================================================= */

        html[data-bs-theme="dark"] #galleryTable tbody tr:hover,
        body.dark-style #galleryTable tbody tr:hover {
            background: #363b52 !important;
        }

        html[data-bs-theme="dark"] #galleryTable tbody tr:hover td,
        body.dark-style #galleryTable tbody tr:hover td {
            background: #363b52 !important;
            color: #ffffff !important;
        }


        /* =========================================================
                       DARK MODE - DATATABLE WRAPPER
                    ========================================================= */

        html[data-bs-theme="dark"] #galleryTable_wrapper,
        body.dark-style #galleryTable_wrapper {
            background: #2f3349 !important;
            color: #b6b6c3 !important;
        }


        /* =========================================================
                       DARK MODE - INFO
                    ========================================================= */

        html[data-bs-theme="dark"] #galleryTable_wrapper .dataTables_info,
        body.dark-style #galleryTable_wrapper .dataTables_info {
            color: #b6b6c3 !important;
        }


        /* =========================================================
                       DARK MODE - PAGINATION
                    ========================================================= */

        html[data-bs-theme="dark"] #galleryTable_wrapper .dataTables_paginate .paginate_button,
        body.dark-style #galleryTable_wrapper .dataTables_paginate .paginate_button {
            background: #363b52 !important;
            color: #b6b6c3 !important;
            border: 0 !important;
        }


        /* =========================================================
                       DARK MODE - PAGINATION HOVER
                    ========================================================= */

        html[data-bs-theme="dark"] #galleryTable_wrapper .dataTables_paginate .paginate_button:hover,
        body.dark-style #galleryTable_wrapper .dataTables_paginate .paginate_button:hover {
            background: #C74A26 !important;
            color: #ffffff !important;
            border: 0 !important;
        }


        /* =========================================================
                       DARK MODE - ACTIVE PAGE
                    ========================================================= */

        html[data-bs-theme="dark"] #galleryTable_wrapper .dataTables_paginate .paginate_button.current,
        body.dark-style #galleryTable_wrapper .dataTables_paginate .paginate_button.current {
            background: #C74A26 !important;
            color: #ffffff !important;
            border: 0 !important;
        }


        /* =========================================================
                       DARK MODE - SEARCH
                    ========================================================= */

        html[data-bs-theme="dark"] .gallery-search,
        body.dark-style .gallery-search {
            background: #2f3349 !important;
            color: #d9d9e3 !important;
            border-color: #555a73 !important;
        }

        html[data-bs-theme="dark"] .gallery-search::placeholder,
        body.dark-style .gallery-search::placeholder {
            color: #8f90a0 !important;
        }


        /* =========================================================
                       DARK MODE - PAGE LENGTH
                    ========================================================= */

        html[data-bs-theme="dark"] .gallery-length,
        body.dark-style .gallery-length {
            background-color: #2f3349 !important;
            color: #d9d9e3 !important;
            border-color: #555a73 !important;
        }


        /* =========================================================
                       DARK MODE - TOOLBAR BORDER
                    ========================================================= */

        html[data-bs-theme="dark"] .gallery-toolbar,
        body.dark-style .gallery-toolbar {
            border-bottom-color: #464b63 !important;
        }


        /* =========================================================
                       DARK MODE - EMPTY MESSAGE
                    ========================================================= */

        html[data-bs-theme="dark"] #galleryTable tbody .dataTables_empty,
        body.dark-style #galleryTable tbody .dataTables_empty {
            background: #2f3349 !important;
            color: #b6b6c3 !important;
        }


        /* =========================================================
                       DARK MODE - DATATABLE PROCESSING
                    ========================================================= */

        html[data-bs-theme="dark"] #galleryTable_processing,
        body.dark-style #galleryTable_processing {
            background: #2f3349 !important;
            color: #d9d9e3 !important;
            border: 1px solid #464b63 !important;
        }


        /* =========================================================
                       DARK MODE - SORT ICON / TH
                    ========================================================= */

        html[data-bs-theme="dark"] #galleryTable thead .sorting,
        html[data-bs-theme="dark"] #galleryTable thead .sorting_asc,
        html[data-bs-theme="dark"] #galleryTable thead .sorting_desc,

        body.dark-style #galleryTable thead .sorting,
        body.dark-style #galleryTable thead .sorting_asc,
        body.dark-style #galleryTable thead .sorting_desc {
            color: #d9d9e3 !important;
        }


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

        @media (max-width: 767px) {

            .gallery-page-header {
                align-items: flex-start !important;
            }

            .gallery-page-title {
                font-size: 18px;
            }

            .gallery-add-btn {
                min-width: 115px;
                height: 40px;
                font-size: 14px;
            }

            .gallery-toolbar {
                padding: 15px;
            }

            .gallery-search {
                width: 100%;
            }

            .gallery-export-btn {
                width: 100%;
            }

            #galleryTable {
                min-width: 300px;
            }

            #galleryTable th:nth-child(1),
            #galleryTable td:nth-child(1) {
                padding-left: 15px;
            }

            #galleryTable tbody td {
                height: 75px;
            }

            #galleryTable_wrapper .dataTables_info {
                padding: 15px;
            }

            #galleryTable_wrapper .dataTables_paginate {
                padding: 10px 15px 15px;
            }

        }
    </style>


    @include('admin.layout.toast')


    <div class="container-fluid px-0 gallery-page">


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

        <div class="d-flex align-items-center justify-content-between gallery-page-header">

            <h5 class="gallery-page-title">
                Gallery
            </h5>


            <a href="{{ route('add_vehicle_gallery') }}" class="btn btn-primary gallery-add-btn">

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

                <span>Add Images</span>

            </a>

        </div>


        {{-- =========================================================
        GALLERY CARD
        ========================================================== --}}

        <div class="card shadow-sm gallery-card">

            <div class="gallery-card-body">


                {{-- =====================================================
                TOOLBAR
                ====================================================== --}}

                <div class="gallery-toolbar">

                    <div class="row align-items-center g-2">


                        {{-- PAGE LENGTH --}}

                        <div class="col-auto">

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

                                <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 + EXPORT --}}

                        <div class="col-12 col-md-auto ms-md-auto">

                            <div class="d-flex flex-column flex-sm-row gap-2">

                                <button type="button" id="exportBtn" class="btn btn-label-secondary gallery-export-btn">

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

                                    Export

                                </button>

                            </div>

                        </div>

                    </div>

                </div>


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

                <div class="gallery-table-wrapper">

                    <table id="galleryTable" class="table align-middle mb-0">

                        <thead>

                            <tr>

                                <th>S.NO</th>

                                <th>IMAGE</th>

                                <th>ACTION</th>

                            </tr>

                        </thead>

                        <tbody></tbody>

                    </table>

                </div>

            </div>

        </div>

    </div>


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

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

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

            <div class="modal-content rounded-4">

                <div class="modal-header">

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

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

                </div>

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

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

                </div>

            </div>

        </div>

    </div>


    {{-- =============================================================
    DELETE CONFIRMATION MODAL
    ============================================================= --}}

    <div class="modal fade" id="deleteConfirmModal" 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">
                    Do you want to delete this image?
                </p>


                <input type="hidden" id="targetGalleryId">


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

                    <button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">

                        Cancel

                    </button>


                    <button type="button" id="confirmDeleteBtn" class="btn btn-danger">

                        Yes, Delete

                    </button>

                </div>

            </div>

        </div>

    </div>


    {{-- =============================================================
    SCRIPTS
    ============================================================= --}}

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


            /* =========================================================
               CSRF
            ========================================================= */

            $.ajaxSetup({

                headers: {

                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

                }

            });


            /* =========================================================
               DESTROY EXISTING DATATABLE
            ========================================================= */

            if ($.fn.DataTable.isDataTable('#galleryTable')) {

                $('#galleryTable')
                    .DataTable()
                    .clear()
                    .destroy();

            }


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

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

                processing: true,

                serverSide: true,

                searching: false,

                lengthChange: false,

                responsive: false,

                autoWidth: false,

                ajax: {

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

                    type: "GET",

                    error: function(xhr) {

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

                    }

                },


                columns: [

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


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


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

                ],


                pageLength: 10,


                order: [
                    [0, 'asc']
                ]

            });


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

            $('#customSearch')
                .off('keyup')
                .on('keyup', function() {

                    table
                        .search($(this).val())
                        .draw();

                });


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

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

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

                    table
                        .page
                        .len(
                            value === 'All' ?
                            -1 :
                            parseInt(value)
                        )
                        .draw();

                });


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

            $(document)
                .off('click', '.gallery-image')
                .on('click', '.gallery-image', function() {

                    let imageUrl = $(this).attr('src');

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


                    bootstrap.Modal
                        .getOrCreateInstance(
                            document.getElementById(
                                'imagePreviewModal'
                            )
                        )
                        .show();

                });


            /* =========================================================
               DELETE MODAL
            ========================================================= */

            $(document)
                .off('click', '.delete-gallery-btn')
                .on('click', '.delete-gallery-btn', function() {

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

                    $('#targetGalleryId').val(id);


                    bootstrap.Modal
                        .getOrCreateInstance(
                            document.getElementById(
                                'deleteConfirmModal'
                            )
                        )
                        .show();

                });


            /* =========================================================
               CONFIRM DELETE
            ========================================================= */

            $('#confirmDeleteBtn')
                .off('click')
                .on('click', function() {

                    let button = $(this);

                    let id = $('#targetGalleryId').val();


                    if (!id) {

                        showAjaxToast(
                            'Gallery ID not found.',
                            'error'
                        );

                        return;

                    }


                    button
                        .prop('disabled', true)
                        .html(
                            '<span class="spinner-border spinner-border-sm me-1"></span> Processing...'
                        );


                    $.ajax({

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

                        type: "POST",

                        data: {
                            id: id
                        },


                        success: function(response) {

                            if (response.success) {

                                let modal =
                                    bootstrap.Modal.getInstance(
                                        document.getElementById(
                                            'deleteConfirmModal'
                                        )
                                    );


                                if (modal) {

                                    modal.hide();

                                }


                                table.ajax.reload(
                                    null,
                                    false
                                );


                                showAjaxToast(
                                    response.message ||
                                    'Image deleted successfully.',
                                    'success'
                                );


                            } else {

                                showAjaxToast(
                                    response.message ||
                                    'Unable to delete image.',
                                    'error'
                                );

                            }

                        },


                        error: function(xhr) {

                            let message =
                                'Unable to delete image.';


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

                                message =
                                    xhr.responseJSON.message;

                            }


                            showAjaxToast(
                                message,
                                'error'
                            );

                        },


                        complete: function() {

                            button
                                .prop('disabled', false)
                                .html(
                                    'Yes, Delete'
                                );

                        }

                    });

                });


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

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

                    let button = $(this);


                    button
                        .prop('disabled', true)
                        .html(
                            '<span class="spinner-border spinner-border-sm me-1"></span> Exporting...'
                        );


                    setTimeout(function() {

                        let csv = [];

                        let rows =
                            document.querySelectorAll(
                                '#galleryTable tr'
                            );


                        rows.forEach(function(row) {

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


                            let rowData = [];


                            cols.forEach(function(col) {

                                let text =
                                    col.innerText
                                    .replace(/\n/g, ' ')
                                    .replace(/"/g, '""')
                                    .trim();


                                rowData.push(
                                    '"' + text + '"'
                                );

                            });


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

                        });


                        let blob = new Blob(

                            [csv.join('\n')],

                            {
                                type: 'text/csv;charset=utf-8;'
                            }

                        );


                        let url =
                            URL.createObjectURL(blob);


                        let link =
                            document.createElement('a');


                        link.href = url;

                        link.download =
                            'gallery_images.csv';


                        document.body.appendChild(link);

                        link.click();

                        document.body.removeChild(link);

                        URL.revokeObjectURL(url);


                        button
                            .prop('disabled', false)
                            .html(
                                '<i class="ti tabler-download me-1"></i> Export'
                            );


                    }, 500);

                });

        });
    </script>
@endsection