@extends('admin.layouts.app')

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

@section('content')
<div class="mb-6 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
    <div class="relative flex-1 max-w-md">
        <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-500 text-sm"></i>
        <input type="text" id="ordersSearch" placeholder="Search order, customer, email, phone" 
               class="w-full pl-10 pr-4 py-2.5 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg text-sm text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent">
    </div>
    <div class="flex items-center gap-3">
        <button type="button" id="filterBtn" 
                class="inline-flex items-center px-4 py-2.5 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 text-gray-700 dark:text-gray-300 text-sm font-medium rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
            <i class="fas fa-filter mr-2"></i>Filter
        </button>
    </div>
</div>

<div id="filterPanel" class="mb-6 bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-lg p-4 hidden">
    <form id="filterForm" class="space-y-4">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
            <input type="number" name="user_id" value="{{ request('user_id') }}" 
                   placeholder="User ID"
                   class="py-2 px-4 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg text-sm text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent">

            <select name="status" 
                    class="py-2 px-4 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent">
                <option value="">All Statuses</option>
                <option value="pending">Pending</option>
                <option value="processing">Processing</option>
                <option value="shipped">Shipped</option>
                <option value="delivered">Delivered</option>
                <option value="cancelled">Cancelled</option>
            </select>

            <input type="date" name="date_from" value="{{ request('date_from') }}"
                   class="py-2 px-4 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent">

            <input type="date" name="date_to" value="{{ request('date_to') }}"
                   class="py-2 px-4 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent">
        </div>

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

<div class="bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-lg overflow-hidden">
    <div class="overflow-x-auto">
        <table id="ordersTable" class="min-w-full divide-y divide-gray-200 dark:divide-gray-800">
            <thead class="bg-gray-50 dark:bg-gray-900">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Order #</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">User</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Customer</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Total</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Status</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Date</th>
                    <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Actions</th>
                </tr>
            </thead>
            <tbody class="bg-white dark:bg-gray-950 divide-y divide-gray-200 dark:divide-gray-800"></tbody>
        </table>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>

@include('admin.partials.datatables-styles')

<script>
$(document).ready(function() {
    var searchDelay;
    var table = $('#ordersTable').DataTable({
        responsive: true,
        processing: true,
        serverSide: true,
        searchDelay: 200,
        ajax: {
            url: "{{ route('admin.orders.index') }}",
            type: 'GET',
            dataSrc: function(data) {
                return data.data || [];
            },
            data: function(d) {
                d.user_id = $('input[name="user_id"]').val();
                d.status = $('select[name="status"]').val();
                d.date_from = $('input[name="date_from"]').val();
                d.date_to = $('input[name="date_to"]').val();
            }
        },
        columns: [
            { data: 'order_number', name: 'order_number' },
            { data: 'user_id', name: 'user_id' },
            { data: 'customer', name: 'customer_name' },
            { data: 'total', name: 'total' },
            { data: 'status', name: 'status' },
            { data: 'created_at', name: 'created_at' },
            { data: 'actions', orderable: false, searchable: false }
        ],
        pageLength: 25,
        lengthMenu: [[25, 50, 100, 200], [25, 50, 100, 200]],
        order: [[5, 'desc']],
        columnDefs: [
            { className: 'text-left', targets: [0, 1, 2, 3, 4, 5] },
            { className: 'text-right', targets: [6] }
        ],
        language: {
            lengthMenu: 'Show _MENU_',
            info: 'Showing _START_ to _END_ of _TOTAL_',
            infoEmpty: 'Showing 0 to 0 of 0',
            infoFiltered: '(filtered from _MAX_ total)',
            paginate: {
                first: '«',
                last: '»',
                next: '›',
                previous: '‹'
            },
            emptyTable: 'No orders available',
            processing: 'Loading...'
        },
        dom: '<"flex justify-between items-center mb-4"<"flex items-center gap-2"l><"flex items-center gap-2"f>>rt<"flex justify-between items-center mt-4"<"text-sm text-gray-600 dark:text-gray-400"i><"flex items-center gap-1"p>>',
        pagingType: 'simple_numbers'
    });

    $('#ordersSearch').on('keyup', function() {
        clearTimeout(searchDelay);
        var searchTerm = this.value;
        searchDelay = setTimeout(function() {
            table.search(searchTerm).draw();
        }, 200);
    });

    $('input[name="user_id"], select[name="status"], input[name="date_from"], input[name="date_to"]').on('change', function() {
        table.ajax.reload();
    });

    $('#filterBtn').on('click', function() {
        $('#filterPanel').toggleClass('hidden');
    });

    $('#clearFilters').on('click', function() {
        $('input[name="user_id"]').val('');
        $('select[name="status"]').val('');
        $('input[name="date_from"]').val('');
        $('input[name="date_to"]').val('');
        table.search('').draw();
        $('#ordersSearch').val('');
        table.ajax.reload();
    });
});
</script>
@endsection