@extends('layouts.admin')

@section('page_title', $bank->exists ? ($isRtl ? 'تعديل بنك' : 'Edit Bank') : ($isRtl ? 'إضافة بنك' : 'Add Bank'))

@push('styles')
<style>
    .bank-form-grid{display:grid;grid-template-columns:1fr 320px;gap:1rem;}
    .section-title{display:flex;align-items:center;gap:.6rem;margin:0 0 1rem;font-size:.95rem;font-weight:700;color:#0f172a;padding-bottom:.75rem;border-bottom:2px solid #e6ecff;}
    .section-title .num{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,#e31e24,#1a1a1a);color:#fff;font-size:.8rem;}
    .form-field .hint{display:block;color:#6b7280;font-size:.75rem;margin-top:.3rem;}
    .logo-preview{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:1rem;background:#f9fafb;border:2px dashed #cbd5e1;border-radius:10px;}
    .logo-preview img{max-height:80px;background:#fff;padding:8px;border-radius:6px;}
    .preview-card{background:linear-gradient(135deg,var(--bc-color,#e31e24),var(--bc-color-2,#1a1a1a));color:#fff;border-radius:14px;padding:1.25rem;position:sticky;top:1rem;}
    .preview-card .pc-logo{width:56px;height:56px;border-radius:12px;background:rgba(255,255,255,.2);display:grid;place-items:center;font-size:1.25rem;font-weight:800;margin-bottom:.75rem;overflow:hidden;}
    .preview-card .pc-logo img{max-width:100%;max-height:100%;}
    .preview-card h3{margin:0 0 .25rem;font-size:1.1rem;color:#fff;}
    .preview-card .pc-meta{font-size:.8rem;opacity:.85;margin-bottom:.8rem;}
    .preview-card .pc-row{display:flex;justify-content:space-between;padding:.5rem 0;border-top:1px solid rgba(255,255,255,.2);font-size:.82rem;}
    .preview-card .pc-row span:first-child{opacity:.8;}
    .color-input{width:60px;height:42px;padding:0;border:1px solid var(--admin-border);border-radius:8px;cursor:pointer;}
    @media (max-width:1000px){.bank-form-grid{grid-template-columns:1fr;}}
</style>
@endpush

@section('content')
<div class="bank-form-grid">

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

    {{-- Identity --}}
    <div class="admin-card">
        <h3 class="section-title"><span class="num">1</span> {{ $isRtl ? 'الهوية الأساسية' : 'Identity' }}</h3>

        <div class="lang-group" style="margin-bottom:1rem;">
            <div class="lang-tabs">
                <button type="button" class="lang-tab active" data-lang="ar">العربية</button>
                <button type="button" class="lang-tab" data-lang="en">English</button>
            </div>
            <div class="lang-pane active" data-lang="ar">
                <div class="form-row">
                    <div class="form-field">
                        <label>الاسم (عربي) *</label>
                        <input type="text" name="name_ar" id="f-name-ar" value="{{ old('name_ar', $bank->getTranslations('name')['ar'] ?? '') }}" required>
                        @error('name_ar')<div class="err">{{ $message }}</div>@enderror
                    </div>
                    <div class="form-field">
                        <label>{{ $isRtl ? 'نوع البنك' : 'Bank Type' }}</label>
                        <select name="bank_type" id="f-type">
                            @php $type = old('bank_type', $bank->bank_type); @endphp
                            <option value="">— {{ $isRtl ? 'اختر' : 'Select' }} —</option>
                            <option value="commercial" {{ $type === 'commercial' ? 'selected' : '' }}>{{ $isRtl ? 'بنك تجاري' : 'Commercial' }}</option>
                            <option value="islamic"    {{ $type === 'islamic'    ? 'selected' : '' }}>{{ $isRtl ? 'بنك إسلامي' : 'Islamic' }}</option>
                            <option value="investment" {{ $type === 'investment' ? 'selected' : '' }}>{{ $isRtl ? 'بنك استثماري' : 'Investment' }}</option>
                            <option value="digital"    {{ $type === 'digital'    ? 'selected' : '' }}>{{ $isRtl ? 'بنك رقمي' : 'Digital' }}</option>
                            <option value="central"    {{ $type === 'central'    ? 'selected' : '' }}>{{ $isRtl ? 'بنك مركزي' : 'Central' }}</option>
                        </select>
                    </div>
                </div>
                <div class="form-field">
                    <label>الوصف (عربي)</label>
                    <textarea name="description_ar">{{ old('description_ar', $bank->getTranslations('description')['ar'] ?? '') }}</textarea>
                </div>
            </div>
            <div class="lang-pane" data-lang="en">
                <div class="form-field" style="margin-bottom:1rem;">
                    <label>Name (English)</label>
                    <input type="text" name="name_en" id="f-name-en" value="{{ old('name_en', $bank->getTranslations('name')['en'] ?? '') }}">
                </div>
                <div class="form-field">
                    <label>Description (English)</label>
                    <textarea name="description_en">{{ old('description_en', $bank->getTranslations('description')['en'] ?? '') }}</textarea>
                </div>
            </div>
        </div>

        <div class="form-row">
            <div class="form-field">
                <label>{{ $isRtl ? 'الرابط (Slug)' : 'Slug' }} *</label>
                <input type="text" name="slug" value="{{ old('slug', $bank->slug) }}" required>
                <small class="hint">{{ $isRtl ? 'مثال: alrajhi-bank' : 'e.g. alrajhi-bank' }}</small>
                @error('slug')<div class="err">{{ $message }}</div>@enderror
            </div>
            <div class="form-field">
                <label>{{ $isRtl ? 'الترتيب' : 'Display Order' }}</label>
                <input type="number" name="order" value="{{ old('order', $bank->order ?? 0) }}">
            </div>
        </div>
    </div>

    {{-- Regulatory --}}
    <div class="admin-card">
        <h3 class="section-title"><span class="num">2</span> {{ $isRtl ? 'البيانات التنظيمية' : 'Regulatory & Codes' }}</h3>
        <div class="form-row">
            <div class="form-field">
                <label>SWIFT / BIC</label>
                <input type="text" name="swift_code" value="{{ old('swift_code', $bank->swift_code) }}" placeholder="RJHISARI" maxlength="20">
                <small class="hint">{{ $isRtl ? '8 أو 11 حرف' : '8 or 11 characters' }}</small>
            </div>
            <div class="form-field">
                <label>{{ $isRtl ? 'بادئة IBAN' : 'IBAN Prefix' }}</label>
                <input type="text" name="iban_prefix" value="{{ old('iban_prefix', $bank->iban_prefix) }}" placeholder="SA80" maxlength="10">
            </div>
            <div class="form-field">
                <label>{{ $isRtl ? 'رقم الترخيص' : 'License Number' }}</label>
                <input type="text" name="license_number" value="{{ old('license_number', $bank->license_number) }}">
            </div>
        </div>
        <div class="form-row">
            <div class="form-field">
                <label>{{ $isRtl ? 'سنة التأسيس' : 'Established Year' }}</label>
                <input type="number" name="established_year" min="1700" max="{{ date('Y') }}" value="{{ old('established_year', $bank->established_year) }}">
            </div>
            <div class="form-field">
                <label>{{ $isRtl ? 'لون العلامة التجارية' : 'Brand Color' }}</label>
                <div style="display:flex;gap:.5rem;align-items:center;">
                    <input type="color" class="color-input" id="f-brand-color" value="{{ old('brand_color', $bank->brand_color ?? '#e31e24') }}">
                    <input type="text" name="brand_color" id="f-brand-color-text" value="{{ old('brand_color', $bank->brand_color ?? '#e31e24') }}" style="flex:1;">
                </div>
            </div>
        </div>
    </div>

    {{-- Location --}}
    <div class="admin-card">
        <h3 class="section-title"><span class="num">3</span> {{ $isRtl ? 'الموقع الجغرافي' : 'Location' }}</h3>
        <div class="form-row">
            <div class="form-field">
                <label>{{ $isRtl ? 'الدولة' : 'Country' }}</label>
                <input type="text" name="country" id="f-country" value="{{ old('country', $bank->country ?? ($isRtl ? 'السعودية' : 'Saudi Arabia')) }}">
            </div>
            <div class="form-field">
                <label>{{ $isRtl ? 'المدينة' : 'City' }}</label>
                <input type="text" name="city" value="{{ old('city', $bank->city) }}">
            </div>
        </div>
        <div class="form-field">
            <label>{{ $isRtl ? 'المقر الرئيسي' : 'Headquarters Address' }}</label>
            <input type="text" name="headquarters" value="{{ old('headquarters', $bank->headquarters) }}" placeholder="{{ $isRtl ? 'الرياض، طريق الملك فهد...' : 'Riyadh, King Fahd Road...' }}">
        </div>
    </div>

    {{-- Contact --}}
    <div class="admin-card">
        <h3 class="section-title"><span class="num">4</span> {{ $isRtl ? 'معلومات التواصل' : 'Contact Info' }}</h3>
        <div class="form-row">
            <div class="form-field">
                <label><i class="fa-solid fa-globe" style="color:#e31e24;"></i> {{ $isRtl ? 'الموقع الإلكتروني' : 'Website' }}</label>
                <input type="url" name="website" value="{{ old('website', $bank->website) }}" placeholder="https://...">
            </div>
            <div class="form-field">
                <label><i class="fa-solid fa-phone" style="color:#10b981;"></i> {{ $isRtl ? 'الهاتف' : 'Phone' }}</label>
                <input type="tel" name="phone" value="{{ old('phone', $bank->phone) }}">
            </div>
            <div class="form-field">
                <label><i class="fa-solid fa-envelope" style="color:#f59e0b;"></i> {{ $isRtl ? 'البريد الإلكتروني' : 'Email' }}</label>
                <input type="email" name="email" value="{{ old('email', $bank->email) }}">
            </div>
        </div>
    </div>

    {{-- Branding --}}
    <div class="admin-card">
        <h3 class="section-title"><span class="num">5</span> {{ $isRtl ? 'الشعار والحالة' : 'Logo & Status' }}</h3>
        <div class="form-row">
            <div class="form-field">
                <label>{{ $isRtl ? 'الشعار' : 'Logo' }}</label>
                <div class="logo-preview">
                    @if($bank->logo)
                        <img src="{{ asset($bank->logo) }}" id="logo-preview-img">
                    @else
                        <i class="fa-solid fa-building-columns" style="font-size:2.5rem;color:#cbd5e1;" id="logo-preview-placeholder"></i>
                    @endif
                    <input type="file" name="logo" accept="image/*" id="logo-input">
                </div>
                @error('logo')<div class="err">{{ $message }}</div>@enderror
            </div>
            <div class="form-field" style="display:flex;align-items:flex-end;">
                <label class="form-check">
                    <input type="hidden" name="is_active" value="0">
                    <input type="checkbox" name="is_active" value="1" {{ old('is_active', $bank->is_active ?? true) ? 'checked' : '' }}>
                    <strong>{{ $isRtl ? 'نشط ومرئي على الموقع' : 'Active & visible on site' }}</strong>
                </label>
            </div>
        </div>
    </div>

    <div style="display:flex;gap:.5rem;margin-top:1rem;">
        <button type="submit" class="btn-admin btn-admin-primary">
            <i class="fa-solid fa-save"></i> {{ $isRtl ? 'حفظ البنك' : 'Save Bank' }}
        </button>
        <a href="{{ route('admin.banks.index') }}" class="btn-admin btn-admin-outline">{{ $isRtl ? 'إلغاء' : 'Cancel' }}</a>
    </div>
</form>

{{-- Live Preview --}}
<div>
    <div class="preview-card" id="preview-card" style="--bc-color: {{ old('brand_color', $bank->brand_color ?? '#e31e24') }};--bc-color-2: {{ old('brand_color', $bank->brand_color ?? '#e31e24') }};">
        <div class="pc-logo" id="pc-logo">
            @if($bank->logo)
                <img src="{{ asset($bank->logo) }}">
            @else
                {{ mb_substr($bank->getTranslations('name')['ar'] ?? 'B', 0, 1) }}
            @endif
        </div>
        <h3 id="pc-name">{{ $bank->getTranslations('name')['ar'] ?? ($isRtl ? 'اسم البنك' : 'Bank Name') }}</h3>
        <div class="pc-meta" id="pc-type">{{ $isRtl ? 'معاينة مباشرة' : 'Live preview' }}</div>
        <div class="pc-row"><span>SWIFT</span><span id="pc-swift">{{ $bank->swift_code ?? '—' }}</span></div>
        <div class="pc-row"><span>{{ $isRtl ? 'الدولة' : 'Country' }}</span><span id="pc-country">{{ $bank->country ?? '—' }}</span></div>
        <div class="pc-row"><span>{{ $isRtl ? 'تأسس' : 'Est.' }}</span><span id="pc-year">{{ $bank->established_year ?? '—' }}</span></div>
    </div>
</div>

</div>

@push('scripts')
<script>
(function(){
    const color = document.getElementById('f-brand-color');
    const colorText = document.getElementById('f-brand-color-text');
    const card = document.getElementById('preview-card');
    const sync = (v) => { card.style.setProperty('--bc-color', v); card.style.setProperty('--bc-color-2', shade(v, -25)); };
    color?.addEventListener('input', e => { colorText.value = e.target.value; sync(e.target.value); });
    colorText?.addEventListener('input', e => { if(/^#[0-9a-f]{6}$/i.test(e.target.value)){ color.value = e.target.value; sync(e.target.value); }});

    const nameAr = document.getElementById('f-name-ar');
    const nameEn = document.getElementById('f-name-en');
    const pcName = document.getElementById('pc-name');
    const pcLogo = document.getElementById('pc-logo');
    const updateName = () => {
        const n = (nameAr?.value || nameEn?.value || '').trim();
        if (n) { pcName.textContent = n; if(!pcLogo.querySelector('img')) pcLogo.textContent = n.charAt(0).toUpperCase(); }
    };
    nameAr?.addEventListener('input', updateName);
    nameEn?.addEventListener('input', updateName);

    const bind = (id, target) => {
        const el = document.getElementById(id);
        const out = document.getElementById(target);
        el?.addEventListener('input', e => { out.textContent = e.target.value || '—'; });
    };
    bind('f-country', 'pc-country');

    const typeSel = document.getElementById('f-type');
    typeSel?.addEventListener('change', e => {
        const v = e.target.value;
        document.getElementById('pc-type').textContent = v ? e.target.options[e.target.selectedIndex].text : '{{ $isRtl ? "معاينة مباشرة" : "Live preview" }}';
    });

    document.querySelector('input[name=swift_code]')?.addEventListener('input', e => document.getElementById('pc-swift').textContent = e.target.value || '—');
    document.querySelector('input[name=established_year]')?.addEventListener('input', e => document.getElementById('pc-year').textContent = e.target.value || '—');

    const logoInput = document.getElementById('logo-input');
    logoInput?.addEventListener('change', e => {
        const file = e.target.files[0]; if(!file) return;
        const reader = new FileReader();
        reader.onload = ev => {
            let img = document.getElementById('logo-preview-img');
            const placeholder = document.getElementById('logo-preview-placeholder');
            if (placeholder) placeholder.remove();
            if (!img) {
                img = document.createElement('img');
                img.id = 'logo-preview-img';
                document.querySelector('.logo-preview').prepend(img);
            }
            img.src = ev.target.result;
            pcLogo.innerHTML = '<img src="'+ev.target.result+'">';
        };
        reader.readAsDataURL(file);
    });

    function shade(hex, percent) {
        const f = parseInt(hex.slice(1), 16), t = percent < 0 ? 0 : 255, p = Math.abs(percent) / 100;
        const R = f >> 16, G = (f >> 8) & 0xff, B = f & 0xff;
        return '#' + (0x1000000 + (Math.round((t - R) * p) + R) * 0x10000 + (Math.round((t - G) * p) + G) * 0x100 + (Math.round((t - B) * p) + B)).toString(16).slice(1);
    }
})();
</script>
@endpush

@endsection