@extends('Branch.layout')

@section('content')

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

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

    <style>
        .dataTables_filter,
        .dataTables_length {
            display: none;
        }

        .category-image {
            width: 50px;
            height: 50px;
            object-fit: cover;
            border-radius: 8px;
            border: 1px solid #ddd;
        }

        .view-category-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            border-radius: 8px;
            text-decoration: none;
            transition: 0.2s ease;
        }

        .view-category-btn:hover {
            background-color: rgba(0, 123, 255, 0.1);
        }

        #usersTable {
            width: 100% !important;
        }

        #usersTable th,
        #usersTable td {
            vertical-align: middle;
        }

        .loading-wrapper {
            display: none;
            align-items: center;
            justify-content: center;
            min-height: 100px;
        }
    </style>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">


    <div class="container-fluid">

        {{-- Page Header --}}
        <div class="row align-items-center justify-content-between mb-3 mt-3">

            <div class="col-auto">
                <h5 class="mb-0">
                    <i class="ti tabler-category me-2"></i>
                    Category Management
                </h5>
                <div class="col-auto d-flex gap-2">
                    <button type="button" id="printBtn" class="btn btn-label-secondary">Print</button>
                    <button type="button" id="exportBtn" class="btn btn-label-secondary">Export</button>
                </div>
            </div>

        </div>

        {{-- Category Table --}}
        <div class="card p-0">

            {{-- Filters --}}
            <div class="row mb-3 align-items-center p-3 g-2">

                {{-- <div class="col-12 col-sm-3 col-md-2 col-lg-1">

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

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

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

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

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

                    </select>

                </div> --}}
                <div class="col-12 col-sm-4 col-md-2 col-lg-2">
                    <label class="form-label">From Date</label>
                    {{-- <input type="date" id="fromDate" class="form-control"> --}}
                    <input type="text" class="form-control" id="fromDate" placeholder="DD/MM/YYYY">

                </div>

                <div class="col-12 col-sm-4 col-md-2 col-lg-2">
                    <label class="form-label">To Date</label>
                    {{-- <input type="date" id="toDate" class="form-control" value="{{ now()->format('Y-m-d') }}"> --}}
                    <input type="text" class="form-control" id="toDate" placeholder="DD/MM/YYYY">

                </div>

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

                    <input type="text" id="searchInput" class="form-control" placeholder="Search category">

                </div>
                <div class="col-12 col-md-2 col-lg-1">
                    <button type="button" id="resetBtn" class="btn btn-outline-secondary w-100">Reset</button>
                </div>

            </div>

            {{-- Loading --}}
            <div class="loading-wrapper" id="tableLoading">

                <div class="spinner-border text-primary" role="status">

                    <span class="visually-hidden">
                        Loading...
                    </span>

                </div>

            </div>

            {{-- Table --}}
            <div class="table-responsive pb-3">

                <table class="table table-bordered table-hover" id="usersTable">

                    <thead>

                        <tr>

                            <th style="width: 80px;">
                                S.No
                            </th>

                            <th style="width: 130px;">
                                Date
                            </th>

                            <th>
                                Category
                            </th>

                            <th style="width: 120px;">
                                Image
                            </th>

                            <th style="width: 100px;">
                                Action
                            </th>

                        </tr>

                    </thead>

                    <tbody></tbody>

                </table>

            </div>

        </div>

    </div>

@endsection

@push('scripts')

    {{-- Add these only when layout does not already include jQuery/DataTables --}}

    <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 src="https://cdn.jsdelivr.net/npm/flatpickr"></script>


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

            flatpickr("#fromDate", {
                dateFormat: "Y-m-d",
                altInput: true,
                altFormat: "d/m/Y",
                allowInput: true,
                onChange: function () {
                    if (categoryTable) categoryTable.ajax.reload();
                }
            });

            flatpickr("#toDate", {
                dateFormat: "Y-m-d",
                altInput: true,
                altFormat: "d/m/Y",
                allowInput: true,
                defaultDate: new Date(),
                onChange: function () {
                    if (categoryTable) categoryTable.ajax.reload();
                }
            });

            let categoryTable = null;

            /*
            |--------------------------------------------------------------------------
            | Category URL template
            |--------------------------------------------------------------------------
            */

            const categoryUrlTemplate = @json(
                route(
                    'branch.category_based_products',
                    ['category_id' => '__CATEGORY_ID__']
                )
            );

            /*
            |--------------------------------------------------------------------------
            | Initialize DataTable
            |--------------------------------------------------------------------------
            */

            function initializeCategoryTable() {

                categoryTable = $('#usersTable').DataTable({

                    processing: true,

                    serverSide: false,

                    responsive: false,

                    pageLength: 10,

                    searching: true,

                    ordering: true,

                    lengthChange: true,
                    lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
                    autoWidth: false,

                    ajax: {

                        url: "{{ route('branch.kitchen_categoryData') }}",

                        type: "GET",
                        data: function (d) {
                            d.from_date = $('#fromDate').val();
                            d.to_date = $('#toDate').val();
                        },

                        dataSrc: function (response) {

                            console.log(
                                'Category API response:',
                                response
                            );

                            if (
                                response.status === true &&
                                Array.isArray(response.data)
                            ) {
                                return response.data;
                            }

                            showToast(
                                response.message ??
                                'Unable to load categories.',
                                'bg-danger'
                            );

                            return [];
                        },

                        error: function (xhr) {

                            console.error(
                                'Category AJAX error:',
                                xhr
                            );

                            console.error(
                                'Response text:',
                                xhr.responseText
                            );

                            let errorMessage =
                                'Failed to load category data.';

                            if (
                                xhr.responseJSON &&
                                xhr.responseJSON.message
                            ) {
                                errorMessage =
                                    xhr.responseJSON.message;
                            }

                            showToast(
                                errorMessage,
                                'bg-danger'
                            );
                        }
                    },

                    columns: [

                        {
                            data: 'sno',
                            name: 'sno',
                            orderable: false,
                            searchable: false,
                            defaultContent: '-'
                        },

                        {
                            data: 'created_at',
                            name: 'created_at',
                            defaultContent: '-'
                        },

                        {
                            data: 'category',
                            name: 'category',
                            defaultContent: '-',
                            render: function (
                                data,
                                type,
                                row
                            ) {
                                return escapeHtml(
                                    data ?? '-'
                                );
                            }
                        },

                        {
                            data: 'image',
                            name: 'image',
                            orderable: false,
                            searchable: false,
                            defaultContent: null,

                            render: function (
                                data,
                                type,
                                row
                            ) {

                                if (!data) {
                                    return `
                                                                                    <span class="text-muted">
                                                                                        No Image
                                                                                    </span>
                                                                                `;
                                }

                                const safeImage =
                                    escapeAttribute(data);

                                return `
                                                                                <img
                                                                                    src="${safeImage}"
                                                                                    alt="Category image"
                                                                                    class="category-image"
                                                                                    onerror="
                                                                                        this.onerror = null;
                                                                                        this.style.display = 'none';
                                                                                        this.nextElementSibling.style.display = 'inline';
                                                                                    "
                                                                                >

                                                                                <span
                                                                                    class="text-muted"
                                                                                    style="display:none;"
                                                                                >
                                                                                    Image not found
                                                                                </span>
                                                                            `;
                            }
                        },

                        {
                            data: null,
                            orderable: false,
                            searchable: false,

                            render: function (
                                data,
                                type,
                                row
                            ) {

                                const categoryUrl =
                                    categoryUrlTemplate.replace(
                                        '__CATEGORY_ID__',
                                        encodeURIComponent(row.id)
                                    );

                                return `
                                                                                <div class="d-flex align-items-center justify-content-center">

                                                                                    <a
                                                                                        href="${categoryUrl}"
                                                                                        class="view-category-btn text-info"
                                                                                        title="View category products"
                                                                                    >
                                                                                        <i class="ti tabler-eye menu-icon"></i>
                                                                                    </a>

                                                                                </div>
                                                                            `;
                            }
                        }
                    ],

                    order: [
                        [1, 'desc']
                    ],

                    language: {

                        emptyTable:
                            'No categories available.',

                        zeroRecords:
                            'No matching categories found.',

                        processing:
                            'Loading categories...'
                    }
                });
            }

            /*
            |--------------------------------------------------------------------------
            | Page Length
            |--------------------------------------------------------------------------
            */

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

                    const pageLength =
                        parseInt($(this).val(), 10);

                    categoryTable
                        .page
                        .len(pageLength)
                        .draw();
                }
            );

            /*
            |--------------------------------------------------------------------------
            | Custom Search
            |--------------------------------------------------------------------------
            */

            let searchTimer = null;

            $('#searchInput').on(
                'input',
                function () {

                    const searchValue =
                        this.value;

                    clearTimeout(searchTimer);

                    searchTimer = setTimeout(
                        function () {

                            categoryTable
                                .search(searchValue)
                                .draw();

                        },
                        300
                    );
                }
            );

            // $('#fromDate, #toDate').on('change', function () {
            //     categoryTable.ajax.reload(null, false);
            // });
            $('#resetBtn').on('click', function () {
                $('#fromDate')[0]._flatpickr.clear();
                $('#toDate')[0]._flatpickr.setDate(new Date());
                $('#searchInput').val('');
                categoryTable.page.len(10).search('').ajax.reload(null, false);
            });

            $('#exportBtn').on('click', function () {
                const params = new URLSearchParams({
                    from_date: $('#fromDate').val() || '',
                    to_date: $('#toDate').val() || ''
                });
                window.location.href = "{{ route('branch.branch_categoryExport') }}?" + params.toString();
            });

            $('#printBtn').on('click', function () {
                const params = new URLSearchParams({
                    from_date: $('#fromDate').val() || '',
                    to_date: $('#toDate').val() || ''
                });
                window.open("{{ route('branch.branch_categoryPrint') }}?" + params.toString(), '_blank');
            });

            /*
            |--------------------------------------------------------------------------
            | Escape HTML
            |--------------------------------------------------------------------------
            */

            function escapeHtml(value) {

                return $('<div>')
                    .text(value ?? '')
                    .html();
            }

            /*
            |--------------------------------------------------------------------------
            | Escape HTML Attribute
            |--------------------------------------------------------------------------
            */

            function escapeAttribute(value) {

                return String(value ?? '')
                    .replaceAll('&', '&amp;')
                    .replaceAll('"', '&quot;')
                    .replaceAll("'", '&#039;')
                    .replaceAll('<', '&lt;')
                    .replaceAll('>', '&gt;');
            }

            /*
            |--------------------------------------------------------------------------
            | Toast Message
            |--------------------------------------------------------------------------
            */

            function showToast(
                message,
                backgroundClass = 'bg-success'
            ) {

                const safeMessage =
                    escapeHtml(message);

                const toastElement = $(`
                                                                <div
                                                                    class="toast align-items-center text-white ${backgroundClass} border-0 position-fixed"
                                                                    role="alert"
                                                                    aria-live="assertive"
                                                                    aria-atomic="true"
                                                                    style="
                                                                        top: 20px;
                                                                        right: 20px;
                                                                        z-index: 99999;
                                                                    "
                                                                >
                                                                    <div class="d-flex">

                                                                        <div class="toast-body">
                                                                            ${safeMessage}
                                                                        </div>

                                                                        <button
                                                                            type="button"
                                                                            class="btn-close btn-close-white me-2 m-auto"
                                                                            data-bs-dismiss="toast"
                                                                            aria-label="Close"
                                                                        ></button>

                                                                    </div>
                                                                </div>
                                                            `);

                $('body').append(toastElement);

                const toast =
                    new bootstrap.Toast(
                        toastElement[0],
                        {
                            delay: 3000
                        }
                    );

                toast.show();

                toastElement.on(
                    'hidden.bs.toast',
                    function () {
                        toastElement.remove();
                    }
                );
            }

            initializeCategoryTable();
        });
    </script>

@endpush