@extends('layouts.admin')

@section('title', 'Add Admin Expense')

@section('content')
<div class="min-h-screen bg-slate-50">
    <div class="mx-auto max-w-3xl 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">Add Admin Expense</h1>
                <p class="mt-1 text-sm text-slate-500">
                    নতুন অ্যাডমিন খরচ যোগ করুন।
                </p>
            </div>

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

        {{-- Validation Errors --}}
        @if ($errors->any())
            <div class="mb-6 rounded-2xl border border-rose-200 bg-rose-50 p-4 text-sm text-rose-700 shadow-sm">
                <div class="mb-2 font-semibold">Please fix the following errors:</div>
                <ul class="list-disc space-y-1 pl-5">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        {{-- Form 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">
                <h2 class="text-lg font-semibold text-slate-800">Expense Information</h2>
                <p class="mt-1 text-sm text-slate-500">
                    Title, amount এবং note দিয়ে expense entry তৈরি করুন।
                </p>
            </div>

            <form action="{{ route('admin-expenses.store') }}" method="POST" class="p-6 space-y-6">
                @csrf

                {{-- Title --}}
                <div>
                    <label for="title" class="mb-2 block text-sm font-semibold text-slate-700">
                        Expense Title <span class="text-rose-500">*</span>
                    </label>
                    <input
                        type="text"
                        id="title"
                        name="title"
                        value="{{ old('title') }}"
                        placeholder="Enter expense 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-4 focus:ring-blue-100"
                        required
                    >
                    @error('title')
                        <p class="mt-2 text-sm text-rose-600">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Amount --}}
                <div>
                    <label for="amount" class="mb-2 block text-sm font-semibold text-slate-700">
                        Amount <span class="text-rose-500">*</span>
                    </label>
                    <div class="relative">
                        <span class="absolute left-4 top-1/2 -translate-y-1/2 text-sm font-medium text-slate-500">
                            ৳
                        </span>
                        <input
                            type="number"
                            step="0.01"
                            min="0"
                            id="amount"
                            name="amount"
                            value="{{ old('amount') }}"
                            placeholder="0.00"
                            class="w-full rounded-2xl border border-slate-300 py-3 pl-10 pr-4 text-sm text-slate-700 outline-none transition focus:border-blue-500 focus:ring-4 focus:ring-blue-100"
                            required
                        >
                    </div>
                    @error('amount')
                        <p class="mt-2 text-sm text-rose-600">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Note --}}
                <div>
                    <label for="note" class="mb-2 block text-sm font-semibold text-slate-700">
                        Note
                    </label>
                    <textarea
                        id="note"
                        name="note"
                        rows="5"
                        placeholder="Write additional details here..."
                        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-4 focus:ring-blue-100"
                    >{{ old('note') }}</textarea>
                    @error('note')
                        <p class="mt-2 text-sm text-rose-600">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Buttons --}}
                <div class="flex flex-wrap items-center gap-3 pt-2">
                    <button
                        type="submit"
                        class="inline-flex items-center rounded-2xl bg-blue-600 px-6 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-blue-700 hover:shadow-lg"
                    >
                        Save Expense
                    </button>

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