@php
    $certificateTypes = [
        'upedia' => 'Upedia',
        'westminster' => 'Westminster',
        'pearson' => 'Pearson',
    ];
    $deliveryTypes = [
        'hard' => 'Hard Copy',
        'soft' => 'Soft Copy',
    ];
@endphp

<div class="p-3">
    <form
        action="{{ $isEditing ? route('certificate-payment-configurations.update', $certificatePaymentConfiguration->id) : route('certificate-payment-configurations.store') }}"
        method="POST">
        @csrf
        @if ($isEditing)
            @method('PUT')
        @endif

        <div class="row g-3">
            <div class="col-md-4">
                <label for="certificate_type" class="form-label">
                    Certificate Type <span class="text-danger">*</span>
                </label>
                <select id="certificate_type" name="certificate_type"
                    class="form-select @error('certificate_type') is-invalid @enderror" required>
                    <option value="">Select certificate type</option>
                    @foreach ($certificateTypes as $value => $label)
                        <option value="{{ $value }}" @selected(old('certificate_type', $certificatePaymentConfiguration->certificate_type ?? '') === $value)>
                            {{ $label }}
                        </option>
                    @endforeach
                </select>
                @error('certificate_type')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div class="col-md-4">
                <label for="delivery_type" class="form-label">
                    Delivery Type <span class="text-danger">*</span>
                </label>
                <select id="delivery_type" name="delivery_type"
                    class="form-select @error('delivery_type') is-invalid @enderror" required>
                    <option value="">Select delivery type</option>
                    @foreach ($deliveryTypes as $value => $label)
                        <option value="{{ $value }}" data-delivery-option @selected(old('delivery_type', $certificatePaymentConfiguration->delivery_type ?? '') === $value)>
                            {{ $label }}
                        </option>
                    @endforeach
                </select>
                @error('delivery_type')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div class="col-md-4">
                <label for="price" class="form-label">
                    Price <span class="text-danger">*</span>
                </label>
                <input type="number" id="price" name="price" step="0.01" min="0"
                    class="form-control @error('price') is-invalid @enderror"
                    value="{{ old('price', $certificatePaymentConfiguration->price ?? '0.00') }}" required>
                @error('price')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
        </div>

        <div class="d-flex gap-2 justify-content-end mt-4">
            <a href="{{ route('certificate-payment-configurations.index') }}" class="btn btn-outline-secondary">
                Cancel
            </a>

            <button type="submit" class="asset-btn asset-btn--primary">
                {{ $isEditing ? 'Update' : 'Save' }}
            </button>
        </div>
    </form>
</div>

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const certificateTypeSelect = document.getElementById('certificate_type');
            const deliveryTypeSelect = document.getElementById('delivery_type');

            if (!certificateTypeSelect || !deliveryTypeSelect) {
                return;
            }

            const allowedDeliveryTypes = {
                upedia: ['hard', 'soft'],
                pearson: ['soft'],
                westminster: ['hard', 'soft'],
            };

            const syncDeliveryOptions = () => {
                const selectedCertificateType = certificateTypeSelect.value;
                const allowed = allowedDeliveryTypes[selectedCertificateType] || ['hard', 'soft'];
                const currentDeliveryType = deliveryTypeSelect.value;
                const options = Array.from(deliveryTypeSelect.querySelectorAll('[data-delivery-option]'));

                options.forEach((option) => {
                    const isAllowed = allowed.includes(option.value);
                    option.hidden = !isAllowed;
                    option.disabled = !isAllowed;
                });

                if (!allowed.includes(currentDeliveryType)) {
                    deliveryTypeSelect.value = allowed.length === 1 ? allowed[0] : '';
                }
            };

            certificateTypeSelect.addEventListener('change', syncDeliveryOptions);
            syncDeliveryOptions();
        });
    </script>
@endpush