@extends('layouts.admin')

@section('title', 'Admin Expenses')

@section('content')
<div class="min-h-screen bg-slate-50">
    <div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">

        {{-- Header --}}
        <div class="mb-6 flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
            <div>
                <h1 class="text-2xl font-bold text-slate-800 md:text-3xl">Admin Expenses</h1>
                <p class="mt-1 text-sm text-slate-500">
                    অ্যাডমিন খরচগুলো সুন্দরভাবে ম্যানেজ করুন, খুঁজুন, ফিল্টার করুন এবং ট্র্যাক করুন।
                </p>
            </div>

            <a href="{{ route('admin-expenses.create') }}"
               class="inline-flex items-center justify-center rounded-2xl bg-blue-600 px-5 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-blue-700 hover:shadow-lg">
                <span class="mr-2 text-base">＋</span>
                Add Expense
            </a>
        </div>

        {{-- Success Message --}}
        @if(session('success'))
            <div class="mb-6 rounded-2xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm font-medium text-emerald-700 shadow-sm">
                {{ session('success') }}
            </div>
        @endif

        {{-- Summary Cards --}}
        <div class="mb-6 grid grid-cols-1 gap-4 md:grid-cols-3">
            <div class="rounded-3xl border border-slate-200 bg-white p-5 shadow-sm">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-medium text-slate-500">Total Expense</p>
                        <h3 class="mt-2 text-2xl font-bold text-slate-800">
                            ৳ {{ number_format($totalExpense ?? 0, 2) }}
                        </h3>
                    </div>
                    <div class="rounded-2xl bg-rose-50 p-3 text-xl text-rose-600">
                        💸
                    </div>
                </div>
            </div>

            <div class="rounded-3xl border border-slate-200 bg-white p-5 shadow-sm">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-medium text-slate-500">This Month</p>
                        <h3 class="mt-2 text-2xl font-bold text-slate-800">
                            ৳ {{ number_format($thisMonthExpense ?? 0, 2) }}
                        </h3>
                    </div>
                    <div class="rounded-2xl bg-amber-50 p-3 text-xl text-amber-600">
                        📅
                    </div>
                </div>
            </div>

            <div class="rounded-3xl border border-slate-200 bg-white p-5 shadow-sm">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-medium text-slate-500">Today</p>
                        <h3 class="mt-2 text-2xl font-bold text-slate-800">
                            ৳ {{ number_format($todayExpense ?? 0, 2) }}
                        </h3>
                    </div>
                    <div class="rounded-2xl bg-emerald-50 p-3 text-xl text-emerald-600">
                        ✅
                    </div>
                </div>
            </div>
        </div>

        {{-- Search + Filter --}}
        <div class="mb-6 rounded-3xl border border-slate-200 bg-white p-4 shadow-sm">
            <form method="GET" action="{{ route('admin-expenses.index') }}" class="grid grid-cols-1 gap-4 md:grid-cols-4">
                <div class="md:col-span-2">
                    <label class="mb-2 block text-sm font-medium text-slate-600">Search</label>
                    <input type="text"
                           name="search"
                           value="{{ request('search') }}"
                           placeholder="Search by title..."
                           class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm text-slate-700 outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-100">
                </div>

                <div>
                    <label class="mb-2 block text-sm font-medium text-slate-600">From Date</label>
                    <input type="date"
                           name="from_date"
                           value="{{ request('from_date') }}"
                           class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm text-slate-700 outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-100">
                </div>

                <div>
                    <label class="mb-2 block text-sm font-medium text-slate-600">To Date</label>
                    <input type="date"
                           name="to_date"
                           value="{{ request('to_date') }}"
                           class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm text-slate-700 outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-100">
                </div>

                <div class="md:col-span-4 flex flex-wrap items-center gap-3 pt-1">
                    <button type="submit"
                            class="inline-flex items-center rounded-2xl bg-blue-600 px-5 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-blue-700">
                        🔍 Search
                    </button>

                    <a href="{{ route('admin-expenses.index') }}"
                       class="inline-flex items-center rounded-2xl border border-slate-300 bg-white px-5 py-3 text-sm font-semibold text-slate-700 transition hover:bg-slate-50">
                        Reset
                    </a>
                </div>
            </form>
        </div>

        {{-- Table Card --}}
        <div class="overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-sm">
            <div class="border-b border-slate-200 px-6 py-4">
                <div class="flex items-center justify-between">
                    <div>
                        <h2 class="text-lg font-semibold text-slate-800">Expense List</h2>
                        <p class="text-sm text-slate-500">
                            মোট {{ $expenses->total() }} টি expense পাওয়া গেছে
                        </p>
                    </div>
                </div>
            </div>

            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-slate-200">
                    <thead class="bg-slate-100">
                        <tr>
                            <th class="whitespace-nowrap px-6 py-4 text-left text-xs font-bold uppercase tracking-wider text-slate-600">ID</th>
                            <th class="whitespace-nowrap px-6 py-4 text-left text-xs font-bold uppercase tracking-wider text-slate-600">Title</th>
                            <th class="whitespace-nowrap px-6 py-4 text-left text-xs font-bold uppercase tracking-wider text-slate-600">Amount</th>
                            <th class="whitespace-nowrap px-6 py-4 text-left text-xs font-bold uppercase tracking-wider text-slate-600">Created At</th>
                            <th class="whitespace-nowrap px-6 py-4 text-center text-xs font-bold uppercase tracking-wider text-slate-600">Actions</th>
                        </tr>
                    </thead>

                    <tbody class="divide-y divide-slate-100 bg-white">
                        @forelse($expenses as $exp)
                            <tr class="transition hover:bg-slate-50">
                                <td class="whitespace-nowrap px-6 py-4 text-sm font-medium text-slate-700">
                                    #{{ $exp->id }}
                                </td>

                                <td class="px-6 py-4">
                                    <div class="font-semibold text-slate-800">{{ $exp->title }}</div>
                                </td>

                                <td class="whitespace-nowrap px-6 py-4 text-sm font-bold text-emerald-600">
                                    ৳ {{ number_format($exp->amount, 2) }}
                                </td>

                                <td class="whitespace-nowrap px-6 py-4 text-sm text-slate-500">
                                    {{ $exp->created_at?->format('d M Y, h:i A') }}
                                </td>

                                <td class="whitespace-nowrap px-6 py-4">
                                    <div class="flex items-center justify-center gap-2">
                                        <a href="{{ route('admin-expenses.edit', $exp) }}"
                                           class="inline-flex items-center rounded-xl border border-amber-200 bg-amber-50 px-4 py-2 text-sm font-semibold text-amber-700 transition hover:bg-amber-100">
                                            ✏ Edit
                                        </a>

                                        <form method="POST"
                                              action="{{ route('admin-expenses.destroy', $exp) }}"
                                              class="delete-expense-form inline">
                                            @csrf
                                            @method('DELETE')

                                            <button type="submit"
                                                    class="inline-flex items-center rounded-xl border border-rose-200 bg-rose-50 px-4 py-2 text-sm font-semibold text-rose-700 transition hover:bg-rose-100">
                                                🗑 Delete
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="px-6 py-12 text-center">
                                    <div class="flex flex-col items-center justify-center">
                                        <div class="mb-3 rounded-full bg-slate-100 p-4 text-2xl">📄</div>
                                        <h3 class="text-lg font-semibold text-slate-700">No expenses found</h3>
                                        <p class="mt-1 text-sm text-slate-500">
                                            এখনো কোনো admin expense যোগ করা হয়নি।
                                        </p>
                                        <a href="{{ route('admin-expenses.create') }}"
                                           class="mt-4 inline-flex items-center rounded-2xl bg-blue-600 px-5 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-blue-700">
                                            Add First Expense
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            @if($expenses->hasPages())
                <div class="border-t border-slate-200 bg-slate-50 px-6 py-4">
                    {{ $expenses->appends(request()->query())->links() }}
                </div>
            @endif
        </div>
    </div>
</div>

{{-- SweetAlert Delete Confirmation --}}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const forms = document.querySelectorAll('.delete-expense-form');

        forms.forEach(form => {
            form.addEventListener('submit', function (e) {
                e.preventDefault();

                Swal.fire({
                    title: 'Are you sure?',
                    text: "এই expense delete করলে আর ফেরত আনা যাবে না।",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#dc2626',
                    cancelButtonColor: '#64748b',
                    confirmButtonText: 'Yes, delete it!',
                    cancelButtonText: 'Cancel',
                    reverseButtons: true
                }).then((result) => {
                    if (result.isConfirmed) {
                        form.submit();
                    }
                });
            });
        });
    });
</script>
@endsection