@extends('layouts.admin')

@section('title', 'Orders')

@section('content')
<div class="admin-page-header">
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <h1 class="admin-page-title">Orders Management</h1>
            <p class="admin-page-subtitle">Manage and track customer orders</p>
        </div>
        <div class="d-flex gap-2">
            <button class="btn btn-outline-primary" onclick="window.print()">
                <i class="bi bi-printer"></i> Print
            </button>
            <button class="btn btn-primary" onclick="exportOrders()">
                <i class="bi bi-download"></i> Export
            </button>
        </div>
    </div>
</div>

<div class="admin-content" x-data="ordersManager()">
    <!-- KPI Cards -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="admin-stat-card">
                <div class="admin-stat-icon bg-primary">
                    <i class="bi bi-cart-check"></i>
                </div>
                <div class="admin-stat-content">
                    <h3 x-text="stats.total">{{ $orders->total() }}</h3>
                    <p>Total Orders</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="admin-stat-card">
                <div class="admin-stat-icon bg-success">
                    <i class="bi bi-check-circle"></i>
                </div>
                <div class="admin-stat-content">
                    <h3 x-text="stats.completed">{{ $orders->where('status', 'completed')->count() }}</h3>
                    <p>Completed</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="admin-stat-card">
                <div class="admin-stat-icon bg-warning">
                    <i class="bi bi-clock"></i>
                </div>
                <div class="admin-stat-content">
                    <h3 x-text="stats.pending">{{ $orders->where('status', 'pending')->count() }}</h3>
                    <p>Pending</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="admin-stat-card">
                <div class="admin-stat-icon bg-info">
                    <i class="bi bi-currency-rupee"></i>
                </div>
                <div class="admin-stat-content">
                    <h3>₹<span x-text="stats.revenue">{{ number_format($orders->sum('total_amount'), 2) }}</span></h3>
                    <p>Total Revenue</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters and Search -->
    <div class="admin-card mb-4">
        <div class="admin-card-body">
            <div class="row g-3">
                <div class="col-md-3">
                    <label class="form-label">Search Orders</label>
                    <div class="input-group">
                        <span class="input-group-text"><i class="bi bi-search"></i></span>
                        <input type="text" class="form-control" placeholder="Order ID, Customer name..." x-model="filters.search" @input="filterOrders">
                    </div>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Status</label>
                    <select class="form-select" x-model="filters.status" @change="filterOrders">
                        <option value="">All Status</option>
                        <option value="pending">Pending</option>
                        <option value="processing">Processing</option>
                        <option value="shipped">Shipped</option>
                        <option value="delivered">Delivered</option>
                        <option value="completed">Completed</option>
                        <option value="cancelled">Cancelled</option>
                        <option value="refunded">Refunded</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Payment Status</label>
                    <select class="form-select" x-model="filters.payment_status" @change="filterOrders">
                        <option value="">All Payments</option>
                        <option value="pending">Pending</option>
                        <option value="paid">Paid</option>
                        <option value="failed">Failed</option>
                        <option value="refunded">Refunded</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Date From</label>
                    <input type="date" class="form-control" x-model="filters.date_from" @change="filterOrders">
                </div>
                <div class="col-md-2">
                    <label class="form-label">Date To</label>
                    <input type="date" class="form-control" x-model="filters.date_to" @change="filterOrders">
                </div>
                <div class="col-md-1">
                    <label class="form-label">&nbsp;</label>
                    <button class="btn btn-outline-secondary w-100" @click="resetFilters">
                        <i class="bi bi-arrow-clockwise"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Status Tabs -->
    <div class="admin-card">
        <div class="admin-card-header">
            <ul class="nav nav-tabs admin-nav-tabs" role="tablist">
                <li class="nav-item">
                    <button class="nav-link" :class="activeTab === 'all' ? 'active' : ''" @click="setActiveTab('all')">
                        All Orders <span class="badge bg-secondary ms-1" x-text="stats.total">{{ $orders->total() }}</span>
                    </button>
                </li>
                <li class="nav-item">
                    <button class="nav-link" :class="activeTab === 'pending' ? 'active' : ''" @click="setActiveTab('pending')">
                        Pending <span class="badge bg-warning ms-1" x-text="stats.pending">{{ $orders->where('status', 'pending')->count() }}</span>
                    </button>
                </li>
                <li class="nav-item">
                    <button class="nav-link" :class="activeTab === 'processing' ? 'active' : ''" @click="setActiveTab('processing')">
                        Processing <span class="badge bg-info ms-1" x-text="stats.processing">{{ $orders->where('status', 'processing')->count() }}</span>
                    </button>
                </li>
                <li class="nav-item">
                    <button class="nav-link" :class="activeTab === 'shipped' ? 'active' : ''" @click="setActiveTab('shipped')">
                        Shipped <span class="badge bg-primary ms-1" x-text="stats.shipped">{{ $orders->where('status', 'shipped')->count() }}</span>
                    </button>
                </li>
                <li class="nav-item">
                    <button class="nav-link" :class="activeTab === 'completed' ? 'active' : ''" @click="setActiveTab('completed')">
                        Completed <span class="badge bg-success ms-1" x-text="stats.completed">{{ $orders->where('status', 'completed')->count() }}</span>
                    </button>
                </li>
            </ul>
        </div>

        <div class="admin-card-body">
            <!-- Orders Table -->
            <div class="table-responsive">
                <table class="table admin-table">
                    <thead>
                        <tr>
                            <th>
                                <input type="checkbox" class="form-check-input" @change="toggleSelectAll" :checked="selectedOrders.length === filteredOrders.length && filteredOrders.length > 0">
                            </th>
                            <th>Order ID</th>
                            <th>Customer</th>
                            <th>Date</th>
                            <th>Items</th>
                            <th>Amount</th>
                            <th>Payment</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <template x-for="order in paginatedOrders" :key="order.id">
                            <tr>
                                <td>
                                    <input type="checkbox" class="form-check-input" :value="order.id" x-model="selectedOrders">
                                </td>
                                <td>
                                    <span class="fw-bold text-primary" x-text="'#' + order.order_number"></span>
                                </td>
                                <td>
                                    <div>
                                        <div class="fw-medium" x-text="order.user ? order.user.name : 'Guest'"></div>
                                        <small class="text-muted" x-text="order.user ? order.user.email : order.guest_email"></small>
                                    </div>
                                </td>
                                <td>
                                    <div x-text="formatDate(order.created_at)"></div>
                                    <small class="text-muted" x-text="formatTime(order.created_at)"></small>
                                </td>
                                <td>
                                    <span x-text="order.items_count + ' items'"></span>
                                </td>
                                <td>
                                    <span class="fw-bold" x-text="'₹' + parseFloat(order.total_amount).toFixed(2)"></span>
                                </td>
                                <td>
                                    <span class="badge" :class="getPaymentStatusClass(order.payment_status)" x-text="order.payment_status"></span>
                                </td>
                                <td>
                                    <select class="form-select form-select-sm" :value="order.status" @change="updateOrderStatus(order.id, $event.target.value)">
                                        <option value="pending">Pending</option>
                                        <option value="processing">Processing</option>
                                        <option value="shipped">Shipped</option>
                                        <option value="delivered">Delivered</option>
                                        <option value="completed">Completed</option>
                                        <option value="cancelled">Cancelled</option>
                                        <option value="refunded">Refunded</option>
                                    </select>
                                </td>
                                <td>
                                    <div class="btn-group btn-group-sm">
                                        <button class="btn btn-outline-primary" @click="viewOrder(order.id)" title="View Details">
                                            <i class="bi bi-eye"></i>
                                        </button>
                                        <button class="btn btn-outline-secondary" @click="printOrder(order.id)" title="Print">
                                            <i class="bi bi-printer"></i>
                                        </button>
                                        <button class="btn btn-outline-info" @click="downloadInvoice(order.id)" title="Download Invoice">
                                            <i class="bi bi-download"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>

            <!-- Pagination -->
            <div class="d-flex justify-content-between align-items-center mt-3">
                <div>
                    <span class="text-muted">
                        Showing <span x-text="((currentPage - 1) * itemsPerPage) + 1"></span> to 
                        <span x-text="Math.min(currentPage * itemsPerPage, filteredOrders.length)"></span> of 
                        <span x-text="filteredOrders.length"></span> orders
                    </span>
                </div>
                <nav>
                    <ul class="pagination pagination-sm mb-0">
                        <li class="page-item" :class="currentPage === 1 ? 'disabled' : ''">
                            <button class="page-link" @click="currentPage = Math.max(1, currentPage - 1)">Previous</button>
                        </li>
                        <template x-for="page in totalPages" :key="page">
                            <li class="page-item" :class="currentPage === page ? 'active' : ''">
                                <button class="page-link" @click="currentPage = page" x-text="page"></button>
                            </li>
                        </template>
                        <li class="page-item" :class="currentPage === totalPages ? 'disabled' : ''">
                            <button class="page-link" @click="currentPage = Math.min(totalPages, currentPage + 1)">Next</button>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>

    <!-- Bulk Actions -->
    <div class="admin-card mt-3" x-show="selectedOrders.length > 0">
        <div class="admin-card-body">
            <div class="d-flex align-items-center gap-3">
                <span class="fw-medium">
                    <span x-text="selectedOrders.length"></span> orders selected
                </span>
                <div class="btn-group">
                    <button class="btn btn-sm btn-outline-primary" @click="bulkUpdateStatus('processing')">
                        Mark as Processing
                    </button>
                    <button class="btn btn-sm btn-outline-success" @click="bulkUpdateStatus('completed')">
                        Mark as Completed
                    </button>
                    <button class="btn btn-sm btn-outline-secondary" @click="bulkPrint()">
                        Print Selected
                    </button>
                    <button class="btn btn-sm btn-outline-info" @click="bulkExport()">
                        Export Selected
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Order Details Modal -->
<div class="modal fade mt-5" id="orderDetailsModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Order Details</h5>
                <button type="button" class="btn p-0 text-white" data-bs-dismiss="modal"><i class="bi-x-lg"></i></button>
            </div>
            <div class="modal-body" id="orderDetailsContent">
                <!-- Order details will be loaded here -->
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
.admin-stat-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border: 1px solid #e9ecef;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.admin-stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
}

.admin-stat-content h3 {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: #2c3e50;
}

.admin-stat-content p {
    margin: 0;
    color: #6c757d;
    font-size: 0.875rem;
}

.admin-nav-tabs {
    border-bottom: 2px solid #e9ecef;
}

.admin-nav-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    color: #6c757d;
    font-weight: 500;
    padding: 1rem 1.5rem;
}

.admin-nav-tabs .nav-link:hover {
    border-color: #dee2e6;
    color: #495057;
}

.admin-nav-tabs .nav-link.active {
    color: #0d6efd;
    border-color: #0d6efd;
    background: none;
}

.admin-table th {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
    color: #495057;
}

.admin-table td {
    vertical-align: middle;
    border-bottom: 1px solid #e9ecef;
}
</style>
@endpush

@push('scripts')
<script>
function ordersManager() {
    return {
        orders: @json($orders->items()),
        filteredOrders: @json($orders->items()),
        selectedOrders: [],
        activeTab: 'all',
        currentPage: 1,
        itemsPerPage: 10,
        filters: {
            search: '',
            status: '',
            payment_status: '',
            date_from: '',
            date_to: ''
        },
        stats: {
            total: {{ $orders->total() }},
            pending: {{ $orders->where('status', 'pending')->count() }},
            processing: {{ $orders->where('status', 'processing')->count() }},
            shipped: {{ $orders->where('status', 'shipped')->count() }},
            completed: {{ $orders->where('status', 'completed')->count() }},
            revenue: {{ $orders->sum('total_amount') }}
        },

        get paginatedOrders() {
            const start = (this.currentPage - 1) * this.itemsPerPage;
            const end = start + this.itemsPerPage;
            return this.filteredOrders.slice(start, end);
        },

        get totalPages() {
            return Math.ceil(this.filteredOrders.length / this.itemsPerPage);
        },

        setActiveTab(tab) {
            this.activeTab = tab;
            this.filters.status = tab === 'all' ? '' : tab;
            this.filterOrders();
        },

        filterOrders() {
            this.filteredOrders = this.orders.filter(order => {
                let matches = true;

                if (this.filters.search) {
                    const search = this.filters.search.toLowerCase();
                    matches = matches && (
                        order.order_number.toLowerCase().includes(search) ||
                        (order.user && order.user.name.toLowerCase().includes(search)) ||
                        (order.user && order.user.email.toLowerCase().includes(search)) ||
                        (order.guest_email && order.guest_email.toLowerCase().includes(search))
                    );
                }

                if (this.filters.status) {
                    matches = matches && order.status === this.filters.status;
                }

                if (this.filters.payment_status) {
                    matches = matches && order.payment_status === this.filters.payment_status;
                }

                if (this.filters.date_from) {
                    matches = matches && new Date(order.created_at) >= new Date(this.filters.date_from);
                }

                if (this.filters.date_to) {
                    matches = matches && new Date(order.created_at) <= new Date(this.filters.date_to);
                }

                return matches;
            });

            this.currentPage = 1;
        },

        resetFilters() {
            this.filters = {
                search: '',
                status: '',
                payment_status: '',
                date_from: '',
                date_to: ''
            };
            this.activeTab = 'all';
            this.filterOrders();
        },

        toggleSelectAll() {
            if (this.selectedOrders.length === this.filteredOrders.length) {
                this.selectedOrders = [];
            } else {
                this.selectedOrders = this.filteredOrders.map(order => order.id);
            }
        },

        formatDate(dateString) {
            return new Date(dateString).toLocaleDateString('en-IN');
        },

        formatTime(dateString) {
            return new Date(dateString).toLocaleTimeString('en-IN', { 
                hour: '2-digit', 
                minute: '2-digit' 
            });
        },

        getPaymentStatusClass(status) {
            const classes = {
                'pending': 'bg-warning',
                'paid': 'bg-success',
                'failed': 'bg-danger',
                'refunded': 'bg-info'
            };
            return classes[status] || 'bg-secondary';
        },

        async updateOrderStatus(orderId, newStatus) {
            try {
                const response = await fetch(`/admin/orders/${orderId}/status`, {
                    method: 'PATCH',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    },
                    body: JSON.stringify({ status: newStatus })
                });

                if (response.ok) {
                    const order = this.orders.find(o => o.id === orderId);
                    if (order) {
                        order.status = newStatus;
                    }
                    this.filterOrders();
                } else {
                    alert('Failed to update order status');
                }
            } catch (error) {
                console.error('Error updating order status:', error);
                alert('Error updating order status');
            }
        },

        viewOrder(orderId) {
            // Implementation for viewing order details
            window.location.href = `/admin/orders/${orderId}`;
        },

        printOrder(orderId) {
            // Implementation for printing order
            window.open(`/admin/orders/${orderId}/print`, '_blank');
        },

        downloadInvoice(orderId) {
            // Implementation for downloading invoice
            window.open(`/admin/orders/${orderId}/invoice`, '_blank');
        },

        bulkUpdateStatus(status) {
            if (this.selectedOrders.length === 0) return;
            
            // Implementation for bulk status update
            console.log('Bulk update status:', status, this.selectedOrders);
        },

        bulkPrint() {
            if (this.selectedOrders.length === 0) return;
            
            // Implementation for bulk printing
            console.log('Bulk print:', this.selectedOrders);
        },

        bulkExport() {
            if (this.selectedOrders.length === 0) return;
            
            // Implementation for bulk export
            console.log('Bulk export:', this.selectedOrders);
        },

        getImageUrl(imagePath) {
            if (!imagePath) {
                return '/images/placeholder.png';
            }
            // If already a full URL, return as-is
            if (imagePath.startsWith('http://') || imagePath.startsWith('https://') || imagePath.startsWith('/')) {
                return imagePath;
            }
            // Otherwise, prepend /storage/
            return '/storage/' + imagePath;
        },
    };
}
</script>
@endpush