@extends('layouts.admin')
@section('content')
    <div class="container-fluid">
        <div class="peers">
            <div class="peer peer-greed">
                <h4 class="c-grey-900">Product Sale Stats</h4>
            </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

        <!-- Tabs Navigation -->
        <ul class="nav nav-tabs mb-3" id="salesTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="tab1-tab" data-bs-toggle="tab" data-bs-target="#tab1" type="button" role="tab">
                    Comparison 1
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="tab2-tab" data-bs-toggle="tab" data-bs-target="#tab2" type="button" role="tab">
                    Comparison 2
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="tab3-tab" data-bs-toggle="tab" data-bs-target="#tab3" type="button" role="tab">
                    Comparison 3
                </button>
            </li>
        </ul>

        <!-- Tab Content -->
        <div class="tab-content" id="salesTabContent">
            <!-- Tab 1 -->
            <div class="tab-pane fade show active" id="tab1" role="tabpanel">
                <!-- 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_1" class="form-label">Start Date</label>
                                    <input type="date" class="form-control" id="start_date_1" name="start_date_1">
                                    <div class="error-message" id="start_date_error_1"></div>
                                </div>
                                <div class="col-md-2">
                                    <label for="end_date_1" class="form-label">End Date</label>
                                    <input type="date" class="form-control" id="end_date_1" name="end_date_1">
                                    <div class="error-message" id="end_date_error_1"></div>
                                </div>
                                <div class="col-md-2">
                                    <label for="order_status_1" class="form-label">Order Status</label>
                                    <select class="form-control" id="order_status_1" name="order_status_1">
                                        <option value="">All</option>
                                        <option value="processing">Processing</option>
                                        <option value="Hublify Ready">Hublify Ready</option>
                                        <option value="Hublify Shipped">Hublify Shipped</option>
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">&nbsp;</label>
                                    <div class="d-flex gap-2">
                                        <button type="button" class="btn btn-primary filterBtn" data-tab="1">Filter</button>
                                        <button type="button" class="btn btn-secondary resetBtn" data-tab="1">Reset</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </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 productSalesTable" id="productSalesTable_1">
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th>#</th>
                                        <th>Product Name</th>
                                        <th>Order Count</th>
                                        <th>Total Quantity Sold</th>
                                        <th>Total Product Sell (Price × Quantity)</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Tab 2 -->
            <div class="tab-pane fade" id="tab2" role="tabpanel">
                <!-- 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_2" class="form-label">Start Date</label>
                                    <input type="date" class="form-control" id="start_date_2" name="start_date_2">
                                    <div class="error-message" id="start_date_error_2"></div>
                                </div>
                                <div class="col-md-2">
                                    <label for="end_date_2" class="form-label">End Date</label>
                                    <input type="date" class="form-control" id="end_date_2" name="end_date_2">
                                    <div class="error-message" id="end_date_error_2"></div>
                                </div>
                                <div class="col-md-2">
                                    <label for="order_status_2" class="form-label">Order Status</label>
                                    <select class="form-control" id="order_status_2" name="order_status_2">
                                        <option value="">All</option>
                                        <option value="processing">Processing</option>
                                        <option value="Hublify Ready">Hublify Ready</option>
                                        <option value="Hublify Shipped">Hublify Shipped</option>
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">&nbsp;</label>
                                    <div class="d-flex gap-2">
                                        <button type="button" class="btn btn-primary filterBtn" data-tab="2">Filter</button>
                                        <button type="button" class="btn btn-secondary resetBtn" data-tab="2">Reset</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </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 productSalesTable" id="productSalesTable_2">
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th>#</th>
                                        <th>Product Name</th>
                                        <th>Order Count</th>
                                        <th>Total Quantity Sold</th>
                                        <th>Total Product Sell (Price × Quantity)</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Tab 3 -->
            <div class="tab-pane fade" id="tab3" role="tabpanel">
                <!-- 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_3" class="form-label">Start Date</label>
                                    <input type="date" class="form-control" id="start_date_3" name="start_date_3">
                                    <div class="error-message" id="start_date_error_3"></div>
                                </div>
                                <div class="col-md-2">
                                    <label for="end_date_3" class="form-label">End Date</label>
                                    <input type="date" class="form-control" id="end_date_3" name="end_date_3">
                                    <div class="error-message" id="end_date_error_3"></div>
                                </div>
                                <div class="col-md-2">
                                    <label for="order_status_3" class="form-label">Order Status</label>
                                    <select class="form-control" id="order_status_3" name="order_status_3">
                                        <option value="">All</option>
                                        <option value="processing">Processing</option>
                                        <option value="Hublify Ready">Hublify Ready</option>
                                        <option value="Hublify Shipped">Hublify Shipped</option>
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">&nbsp;</label>
                                    <div class="d-flex gap-2">
                                        <button type="button" class="btn btn-primary filterBtn" data-tab="3">Filter</button>
                                        <button type="button" class="btn btn-secondary resetBtn" data-tab="3">Reset</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </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 productSalesTable" id="productSalesTable_3">
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th>#</th>
                                        <th>Product Name</th>
                                        <th>Order Count</th>
                                        <th>Total Quantity Sold</th>
                                        <th>Total Product Sell (Price × Quantity)</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </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 */
        .filterBtn, .resetBtn {
            min-width: 120px;
            padding: 7px 0 !important;
        }
        .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;
        }

        /* DataTables search box styling */
        .dataTables_filter {
            margin-bottom: 15px;
        }
        .dataTables_filter input {
            border-radius: 4px;
            border: 1px solid #ddd;
            padding: 8px 12px;
            margin-left: 8px;
        }

        /* Tabs Styles */
        .nav-tabs {
            border-bottom: 2px solid #dee2e6;
        }
        .nav-tabs .nav-link {
            color: #495057;
            font-weight: 500;
            border: 1px solid transparent;
            border-radius: 0.25rem 0.25rem 0 0;
            padding: 0.75rem 1.5rem;
        }
        .nav-tabs .nav-link:hover {
            border-color: #e9ecef #e9ecef #dee2e6;
            color: #007bff;
        }
        .nav-tabs .nav-link.active {
            color: #007bff;
            background-color: #fff;
            border-color: #dee2e6 #dee2e6 #fff;
            border-bottom: 2px solid #fff;
            margin-bottom: -2px;
        }
    </style>
    <script>
        $(document).ready(function() {
            const today = new Date().toISOString().split('T')[0];
            let productSalesTables = {};
            
            // Initialize date inputs for all tabs
            for (let i = 1; i <= 3; i++) {
                $(`#start_date_${i}, #end_date_${i}`).attr('max', today);
            }

            // Utility Functions
            const utils = {
                clearErrors: function(tabId) {
                    $(`#start_date_${tabId}, #end_date_${tabId}`).removeClass('is-invalid shake-animation');
                    $(`#start_date_error_${tabId}, #end_date_error_${tabId}`).empty();
                },
                
                showError: function(tabId, field, message) {
                    $(`#${field}_${tabId}`).addClass('is-invalid');
                    $(`#${field}_error_${tabId}`).text(message);
                },
                
                addShakeEffect: function(tabId) {
                    $(`#start_date_${tabId}.is-invalid, #end_date_${tabId}.is-invalid`).addClass('shake-animation');
                    setTimeout(() => $(`#start_date_${tabId}, #end_date_${tabId}`).removeClass('shake-animation'), 600);
                },

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

            // Enhanced Date Validation
            function validateDates(tabId) {
                utils.clearErrors(tabId);
                
                const startDate = $(`#start_date_${tabId}`).val().trim();
                const endDate = $(`#end_date_${tabId}`).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(tabId, 'start_date', 'Start date is required');
                        isValid = false;
                    }
                    
                    if (!endDate) {
                        utils.showError(tabId, 'end_date', 'End date is required');
                        isValid = false;
                    }

                    // Validate start date if provided
                    if (startDate) {
                        if (!utils.isValidDate(startDate)) {
                            utils.showError(tabId, 'start_date', 'Please enter a valid start date');
                            isValid = false;
                        } else if (new Date(startDate) > new Date(today)) {
                            utils.showError(tabId, 'start_date', 'Start date cannot be in the future');
                            isValid = false;
                        }
                    }

                    // Validate end date if provided
                    if (endDate) {
                        if (!utils.isValidDate(endDate)) {
                            utils.showError(tabId, 'end_date', 'Please enter a valid end date');
                            isValid = false;
                        } else if (new Date(endDate) > new Date(today)) {
                            utils.showError(tabId, 'end_date', 'End date cannot be in the 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(tabId, 'end_date', 'End date cannot be before start date');
                            isValid = false;
                        }
                    }
                }

                return isValid;
            }

            // Date change handlers for all tabs
            for (let i = 1; i <= 3; i++) {
                $(`#start_date_${i}, #end_date_${i}`).on('change', function() {
                    const tabId = i;
                    utils.clearErrors(tabId);
                    
                    const startDate = $(`#start_date_${tabId}`).val();
                    const endDate = $(`#end_date_${tabId}`).val();
                    
                    // Update constraints
                    if (startDate) {
                        $(`#end_date_${tabId}`).attr('min', startDate);
                    } else {
                        $(`#end_date_${tabId}`).removeAttr('min');
                    }
                    
                    if (endDate) {
                        $(`#start_date_${tabId}`).attr('max', endDate);
                    } else {
                        $(`#start_date_${tabId}`).attr('max', today);
                    }
                });
            }

            // Function to format order details
            function formatOrderDetails(orderDetails) {
                if (!orderDetails || orderDetails.length === 0) {
                    return '<div class="alert alert-info">No order details found.</div>';
                }

                const headers = ['Order Number', 'User Name', 'User Email', 'SKU', 'Strength', 'Pack Qty', 'Quantity', 'Unit Price', 'Total'];
                const fields = ['order_no', 'user_name', 'user_email', 'sku', 'strength', 'pack_qty', 'quantity', 'unit_price', 'total'];
                
                let html = '<div class="order-details-container">';
                html += '<h5>Order Details:</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>';
                
                orderDetails.forEach(detail => {
                    html += '<tr>';
                    fields.forEach(field => html += `<td>${detail[field] || 'N/A'}</td>`);
                    html += '</tr>';
                });
                
                html += '</tbody></table></div>';
                return html;
            }

            // Initialize DataTables for all tabs
            function initializeDataTable(tabId) {
                productSalesTables[tabId] = $(`#productSalesTable_${tabId}`).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-product-sales-lists')}}",
                        type: "GET",
                        data: function(d) {
                            d.start_date = $(`#start_date_${tabId}`).val();
                            d.end_date = $(`#end_date_${tabId}`).val();
                            d.order_status = $(`#order_status_${tabId}`).val();
                        }
                    },
                    pageLength: 100,
                    order: [[5, '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: 'product_name' },
                        { data: 'order_count' },
                        { data: 'total_quantity' },
                        { data: 'total_product_sell' }
                    ]
                });

                // Row detail toggle
                $(`#productSalesTable_${tabId} tbody`).on('click', 'td.details-control', function() {
                    const tr = $(this).closest('tr');
                    const row = productSalesTables[tabId].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(formatOrderDetails(rowData.order_details)).show();
                        tr.addClass('shown');
                        icon.removeClass('ti-plus').addClass('ti-minus');
                    }
                });
            }

            // Initialize all tables
            for (let i = 1; i <= 3; i++) {
                initializeDataTable(i);
            }

            // Filter button handler
            $('.filterBtn').on('click', function() {
                const tabId = $(this).data('tab');
                const startDate = $(`#start_date_${tabId}`).val().trim();
                const endDate = $(`#end_date_${tabId}`).val().trim();
                
                // Only validate if at least one date field has a value
                if (startDate || endDate) {
                    const isValid = validateDates(tabId);
                    
                    if (!isValid) {
                        utils.addShakeEffect(tabId);
                        return false;
                    }
                } else {
                    // Clear any existing errors if no dates are selected
                    utils.clearErrors(tabId);
                }
                
                $(this).blur();
                productSalesTables[tabId].ajax.reload();
            });

            // Reset button handler
            $('.resetBtn').on('click', function() {
                const tabId = $(this).data('tab');
                $(`#start_date_${tabId}, #end_date_${tabId}`).val('').removeClass('is-invalid').removeAttr('min').attr('max', today);
                $(`#order_status_${tabId}`).val('');
                $(`#start_date_error_${tabId}, #end_date_error_${tabId}`).empty();
                $(this).blur();
                productSalesTables[tabId].ajax.reload();
            });
        });
    </script>
@endsection