@extends('backend.layouts.app')
@section('backend_title', 'Admin Order List')

@section('backend_content')

    <div class="row">
        <!-- Card for Today's Sales -->
        <div class="col-md-3 mb-3">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Today's Orders</h5>
                    <p class="card-text fs-5 m-0 p-0">Qty: {{ $todaysOrder->count() }}</p>
                    <p class="card-text fs-5 m-0 p-0">Total: {{ $todaysOrderSammary }}</p>
                    <a href="#" class="btn btn-primary show-details-btn" data-range="today">See Details</a>
                    <a href="{{ route('todays_Reports_Download') }}" class="btn btn-secondary">Download Report</a>
                </div>
            </div>
        </div>

        <!-- Card for 7 Days Sales -->
        <div class="col-md-3 mb-3">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Last 7 Days Orders</h5>
                    <p class="card-text fs-5 m-0 p-0">Qty: {{ $sevenDaysOrder->count() }}</p>
                    <p class="card-text fs-5 m-0 p-0">Amount: {{ $sevenDaysOrderAmount }}</p>
                    <a href="#" class="btn btn-primary show-details-btn" data-range="7days">See Details</a>
                    <a href="{{ route('sevenDays_Reports_Download') }}" class="btn btn-secondary">Download Report</a>
                </div>
            </div>
        </div>

        <!-- Card for 15 Days Sales -->
        <div class="col-md-3 mb-3">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Last 15 Days Orders</h5>
                    <p class="card-text fs-5 m-0 p-0">Qty: {{ $halfMonthOrder->count() }}</p>
                    <p class="card-text fs-5 m-0 p-0">Amount: {{ $halfMonthOrderAmount }}</p>
                    <a href="#" class="btn btn-primary show-details-btn" data-range="15days">See Details</a>
                    <a href="{{ route('fifteenDays_Reports_Download') }}" class="btn btn-secondary">Download Report</a>
                </div>
            </div>
        </div>

        <!-- Card for 30 Days Sales -->
        <div class="col-md-3 mb-3">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Last 30 Days Orders</h5>
                    <p class="card-text fs-5 m-0 p-0">Qty: {{ $lastMonthOrder->count() }}</p>
                    <p class="card-text fs-5 m-0 p-0">Total: {{ $lastMonthOrderAmount }}</p>
                    <a href="#" class="btn btn-primary show-details-btn" data-range="30days">See Details</a>
                    <a href="{{ route('thirtyDays_Reports_Download') }}" class="btn btn-secondary">Download Report</a>
                </div>
            </div>
        </div>
    </div>

    <!-- Hidden content initially -->
    <div id="hidden-content" class="my-4">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Order Details</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>Sl No.</th>
                                <th>Order Number</th>
                                <th>Customer Name</th>
                                <th>Phone Number</th>
                                <th>Email</th>
                                <th>Order Date</th>
                                <th>Delivery Status</th>
                                <th>Payment Type</th>
                                <th>Amount</th>
                            </tr>
                        </thead>
                        <tbody id="order-data-body">
                            <!-- Data will be inserted here dynamically -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('backend_script')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Show today's orders by default on page load
            fetchOrderDetails('today');
        });

        document.querySelectorAll('.show-details-btn').forEach(button => {
            button.addEventListener('click', function(event) {
                event.preventDefault();
                const range = this.getAttribute('data-range');
                fetchOrderDetails(range);
            });
        });

        function fetchOrderDetails(range) {
            let orders = @json($orders);
            let filteredOrders = [];

            switch (range) {
                case 'today':
                    filteredOrders = @json($todaysOrder);
                    break;
                case '7days':
                    filteredOrders = @json($sevenDaysOrder);
                    break;
                case '15days':
                    filteredOrders = @json($halfMonthOrder);
                    break;
                case '30days':
                    filteredOrders = @json($lastMonthOrder);
                    break;
                default:
                    filteredOrders = @json($orders); // Fallback to all orders
                    break;
            }

            populateOrderTable(filteredOrders);
        }

        function populateOrderTable(orders) {
            const tableBody = document.getElementById('order-data-body');
            tableBody.innerHTML = '';
            if (orders.length > 0) {
                orders.forEach((order, index) => {
                    let row = document.createElement('tr');
                    row.innerHTML = `
                <td>${index + 1}</td>
                <td>${order.order_number}</td>
                <td>${order.users.name}</td>
                <td>${order.phone}</td>
                <td>${order.email}</td>
                <td>${order.order_date}</td>
                <td>
                    <div class="d-flex">
                        <h6 class="my-auto ${getDeliveryStatusClass(order)}">
                            ${getDeliveryStatusText(order)}
                        </h6>
                    </div>
                </td>
                <td>${order.payment_type}</td>
                <td>${order.amount}</td>
            `;
                    tableBody.appendChild(row);
                });
                document.getElementById('hidden-content').style.display = 'block';
            } else {
                tableBody.innerHTML = '<tr><td colspan="9" class="text-center">No orders found</td></tr>';
                document.getElementById('hidden-content').style.display = 'block';
            }
        }

        function getDeliveryStatusClass(order) {
            if (order.delivered_date && order.processing_data && order.shipped_date !== null) {
                return 'text-success';
            } else if (order.processing_data !== null && order.shipped_date == null) {
                return 'text-primary';
            } else if (order.processing_data !== null && order.delivered_date == null) {
                return 'text-secondary';
            } else if (order.confirmed_date !== null) {
                return 'text-warning';
            } else {
                return 'text-danger';
            }
        }

        function getDeliveryStatusText(order) {
            if (order.delivered_date && order.processing_data && order.shipped_date !== null) {
                return 'Delivered';
            } else if (order.processing_data && order.confirmed_date !== null && order.shipped_date == null) {
                return 'Processing';
            } else if (order.processing_data && order.shipped_date !== null && order.delivered_date == null) {
                return 'On The Way';
            } else {
                return 'Order Placed';
            }
        }
    </script>
@endsection