@extends(BaseHelper::getAdminMasterLayoutTemplate())
@section('content')
    @php use Carbon\Carbon; @endphp

    <!-- Page Header -->
    <div class="row align-items-center mb-4">
        <!-- LEFT COLUMN (Title) -->
        <div class="col-md-4">
            <h4 class="mb-0">Purchase Order Report</h4>
        </div>

        <!-- RIGHT COLUMN (Filters auto layout) -->
        <div class="col-md-8">
            <form id="filter-form" class="row g-2">
                <!-- Date range -->
                <div class="col-sm-6 col-lg-auto flex-fill date-range-container">
                    <x-core::button type="button" color="primary" :outlined="true" id="date-range-picker"
                        data-format-value="{{ trans('plugins/ecommerce::reports.date_range_format_value', ['from' => '__from__', 'to' => '__to__']) }}"
                        data-format="{{ Str::upper(config('core.base.general.date_format.js.date')) }}"
                        data-href="{{ route('report.purchase.order.index') }}"
                        data-start-date="{{ request('start_date') ?? BaseHelper::formatDate(Carbon::now()->startOfMonth()) }}"
                        data-end-date="{{ request('end_date') ?? BaseHelper::formatDate(Carbon::now()->endOfMonth()) }}"
                        data-current-view="default" data-active-view="default" icon="ti ti-calendar" class="w-100 h-100">

                        {{ request('start_date') && request('end_date')
        ? trans('plugins/ecommerce::reports.date_range_format_value', [
            'from' => BaseHelper::formatDate(request('start_date')),
            'to' => BaseHelper::formatDate(request('end_date')),
        ])
        : trans('plugins/ecommerce::reports.date_range_format_value', [
            'from' => BaseHelper::formatDate(Carbon::now()->startOfMonth()),
            'to' => BaseHelper::formatDate(Carbon::now()->endOfMonth()),
        ])
                                                                                        }}
                    </x-core::button>

                    <input type="hidden" id="start_date" name="start_date" value="{{ request('start_date') ?? BaseHelper::formatDate(Carbon::now()->startOfMonth()) }}">
                    <input type="hidden" id="end_date" name="end_date" value="{{ request('end_date') ?? BaseHelper::formatDate(Carbon::now()) }}">
                </div>

                <!-- Payment Status Filter -->
                <div class="col-sm-6 col-lg-auto flex-fill">
                    <select id="payment_status" class="form-select h-100" name="payment_status">
                        <option value="">Select Payment Status</option>
                        <option value="pending" {{ request('payment_status') == 'pending' ? 'selected' : '' }}>Pending
                        </option>
                        <option value="completed" {{ request('payment_status') == 'completed' ? 'selected' : '' }}>Completed
                        </option>
                    </select>
                </div>

                <!-- Order Status Filter -->
                <div class="col-sm-6 col-lg-auto flex-fill">
                    <select id="order_status" class="form-select h-100" name="order_status">
                        <option value="">Select Order Status</option>
                        <option value="pending" {{ request('order_status') == 'pending' ? 'selected' : '' }}>Pending</option>
                        <option value="confirmed" {{ request('order_status') == 'confirmed' ? 'selected' : '' }}>Confirmed
                        </option>
                        <option value="received" {{ request('order_status') == 'received' ? 'selected' : '' }}>Received
                        </option>
                    </select>
                </div>

                <!-- Vendor Filter -->
                <div class="col-sm-6 col-lg-auto flex-fill">
                    <select class="form-select h-100" id="vendor_id" name="vendor_id"></select>
                </div>

                <div class="col-sm-6 col-lg-auto flex-fill ">
                    <button type="button" id="reset_filters" class="btn btn-outline-secondary h-100">
                        <i class="fas fa-redo me-2"></i>Reset Filters
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Charts Section -->
    <div class="row mb-4">
        <!-- Orders by Date Chart (Main Chart) -->
        <div class="col-md-6">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-white d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Purchase Orders by Date</h5>
                    <small class="text-muted" id="chart-filter-indicator"></small>
                </div>
                <div class="card-body">
                    <canvas id="ordersDateChart" height="100"></canvas>
                </div>
            </div>
        </div>

        <!-- Payment Status Chart -->
        <div class="col-md-3">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-white">
                    <h5 class="mb-0">Payment Status</h5>
                    <small class="text-muted ms-2">Click to filter</small>
                </div>
                <div class="card-body">
                    <canvas id="paymentStatusChart" height="200"></canvas>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-white">
                    <h5 class="mb-0">Order Status</h5>
                    <small class="text-muted ms-2">Click to filter</small>
                </div>
                <div class="card-body">
                    <canvas id="orderStatusChart" height="200"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Table Section -->
    <div class="row mt-4">
        <div class="col-12">
            <div class="card shadow-sm" id="products_card">
                <div
                    class="card-header d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center gap-3">
                    <div class="">
                        <select id="entries" class="form-select" name="paginate">
                            <option value="10" {{ request('paginate', 10) == 10 ? 'selected' : '' }}>10</option>
                            <option value="20" {{ request('paginate') == 20 ? 'selected' : '' }}>20</option>
                            <option value="30" {{ request('paginate') == 30 ? 'selected' : '' }}>30</option>
                            <option value="50" {{ request('paginate') == 50 ? 'selected' : '' }}>50</option>
                            <option value="75" {{ request('paginate') == 75 ? 'selected' : '' }}>75</option>
                            <option value="all" {{ request('paginate') == 'all' ? 'selected' : '' }}>All</option>
                        </select>
                    </div>
                    <div class="d-flex justify-between w-md-auto">
                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-search"></i></span>
                            <input type="text" class="form-control" id="search" name="search"
                                value="{{ request('search') }}" placeholder="Search by order code">
                        </div>
                    </div>
                </div>

                <!-- Loading indicator -->
                <div id="loading" class="text-center py-5" style="display: none;">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <p class="mt-2">Loading data...</p>
                </div>

                <!-- Products Table -->
                <div class="card-body p-0" id="products_listing">
                    @include('backend.report.purchase.table', ['orders' => $orders])
                </div>

                <!-- Pagination -->
                <div class="card-footer bg-white" id="pagination_footer">
                    @include('backend.report.purchase.pagination', ['orders' => $orders])
                </div>
            </div>
        </div>
    </div>
@endsection

@push('footer')
    <!-- Include Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <!-- Include Moment.js -->
    <script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script>
    <!-- Include Date Range Picker -->
    <script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

    <script>
        var VendorList = '{{ route('report.purchase.order.vendors.list') }}';
        var FetchDataUrl = '{{ route('report.purchase.order.fetch.data') }}';

        // Store initial data from PHP
        var initialDailyOrdersData = @json($dailyOrdersData);
        var initialPaymentStatusData = @json($paymentStatusData);
        var initialOrderStatusData = @json($orderStatusData);

        // --- HELPER FUNCTION FOR DATA SANITIZATION ---
        // This function ensures that all 'status' properties are strings.
        // This prevents the '[object Object]' error in charts and URLs.
        function sanitizeData(data) {
            if (!Array.isArray(data)) return data;
            return data.map(item => {
                // Check if the status property exists and is an object
                if (item && typeof item.status === 'object' && item.status !== null) {
                    // Try to find a meaningful string value inside the object
                    const possibleKeys = ['value', 'name', 'key', 'status'];
                    let found = false;
                    for (const key of possibleKeys) {
                        if (item.status.hasOwnProperty(key) && typeof item.status[key] === 'string') {
                            item.status = item.status[key];
                            found = true;
                            break;
                        }
                    }
                    // If no common key is found, convert the whole object to a JSON string
                    if (!found) {
                        item.status = JSON.stringify(item.status);
                    }
                }
                return item;
            });
        }

        // --- SANITIZE INITIAL DATA BEFORE ANYTHING ELSE ---
        // This is the crucial step to fix the initial chart rendering.
        initialDailyOrdersData = sanitizeData(initialDailyOrdersData);
        initialPaymentStatusData = sanitizeData(initialPaymentStatusData);
        initialOrderStatusData = sanitizeData(initialOrderStatusData);

        // Function to format status labels
        function formatStatusLabel(status) {
            // If status is null or undefined, return 'Unknown'
            if (status == null) {
                return 'Unknown';
            }

            // Convert to string to handle non-string inputs (like numbers)
            const statusStr = String(status);

            // If the string is empty, return 'Unknown'
            if (statusStr.trim() === '') {
                return 'Unknown';
            }

            // Capitalize first letter and replace underscores with spaces
            return statusStr.charAt(0).toUpperCase() + statusStr.slice(1).replace(/_/g, ' ');
        }

        // Function to update date range picker text
        function updateDateRangePickerText(start, end, format) {
            var element = $("#date-range-picker");
            var formatValue = element.data("format-value");
            if (!formatValue) formatValue = "__from__ - __to__";

            var formattedValue = formatValue
                .replace("__from__", start.format(format))
                .replace("__to__", end.format(format));

            element.find("span").text(formattedValue);
        }

        // Function to update active range
        function updateActiveRange(start, end) {
            // This function can be used to highlight the active range in the UI if needed
            // For now, it's a placeholder
        }

        // Function to format data for charts
        function formatChartData(data) {
            if (!data || !Array.isArray(data)) {
                return [];
            }
            return data.map(item => {
                return {
                    date: item.date || '',
                    status: formatStatusLabel(item.status || ''),
                    count: parseInt(item.count) || 0,
                    total_amount: parseFloat(item.total_amount) || 0
                };
            });
        }

        // Initialize date range picker
        $(document).ready(function () {
            if (window.moment && jQuery().daterangepicker) {
                moment.locale($("html").attr("lang"));
                var dateRangePicker = $("#date-range-picker");
                var format = dateRangePicker.data("format") || "YYYY-MM-DD";
                var startDate = dateRangePicker.data("start-date") ? moment(dateRangePicker.data("start-date"), format) : moment().subtract(29, "days");
                var now = moment();
                var endDate = dateRangePicker.data("end-date") ? moment(dateRangePicker.data("end-date"), format) : moment().endOf("month");

                if (endDate > now) {
                    endDate = now;
                }

                // Custom ranges with Year, Month, and Week options
                var ranges = {
                    'Today': [moment().startOf("day"), moment().endOf("day")],
                    'Yesterday': [moment().subtract(1, "days").startOf("day"), moment().subtract(1, "days").endOf("day")],
                    'This Week': [moment().startOf("week"), moment().endOf("week")],
                    'Last 7 Days': [moment().subtract(6, "days").startOf("day"), moment().endOf("day")],
                    'Last 30 Days': [moment().subtract(29, "days").startOf("day"), moment().endOf("day")],
                    'This Month': [moment().startOf("month"), moment().endOf("month")],
                    'Last Month': [moment().subtract(1, "month").startOf("month"), moment().subtract(1, "month").endOf("month")],
                    'This Quarter': [moment().startOf("quarter"), moment().endOf("quarter")],
                    'Last Quarter': [moment().subtract(1, "quarter").startOf("quarter"), moment().subtract(1, "quarter").endOf("quarter")],
                    'This Year': [moment().startOf("year"), moment().endOf("year")],
                    'Last Year': [moment().subtract(1, "year").startOf("year"), moment().subtract(1, "year").endOf("year")],
                    '2 Years Ago': [moment().subtract(2, "year").startOf("year"), moment().subtract(2, "year").endOf("year")],
                };

                dateRangePicker.daterangepicker({
                    ranges: ranges,
                    alwaysShowCalendars: true,
                    startDate: startDate,
                    endDate: endDate,
                    maxDate: moment().endOf("day"),
                    opens: $(window).width() < 768 ? "center" : "left",
                    drops: "auto",
                    locale: {
                        format: format,
                        customRangeLabel: 'Custom Range'
                    },
                    autoUpdateInput: false
                }, function (start, end, label) {
                    // Update the button text
                    updateDateRangePickerText(start, end, format);

                    // Update the hidden inputs
                    $('#start_date').val(start.format('YYYY-MM-DD'));
                    $('#end_date').val(end.format('YYYY-MM-DD'));

                    // Update the active state
                    updateActiveRange(start, end);

                    // Fetch data
                    fetchData();
                });

                dateRangePicker.on("apply.daterangepicker", function (ev, picker) {
                    var element = $(this);
                    var label = picker.chosenLabel;

                    var formatValue = element.data("format-value");
                    if (!formatValue) formatValue = "__from__ - __to__";

                    var formattedValue = formatValue
                        .replace("__from__", picker.startDate.format(format))
                        .replace("__to__", picker.endDate.format(format));
                    element.find("span").text(formattedValue);

                    // Update the hidden inputs
                    $('#start_date').val(picker.startDate.format('YYYY-MM-DD'));
                    $('#end_date').val(picker.endDate.format('YYYY-MM-DD'));

                    // Update active state
                    updateActiveRange(picker.startDate, picker.endDate);

                    // Fetch data
                    fetchData();
                });

                // Initialize the active range based on current values
                if ($('#start_date').val() && $('#end_date').val()) {
                    updateActiveRange(moment($('#start_date').val()), moment($('#end_date').val()));
                }
            }

            // Initialize vendor select2
            $('#vendor_id').select2({
                placeholder: 'Select Vendor...',
                allowClear: true,
                width: '100%',
                ajax: {
                    url: VendorList,
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        return { q: params.term };
                    },
                    processResults: function (data) {
                        return {
                            results: data.data.map(function (user) {
                                return {
                                    id: user.id,
                                    text: user.full_name
                                };
                            })
                        };
                    },
                    cache: true
                }
            });

            // Initialize charts
            var ordersDateChart, paymentStatusChart, orderStatusChart;
            var currentPaymentFilter = null;
            var currentOrderFilter = null;

            function initCharts(dailyOrdersData, paymentStatusData, orderStatusData) {
                // Format the data
                var formattedDailyOrders = formatChartData(dailyOrdersData);
                var formattedPaymentStatus = formatChartData(paymentStatusData);
                var formattedOrderStatus = formatChartData(orderStatusData);

                // Orders by Date Chart (Main Chart)
                var dateCtx = document.getElementById('ordersDateChart').getContext('2d');

                // MODIFIED: Create a gradient for the fill area
                var gradientFill = dateCtx.createLinearGradient(0, 0, 0, 400);
                gradientFill.addColorStop(0, 'rgba(54, 162, 235, 0.5)');
                gradientFill.addColorStop(1, 'rgba(54, 162, 235, 0.05)');

                ordersDateChart = new Chart(dateCtx, {
                    type: 'line',
                    data: {
                        labels: formattedDailyOrders.map(item => item.date),
                        datasets: [{
                            label: 'Orders',
                            data: formattedDailyOrders.map(item => item.count),
                            borderColor: 'rgb(54, 162, 235)', // MODIFIED: Changed to a nice blue
                            backgroundColor: gradientFill, // MODIFIED: Changed to a gradient
                            tension: 0.1,
                            fill: true
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        scales: {
                            y: {
                                beginAtZero: true
                            },
                            x: {
                                ticks: {
                                    maxRotation: 45,
                                    minRotation: 45
                                }
                            }
                        },
                        plugins: {
                            tooltip: {
                                callbacks: {
                                    title: function (tooltipItems) {
                                        return 'Date: ' + tooltipItems[0].label;
                                    },
                                    label: function (context) {
                                        return 'Orders: ' + context.parsed.y;
                                    }
                                }
                            }
                        }
                    }
                });

                // Payment Status Chart
                var paymentCtx = document.getElementById('paymentStatusChart').getContext('2d');
                paymentStatusChart = new Chart(paymentCtx, {
                    type: 'doughnut',
                    data: {
                        labels: formattedPaymentStatus.map(item => item.status),
                        datasets: [{
                            label: 'Amount',
                            data: formattedPaymentStatus.map(item => item.total_amount),
                            backgroundColor: [ // MODIFIED: New color set
                                'rgba(230, 126, 34, 0.8)',  // Carrot Orange
                                'rgba(46, 204, 113, 0.8)', // Emerald Green
                            ]
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            tooltip: {
                                callbacks: {
                                    label: function (context) {
                                        let label = context.label || '';
                                        if (label) {
                                            label += ': $' + (context.parsed || 0).toFixed(2);
                                        }
                                        return label;
                                    }
                                }
                            }
                        },
                        onClick: function (evt, item) {
                            if (item.length > 0) {
                                const index = item[0].index;
                                // Use the original (now sanitized) data to get the raw status value
                                const status = paymentStatusData[index].status;

                                // Toggle filter
                                if (currentPaymentFilter === status) {
                                    currentPaymentFilter = null;
                                    $('#chart-filter-indicator').text('');
                                } else {
                                    currentPaymentFilter = status;
                                    $('#chart-filter-indicator').text('Filtered by Payment: ' + formatStatusLabel(status));
                                }

                                // Clear order filter if payment filter is applied
                                currentOrderFilter = null;

                                fetchData();
                            }
                        }
                    }
                });

                // Order Status Chart
                var orderCtx = document.getElementById('orderStatusChart').getContext('2d');
                orderStatusChart = new Chart(orderCtx, {
                    type: 'doughnut',
                    data: {
                        labels: formattedOrderStatus.map(item => item.status),
                        datasets: [{
                            label: 'Count', // CHANGED: Label from 'Amount' to 'Count'
                            data: formattedOrderStatus.map(item => item.count), // CHANGED: Data from total_amount to count
                            backgroundColor: [ // MODIFIED: New color set
                                'rgba(155, 89, 182, 0.8)', // Amethyst Purple
                                'rgba(52, 152, 219, 0.8)',  // Peter River Blue
                                'rgba(241, 196, 15, 0.8)',  // Sunflower Yellow
                                'rgba(231, 76, 60, 0.8)'    // Alizarin Red
                            ]
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            tooltip: {
                                callbacks: {
                                    label: function (context) {
                                        let label = context.label || '';
                                        if (label) {
                                            // CHANGED: Removed currency formatting
                                            label += ': ' + (context.parsed || 0);
                                        }
                                        return label;
                                    }
                                }
                            }
                        },
                        onClick: function (evt, item) {
                            if (item.length > 0) {
                                const index = item[0].index;
                                // Use the original (now sanitized) data to get the raw status value
                                const status = orderStatusData[index].status;

                                // Toggle filter
                                if (currentOrderFilter === status) {
                                    currentOrderFilter = null;
                                    $('#chart-filter-indicator').text('');
                                } else {
                                    currentOrderFilter = status;
                                    $('#chart-filter-indicator').text('Filtered by Order: ' + formatStatusLabel(status));
                                }

                                // Clear payment filter if order filter is applied
                                currentPaymentFilter = null;

                                fetchData();
                            }
                        }
                    }
                });
            }

            function updateCharts(dailyOrdersData, paymentStatusData, orderStatusData) {
                // Format the data
                var formattedDailyOrders = formatChartData(dailyOrdersData);
                var formattedPaymentStatus = formatChartData(paymentStatusData);
                var formattedOrderStatus = formatChartData(orderStatusData);

                // Update Orders by Date Chart
                ordersDateChart.data.labels = formattedDailyOrders.map(item => item.date);
                ordersDateChart.data.datasets[0].data = formattedDailyOrders.map(item => item.count);
                ordersDateChart.update();

                // Update Payment Status Chart
                paymentStatusChart.data.labels = formattedPaymentStatus.map(item => item.status);
                paymentStatusChart.data.datasets[0].data = formattedPaymentStatus.map(item => item.total_amount);
                paymentStatusChart.update();

                // Update Order Status Chart
                orderStatusChart.data.labels = formattedOrderStatus.map(item => item.status);
                // CHANGED: Data from total_amount to count
                orderStatusChart.data.datasets[0].data = formattedOrderStatus.map(item => item.count);
                orderStatusChart.update();
            }

            function fetchData() {
                $('#loading').show();

                // Build data object with all filters
                let data = $('#filter-form').serialize() + '&' + $('#entries, #search').serialize();

                // Add chart filters if they exist
                if (currentPaymentFilter) {
                    data += '&payment_status_filter=' + currentPaymentFilter;
                }
                if (currentOrderFilter) {
                    data += '&order_status_filter=' + currentOrderFilter;
                }

                $.ajax({
                    url: FetchDataUrl,
                    type: 'GET',
                    data: data,
                    success: function (response) {
                        // Apply the sanitization to all relevant data sets from the server
                        response.dailyOrdersData = sanitizeData(response.dailyOrdersData);
                        response.paymentStatusData = sanitizeData(response.paymentStatusData);
                        response.orderStatusData = sanitizeData(response.orderStatusData);

                        $('#products_listing').html(response.tableHtml);
                        $('#pagination_footer').html(response.paginationHtml);

                        // Update the global data variables with the new, sanitized data
                        initialDailyOrdersData = response.dailyOrdersData;
                        initialPaymentStatusData = response.paymentStatusData;
                        initialOrderStatusData = response.orderStatusData;

                        updateCharts(response.dailyOrdersData, response.paymentStatusData, response.orderStatusData);
                        $('#loading').hide();
                    },
                    error: function (xhr, status, error) {
                        $('#loading').hide();
                        console.error('Error loading data:', error);
                        console.error('Response:', xhr.responseText);
                        alert('Error loading data. Please try again.');
                    }
                });
            }

            // Initialize charts with initial data (which is now sanitized)
            initCharts(initialDailyOrdersData, initialPaymentStatusData, initialOrderStatusData);

            // Event listeners for filters
            $('#payment_status, #order_status, #vendor_id').on('change', function () {
                // Clear chart filters when manual filters are applied
                currentPaymentFilter = null;
                currentOrderFilter = null;
                $('#chart-filter-indicator').text('');
                fetchData();
            });

            $('#entries, #search').on('input change', function () {
                // Clear chart filters when search/pagination changes
                currentPaymentFilter = null;
                currentOrderFilter = null;
                $('#chart-filter-indicator').text('');
                fetchData();
            });

            $('#reset_filters').on('click', function () {
                $('#filter-form')[0].reset();
                $('#vendor_id').val(null).trigger('change');
                $('#entries').val(10);
                $('#search').val('');

                // Reset date range
                var defaultStartDate = moment().startOfMonth();
                var defaultEndDate = moment().endOf("month");
                var format = $("#date-range-picker").data("format") || "YYYY-MM-DD";
                var formatValue = $("#date-range-picker").data("format-value");
                if (!formatValue) formatValue = "__from__ - __to__";
                var formattedValue = formatValue
                    .replace("__from__", defaultStartDate.format(format))
                    .replace("__to__", defaultEndDate.format(format));
                $("#date-range-picker").find("span").text(formattedValue);

                // Update the hidden inputs
                $('#start_date').val(defaultStartDate.format('YYYY-MM-DD'));
                $('#end_date').val(defaultEndDate.format('YYYY-MM-DD'));

                // Reset the date range picker
                $("#date-range-picker").data('daterangepicker').setStartDate(defaultStartDate);
                $("#date-range-picker").data('daterangepicker').setEndDate(defaultEndDate);

                // Clear chart filters
                currentPaymentFilter = null;
                currentOrderFilter = null;
                $('#chart-filter-indicator').text('');

                fetchData();
            });
        });
    </script>
@endpush