{{-- resources/views/admin/d_dashboard/chartUserWeb.blade.php --}}

<x-intern_page>
    <x-slot name="title">
        Commandes Web par client et par mois
    </x-slot>

    <x-slot name="cssSlot">
        {{-- DataTables CSS --}}
        <link href="{{ asset('plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css" />
        {{-- Select2 CSS (if needed) --}}
        <link rel="stylesheet" href="{{ asset('plugins/select2/css/select2.min.css') }}">
        <link rel="stylesheet" href="{{ asset('plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css') }}">
        {{-- Flatpickr CSS --}}
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
        <style>
            .clear-input-icon {
                position: absolute;
                top: 50%;
                right: 15px;
                transform: translateY(-50%);
                cursor: pointer;
                font-size: 25px;
                color: #aaa;
            }
            .clear-input-icon:hover {
                color: #555;
            }
            .form-group {
                position: relative;
            }
        </style>
    </x-slot>

    <x-slot name="bodyContent">

        <div style="padding: 1rem;">
            <div class="card card-custom">
                <div class="card-body">
                    <!-- Date Filters -->
                    <div class="row" style="padding: 10px; border: thin solid #1aa6e7; border-radius: 5px; background-color: #FFFFFF">
                        <div class="col-xl-3 col-lg-4 col-sm-6">
                            <div class="form-group">
                                <label for="order_date_from">Du :</label>
                                <input
                                    type="text"
                                    id="order_date_from"
                                    class="form-control"
                                    placeholder="jj/mm/aaaa"
                                />
                                <br>
                                <span
                                    class="clear-input-icon"
                                    onclick="clearOrderDateInput('order_date_from')"
                                    style="position:absolute;top:55px;right:25px;font-size:25px;cursor:pointer;"
                                >
                            &times;
                        </span>
                            </div>
                        </div>
                        <div class="col-xl-3 col-lg-4 col-sm-6">
                            <div class="form-group">
                                <label for="order_date_to">À :</label>
                                <input
                                    type="text"
                                    id="order_date_to"
                                    class="form-control"
                                    placeholder="jj/mm/aaaa"
                                />
                                <br>
                                <span
                                    class="clear-input-icon"
                                    onclick="clearOrderDateInput('order_date_to')"
                                    style="position:absolute;top:55px;right:25px;font-size:25px;cursor:pointer;"
                                >
                            &times;
                        </span>
                            </div>
                        </div>
                        <div>
                            <button id="order_resetFilters" class="btn btn-secondary float-right mt-8 ml-3" style="height: 3em">
                                <i class="fas fa-undo text-white"></i> Réinitialiser
                            </button>
                            <button id="order_search" class="btn btn-primary float-right mt-8 ml-3" style="height: 3em">
                                <i id="order_searchIcon" class="fas fa-search"></i>
                                <i id="order_loadingIcon" class="fas fa-spinner fa-spin" style="display: none;"></i>
                                Rechercher
                            </button>
                        </div>
                    </div>

                    <br><br><br>

                    <!-- DataTable -->
                    <table class="table align-middle" id="order_table" style="margin-top: 13px !important; width: 100%">
                        <thead>
                        <tr class="fw-bolder text-muted bg-light">
                            <th>N°</th>
                            <th>Nom</th>
                            <th>Code Client</th>
                            <th>Nbr. de Commandes</th>
                            <th>Montant Total</th>
                        </tr>
                        </thead>
                        <tbody></tbody>
                        <tfoot>
                        <tr>
                            <th colspan="4" class="font-weight-bolder font-size-lg" style="text-align: right;">Total :</th>
                            <th class="font-weight-bolder font-size-lg"></th>
                        </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>

    </x-slot>

    <x-slot name="jsSlot">
        <!-- DataTables JS -->
        <script src="{{ asset('plugins/custom/datatables/datatables.bundle.js') }}"></script>
        <!-- Validation JS (if used) -->
        <script src="{{ asset('plugins/jquery-validation/jquery.validate.min.js') }}"></script>
        <script src="{{ asset('plugins/jquery-validation/additional-methods.min.js') }}"></script>
        <script src="{{ asset('plugins/jquery-validation/localization/messages_fr.min.js') }}"></script>
        <!-- Flatpickr JS -->
        <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
        <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/fr.js"></script>

        <script>
            // We will define a global variable for the order table
            window.orderTable = null;

            // Convert date from dd/mm/yyyy to yyyy-mm-dd
            function convertDateToEnglishFormat(dateString) {
                if (!dateString) return "";
                const [day, month, year] = dateString.split("/");
                return `${year}-${month}-${day}`; // e.g. "2025-01-28"
            }

            // Clear date input
            function clearOrderDateInput(inputId) {
                const input = document.getElementById(inputId);
                if (!input) return;
                input.value = '';
                if (input._flatpickr) {
                    input._flatpickr.clear();
                }
                // If table is init, reload it
                if (window.orderTable) {
                    window.orderTable.ajax.reload(null, false);
                }
            }

            // The function that initializes the table (called from welcome.blade via on('shown.bs.modal'))
            function initOrderTable() {
                // Initialize Flatpickr
                flatpickr("#order_date_from, #order_date_to", {
                    dateFormat: "d/m/Y",
                    locale: "fr"
                });

                // If already initialized, do nothing
                if (window.orderTable) return;

                // Initialize DataTable
                window.orderTable = $('#order_table').DataTable({
                    processing: true,
                    serverSide: true,
                    responsive: false,
                    scrollX: true,
                    paging: false,
                    searching: true,
                    ajax: {
                        url: '{{ route("chart.clientWebCmmd") }}',
                        data: function (d) {
                            d.date_from = convertDateToEnglishFormat($('#order_date_from').val());
                            d.date_to   = convertDateToEnglishFormat($('#order_date_to').val());
                        }
                    },
                    columns: [
                        { data: 'id',          name: 'id' },
                        { data: 'name',        name: 'name' },
                        { data: 'id_backend', name: 'id_backend' },
                        { data: 'nbr_orders',  name: 'nbr_orders' },
                        {
                            data: 'tt_amount',
                            name: 'tt_amount',
                            render: function (data) {
                                if (!data) return data;
                                let number = parseFloat(data).toFixed(3); // Ensure 3 decimal places
                                let parts  = number.split('.');
                                parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
                                return parts.join('.');
                            }
                        }
                    ],
                    language: {
                        url: "https://cdn.datatables.net/plug-ins/1.10.22/i18n/French.json"
                    },
                    footerCallback: function (row, data, start, end, display) {
                        var api = this.api();
                        // Calculate the total of tt_amount column
                        var total = api.column(4, { page: 'current' }).data()
                            .reduce(function (a, b) {
                                return parseFloat(a) + parseFloat(b);
                            }, 0);

                        // Format total with 3 decimals and thousand separator
                        total = total.toFixed(3);
                        let parts = total.split('.');
                        parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
                        total = parts.join('.');

                        // Update footer
                        $(api.column(4).footer()).html(total);
                    }
                });

                // Search button
                $('#order_search').on('click', function () {
                    $('#order_searchIcon').hide();
                    $('#order_loadingIcon').show();
                    window.orderTable.ajax.reload(null, false);
                });

                // When table is drawn, restore icons
                window.orderTable.on('draw', function () {
                    $('#order_loadingIcon').hide();
                    $('#order_searchIcon').show();
                });

                // Reset button
                $('#order_resetFilters').on('click', function () {
                    $('#order_date_from').val('');
                    $('#order_date_to').val('');
                    if ($('#order_date_from')[0]?._flatpickr) {
                        $('#order_date_from')[0]._flatpickr.clear();
                    }
                    if ($('#order_date_to')[0]?._flatpickr) {
                        $('#order_date_to')[0]._flatpickr.clear();
                    }
                    window.orderTable.ajax.reload(null, false);
                });
            }
        </script>
    </x-slot>
</x-intern_page>