@extends('layouts.app')

@section('title', 'New Recurring Expense')

@section('content')
<div class="mb-4">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb mb-1 small text-uppercase">
            <li class="breadcrumb-item"><a href="{{ route('recurring-expenses.index') }}" class="text-decoration-none">Recurring Expenses</a></li>
            <li class="breadcrumb-item active">New Profile</li>
        </ol>
    </nav>
    <h2 class="h4 mb-0 text-dark fw-bold">Create Recurring Expense</h2>
</div>

<form action="{{ route('recurring-expenses.store') }}" method="POST">
    @csrf
    <div class="row g-4">
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm rounded-4 mb-4">
                <div class="card-body p-4">
                    <h6 class="fw-bold text-dark text-uppercase mb-4 border-bottom pb-2">Basic Details</h6>
                    <div class="row g-3 mb-4">
                        <div class="col-md-12">
                            <label class="form-label small text-muted fw-bold text-uppercase">Profile Name *</label>
                            <input type="text" name="profile_name" class="form-control @error('profile_name') is-invalid @enderror" placeholder="e.g. Monthly Rent Office" value="{{ old('profile_name') }}" required>
                            @error('profile_name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small text-muted fw-bold text-uppercase">Expense Category *</label>
                            <select name="expense_category_id" class="form-select @error('expense_category_id') is-invalid @enderror" required>
                                <option value="">Select Category</option>
                                @foreach($categories as $category)
                                    <option value="{{ $category->id }}" {{ old('expense_category_id') == $category->id ? 'selected' : '' }}>{{ $category->name }}</option>
                                @endforeach
                            </select>
                            @error('expense_category_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small text-muted fw-bold text-uppercase">Amount *</label>
                            <div class="input-group">
                                <span class="input-group-text bg-white">{{ getCurrencySymbol() }}</span>
                                <input type="number" name="amount" class="form-control @error('amount') is-invalid @enderror" step="0.01" value="{{ old('amount', $recurringExpense->amount) }}" required>
                            </div>
                            @error('amount') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                    </div>

                    <h6 class="fw-bold text-dark text-uppercase mb-4 border-bottom pb-2">Schedule Settings</h6>
                    <div class="row g-3 mb-4">
                        <div class="col-md-6">
                            <label class="form-label small text-muted fw-bold text-uppercase">Repeat Every *</label>
                            <div class="input-group">
                                <input type="number" name="interval_value" class="form-control w-25" value="1" min="1" required>
                                <select name="frequency" class="form-select w-75" required>
                                    <option value="daily">Day(s)</option>
                                    <option value="weekly">Week(s)</option>
                                    <option value="monthly" selected>Month(s)</option>
                                    <option value="yearly">Year(s)</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small text-muted fw-bold text-uppercase">Start Date *</label>
                            <input type="date" name="start_date" class="form-control" value="{{ date('Y-m-d') }}" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small text-muted fw-bold text-uppercase">End Date (Optional)</label>
                            <input type="date" name="end_date" class="form-control">
                        </div>
                    </div>

                    <h6 class="fw-bold text-dark text-uppercase mb-4 border-bottom pb-2">Payment Details</h6>
                    <div class="row g-3 mb-4">
                        <div class="col-md-6">
                            <label class="form-label small text-muted fw-bold text-uppercase">Paid Through</label>
                            <select name="payment_mode" class="form-select">
                                <option value="Cash">Cash</option>
                                <option value="Bank">Bank</option>
                                <option value="Card">Card</option>
                            </select>
                        </div>
                        <div class="col-md-6 d-flex align-items-end">
                            <div class="form-check form-switch mb-2">
                                <input class="form-check-input" type="checkbox" name="auto_payment" value="1" id="autoPay" checked>
                                <label class="form-check-label fw-bold text-dark" for="autoPay">Auto Record Payment</label>
                            </div>
                        </div>
                    </div>

                    <div class="mb-0">
                        <label class="form-label small text-muted fw-bold text-uppercase">Notes</label>
                        <textarea name="notes" class="form-control" rows="3" placeholder="Additional details..."></textarea>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card border-0 shadow-sm rounded-4 sticky-top" style="top: 100px;">
                <div class="card-body p-4 text-center">
                    <div class="mb-4">
                        <i class="fas fa-calendar-alt fa-4x text-primary opacity-25"></i>
                    </div>
                    <p class="text-muted small mb-4">You are creating a recurring expense profile. A new expense record will be generated automatically on each run date.</p>
                    <button type="submit" class="btn btn-primary w-100 py-2 fw-bold shadow-sm mb-3">Save Profile</button>
                    <a href="{{ route('recurring-expenses.index') }}" class="btn btn-light w-100 py-2 border fw-bold text-muted">Cancel</a>
                </div>
            </div>
        </div>
    </div>
</form>
@endsection