@extends('layouts.app')

@section('content')
<div class="mb-6 flex flex-wrap items-center justify-between gap-4">
    <div>
        <h1 class="text-2xl font-bold text-gray-800">Add New Expense</h1>
        <p class="text-gray-500">Record a new construction expense</p>
    </div>
    <a href="{{ route('expenses.index') }}" class="flex items-center rounded-lg bg-gray-600 px-4 py-2 text-white shadow-md hover:bg-gray-700 transition-colors duration-200">
        <i class="fas fa-arrow-left mr-2"></i> <span class="hidden sm:inline">Back to Expenses</span>
    </a>
</div>

    <div class="bg-white rounded-xl shadow-md overflow-hidden">
        <div class="p-6">
            <form action="{{ route('expenses.store') }}" method="POST" enctype="multipart/form-data" class="expense-form">
                @csrf
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="project_id" class="block text-sm font-medium text-gray-700 mb-1">Project <span class="text-danger">*</span></label>
                        <select name="project_id" id="project_id" class="w-full rounded-lg border-gray-300 shadow-sm focus:border-primary focus:ring focus:ring-primary focus:ring-opacity-50 @error('project_id') border-danger @enderror" required>
                            <option value="">Select Project</option>
                            @foreach($projects as $project)
                                <option value="{{ $project->id }}" {{ old('project_id') == $project->id ? 'selected' : '' }}>
                                    {{ $project->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('project_id')
                            <p class="mt-1 text-sm text-danger">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="category_id" class="block text-sm font-medium text-gray-700 mb-1">Category <span class="text-danger">*</span></label>
                        <select name="category_id" id="category_id" class="w-full rounded-lg border-gray-300 shadow-sm focus:border-primary focus:ring focus:ring-primary focus:ring-opacity-50 @error('category_id') border-danger @enderror" required>
                            <option value="">Select Category</option>
                            @foreach($categories as $category)
                                <option value="{{ $category->id }}" {{ old('category_id') == $category->id ? 'selected' : '' }}>
                                    {{ $category->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('category_id')
                            <p class="mt-1 text-sm text-danger">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="title" class="block text-sm font-medium text-gray-700 mb-1">Title <span class="text-danger">*</span></label>
                        <input type="text" class="w-full rounded-lg border-gray-300 shadow-sm focus:border-primary focus:ring focus:ring-primary focus:ring-opacity-50 @error('title') border-danger @enderror" 
                            id="title" name="title" value="{{ old('title') }}" required>
                        @error('title')
                            <p class="mt-1 text-sm text-danger">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="amount" class="block text-sm font-medium text-gray-700 mb-1">Amount (LKR) <span class="text-danger">*</span></label>
                        <div class="flex">
                            <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-sm">LKR</span>
                            <input type="number" step="0.01" class="flex-1 rounded-none rounded-r-lg border-gray-300 shadow-sm focus:border-primary focus:ring focus:ring-primary focus:ring-opacity-50 @error('amount') border-danger @enderror" 
                                id="amount" name="amount" value="{{ old('amount') }}" required>
                        </div>
                        @error('amount')
                            <p class="mt-1 text-sm text-danger">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="expense_date" class="block text-sm font-medium text-gray-700 mb-1">Date <span class="text-danger">*</span></label>
                        <input type="date" class="w-full rounded-lg border-gray-300 shadow-sm focus:border-primary focus:ring focus:ring-primary focus:ring-opacity-50 @error('expense_date') border-danger @enderror" 
                            id="expense_date" name="expense_date" value="{{ old('expense_date', date('Y-m-d')) }}" required>
                        @error('expense_date')
                            <p class="mt-1 text-sm text-danger">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="invoice_number" class="block text-sm font-medium text-gray-700 mb-1">Invoice Number</label>
                        <input type="text" class="w-full rounded-lg border-gray-300 shadow-sm focus:border-primary focus:ring focus:ring-primary focus:ring-opacity-50 @error('invoice_number') border-danger @enderror" 
                            id="invoice_number" name="invoice_number" value="{{ old('invoice_number') }}">
                        @error('invoice_number')
                            <p class="mt-1 text-sm text-danger">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="vendor" class="block text-sm font-medium text-gray-700 mb-1">Vendor/Supplier</label>
                        <input type="text" class="w-full rounded-lg border-gray-300 shadow-sm focus:border-primary focus:ring focus:ring-primary focus:ring-opacity-50 @error('vendor') border-danger @enderror" 
                            id="vendor" name="vendor" value="{{ old('vendor') }}">
                        @error('vendor')
                            <p class="mt-1 text-sm text-danger">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="payment_method" class="block text-sm font-medium text-gray-700 mb-1">Payment Method</label>
                        <select class="w-full rounded-lg border-gray-300 shadow-sm focus:border-primary focus:ring focus:ring-primary focus:ring-opacity-50 @error('payment_method') border-danger @enderror" 
                            id="payment_method" name="payment_method">
                            <option value="">Select Payment Method</option>
                            <option value="Cash" {{ old('payment_method') == 'Cash' ? 'selected' : '' }}>Cash</option>
                            <option value="Bank Transfer" {{ old('payment_method') == 'Bank Transfer' ? 'selected' : '' }}>Bank Transfer</option>
                            <option value="Credit Card" {{ old('payment_method') == 'Credit Card' ? 'selected' : '' }}>Credit Card</option>
                            <option value="Debit Card" {{ old('payment_method') == 'Debit Card' ? 'selected' : '' }}>Debit Card</option>
                            <option value="UPI" {{ old('payment_method') == 'UPI' ? 'selected' : '' }}>UPI</option>
                            <option value="Cheque" {{ old('payment_method') == 'Cheque' ? 'selected' : '' }}>Cheque</option>
                        </select>
                        @error('payment_method')
                            <p class="mt-1 text-sm text-danger">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="md:col-span-2">
                        <label for="description" class="block text-sm font-medium text-gray-700 mb-1">Description</label>
                        <textarea class="w-full rounded-lg border-gray-300 shadow-sm focus:border-primary focus:ring focus:ring-primary focus:ring-opacity-50 @error('description') border-danger @enderror" 
                            id="description" name="description" rows="3">{{ old('description') }}</textarea>
                        @error('description')
                            <p class="mt-1 text-sm text-danger">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="receipt_images" class="block text-sm font-medium text-gray-700 mb-1">Receipt Images</label>
                        <input type="file" class="w-full rounded-lg border border-gray-300 shadow-sm focus:border-primary focus:ring focus:ring-primary focus:ring-opacity-50 @error('receipt_images.*') border-danger @enderror file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-medium file:bg-primary file:text-white hover:file:bg-secondary" 
                            id="receipt_images" name="receipt_images[]" accept="image/*" capture="camera" multiple>
                        <p class="mt-1 text-sm text-gray-500">Take photos or upload multiple images of receipts (you can select multiple files)</p>
                        @error('receipt_images.*')
                            <p class="mt-1 text-sm text-danger">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Payment Status</label>
                        <div class="flex space-x-4">
                            <div class="flex items-center">
                                <input type="radio" name="is_paid" id="is_paid_yes" value="1" {{ old('is_paid', '1') == '1' ? 'checked' : '' }}
                                    class="h-4 w-4 text-primary border-gray-300 focus:ring-primary">
                                <label for="is_paid_yes" class="ml-2 block text-sm text-gray-700">Paid</label>
                            </div>
                            <div class="flex items-center">
                                <input type="radio" name="is_paid" id="is_paid_no" value="0" {{ old('is_paid') == '0' ? 'checked' : '' }}
                                    class="h-4 w-4 text-primary border-gray-300 focus:ring-primary">
                                <label for="is_paid_no" class="ml-2 block text-sm text-gray-700">Unpaid</label>
                            </div>
                        </div>
                        @error('is_paid')
                            <p class="mt-1 text-sm text-danger">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="md:col-span-2 flex items-center space-x-4 mt-2">
                        <button type="submit" class="flex items-center rounded-lg bg-primary px-4 py-2 text-white shadow-md hover:bg-secondary transition-colors duration-200">
                            <i class="fas fa-save mr-2"></i> Save Expense
                        </button>
                        <a href="{{ route('expenses.index') }}" class="flex items-center rounded-lg bg-gray-600 px-4 py-2 text-white shadow-md hover:bg-gray-700 transition-colors duration-200">
                            Cancel
                        </a>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection