@extends('layouts.admin')
@section('content')
    <div class="container-fluid">
        <div class="peers">
            <div class="peer peer-greed">
                <h4 class="c-grey-900">{{ __('labels.reports.title') }}</h4>
            </div>
        </div>
        
        <!-- Date Range Filter -->
        <div class="row mb-3">
            <div class="col-md-12">
                <div class="bgc-white bd bdrs-3 p-20">
                    <div class="row">
                        <div class="col-md-2">
                            <label for="start_date" class="form-label">Start Date</label>
                            <input type="date" class="form-control" id="start_date" name="start_date">
                            <div class="error-message" id="start_date_error"></div>
                        </div>
                        <div class="col-md-2">
                            <label for="end_date" class="form-label">End Date</label>
                            <input type="date" class="form-control" id="end_date" name="end_date">
                            <div class="error-message" id="end_date_error"></div>
                        </div>
                        <div class="col-md-2">
                            <label for="order_status" class="form-label">Order Status</label>
                            <select class="form-control" id="order_status" name="order_status">
                                <option value="">All</option>
                                <option value="processing">Processing</option>
                                <option value="Hublify Ready">Hublify Ready</option>
                                <option value="Hublify Shipped">Hublify Shipped</option>
                                <option value="Hublify Shipped by Date">Hublify Shipped by Date</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label for="payment_method" class="form-label">Payment Method</label>
                            <select class="form-control" id="payment_method" name="payment_method">
                                <option value="">All</option>
                                <option value="credit_card">Credit Card</option>
                                <option value="klarna">Klarna</option>
                                <option value="paypal">PayPal</option>
                                <option value="stripe">Stripe</option>
                                <option value="sepa">SEPA</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">&nbsp;</label>
                            <div class="d-flex gap-2">
                                <button type="button" class="btn btn-primary" id="filterBtn">Filter</button>
                                <button type="button" class="btn btn-secondary" id="resetBtn">Reset</button>
                                <button type="button" class="btn btn-success" id="exportBtn">
                                    <i class="fa fa-download"></i> Export
                                </button>
                            </div>
                        </div>
                    </div>                    
                </div>
            </div>
        </div>

        <div class="row mb-3" id="filterSummary" style="display:none;">
            <div class="col-md-12">
                <div class="bgc-white bd bdrs-3 p-20">
                    <!-- Date Range Header -->
                    <div class="text-center mb-3 pb-2 border-bottom">
                        <h5 class="mb-0 text-dark fw-semibold" id="appliedDates"></h5>
                        <small class="text-muted fw-bold">Financial Summary</small>
                    </div>
                    
                    <!-- Compact Statistics Grid -->
                    <div class="row g-2">
                        {{-- <div class="col-lg-3 col-md-6">
                            <div class="text-center py-2 px-3 bg-light rounded">
                                <small class="text-muted d-block fw-bold">Total Gross Sales</small>
                                <strong class="text-dark" id="totalSell">€ 0.00</strong>
                            </div>
                        </div> --}}
                        <div class="col-lg-3 col-md-6">
                            <div class="text-center py-2 px-3 bg-light rounded">
                                <small class="text-muted d-block fw-bold">Gross MED Product Sales</small>
                                <strong class="text-dark" id="totalItemSell">€ 0.00</strong>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <div class="text-center py-2 px-3 bg-light rounded">
                                <small class="text-muted d-block fw-bold">Cost Of Normal Delivery (<span class="text-dark" id="paidDeliveryCount">0</span>)</small>
                                <strong class="text-dark" id="paidDeliveryAmount">€ 0.00</strong>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <div class="text-center py-2 px-3 bg-light rounded">
                                <small class="text-muted d-block fw-bold">Express Shipping Amount (<span class="text-dark" id="expressShippingCount">0</span>)</small>
                                <strong class="text-dark" id="expressShippingAmount">€ 0.00</strong>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <div class="text-center py-2 px-3 bg-light rounded">
                                <small class="text-muted d-block fw-bold">Total Prescriptions Amount</small>
                                <strong class="text-dark" id="totalPrescriptionsAmount">€ 0.00</strong>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row g-2 mt-1">
                        <div class="col-lg-3 col-md-6">
                            <div class="text-center py-2 px-3 bg-light rounded">
                                <small class="text-muted d-block fw-bold">Cost Of MED Sales</small>
                                <strong class="text-dark" id="totalItemCost">€ 0.00</strong>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <div class="text-center py-2 px-3 bg-light rounded">
                                <small class="text-muted d-block fw-bold">Order Count</small>
                                <strong class="text-dark" id="totalOrdersCount">0</strong>
                            </div>
                        </div>
                        {{-- <div class="col-lg-3 col-md-6">
                            <div class="text-center py-2 px-3 bg-light rounded">
                                <small class="text-muted d-block fw-bold">Profit from Sell (Total Sell - Total Purchase Price)</small>
                                <strong class="text-dark" id="totalProfitFromSell">€ 0.00</strong>
                            </div>
                        </div> --}}                        
                    </div>
                </div>
            </div>
        </div>

        <!-- Session Messages -->
        @if (session('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                {{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif
        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <div id="exportMessage" class="mt-2"></div>
        
        <!-- Data Table -->
        <div class="row">
            <div class="col-md-12">
                <div class="bgc-white bd bdrs-3 mB-20 dataTbl_scroll">
                    <table class="table table-centered table-striped nowrap w-100 display" id="orderTable">
                        <thead>
                            <tr>
                                <th></th>
                                <th>{{ __('labels.table.#') }}</th>
                                <th>{{ __('labels.order.table.order_number') }}</th>
                                <th>{{ __('labels.order.table.user') }}</th>
                                <th>{{ __('labels.order.table.email') }}</th>
                                <th>{{ __('labels.order.table.total_amnt') }}</th>
                                <th>{{ __('labels.order.table.order_profit') }}</th>
                                <th>{{ __('labels.order.table.payment_method') }}</th>
                                <th>{{ __('labels.order.table.payment_status') }}</th>
                                <th>{{ __('labels.order.table.order_status') }}</th>
                                <th>Order Date</th>                                
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <style>
        /* Table and Details Styles */
        .details-control {
            cursor: pointer;
            text-align: center;
            width: 30px;
        }
        .details-control:hover {
            background-color: #f5f5f5;
        }
        .order-details-container {
            border-left: 3px solid #007bff;
            padding: 15px;
            background-color: #f8f9fa;
        }
        .order-details-container h5 {
            color: #007bff;
            margin-bottom: 15px;
        }

        /* Button Styles */
        #exportBtn, #filterBtn, #resetBtn {
            min-width: 120px;
            padding: 7px 0 !important;
        }
        #exportBtn:disabled {
            opacity: 0.7;
            cursor: not-allowed;
        }
        .btn:focus {
            box-shadow: none !important;
        }

        /* Validation Styles */
        .is-invalid {
            border-color: #dc3545 !important;
            box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
        }
        .error-message {
            font-size: 0.875rem;
            color: #dc3545;
            margin-top: 0.25rem;
            min-height: 1.2em;
        }

        /* Animations */
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
            20%, 40%, 60%, 80% { transform: translateX(5px); }
        }
        .shake-animation {
            animation: shake 0.6s ease-in-out;
        }

        /* Remove this line to enable DataTables search */
        /* .dataTables_filter { display: none; } */

        /* Optional: Style the search box */
        .dataTables_filter {
            margin-bottom: 15px;
        }
        .dataTables_filter input {
            border-radius: 4px;
            border: 1px solid #ddd;
            padding: 8px 12px;
            margin-left: 8px;
        }
    </style>
    <script>
        $(document).ready(function() {
            const today = new Date().toISOString().split('T')[0];
            let orderTable;
            
            // Initialize date inputs
            $('#start_date, #end_date').attr('max', today);
            
            // Validation Configuration
            const validationConfig = {
                startDate: {
                    element: '#start_date',
                    errorElement: '#start_date_error',
                    messages: {
                        required: 'Start date is required',
                        future: 'Start date cannot be in the future',
                        invalid: 'Please enter a valid start date'
                    }
                },
                endDate: {
                    element: '#end_date',
                    errorElement: '#end_date_error',
                    messages: {
                        required: 'End date is required',
                        future: 'End date cannot be in the future',
                        beforeStart: 'End date cannot be before start date',
                        invalid: 'Please enter a valid end date'
                    }
                }
            };

            // Utility Functions
            const utils = {
                clearErrors: function() {
                    $('#start_date, #end_date').removeClass('is-invalid shake-animation');
                    $('.error-message').empty();
                },
                
                showError: function(field, message) {
                    const config = validationConfig[field];
                    $(config.element).addClass('is-invalid');
                    $(config.errorElement).text(message);
                },
                
                addShakeEffect: function() {
                    $('.is-invalid').addClass('shake-animation');
                    setTimeout(() => $('.is-invalid').removeClass('shake-animation'), 600);
                },

                isValidDate: function(dateString) {
                    return dateString && !isNaN(new Date(dateString).getTime());
                },

                getUrlParameter: function(name) {
                    const regex = new RegExp(`[\\?&]${name}=([^&#]*)`);
                    const results = regex.exec(location.search);
                    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
                },

                updateURL: function() {
                    const startDate = $('#start_date').val();
                    const endDate = $('#end_date').val();
                    const orderStatus = $('#order_status').val();
                    const paymentMethod = $('#payment_method').val();
                    const url = new URL(window.location);
                    
                    startDate ? url.searchParams.set('start_date', startDate) : url.searchParams.delete('start_date');
                    endDate ? url.searchParams.set('end_date', endDate) : url.searchParams.delete('end_date');
                    orderStatus ? url.searchParams.set('order_status', orderStatus) : url.searchParams.delete('order_status');
                    paymentMethod ? url.searchParams.set('payment_method', paymentMethod) : url.searchParams.delete('payment_method');
                    
                    window.history.pushState({}, '', url);
                }
            };

            // Enhanced Date Validation
            function validateDates() {
                utils.clearErrors();
                
                const startDate = $('#start_date').val().trim();
                const endDate = $('#end_date').val().trim();
                let isValid = true;

                // Only validate if at least one date field has a value
                if (startDate || endDate) {
                    // If one date is provided, both must be provided
                    if (!startDate) {
                        utils.showError('startDate', validationConfig.startDate.messages.required);
                        isValid = false;
                    }
                    
                    if (!endDate) {
                        utils.showError('endDate', validationConfig.endDate.messages.required);
                        isValid = false;
                    }

                    // Validate start date if provided
                    if (startDate) {
                        if (!utils.isValidDate(startDate)) {
                            utils.showError('startDate', validationConfig.startDate.messages.invalid);
                            isValid = false;
                        } else if (new Date(startDate) > new Date(today)) {
                            utils.showError('startDate', validationConfig.startDate.messages.future);
                            isValid = false;
                        }
                    }

                    // Validate end date if provided
                    if (endDate) {
                        if (!utils.isValidDate(endDate)) {
                            utils.showError('endDate', validationConfig.endDate.messages.invalid);
                            isValid = false;
                        } else if (new Date(endDate) > new Date(today)) {
                            utils.showError('endDate', validationConfig.endDate.messages.future);
                            isValid = false;
                        }
                    }

                    // Validate date range if both dates are provided and valid
                    if (startDate && endDate && utils.isValidDate(startDate) && utils.isValidDate(endDate)) {
                        if (new Date(startDate) > new Date(endDate)) {
                            utils.showError('endDate', validationConfig.endDate.messages.beforeStart);
                            isValid = false;
                        }
                    }
                }

                return isValid;
            }

            // Date change handlers
            $('#start_date, #end_date').on('change', function() {
                utils.clearErrors();
                
                const startDate = $('#start_date').val();
                const endDate = $('#end_date').val();
                
                // Update constraints
                if (startDate) {
                    $('#end_date').attr('min', startDate);
                } else {
                    $('#end_date').removeAttr('min');
                }
                
                if (endDate) {
                    $('#start_date').attr('max', endDate);
                } else {
                    $('#start_date').attr('max', today);
                }
            });

            // Initialize dates from URL parameters
            const startDateParam = utils.getUrlParameter('start_date');
            const endDateParam = utils.getUrlParameter('end_date');
            const orderStatusParam = utils.getUrlParameter('order_status');
            const paymentMethodParam = utils.getUrlParameter('payment_method');

            if (startDateParam) $('#start_date').val(startDateParam);
            if (endDateParam) $('#end_date').val(endDateParam);
            if (orderStatusParam) $('#order_status').val(orderStatusParam);
            if (paymentMethodParam) $('#payment_method').val(paymentMethodParam);

            // Order items formatting
            function formatOrderItems(orderItems) {
                if (!orderItems || orderItems.length === 0) {
                    return '<div class="alert alert-info">No items found for this order.</div>';
                }

                const headers = ['Product', 'Brand', 'SKU', 'Strength', 'Quantity', 'Unit Price', 'Purchase Price', 'Total', 'Item Profit'];
                const fields = ['product_name', 'brand', 'sku', 'strength', 'quantity', 'price', 'purchase_price', 'total', 'item_profit'];
                
                let html = '<div class="order-details-container">';
                html += '<h5>Order Items:</h5>';
                html += '<table class="table table-sm table-bordered">';
                html += '<thead class="table-light"><tr>';
                headers.forEach(header => html += `<th>${header}</th>`);
                html += '</tr></thead><tbody>';
                
                orderItems.forEach(item => {
                    html += '<tr>';
                    fields.forEach(field => html += `<td>${item[field] || ''}</td>`);
                    html += '</tr>';
                });
                
                html += '</tbody></table></div>';
                return html;
            }

            // Initialize DataTable
            orderTable = $('#orderTable').DataTable({
                language: {
                    paginate: {
                        previous: "<i class='ti-angle-left'>",
                        next: "<i class='ti-angle-right'>"
                    }
                },
                drawCallback: function() {
                    $(".dataTables_paginate > .pagination").addClass("pagination-rounded");
                },
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{url('ajax-reports-lists')}}",
                    type: "GET",
                    data: function(d) {
                        d.start_date = $('#start_date').val();
                        d.end_date = $('#end_date').val();
                        d.order_status = $('#order_status').val();
                        d.payment_method = $('#payment_method').val();
                    }
                },
                pageLength: 100,
                order: [[10, 'desc']],
                columnDefs: [{
                    targets: [0, 1],
                    orderable: false,
                }],
                columns: [
                    {
                        className: 'details-control',
                        orderable: false,
                        data: null,
                        defaultContent: '<i class="ti-plus text-primary" style="cursor: pointer; font-size: 16px;"></i>'
                    },
                    { data: 'row_index' },
                    { data: 'order_no' },
                    { data: 'user' },
                    { data: 'email' },
                    { data: 'total_amount' },
                    { data: 'order_profit' },
                    { data: 'payment_type' },
                    { data: 'payment_status' },
                    { data: 'order_status' },
                    { data: 'order_date' }
                ]
            });

            // Row detail toggle
            $('#orderTable tbody').on('click', 'td.details-control', function() {
                const tr = $(this).closest('tr');
                const row = orderTable.row(tr);
                const icon = $(this).find('i');

                if (row.child.isShown()) {
                    row.child.hide();
                    tr.removeClass('shown');
                    icon.removeClass('ti-minus').addClass('ti-plus');
                } else {
                    const rowData = row.data();
                    row.child(formatOrderItems(rowData.order_items)).show();
                    tr.addClass('shown');
                    icon.removeClass('ti-plus').addClass('ti-minus');
                }
            });

            // Function to fetch and show summary
            function updateFilterSummary() {
                const startDate = $('#start_date').val();
                const endDate = $('#end_date').val();
                const orderStatus = $('#order_status').val();
                const paymentMethod = $('#payment_method').val();

                // Only show summary if at least one filter is applied
                if (startDate || endDate || orderStatus || paymentMethod) {
                    $.ajax({
                        url: "{{ url('ajax-reports-summary') }}",
                        type: "GET",
                        data: {
                            start_date: startDate,
                            end_date: endDate,
                            order_status: orderStatus,
                            payment_method: paymentMethod,
                            search: orderTable.search()
                        },
                        success: function(res) {
                            $('#filterSummary').show();
                            let dateLabel = '';
                            if (startDate && endDate) {
                                dateLabel = `From <strong>${startDate}</strong> to <strong>${endDate}</strong>`;
                            } else if (startDate) {
                                dateLabel = `From <strong>${startDate}</strong>`;
                            } else if (endDate) {
                                dateLabel = `Up to <strong>${endDate}</strong>`;
                            }
                            $('#appliedDates').html(dateLabel);
                            // $('#totalSell').html('€ ' + res.total_sell);
                            $('#totalItemSell').html('€ ' + res.total_item_selling_price);
                            $('#totalItemCost').html('€ ' + res.total_item_cost); // Total cost based on product (purchase price)
                            $('#paidDeliveryCount').html(res.paid_shipping_count);
                            $('#paidDeliveryAmount').html('€ ' + res.paid_shipping_amount);
                            $('#expressShippingCount').html(res.express_shipping_count);
                            $('#expressShippingAmount').html('€ ' + res.express_shipping_amount);
                            $('#totalPrescriptionsAmount').html('€ ' + res.total_prescriptions_amount);
                            $('#totalOrdersCount').html(res.total_orders);
                        },
                        error: function() {
                            $('#filterSummary').hide();
                        }
                    });
                } else {
                    $('#filterSummary').hide();
                }
            }

            // Event Handlers
            $('#filterBtn').on('click', function() {
                const startDate = $('#start_date').val().trim();
                const endDate = $('#end_date').val().trim();
                
                // Only validate if at least one date field has a value
                if (startDate || endDate) {
                    const isValid = validateDates();
                    
                    if (!isValid) {
                        utils.addShakeEffect();
                        return false;
                    }
                } else {
                    // Clear any existing errors if no dates are selected
                    utils.clearErrors();
                }
                
                $(this).blur();
                utils.updateURL();
                orderTable.ajax.reload();
                updateFilterSummary();
            });

            $('#resetBtn').on('click', function() {
                $('#start_date, #end_date').val('').removeClass('is-invalid').removeAttr('min').attr('max', today);
                $('#order_status').val('');
                $('#payment_method').val('');
                $('.error-message').empty();
                $(this).blur();
                utils.updateURL();
                orderTable.ajax.reload();
                updateFilterSummary();
            });

            document.getElementById('exportBtn').addEventListener('click', function() {
                const params = [];
                const startDate = $('#start_date').val();
                const endDate = $('#end_date').val();
                const orderStatus = $('#order_status').val();
                const paymentMethod = $('#payment_method').val();
                const searchValue = orderTable.search(); // Get current search value
                
                if (startDate) params.push(`start_date=${encodeURIComponent(startDate)}`);
                if (endDate) params.push(`end_date=${encodeURIComponent(endDate)}`);
                if (orderStatus) params.push(`order_status=${encodeURIComponent(orderStatus)}`);
                if (paymentMethod) params.push(`payment_method=${encodeURIComponent(paymentMethod)}`);
                if (searchValue) params.push(`search[value]=${encodeURIComponent(searchValue)}`);

                fetch('{{ route("report.export") }}' + (params.length ? '?' + params.join('&') : ''), {
                    method: 'GET',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    }
                })
                .then(async response => {
                    if (response.headers.get('content-disposition')) {
                        // It's a file download
                        const blob = await response.blob();
                        const url = window.URL.createObjectURL(blob);
                        const a = document.createElement('a');
                        a.href = url;
                        a.download = 'orders.xlsx';
                        document.body.appendChild(a);
                        a.click();
                        a.remove();
                    } else {
                        // JSON message (queued export)
                        return response.json();
                    }
                })
                .then(data => {
                    if (data && data.message) {
                        document.getElementById('exportMessage').innerHTML =
                            `<div class="alert alert-success alert-dismissible fade show">${data.message}<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>`;
                    }
                })
                .catch(err => {
                    console.error(err);
                    document.getElementById('exportMessage').innerHTML =
                        `<div class="alert alert-danger alert-dismissible fade show">Export failed. Try again later.<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>`;
                });
            });


            // Handle browser navigation
            window.addEventListener('popstate', () => location.reload());
            
            // Apply filter from URL parameters if they exist
            if (startDateParam || endDateParam || orderStatusParam || paymentMethodParam) {
                updateFilterSummary();
            }
        });
    </script>
@endsection