@extends('admin.layouts.app')

@section('title', 'Monthly Delivered Orders')

@section('content')
<div class="mb-6">
    <h3 class="text-xl font-bold text-gray-900">Monthly Delivered Orders</h3>
</div>

<!-- Filter Form -->
<div class="mb-6 bg-white p-6 rounded-lg shadow">
    <form method="GET" action="{{ route('admin.orders.monthly-delivered') }}" class="grid grid-cols-1 md:grid-cols-4 gap-4">
        <div>
            <label for="month" class="block text-sm font-medium text-gray-700 mb-1">Month</label>
            <select name="month" id="month" class="w-full rounded-md border-gray-300 shadow-sm focus:border-orange-500 focus:ring-orange-500">
                @for($i = 1; $i <= 12; $i++)
                    <option value="{{ $i }}" {{ $month == $i ? 'selected' : '' }}>
                        {{ \Carbon\Carbon::create()->month((int) $i)->format('F') }}
                    </option>
                @endfor
            </select>
        </div>

        <div>
            <label for="year" class="block text-sm font-medium text-gray-700 mb-1">Year</label>
            <select name="year" id="year" class="w-full rounded-md border-gray-300 shadow-sm focus:border-orange-500 focus:ring-orange-500">
                @foreach($availableYears as $availableYear)
                    <option value="{{ $availableYear }}" {{ $year == $availableYear ? 'selected' : '' }}>
                        {{ $availableYear }}
                    </option>
                @endforeach
            </select>
        </div>

        <div class="flex items-end">
            <button type="submit" class="px-4 py-2 bg-orange-500 text-white rounded hover:bg-orange-600 transition">
                Filter
            </button>
        </div>

        <div class="flex items-end">
            <a href="{{ route('admin.orders.monthly-delivered') }}" class="px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600 transition ml-2">
                Reset
            </a>
        </div>
    </form>
</div>

<div class="bg-white rounded-lg shadow overflow-hidden">
    <div class="p-4 border-b border-gray-200 flex justify-between items-center">
        <h4 class="text-lg font-semibold text-gray-800">
            Delivered Orders for {{ \Carbon\Carbon::create()->month((int) $month)->format('F') }} {{ $year }}
            <span class="text-gray-600 text-base">({{ $orders->count() }} orders)</span>
        </h4>
    </div>

    @if($orders->count() > 0)
        <table class="w-full">
            <thead class="bg-gray-100 border-b border-gray-200">
                <tr>
                    <th class="px-6 py-3 text-left text-sm font-semibold text-gray-900">Order #</th>
                    <th class="px-6 py-3 text-left text-sm font-semibold text-gray-900">Customer</th>
                    <th class="px-6 py-3 text-left text-sm font-semibold text-gray-900">Email</th>
                    <th class="px-6 py-3 text-left text-sm font-semibold text-gray-900">Amount</th>
                    <th class="px-6 py-3 text-left text-sm font-semibold text-gray-900">Status</th>
                    <th class="px-6 py-3 text-left text-sm font-semibold text-gray-900">Date</th>
                    <th class="px-6 py-3 text-right text-sm font-semibold text-gray-900">Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($orders as $order)
                    <tr class="border-b border-gray-200 hover:bg-gray-50">
                        <td class="px-6 py-4 text-sm text-gray-900">{{ $order->order_number }}</td>
                        <td class="px-6 py-4 text-sm text-gray-900">{{ $order->customer_name }}</td>
                        <td class="px-6 py-4 text-sm text-gray-600">{{ $order->customer_email }}</td>
                        <td class="px-6 py-4 text-sm text-gray-900">{{ format_price($order->total_amount) }}</td>
                        <td class="px-6 py-4 text-sm">
                            <span class="px-3 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-800">
                                {{ ucfirst($order->status) }}
                            </span>
                        </td>
                        <td class="px-6 py-4 text-sm text-gray-600">{{ $order->created_at->format('d M Y') }}</td>
                        <td class="px-6 py-4 text-right">
                            <a href="{{ route('admin.orders.show', $order) }}" class="text-blue-600 hover:text-blue-900">View</a>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    @else
        <div class="p-12 text-center">
            <div class="text-gray-400 mb-4">
                <svg class="mx-auto h-16 w-16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                </svg>
            </div>
            <h3 class="text-lg font-medium text-gray-900 mb-2">No Delivered Orders</h3>
            <p class="text-gray-500">No delivered orders found for {{ \Carbon\Carbon::create()->month((int) $month)->format('F') }} {{ $year }}</p>
        </div>
    @endif
</div>

<div class="mt-6 bg-white p-4 rounded-lg shadow">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="flex justify-between items-center">
            <h4 class="text-lg font-semibold text-gray-800">Monthly Total ({{ \Carbon\Carbon::create()->month((int) $month)->format('F') }}):</h4>
            <p class="text-xl font-bold text-green-600">{{ format_price($totalAmount) }}</p>
        </div>
        <div class="flex justify-between items-center">
            <h4 class="text-lg font-semibold text-gray-800">Yearly Total ({{ $year }}):</h4>
            <p class="text-xl font-bold text-orange-600">{{ format_price($yearTotalAmount) }}</p>
        </div>
    </div>
</div>

<div class="mt-6">
    {{ $orders->links() }}
</div>
@endsection