{{-- resources/views/admin/payments/gateways.blade.php --}}
@extends('admin.layouts.app')

@section('title', 'بوابات الدفع')

@php
    use Illuminate\Support\Facades\Route;
    /** @var array $gateways */
    $gateways = is_array($gateways ?? null) ? $gateways : [];
    $known = ['title','description','base_url','secret','publishable','profile_id','server_key','merchant_id','region','mode','success_status','fail_status','currency'];
    $saveOk = Route::has('admin.gateways.save');
@endphp

@section('content')
<div class="d-flex justify-content-between align-items-center mb-3">
    <h4 class="m-0"><i class="bi bi-plug"></i> بوابات الدفع</h4>
    <a class="btn btn-outline-light btn-sm" href="{{ url()->current() }}"><i class="bi bi-arrow-repeat me-1"></i> تحديث</a>
</div>

@if(!$saveOk)
    <div class="alert alert-warning">
        مسار الحفظ غير معرّف. أضِف داخل مجموعة <code>admin</code> في <code>routes/web.php</code>:
        <div class="small mt-2">
<pre class="mb-0"><code>Route::get('/gateways', [\App\Http\Controllers\Admin\PaymentGatewaySettingsController::class, 'index'])->name('gateways.index');
Route::post('/gateways', [\App\Http\Controllers\Admin\PaymentGatewaySettingsController::class, 'save'])->name('gateways.save');</code></pre>
        </div>
    </div>
@endif

@if(!empty($storage))
    <div class="alert alert-info small">
        سيتم الحفظ في الجدول: <b>{{ $storage['table'] ?? '' }}</b> — المفتاح: <b>{{ $storage['key_col'] ?? '' }}</b> — القيمة (JSON): <b>{{ $storage['val_col'] ?? '' }}</b><br>
        المفتاح المحفوظ: <b>payments.gateways</b>
    </div>
@endif

<ul class="nav nav-tabs mb-3" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#paneForm" type="button" role="tab">
            <i class="bi bi-sliders me-1"></i> إعداد بصيغة فورم
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#paneJson" type="button" role="tab">
            <i class="bi bi-braces me-1"></i> لصق JSON مباشرة
        </button>
    </li>
</ul>

<div class="tab-content">
    {{-- ================= فورم ================= --}}
    <div class="tab-pane fade show active" id="paneForm" role="tabpanel">
        <form method="POST" action="{{ $saveOk ? route('admin.gateways.save') : '#' }}" id="gatewaysForm">
            @csrf

            <div id="gws" class="d-grid gap-3">
                @forelse($gateways as $name => $cfg)
                    @php
                        $id = strtolower((string)$name);
                        $cfg = is_array($cfg) ? $cfg : [];
                        $enabled = !empty($cfg['enabled']);
                        $extra = collect($cfg)->filter(fn($v,$k)=>!in_array($k,$known) && $k!=='enabled')->all();
                    @endphp
                    <div class="card">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <div>
                                <span class="badge text-bg-secondary">{{ strtoupper($id) }}</span>
                                <span class="ms-2 text-muted">{{ $cfg['title'] ?? '' }}</span>
                            </div>
                            <div class="form-check form-switch m-0">
                                <input class="form-check-input" type="checkbox" id="en-{{ $id }}" name="gateways[{{ $id }}][enabled]" {{ $enabled ? 'checked' : '' }}>
                                <label class="form-check-label" for="en-{{ $id }}">مفعّل</label>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row g-3">
                                <div class="col-md-3">
                                    <label class="form-label">الاسم الظاهر (title)</label>
                                    <input class="form-control" name="gateways[{{ $id }}][title]" value="{{ $cfg['title'] ?? '' }}">
                                </div>
                                <div class="col-md-5">
                                    <label class="form-label">الوصف (description)</label>
                                    <input class="form-control" name="gateways[{{ $id }}][description]" value="{{ $cfg['description'] ?? '' }}">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">وضع التشغيل (mode)</label>
                                    @php $mode = $cfg['mode'] ?? 'live'; @endphp
                                    <select class="form-select" name="gateways[{{ $id }}][mode]">
                                        <option value="live" @selected($mode==='live')>Live</option>
                                        <option value="sandbox" @selected($mode==='sandbox')>Sandbox / Test</option>
                                    </select>
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">Checkout URL (base_url)</label>
                                    <input class="form-control" name="gateways[{{ $id }}][base_url]" value="{{ $cfg['base_url'] ?? '' }}" placeholder="https://checkout.example/pay">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Webhook/Signing Secret (secret)</label>
                                    <input class="form-control" name="gateways[{{ $id }}][secret]" value="{{ $cfg['secret'] ?? '' }}">
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">Publishable/Public Key</label>
                                    <input class="form-control" name="gateways[{{ $id }}][publishable]" value="{{ $cfg['publishable'] ?? '' }}">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Profile ID</label>
                                    <input class="form-control" name="gateways[{{ $id }}][profile_id]" value="{{ $cfg['profile_id'] ?? '' }}">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Server Key</label>
                                    <input class="form-control" name="gateways[{{ $id }}][server_key]" value="{{ $cfg['server_key'] ?? '' }}">
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">Merchant ID</label>
                                    <input class="form-control" name="gateways[{{ $id }}][merchant_id]" value="{{ $cfg['merchant_id'] ?? '' }}">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Region</label>
                                    <input class="form-control" name="gateways[{{ $id }}][region]" value="{{ $cfg['region'] ?? '' }}" placeholder="AE / SA / ...">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">العملة الافتراضية</label>
                                    <input class="form-control" name="gateways[{{ $id }}][currency]" value="{{ $cfg['currency'] ?? '' }}" placeholder="AED / SAR / USD">
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">حالة النجاح (success_status)</label>
                                    <input class="form-control" name="gateways[{{ $id }}][success_status]" value="{{ $cfg['success_status'] ?? 'paid' }}">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">حالة الفشل (fail_status)</label>
                                    <input class="form-control" name="gateways[{{ $id }}][fail_status]" value="{{ $cfg['fail_status'] ?? 'failed' }}">
                                </div>
                            </div>

                            {{-- مفاتيح إضافية --}}
                            @php $extraIndex = 0; @endphp
                            <hr class="my-4">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <h6 class="m-0"><i class="bi bi-plus-circle"></i> مفاتيح إضافية (اختياري)</h6>
                                <button type="button" class="btn btn-outline-light btn-sm add-extra" data-gw="{{ $id }}">إضافة حقل</button>
                            </div>
                            <div class="row g-2 align-items-center" id="extra-{{ $id }}">
                                @foreach($extra as $k => $v)
                                    <div class="col-md-5">
                                        <input class="form-control" name="gateways[{{ $id }}][extra][{{ $k }}]" value="{{ is_scalar($v) ? $v : json_encode($v, JSON_UNESCAPED_UNICODE) }}" placeholder="المفتاح">
                                    </div>
                                    <div class="col-md-6">
                                        <input class="form-control" value="{{ is_scalar($v) ? $v : json_encode($v, JSON_UNESCAPED_UNICODE) }}" oninput="this.previousElementSibling.name='gateways[{{ $id }}][extra]['+this.parentElement.previousElementSibling.querySelector('input').value+']'">
                                    </div>
                                    <div class="col-md-1 text-end">
                                        <button type="button" class="btn btn-outline-light remove-row"><i class="bi bi-x"></i></button>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="alert alert-warning">لا توجد بوابات بعد. اضغط زر “إضافة بوابة جديدة”.</div>
                @endforelse
            </div>

            <div class="mt-2 d-flex gap-2">
                <button type="button" class="btn btn-outline-light" id="addGateway"><i class="bi bi-plus-lg me-1"></i> إضافة بوابة جديدة</button>
                <div class="ms-auto small text-muted">
                    مسار الرجوع: <code>{{ url('/payments/callback/{gateway}') }}</code> — ويبهوك: <code>{{ url('/payments/webhook/{gateway}') }}</code>
                </div>
            </div>

            <div class="text-end mt-3">
                <button class="btn btn-primary"><i class="bi bi-check2-circle me-1"></i> حفظ الإعدادات</button>
            </div>
        </form>
    </div>

    {{-- ================= JSON ================= --}}
    <div class="tab-pane fade" id="paneJson" role="tabpanel">
        <form method="POST" action="{{ $saveOk ? route('admin.gateways.save') : '#' }}">
            @csrf
            <div class="mb-2 small text-muted">
                الصيغة المتوقعة: <code>{"stripe":{"enabled":true,"secret":"...","base_url":"..."}, "paytabs":{...}}</code>
            </div>
            <textarea name="raw_json" class="form-control" rows="10">{{ json_encode($gateways, JSON_PRETTY_PRINT|JSON_UNESCAPED_UNICODE) }}</textarea>
            <div class="text-end mt-3">
                <button class="btn btn-primary"><i class="bi bi-save me-1"></i> حفظ JSON</button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
(function(){
    const gws = document.getElementById('gws');

    // إضافة بوابة جديدة (بسيطة)
    document.getElementById('addGateway')?.addEventListener('click', function(){
        const name = prompt('معرّف البوابة (بالإنجليزية وبدون مسافات): مثل stripe / paytabs / tap');
        if(!name) return;
        const id = name.trim().toLowerCase().replace(/[^a-z0-9_\-]/g,'');
        if(!id) return;
        if (document.querySelector('[data-gw="'+id+'"]')) { alert('هذه البوابة موجودة.'); return; }

        const html = `
<div class="card" data-gw="${id}">
  <div class="card-header d-flex justify-content-between align-items-center">
    <div><span class="badge text-bg-secondary">${id.toUpperCase()}</span></div>
    <div class="form-check form-switch m-0">
      <input class="form-check-input" type="checkbox" id="en-${id}" name="gateways[${id}][enabled]" checked>
      <label class="form-check-label" for="en-${id}">مفعّل</label>
    </div>
  </div>
  <div class="card-body">
    <div class="row g-3">
      <div class="col-md-3"><label class="form-label">الاسم الظاهر (title)</label><input class="form-control" name="gateways[${id}][title]"></div>
      <div class="col-md-5"><label class="form-label">الوصف (description)</label><input class="form-control" name="gateways[${id}][description]"></div>
      <div class="col-md-4">
        <label class="form-label">وضع التشغيل (mode)</label>
        <select class="form-select" name="gateways[${id}][mode]"><option value="live">Live</option><option value="sandbox">Sandbox / Test</option></select>
      </div>
      <div class="col-md-6"><label class="form-label">Checkout URL (base_url)</label><input class="form-control" name="gateways[${id}][base_url]" placeholder="https://checkout.example/pay"></div>
      <div class="col-md-6"><label class="form-label">Webhook/Signing Secret (secret)</label><input class="form-control" name="gateways[${id}][secret]"></div>
      <div class="col-md-4"><label class="form-label">Publishable/Public Key</label><input class="form-control" name="gateways[${id}][publishable]"></div>
      <div class="col-md-4"><label class="form-label">Profile ID</label><input class="form-control" name="gateways[${id}][profile_id]"></div>
      <div class="col-md-4"><label class="form-label">Server Key</label><input class="form-control" name="gateways[${id}][server_key]"></div>
      <div class="col-md-4"><label class="form-label">Merchant ID</label><input class="form-control" name="gateways[${id}][merchant_id]"></div>
      <div class="col-md-4"><label class="form-label">Region</label><input class="form-control" name="gateways[${id}][region]" placeholder="AE / SA / ..."></div>
      <div class="col-md-4"><label class="form-label">العملة الافتراضية</label><input class="form-control" name="gateways[${id}][currency]" placeholder="AED / SAR / USD"></div>
      <div class="col-md-6"><label class="form-label">حالة النجاح</label><input class="form-control" name="gateways[${id}][success_status]" value="paid"></div>
      <div class="col-md-6"><label class="form-label">حالة الفشل</label><input class="form-control" name="gateways[${id}][fail_status]" value="failed"></div>
    </div>
    <hr class="my-4">
    <div class="d-flex justify-content-between align-items-center mb-2">
      <h6 class="m-0"><i class="bi bi-plus-circle"></i> مفاتيح إضافية (اختياري)</h6>
      <button type="button" class="btn btn-outline-light btn-sm add-extra" data-gw="${id}">إضافة حقل</button>
    </div>
    <div class="row g-2 align-items-center" id="extra-${id}"></div>
  </div>
</div>`;
        const wrap = document.createElement('div');
        wrap.innerHTML = html;
        gws.appendChild(wrap.firstElementChild);
    });

    // إضافة/حذف حقول extra
    document.addEventListener('click', function(e){
        const add = e.target.closest('.add-extra');
        if (add) {
            const id = add.dataset.gw;
            const holder = document.getElementById('extra-' + id);
            const row = document.createElement('div');
            row.className = 'row g-2 align-items-center';
            row.innerHTML = `
                <div class="col-md-5"><input class="form-control" placeholder="المفتاح" oninput="this.parentElement.nextElementSibling.querySelector('input').name = 'gateways[${id}][extra]['+this.value+']'"></div>
                <div class="col-md-6"><input class="form-control" placeholder="القيمة"></div>
                <div class="col-md-1 text-end"><button type="button" class="btn btn-outline-light remove-row"><i class="bi bi-x"></i></button></div>
            `;
            holder.appendChild(row);
        }
        const rm = e.target.closest('.remove-row');
        if (rm) rm.closest('.row')?.remove();
    });
})();
</script>
@endpush