@php
    /** @var \App\Models\ApiEndpointOffer|null $offer */
    $offer = $offer ?? null;
    $groupLabels = [
        'charts' => 'Haritalar (charts)',
        'drawings' => 'Çizimler (drawings)',
        'predictive' => 'Öngörüsel (predictive)',
        'ai' => 'AI Yorum (ai)',
    ];

    // İstek başı fiyat yalnızca yardımcı bir alan: POST edilmez, toplam fiyattan türetilir.
    $formRequests = (float) old('requests', $offer?->requests ?? 0);
    $formPrice = (float) str_replace(',', '.', (string) old('price', $offer?->price ?? 0));
    $unitPrice = $formRequests > 0 ? round($formPrice / $formRequests, 6) : null;
@endphp

<div class="row">
    <div class="col-md-8">
        <div class="mb-3">
            <label for="sku" class="form-label">SKU (endpoint) <span class="text-danger">*</span></label>
            <select class="form-select @error('sku') is-invalid @enderror" id="sku" name="sku" required>
                <option value="">— SKU seçin —</option>
                @foreach ($skuGroups as $group => $skus)
                    <optgroup label="{{ $groupLabels[$group] ?? $group }}">
                        @foreach ($skus as $sku => $credits)
                            <option value="{{ $sku }}"
                                {{ old('sku', $offer?->sku) === $sku ? 'selected' : '' }}>
                                {{ $sku }} ({{ $credits }} kredi)
                            </option>
                        @endforeach
                    </optgroup>
                @endforeach
            </select>
            <small class="form-text text-muted">Ücretsiz (free) grubundaki uçlar satılamaz, listede yer almaz.</small>
            @error('sku')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <div class="row">
            <div class="col-md-6 mb-3">
                <label for="billing_type" class="form-label">Faturalama <span class="text-danger">*</span></label>
                <select class="form-select @error('billing_type') is-invalid @enderror" id="billing_type"
                    name="billing_type" required>
                    <option value="{{ \App\Models\ApiEndpointOffer::BILLING_ONE_TIME }}"
                        {{ old('billing_type', $offer?->billing_type) === \App\Models\ApiEndpointOffer::BILLING_ONE_TIME ? 'selected' : '' }}>
                        Tek seferlik (istek paketi)
                    </option>
                    <option value="{{ \App\Models\ApiEndpointOffer::BILLING_MONTHLY }}"
                        {{ old('billing_type', $offer?->billing_type) === \App\Models\ApiEndpointOffer::BILLING_MONTHLY ? 'selected' : '' }}>
                        Aylık abonelik
                    </option>
                </select>
                <small class="form-text text-muted">Tek seferlik → SKU bakiyesi, aylık → endpoint aboneliği.</small>
                @error('billing_type')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
            <div class="col-md-6 mb-3">
                <label for="requests" class="form-label">İstek Adedi <span class="text-danger">*</span></label>
                <input type="number" class="form-control @error('requests') is-invalid @enderror" id="requests"
                    name="requests" value="{{ old('requests', $offer?->requests) }}" min="1" required>
                <small class="form-text text-muted">Aylık pakette dönemlik kota, tek seferlikte toplam hak.</small>
                @error('requests')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
        </div>

        {{-- Fiyatlandırma: birim × istek = toplam. İki alan JS ile çift yönlü senkronize edilir,
             backend'e YALNIZCA "price" (toplam) gider. --}}
        <div class="row g-2 align-items-start">
            <div class="col-md-5 mb-3">
                <label for="price_per_request" class="form-label">İstek Başı Fiyat (₺)</label>
                <input type="text" class="form-control" id="price_per_request"
                    value="{{ $unitPrice !== null ? rtrim(rtrim(number_format($unitPrice, 6, '.', ''), '0'), '.') : '' }}"
                    inputmode="decimal" placeholder="Örn: 0.25" autocomplete="off">
                <small class="form-text text-muted">Yardımcı alan — kaydedilmez, toplam fiyatı hesaplamak için.</small>
            </div>
            <div class="col-md-2 mb-3 text-center">
                <label class="form-label d-none d-md-block">&nbsp;</label>
                <div class="form-control-plaintext fw-bold" aria-hidden="true">
                    × istek =
                </div>
            </div>
            <div class="col-md-5 mb-3">
                <label for="price" class="form-label">Toplam Fiyat (₺) <span class="text-danger">*</span></label>
                <input type="text" class="form-control @error('price') is-invalid @enderror" id="price"
                    name="price" value="{{ old('price', $offer?->price) }}" inputmode="decimal" autocomplete="off"
                    required>
                <small class="form-text text-muted">Müşterinin ödediği paket fiyatı — kaydedilen değer budur.</small>
                @error('price')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="mb-3">
            <label for="sort_order" class="form-label">Sıra <span class="text-danger">*</span></label>
            <input type="number" class="form-control @error('sort_order') is-invalid @enderror" id="sort_order"
                name="sort_order" value="{{ old('sort_order', $offer?->sort_order ?? 0) }}" min="0" required>
            <small class="form-text text-muted">Listeleme sırası — küçük değer önce gösterilir. Araya yeni kayıt
                ekleyebilmek için 10'ar arayla girmeniz önerilir (10, 20, 30...).</small>
            @error('sort_order')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <div class="mb-3">
            <label for="is_active" class="form-label">Durum</label>
            <select class="form-select" id="is_active" name="is_active">
                <option value="1" {{ old('is_active', $offer?->is_active ?? true) ? 'selected' : '' }}>Aktif</option>
                <option value="0" {{ old('is_active', $offer?->is_active ?? true) ? '' : 'selected' }}>Pasif</option>
            </select>
            <small class="form-text text-muted">Pasif paketler satın alma sayfasında görünmez.</small>
        </div>
    </div>
</div>

{{-- İstek başı fiyat <-> toplam fiyat çift yönlü senkronizasyon (saf UI yardımcısı).
     Her dinleyici YALNIZCA karşı alana yazar, bu yüzden döngü oluşmaz. --}}
<script>
    (function () {
        var requests = document.getElementById('requests');
        var total = document.getElementById('price');
        var unit = document.getElementById('price_per_request');

        if (!requests || !total || !unit) {
            return;
        }

        // "249,90" ve "249.90" ikisini de kabul et (backend de virgülü noktaya çeviriyor).
        function num(el) {
            var raw = String(el.value || '').trim().replace(',', '.');
            if (raw === '') {
                return NaN;
            }
            return parseFloat(raw);
        }

        function trimZeros(value) {
            return String(value).indexOf('.') === -1
                ? String(value)
                : String(value).replace(/0+$/, '').replace(/\.$/, '');
        }

        function totalFromUnit() {
            var count = num(requests), price = num(unit);
            if (!isFinite(count) || count <= 0 || !isFinite(price) || price < 0) {
                return;
            }
            total.value = (Math.round(price * count * 100) / 100).toFixed(2);
        }

        function unitFromTotal() {
            var count = num(requests), price = num(total);
            if (!isFinite(count) || count <= 0 || !isFinite(price) || price < 0) {
                return;
            }
            unit.value = trimZeros((Math.round((price / count) * 1e6) / 1e6).toFixed(6));
        }

        unit.addEventListener('input', totalFromUnit);
        total.addEventListener('input', unitFromTotal);
        // İstek adedi değişince toplam fiyat sabit kabul edilir, birim fiyat yeniden hesaplanır.
        requests.addEventListener('input', unitFromTotal);
    })();
</script>