@php
    /** @var \App\Models\Application|null $application */
    $appType = old('applicant_type', optional($application)->applicant_type ?? 'customer');
    $appId   = old('applicant_id', optional($application)->applicant_id);
    $prodId  = old('finance_product_id', optional($application)->finance_product_id);
@endphp

<form method="POST"
      action="{{ $application ? route('applications.update', $application) : route('applications.store') }}"
      enctype="multipart/form-data">
    @csrf
    @if($application) @method('PUT') @endif

    {{-- ---------- Base application fields ---------- --}}
    <div class="card shadow-sm mb-3">
        <div class="card-header bg-white fw-bold">{{ __('app.application') }}</div>
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-3">
                    <label class="form-label">{{ __('forms.applicant_type') }} *</label>
                    <select name="applicant_type" id="applicant_type" class="form-select" required>
                        <option value="customer" @selected($appType === 'customer')>{{ __('app.customer_types.individual') }}</option>
                        <option value="company"  @selected($appType === 'company')>{{ __('app.customer_types.company') }}</option>
                    </select>
                </div>
                <div class="col-md-5">
                    <label class="form-label">{{ __('applications.columns.applicant_name') }} *</label>
                    <select name="applicant_id" id="applicant_customer" class="form-select applicant-select" data-type="customer">
                        <option value="">—</option>
                        @foreach($customers as $c)
                            <option value="{{ $c->id }}" @selected($appType === 'customer' && $appId == $c->id)>{{ $c->name }}</option>
                        @endforeach
                    </select>
                    <select name="applicant_id" id="applicant_company" class="form-select applicant-select" data-type="company">
                        <option value="">—</option>
                        @foreach($companies as $co)
                            <option value="{{ $co->id }}" @selected($appType === 'company' && $appId == $co->id)>{{ $co->name }}</option>
                        @endforeach
                    </select>
                    @error('applicant_id') <div class="text-danger small">{{ $message }}</div> @enderror
                </div>
                <div class="col-md-4">
                    <label class="form-label">{{ __('applications.columns.finance_product') }} *</label>
                    <select name="finance_product_id" id="finance_product_id" class="form-select" required>
                        <option value="">—</option>
                        @foreach($products as $p)
                            <option value="{{ $p->id }}" @selected($prodId == $p->id)>{{ $p->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-3">
                    <label class="form-label">{{ __('applications.columns.amount') }} *</label>
                    <div class="input-group">
                        <input type="number" step="0.01" name="requested_amount" class="form-control"
                               value="{{ old('requested_amount', optional($application)->requested_amount) }}" required>
                        <span class="input-group-text"><x-riyal /></span>
                    </div>
                </div>
                <div class="col-md-3">
                    <label class="form-label">{{ __('app.term_months') }}</label>
                    <input type="number" name="requested_term_months" class="form-control"
                           value="{{ old('requested_term_months', optional($application)->requested_term_months) }}">
                </div>
                <div class="col-md-3">
                    <label class="form-label">{{ __('applications.columns.assignee') }}</label>
                    <select name="assigned_to" class="form-select">
                        <option value="">—</option>
                        @foreach($officers as $o)
                            <option value="{{ $o->id }}" @selected(old('assigned_to', optional($application)->assigned_to) == $o->id)>{{ $o->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">{{ __('applications.columns.funding_entity') }}</label>
                    <select name="funding_entity_id" class="form-select">
                        <option value="">—</option>
                        @foreach($fundingEntities as $fe)
                            <option value="{{ $fe->id }}" @selected(old('funding_entity_id', optional($application)->funding_entity_id) == $fe->id)>{{ $fe->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-12">
                    <label class="form-label">{{ __('app.purpose') }}</label>
                    <textarea name="purpose" class="form-control" rows="2">{{ old('purpose', optional($application)->purpose) }}</textarea>
                </div>
            </div>
        </div>
    </div>

    {{-- ---------- Dynamic per-product fields ---------- --}}
    <div class="card shadow-sm mb-3">
        <div class="card-header bg-white fw-bold">
            <i class="bi bi-ui-checks-grid me-1"></i> {{ __('forms.dynamic_fields') }}
        </div>
        <div class="card-body" id="dynamic-fields">
            @isset($sections)
                @include('applications.fields._dynamic', ['sections' => $sections])
            @else
                <p class="text-muted mb-0">{{ __('forms.select_product_hint') }}</p>
            @endisset
        </div>
    </div>

    <div class="mb-4">
        <button type="submit" class="btn btn-primary"><i class="bi bi-check-lg"></i> {{ __('app.save') }}</button>
        <a href="{{ route('applications.index') }}" class="btn btn-secondary">{{ __('app.cancel') }}</a>
    </div>
</form>

@push('scripts')
<script>
$(function () {
    const $type   = $('#applicant_type');
    const $fields = $('#dynamic-fields');
    const editingAppId = {{ $application?->id ?? 'null' }};

    // Toggle the applicant select that matches the chosen type (only the active one is submitted).
    function syncApplicant() {
        $('.applicant-select').each(function () {
            const match = $(this).data('type') === $type.val();
            $(this).toggle(match).prop('disabled', !match);
        });
    }
    $type.on('change', syncApplicant);
    syncApplicant();

    // Load the product's dynamic fields whenever the product changes.
    function loadFields() {
        const productId = $('#finance_product_id').val();
        if (!productId) { $fields.html(`<p class="text-muted mb-0">{{ __('forms.select_product_hint') }}</p>`); return; }
        $fields.html('<div class="text-center text-muted py-3"><span class="spinner-border spinner-border-sm"></span></div>');
        $.get("{{ route('applications.dynamic-fields') }}", { product_id: productId, application: editingAppId })
            .done(html => $fields.html(html))
            .fail(() => $fields.html('<p class="text-danger">{{ __('app.operation_failed') }}</p>'));
    }
    // Only auto-(re)load on manual change. On first paint we keep the server-rendered
    // section (so validation errors / saved values survive).
    $('#finance_product_id').on('change', loadFields);
    @if(!isset($sections))
        if ($('#finance_product_id').val()) loadFields();
    @endif
});
</script>
@endpush