@extends('admin.layouts.app')

@section('title', 'Orders')
@section('page-title', 'Orders')

@section('breadcrumbs')
    <li class="breadcrumb-item active" aria-current="page">Orders</li>
@endsection

@section('page-actions')
    <button type="button" id="filterBtn" 
            class="inline-flex items-center px-3 py-2 border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 text-slate-700 dark:text-slate-300 text-xs font-semibold rounded-lg shadow-soft hover:bg-slate-50 dark:hover:bg-slate-800 transition">
        <i class="bi bi-funnel mr-1.5 text-slate-500"></i>Filter
    </button>
    <x-admin.button :href="route('admin.orders.create')" icon="bi-plus">Add Manual Order</x-admin.button>
@endsection

@section('content')
<!-- Search Panel -->
<div class="mb-6 bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-2xl p-4 shadow-soft">
    <div class="max-w-md">
        <x-admin.search-input id="ordersSearch" placeholder="Search order, customer, email, phone" />
    </div>
</div>

<!-- Filter Panel (Hidden by default) -->
<div id="filterPanel" class="mb-6 bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-2xl p-5 shadow-soft hidden">
    <form id="filterForm" class="space-y-4">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <div>
                <label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">User ID</label>
                <input type="number" name="user_id" placeholder="User ID"
                       class="w-full py-2 px-3 bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-lg text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-emerald-500">
            </div>

            <div>
                <label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">Status</label>
                <select name="status" class="w-full py-2 px-3 bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-lg text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-emerald-500">
                    <option value="">All Statuses</option>
                    <option value="pending">Pending</option>
                    <option value="confirmed">Confirmed</option>
                    <option value="processing">Processing</option>
                    <option value="delivering">Delivering</option>
                    <option value="completed">Completed</option>
                    <option value="cancelled">Cancelled</option>
                    <option value="returned">Returned</option>
                </select>
            </div>

            <div>
                <label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">Date From</label>
                <input type="date" name="date_from" class="w-full py-2 px-3 bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-lg text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-emerald-500">
            </div>

            <div>
                <label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">Date To</label>
                <input type="date" name="date_to" class="w-full py-2 px-3 bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-lg text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-emerald-500">
            </div>
        </div>

        <div class="flex items-center gap-3 pt-2">
            <button type="button" id="clearFilters"
                    class="px-4 py-2 bg-slate-100 dark:bg-slate-900 text-slate-700 dark:text-slate-300 text-xs font-semibold rounded-lg hover:bg-slate-200 dark:hover:bg-slate-800 transition">
                Clear Filters
            </button>
        </div>
    </form>
</div>

<!-- Reusable DataTable Component -->
<x-datatable 
    id="ordersTable" 
    :ajax-url="route('admin.orders.index')" 
    :columns="[
        ['data' => 'order_number', 'orderable' => true],
        ['data' => 'user_id', 'orderable' => true],
        ['data' => 'customer', 'orderable' => true],
        ['data' => 'total', 'orderable' => true],
        ['data' => 'status', 'orderable' => true],
        ['data' => 'created_at', 'orderable' => true],
        ['data' => 'actions', 'orderable' => false, 'searchable' => false]
    ]"
    :order="[[5, 'desc']]"
    :column-defs="[
        ['orderable' => false, 'targets' => [6]],
        ['className' => 'text-left align-middle', 'targets' => [0, 1, 2, 3, 4, 5]],
        ['className' => 'text-right align-middle', 'targets' => [6]]
    ]"
    search-id="ordersSearch"
    filter-form-id="filterForm"
    clear-filters-id="clearFilters"
    :padding="false"
>
    <x-slot name="thead">
        <th>Order #</th>
        <th>User</th>
        <th>Customer</th>
        <th>Total</th>
        <th>Status</th>
        <th>Date</th>
        <th class="no-export text-right">Actions</th>
    </x-slot>
</x-datatable>

<script>
$(document).ready(function() {
    // Filter button toggle
    $('#filterBtn').on('click', function() {
        $('#filterPanel').toggleClass('hidden');
    });
});
</script>
@endsection