<x-app-layout>
    <x-slot name="title">Add Expense</x-slot>
    <div class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">Add Expense</h1>
            <p class="text-sm text-gray-500 mt-1">Record a new expense for the company.</p>
        </div>
        
        <div class="flex items-center gap-3">
            <a href="{{ route('expenses.index') }}" class="text-sm font-medium text-gray-600 hover:text-gray-900">&larr; Back to Expenses</a>
        </div>
    </div>

    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        <form action="{{ route('expenses.store') }}" method="POST" class="p-6">
            @csrf
            
            @if ($errors->any())
                <div class="mb-6 bg-red-50 p-4 rounded-md border border-red-200">
                    <ul class="list-disc list-inside text-sm text-red-600">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="col-span-1 md:col-span-2">
                    <label for="title" class="block text-sm font-medium text-gray-700">Expense Title *</label>
                    <input type="text" name="title" id="title" value="{{ old('title') }}" required class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                </div>
                
                <div>
                    <label for="category" class="block text-sm font-medium text-gray-700">Category *</label>
                    <select name="category" id="category" required class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                        <option value="">Select Category</option>
                        <option value="Site Visit" {{ old('category') == 'Site Visit' ? 'selected' : '' }}>Site Visit</option>
                        <option value="Office Expense" {{ old('category') == 'Office Expense' ? 'selected' : '' }}>Office Expense</option>
                        <option value="Marketing" {{ old('category') == 'Marketing' ? 'selected' : '' }}>Marketing</option>
                        <option value="Travel" {{ old('category') == 'Travel' ? 'selected' : '' }}>Travel</option>
                        <option value="Maintenance" {{ old('category') == 'Maintenance' ? 'selected' : '' }}>Maintenance</option>
                        <option value="Other" {{ old('category') == 'Other' ? 'selected' : '' }}>Other</option>
                    </select>
                </div>
                
                <div>
                    <label for="branch_location" class="block text-sm font-medium text-gray-700">Branch / Location</label>
                    <input type="text" name="branch_location" id="branch_location" value="{{ old('branch_location') }}" placeholder="e.g. Main Office, Phase 2 Site" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                </div>

                <div>
                    <label for="amount" class="block text-sm font-medium text-gray-700">Amount (PKR) *</label>
                    <input type="number" name="amount" id="amount" value="{{ old('amount') }}" min="0" step="0.01" required class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                </div>
                
                <div>
                    <label for="expense_date" class="block text-sm font-medium text-gray-700">Expense Date *</label>
                    <input type="date" name="expense_date" id="expense_date" value="{{ old('expense_date', date('Y-m-d')) }}" required class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                </div>

                <div class="col-span-1 md:col-span-2">
                    <label for="description" class="block text-sm font-medium text-gray-700">Description / Details</label>
                    <textarea name="description" id="description" rows="3" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm">{{ old('description') }}</textarea>
                </div>
            </div>

            <div class="mt-6 flex justify-end">
                <button type="submit" class="bg-primary-600 text-white px-6 py-2 rounded-lg font-medium hover:bg-primary-700 transition-colors">
                    Save Expense
                </button>
            </div>
        </form>
    </div>
</x-app-layout>
