@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">Edit Expense</h1>
        <p class="text-gray-500">Update expense details</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> Back to Expenses
    </a>
</div>

    <div class="bg-white rounded-xl shadow-md overflow-hidden">
        <div class="p-6">
            <form action="{{ route('expenses.update', $expense) }}" method="POST" enctype="multipart/form-data" class="expense-form">
                @csrf
                @method('PUT')
                <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-red-500">*</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-red-500 @enderror" required>
                            <option value="">Select Project</option>
                            @foreach($projects as $project)
                                <option value="{{ $project->id }}" {{ old('project_id', $expense->project_id) == $project->id ? 'selected' : '' }}>
                                    {{ $project->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('project_id')
                            <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="category_id" class="block text-sm font-medium text-gray-700 mb-1">Category <span class="text-red-500">*</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-red-500 @enderror" required>
                            <option value="">Select Category</option>
                            @foreach($categories as $category)
                                <option value="{{ $category->id }}" {{ old('category_id', $expense->category_id) == $category->id ? 'selected' : '' }}>
                                    {{ $category->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('category_id')
                            <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="title" class="block text-sm font-medium text-gray-700 mb-1">Title <span class="text-red-500">*</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-red-500 @enderror" 
                            id="title" name="title" value="{{ old('title', $expense->title) }}" required>
                        @error('title')
                            <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="amount" class="block text-sm font-medium text-gray-700 mb-1">Amount (LKR) <span class="text-red-500">*</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-red-500 @enderror" 
                                id="amount" name="amount" value="{{ old('amount', $expense->amount) }}" required>
                        </div>
                        @error('amount')
                            <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="expense_date" class="block text-sm font-medium text-gray-700 mb-1">Date <span class="text-red-500">*</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-red-500 @enderror" 
                            id="expense_date" name="expense_date" value="{{ old('expense_date', $expense->expense_date->format('Y-m-d')) }}" required>
                        @error('expense_date')
                            <p class="mt-1 text-sm text-red-500">{{ $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-red-500 @enderror" 
                            id="invoice_number" name="invoice_number" value="{{ old('invoice_number', $expense->invoice_number) }}">
                        @error('invoice_number')
                            <p class="mt-1 text-sm text-red-500">{{ $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-red-500 @enderror" 
                            id="vendor" name="vendor" value="{{ old('vendor', $expense->vendor) }}">
                        @error('vendor')
                            <p class="mt-1 text-sm text-red-500">{{ $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-red-500 @enderror" 
                            id="payment_method" name="payment_method">
                            <option value="">Select Payment Method</option>
                            <option value="Cash" {{ old('payment_method', $expense->payment_method) == 'Cash' ? 'selected' : '' }}>Cash</option>
                            <option value="Bank Transfer" {{ old('payment_method', $expense->payment_method) == 'Bank Transfer' ? 'selected' : '' }}>Bank Transfer</option>
                            <option value="Credit Card" {{ old('payment_method', $expense->payment_method) == 'Credit Card' ? 'selected' : '' }}>Credit Card</option>
                            <option value="Debit Card" {{ old('payment_method', $expense->payment_method) == 'Debit Card' ? 'selected' : '' }}>Debit Card</option>
                            <option value="UPI" {{ old('payment_method', $expense->payment_method) == 'UPI' ? 'selected' : '' }}>UPI</option>
                            <option value="Cheque" {{ old('payment_method', $expense->payment_method) == 'Cheque' ? 'selected' : '' }}>Cheque</option>
                        </select>
                        @error('payment_method')
                            <p class="mt-1 text-sm text-red-500">{{ $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-red-500 @enderror" 
                            id="description" name="description" rows="3">{{ old('description', $expense->description) }}</textarea>
                        @error('description')
                            <p class="mt-1 text-sm text-red-500">{{ $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-red-500 @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[]" multiple accept="image/*">
                        <p class="mt-1 text-sm text-gray-500">You can select multiple files</p>
                        @error('receipt_images.*')
                            <p class="mt-1 text-sm text-red-500">{{ $message }}</p>
                        @enderror
                        
                        <div class="mt-4">
                            <p class="text-sm font-medium text-gray-700 mb-2">Current Receipt Images:</p>
                            
                            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                                @if($expense->receiptImages && $expense->receiptImages->count() > 0)
                                    @foreach($expense->receiptImages as $image)
                                    <div class="relative group">
                                        <img src="{{ url('/receipts/' . basename($image->image_path)) }}" alt="Receipt" class="rounded-lg border border-gray-300 shadow-sm w-full h-48 object-cover">
                                        <div class="absolute inset-0 bg-black bg-opacity-40 opacity-0 group-hover:opacity-100 transition-opacity duration-200 rounded-lg flex items-center justify-center">
                                            <a href="{{ url('/receipts/' . basename($image->image_path)) }}" target="_blank" class="text-white bg-primary rounded-full p-2 mx-1 hover:bg-secondary transition-colors duration-200">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            <label class="text-white bg-red-500 rounded-full p-2 mx-1 hover:bg-red-600 transition-colors duration-200 cursor-pointer">
                                                <input type="checkbox" name="delete_images[]" value="{{ $image->id }}" class="hidden">
                                                <i class="fas fa-trash"></i>
                                            </label>
                                        </div>
                                        <p class="text-xs text-gray-500 mt-1 truncate">{{ $image->original_filename ?: 'Receipt Image' }}</p>
                                    </div>
                                    @endforeach
                                @elseif($expense->receipt_image)
                                    <!-- Legacy single image support -->
                                    <div class="relative group">
                                        <img src="{{ url('/receipts/' . basename($expense->receipt_image)) }}" alt="Receipt" class="rounded-lg border border-gray-300 shadow-sm w-full h-48 object-cover">
                                        <div class="absolute inset-0 bg-black bg-opacity-40 opacity-0 group-hover:opacity-100 transition-opacity duration-200 rounded-lg flex items-center justify-center">
                                            <a href="{{ url('/receipts/' . basename($expense->receipt_image)) }}" target="_blank" class="text-white bg-primary rounded-full p-2 mx-1 hover:bg-secondary transition-colors duration-200">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                        </div>
                                        <p class="text-xs text-gray-500 mt-1">Legacy Receipt Image</p>
                                    </div>
                                @else
                                    <p class="text-sm text-gray-500 col-span-full">No receipt images uploaded yet.</p>
                                @endif
                            </div>
                            
                            @if($expense->receiptImages && $expense->receiptImages->count() > 0)
                            <div class="mt-2 text-sm text-gray-600">
                                <p><i class="fas fa-info-circle"></i> Hover over images and check the ones you want to delete.</p>
                            </div>
                            @endif
                        </div>
                    </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', $expense->is_paid) == 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', $expense->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-red-500">{{ $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> Update 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