@csrf
@if(isset($expense))
    @method('PUT')
@endif

@php
    $selectedProjectValue = old('project_id', $expense->project_id ?? $selectedProjectId ?? null);
    $selectedStageValue = old('stage_id', $expense->stage_id ?? $selectedStageId ?? null);
@endphp

<div class="alert alert-info border-0 shadow-sm d-flex gap-2 align-items-start">
    <i class="ti ti-bulb fs-5 mt-1"></i>
    <div>
        <div class="fw-semibold">{{ __('admin.expenses.entry_standards_title') }}</div>
        <div class="small mb-0">{{ __('admin.expenses.entry_standards_hint') }}</div>
    </div>
</div>

<div class="row g-4">
    <div class="col-12">
        <div class="border rounded-3 p-3 p-lg-4">
            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
                <div>
                    <h5 class="mb-1">{{ __('admin.expenses.sections.context') }}</h5>
                    <p class="text-muted mb-0 small">{{ __('admin.expenses.sections.context_hint') }}</p>
                </div>
                <span class="badge bg-primary-subtle text-primary">{{ __('admin.expenses.sections.required_data') }}</span>
            </div>

            <div class="row g-3">
                <div class="col-md-6">
                    <label class="form-label">{{ __('admin.expenses.fields.project_id') }} <span class="text-danger">*</span></label>
                    <select
                        name="project_id"
                        id="expense-project-select"
                        class="form-select @error('project_id') is-invalid @enderror"
                        required
                    >
                        <option value="">-- {{ __('admin.expenses.placeholders.select_project') }} --</option>
                        @foreach($projects as $project)
                            <option value="{{ $project->id }}" @selected((string) $selectedProjectValue === (string) $project->id)>
                                {{ $project->project_name ?: $project->name }}
                            </option>
                        @endforeach
                    </select>
                    @error('project_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

                <div class="col-md-6">
                    <label class="form-label">{{ __('admin.expenses.fields.stage_id') }}</label>
                    <select
                        name="stage_id"
                        id="expense-stage-select"
                        class="form-select @error('stage_id') is-invalid @enderror"
                        data-selected="{{ $selectedStageValue }}"
                        data-placeholder="{{ __('admin.expenses.placeholders.select_stage_optional') }}"
                    >
                        <option value="">-- {{ __('admin.expenses.placeholders.select_stage_optional') }} --</option>
                        @foreach($stages as $stage)
                            <option value="{{ $stage->id }}" @selected((string) $selectedStageValue === (string) $stage->id)>
                                #{{ $stage->sequence_no }} {{ $stage->name }}
                            </option>
                        @endforeach
                    </select>
                    <div class="form-text">{{ __('admin.expenses.stage_help') }}</div>
                    @error('stage_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

                <div class="col-md-6">
                    <label class="form-label">{{ __('admin.expenses.fields.expense_category') }} <span class="text-danger">*</span></label>
                    <input
                        type="text"
                        name="expense_category"
                        list="expense-category-options"
                        value="{{ old('expense_category', $expense->expense_category ?? '') }}"
                        class="form-control @error('expense_category') is-invalid @enderror"
                        placeholder="{{ __('admin.expenses.placeholders.expense_category') }}"
                        required
                    >
                    <datalist id="expense-category-options">
                        @foreach($categories as $categoryOption)
                            <option value="{{ $categoryOption }}"></option>
                        @endforeach
                    </datalist>
                    @error('expense_category')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

                <div class="col-md-6">
                    <label class="form-label">{{ __('admin.expenses.fields.title') }} <span class="text-danger">*</span></label>
                    <input
                        type="text"
                        name="title"
                        value="{{ old('title', $expense->title ?? '') }}"
                        class="form-control @error('title') is-invalid @enderror"
                        placeholder="{{ __('admin.expenses.placeholders.title') }}"
                        required
                    >
                    @error('title')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
            </div>
        </div>
    </div>

    <div class="col-12">
        <div class="border rounded-3 p-3 p-lg-4">
            <div class="mb-3">
                <h5 class="mb-1">{{ __('admin.expenses.sections.financial') }}</h5>
                <p class="text-muted mb-0 small">{{ __('admin.expenses.sections.financial_hint') }}</p>
            </div>

            <div class="row g-3">
                <div class="col-md-3">
                    <label class="form-label">{{ __('admin.expenses.fields.amount') }} <span class="text-danger">*</span></label>
                    <input
                        type="number"
                        step="0.01"
                        min="0"
                        name="amount"
                        value="{{ old('amount', $expense->amount ?? '') }}"
                        class="form-control @error('amount') is-invalid @enderror"
                        required
                    >
                    @error('amount')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

                <div class="col-md-3">
                    <label class="form-label">{{ __('admin.expenses.fields.expense_date') }} <span class="text-danger">*</span></label>
                    <input
                        type="date"
                        name="expense_date"
                        value="{{ old('expense_date', isset($expense) && $expense->expense_date ? $expense->expense_date->format('Y-m-d') : date('Y-m-d')) }}"
                        class="form-control @error('expense_date') is-invalid @enderror"
                        required
                    >
                    @error('expense_date')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

                <div class="col-md-3">
                    <label class="form-label">{{ __('admin.expenses.fields.payment_method') }} <span class="text-danger">*</span></label>
                    <select name="payment_method" class="form-select @error('payment_method') is-invalid @enderror" required>
                        @foreach($paymentMethods as $methodValue => $methodLabel)
                            <option value="{{ $methodValue }}" @selected(old('payment_method', $expense->payment_method ?? \App\Models\Expense::PAYMENT_METHOD_CASH) === $methodValue)>
                                {{ $methodLabel }}
                            </option>
                        @endforeach
                    </select>
                    @error('payment_method')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

                <div class="col-md-3">
                    <label class="form-label">{{ __('admin.expenses.fields.status') }} <span class="text-danger">*</span></label>
                    <select name="status" class="form-select @error('status') is-invalid @enderror" required>
                        @foreach($statuses as $statusValue => $statusLabel)
                            <option value="{{ $statusValue }}" @selected(old('status', $expense->status ?? \App\Models\Expense::STATUS_PENDING) === $statusValue)>
                                {{ $statusLabel }}
                            </option>
                        @endforeach
                    </select>
                    @error('status')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
            </div>
        </div>
    </div>

    <div class="col-12">
        <div class="border rounded-3 p-3 p-lg-4">
            <div class="mb-3">
                <h5 class="mb-1">{{ __('admin.expenses.sections.supporting_data') }}</h5>
                <p class="text-muted mb-0 small">{{ __('admin.expenses.sections.supporting_data_hint') }}</p>
            </div>

            <div class="row g-3">
                <div class="col-md-6">
                    <label class="form-label">{{ __('admin.expenses.fields.vendor_name') }}</label>
                    <input
                        type="text"
                        name="vendor_name"
                        value="{{ old('vendor_name', $expense->vendor_name ?? '') }}"
                        class="form-control @error('vendor_name') is-invalid @enderror"
                        placeholder="{{ __('admin.expenses.placeholders.vendor_name') }}"
                    >
                    @error('vendor_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

                <div class="col-md-6">
                    <label class="form-label">{{ __('admin.expenses.fields.receipt_number') }}</label>
                    <input
                        type="text"
                        name="receipt_number"
                        value="{{ old('receipt_number', $expense->receipt_number ?? '') }}"
                        class="form-control @error('receipt_number') is-invalid @enderror"
                        placeholder="{{ __('admin.expenses.placeholders.receipt_number') }}"
                    >
                    @error('receipt_number')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

                <div class="col-12">
                    <label class="form-label">{{ __('admin.expenses.fields.description') }} <span class="text-danger">*</span></label>
                    <textarea
                        name="description"
                        rows="4"
                        class="form-control @error('description') is-invalid @enderror"
                        placeholder="{{ __('admin.expenses.placeholders.description') }}"
                        required
                    >{{ old('description', $expense->description ?? '') }}</textarea>
                    @error('description')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

                <div class="col-md-7">
                    <label class="form-label">{{ __('admin.expenses.fields.notes') }}</label>
                    <textarea
                        name="notes"
                        rows="3"
                        class="form-control @error('notes') is-invalid @enderror"
                        placeholder="{{ __('admin.expenses.placeholders.notes') }}"
                    >{{ old('notes', $expense->notes ?? '') }}</textarea>
                    @error('notes')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

                <div class="col-md-5">
                    <label class="form-label">{{ __('admin.expenses.fields.attachment') }}</label>
                    <input type="file" name="attachment" class="form-control @error('attachment') is-invalid @enderror" accept=".jpg,.jpeg,.png,.pdf,.webp">
                    <div class="form-text">{{ __('admin.expenses.attachment_hint') }}</div>
                    @error('attachment')<div class="invalid-feedback">{{ $message }}</div>@enderror

                    @if(isset($expense) && $expense->attachment)
                        <div class="mt-3 p-3 border rounded-3 bg-light">
                            <div class="small text-muted mb-2">{{ __('admin.expenses.current_attachment') }}</div>
                            <a href="{{ asset('storage/'.$expense->attachment) }}" target="_blank" class="btn btn-sm btn-outline-info">
                                <i class="ti ti-paperclip me-1"></i>{{ __('admin.expenses.view_attachment') }}
                            </a>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <div class="col-12 d-flex gap-2 flex-wrap">
        <button type="submit" class="btn btn-primary px-4">
            <i class="ti ti-device-floppy me-1"></i>{{ $submitLabel ?? __('admin.actions.save') }}
        </button>

        @if(! isset($expense))
            <button type="submit" name="save_and_add_another" value="1" class="btn btn-outline-primary px-4">
                <i class="ti ti-plus me-1"></i>{{ __('admin.expenses.save_and_add_another') }}
            </button>
        @endif

        <a href="{{ route('admin.expenses.index') }}" class="btn btn-outline-secondary px-4">{{ __('admin.actions.cancel') }}</a>
    </div>
</div>

@once
    @push('scripts')
        <script>
            $(function () {
                const stagesEndpoint = '{{ route('admin.expenses.project-stages') }}';
                const $projectSelect = $('#expense-project-select');
                const $stageSelect = $('#expense-stage-select');

                function populateStages(items, selectedValue) {
                    const placeholder = $stageSelect.data('placeholder') || '';
                    const currentValue = selectedValue || '';

                    $stageSelect.empty().append(new Option('-- ' + placeholder + ' --', ''));

                    $.each(items, function (_, stage) {
                        const option = new Option(stage.name, stage.id, false, String(stage.id) === String(currentValue));
                        $stageSelect.append(option);
                    });
                }

                function loadStages(projectId, selectedValue) {
                    if (!projectId) {
                        populateStages([], '');
                        return;
                    }

                    $.getJSON(stagesEndpoint, {project_id: projectId})
                        .done(function (response) {
                            populateStages(response || [], selectedValue);
                        })
                        .fail(function () {
                            populateStages([], '');
                        });
                }

                $projectSelect.on('change', function () {
                    loadStages($(this).val(), '');
                });

                if ($projectSelect.val()) {
                    loadStages($projectSelect.val(), $stageSelect.data('selected'));
                }
            });
        </script>
    @endpush
@endonce