@extends('layout.layout')

@section('content')
<div class="container my-5">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h5 class="fw-bold text-primary">New Expense</h5>
        <a href="{{ route('expenses.index') }}" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-left me-2"></i> Back to Expenses List
        </a>
    </div>

    {{-- Error Block --}}
    @if($errors->any())
    <div class="alert alert-danger alert-dismissible fade show shadow-sm" role="alert">
        <h5 class="alert-heading"><i class="fas fa-exclamation-triangle me-2"></i> Input Errors Detected!</h5>
        <p>Please correct the following issues and try again:</p>
        <ul class="mb-0">
            @foreach($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </ul>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    @endif

    {{-- Form Card --}}
    <div class="card shadow-lg border-0">
        <div class="card-header bg-primary text-white">
            <h6 class="mb-0"><i class="fas fa-file-invoice-dollar me-2"></i> Expense Details</h6>
        </div>
        <div class="card-body">
            <form action="{{ route('expenses.store') }}" method="POST">
                @csrf
                <div class="row">
                    <div class="col-md-4 mb-3">
                        <label for="payment_number" class="form-label fw-semibold">Payment / Invoice Number</label>
                        <div class="input-group">
                            <input type="text" name="payment_number" id="payment_number"
                                class="form-control @error('payment_number') is-invalid @enderror"
                                value="{{ old('payment_number') }}"
                                placeholder="Optional: INV-12345"
                                required>
                            <button class="btn btn-outline-secondary" type="button" id="generatePaymentNumber">
                                <i class="fas fa-magic me-1"></i> Generate
                            </button>
                            @error('payment_number') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                    </div>

                    <div class="col-md-4 mb-3">
                        <label for="item_name" class="form-label fw-semibold">Item Name</label>
                        <div class="input-group">
                            <input type="text" name="item_name" class="form-control form-control-lg @error('item_name') is-invalid @enderror" value="{{ old('item_name') }}" placeholder="Internet Subscription" required>
                            @error('item_name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                    </div>

                    <div class="col-md-4 mb-3">
                        <label for="amount" class="form-label fw-semibold">Amount ($)</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-dollar-sign"></i></span>
                            <input type="number" name="amount" step="0.01" class="form-control form-control-lg @error('amount') is-invalid @enderror" value="{{ old('amount') }}" placeholder="e.g., 150.75" required>
                            @error('amount') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                    </div>

                    <div class="col-md-4 mb-3">
                        <label for="payment_date" class="form-label fw-semibold">Payment Date</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>
                            <input type="date" name="payment_date" class="form-control form-control-lg @error('payment_date') is-invalid @enderror" value="{{ old('payment_date') }}" required>
                            @error('payment_date') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                    </div>

                    <div class="col-md-4 mb-3">
                        <label for="from_date" class="form-label fw-semibold">From Date</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>
                            <input type="date" name="from_date" class="form-control form-control-lg @error('from_date') is-invalid @enderror" value="{{ old('from_date') }}">
                            @error('from_date') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                    </div>

                    <div class="col-md-4 mb-3">
                        <label for="to_date" class="form-label fw-semibold">To Date</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>
                            <input type="date" name="to_date" class="form-control form-control-lg @error('to_date') is-invalid @enderror" value="{{ old('to_date') }}">
                            @error('to_date') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                    </div>
                </div>
                <hr class="my-4">
                <div class="row">
                    <div class="col-md-4 mb-3">
                        <label for="payment_mode" class="form-label fw-semibold">Payment Mode</label>
                        <select name="payment_mode" class="form-select @error('payment_mode') is-invalid @enderror" required>
                            <option value="">Select Method</option>
                            <option value="cash" {{ old('payment_mode')=='cash' ? 'selected' : '' }}>Cash</option>
                            <option value="bank_transfer" {{ old('payment_mode')=='bank_transfer' ? 'selected' : '' }}>Bank Transfer</option>
                        </select>
                        @error('payment_mode') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                    <div class="col-md-4 mb-3">
                        <label for="status" class="form-label fw-semibold">Status</label>
                        <select name="status" class="form-select @error('status') is-invalid @enderror" required>
                            <option value="">Select Status</option>
                            <option value="paid" {{ old('status')=='paid' ? 'selected' : '' }}>Paid</option>
                            <option value="open" {{ old('status')=='open' ? 'selected' : '' }}>Open</option>
                            <option value="pending_approval" {{ old('status')=='pending_approval' ? 'selected' : '' }}>Pending Approval</option>
                        </select>
                        @error('status') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                    <div class="col-md-4 mb-3">
                        <label for="recurring" class="form-label fw-semibold">Recurring Expense?</label>
                        <select name="recurring" class="form-select @error('recurring') is-invalid @enderror" required>
                            <option value="no" {{ old('recurring')=='no' ? 'selected' : '' }}>No (One-time)</option>
                            <option value="yes" {{ old('recurring')=='yes' ? 'selected' : '' }}>Yes (Monthly/Annual)</option>
                        </select>
                        @error('recurring') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>


                    <div class="col-md-6 mb-3">
                        <label for="vendors" class="form-label fw-semibold">Vendor</label>
                        <input type="text" name="vendors" class="form-control @error('vendors') is-invalid @enderror" value="{{ old('vendors') }}" placeholder="e.g., Acme Supplies, Jane Doe">
                        <small class="form-text text-muted">Who received the payment?</small>
                        @error('vendors') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                    <div class="col-md-6 mb-3">
                        <label for="paid_through" class="form-label fw-semibold">Paid Through</label>
                        <input type="text" name="paid_through" class="form-control @error('paid_through') is-invalid @enderror" value="{{ old('paid_through') }}" placeholder="Vodafone Cash, Bank of America, PayPal, etc.">
                        @error('paid_through') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                </div>
                <hr class="mt-4 mb-3">
                <div class="d-flex justify-content-end">
                    <a href="{{ route('expenses.index') }}" class="btn btn-outline-secondary me-2">
                        <i class="fas fa-times-circle me-1"></i> Cancel
                    </a>
                    <button type="submit" class="btn btn-success btn-lg shadow">
                        <i class="fas fa-save me-1"></i> Save Expense
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const generateBtn = document.getElementById('generatePaymentNumber');
        const paymentInput = document.getElementById('payment_number');

        generateBtn.addEventListener('click', function() {
            function generateUniqueId() {
                const now = new Date();
                const year = now.getFullYear().toString().slice(-2);
                const month = (now.getMonth() + 1).toString().padStart(2, '0');
                const day = now.getDate().toString().padStart(2, '0');
                const random = Math.floor(Math.random() * 900) + 100;
                return `PO-${year}${month}${day}-${random}`;
            }
            paymentInput.value = generateUniqueId();
        });
    });
</script>
@endsection