@extends('layouts.admin')

@section('page_title', $isRtl ? 'البنوك' : 'Banks')

@push('styles')
<style>
    .bank-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem;}
    .bank-card{background:#fff;border:1px solid var(--admin-border);border-radius:14px;overflow:hidden;position:relative;transition:transform .15s,box-shadow .2s;}
    .bank-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(15,23,42,.08);}
    .bank-card-header{padding:1.1rem;background:linear-gradient(135deg,var(--bc,#e31e24),var(--bc2,#1a1a1a));color:#fff;position:relative;}
    .bank-card-header .status-dot{position:absolute;top:1rem;{{ $isRtl ? 'left' : 'right' }}:1rem;width:10px;height:10px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(255,255,255,.3);}
    .bank-card-header .status-dot.inactive{background:#94a3b8;}
    .bc-logo{width:56px;height:56px;border-radius:12px;background:rgba(255,255,255,.25);display:grid;place-items:center;font-size:1.35rem;font-weight:800;margin-bottom:.65rem;overflow:hidden;}
    .bc-logo img{max-width:100%;max-height:100%;background:#fff;border-radius:8px;padding:4px;}
    .bc-name{margin:0 0 .25rem;font-size:1.1rem;color:#fff;font-weight:700;}
    .bc-type{font-size:.78rem;opacity:.9;background:rgba(255,255,255,.2);display:inline-block;padding:.2rem .6rem;border-radius:999px;}
    .bank-card-body{padding:1rem 1.1rem;}
    .bc-row{display:flex;justify-content:space-between;align-items:center;font-size:.82rem;padding:.45rem 0;border-bottom:1px dashed #eef0f5;}
    .bc-row:last-child{border-bottom:0;}
    .bc-row .k{color:#6b7280;display:flex;align-items:center;gap:.4rem;}
    .bc-row .v{font-weight:600;color:#1e2333;}
    .bank-card-footer{display:flex;gap:.5rem;padding:.85rem 1.1rem;background:#fafbff;border-top:1px solid var(--admin-border);}
    .bc-offers{position:absolute;top:-.5rem;{{ $isRtl ? 'right' : 'left' }}:1rem;background:#fff;color:var(--bc,#e31e24);border:2px solid var(--bc,#e31e24);font-weight:800;font-size:.72rem;padding:.25rem .6rem;border-radius:999px;}
    .toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;flex-wrap:wrap;gap:1rem;}
    .view-toggle{display:flex;gap:.25rem;background:#f3f4f6;padding:.25rem;border-radius:8px;}
    .view-toggle button{padding:.4rem .8rem;border:0;border-radius:6px;background:transparent;cursor:pointer;font-weight:600;font-size:.85rem;color:#6b7280;}
    .view-toggle button.active{background:#fff;color:#e31e24;box-shadow:0 1px 3px rgba(0,0,0,.06);}
</style>
@endpush

@section('content')

<div class="toolbar">
    <div>
        <h2 style="margin:0;font-size:1.3rem;font-weight:700;">{{ $isRtl ? 'إدارة البنوك' : 'Banks Management' }}</h2>
        <p style="margin:.25rem 0 0;color:#6b7280;font-size:.85rem;">{{ $isRtl ? 'إجمالي ' : 'Total ' }} {{ $banks->total() }} {{ $isRtl ? 'بنك' : 'banks' }}</p>
    </div>
    <div style="display:flex;gap:.75rem;align-items:center;">
        <div class="view-toggle">
            <button type="button" class="active" data-view="grid"><i class="fa-solid fa-grip"></i> {{ $isRtl ? 'شبكة' : 'Grid' }}</button>
            <button type="button" data-view="list"><i class="fa-solid fa-list"></i> {{ $isRtl ? 'قائمة' : 'List' }}</button>
        </div>
        <a href="{{ route('admin.banks.create') }}" class="btn-admin btn-admin-primary">
            <i class="fa-solid fa-plus"></i> {{ $isRtl ? 'إضافة بنك' : 'Add Bank' }}
        </a>
    </div>
</div>

@if($banks->isEmpty())
    <div class="admin-card" style="text-align:center;padding:3rem 1rem;">
        <i class="fa-solid fa-building-columns" style="font-size:3rem;color:#cbd5e1;margin-bottom:1rem;"></i>
        <h3 style="margin:0 0 .5rem;">{{ $isRtl ? 'لا يوجد بنوك بعد' : 'No banks yet' }}</h3>
        <p style="color:#6b7280;margin:0 0 1.25rem;">{{ $isRtl ? 'ابدأ بإضافة البنك الأول' : 'Start by adding your first bank' }}</p>
        <a href="{{ route('admin.banks.create') }}" class="btn-admin btn-admin-primary">
            <i class="fa-solid fa-plus"></i> {{ $isRtl ? 'إضافة بنك' : 'Add Bank' }}
        </a>
    </div>
@else

{{-- Grid view --}}
<div class="bank-grid" id="view-grid">
    @foreach($banks as $bank)
        @php
            $brand = $bank->brand_color ?: '#e31e24';
            $brand2 = $brand;
            $types = [
                'commercial' => $isRtl ? 'تجاري' : 'Commercial',
                'islamic'    => $isRtl ? 'إسلامي' : 'Islamic',
                'investment' => $isRtl ? 'استثماري' : 'Investment',
                'digital'    => $isRtl ? 'رقمي' : 'Digital',
                'central'    => $isRtl ? 'مركزي' : 'Central',
            ];
        @endphp
        <div class="bank-card" style="--bc:{{ $brand }};--bc2:{{ $brand2 }};">
            <div class="bank-card-header">
                <div class="status-dot {{ $bank->is_active ? '' : 'inactive' }}" title="{{ $bank->is_active ? ($isRtl ? 'نشط' : 'Active') : ($isRtl ? 'معطل' : 'Inactive') }}"></div>
                <div class="bc-logo">
                    @if($bank->logo)
                        <img src="{{ asset($bank->logo) }}" alt="">
                    @else
                        {{ mb_substr($bank->name ?? 'B', 0, 1) }}
                    @endif
                </div>
                <h3 class="bc-name">{{ $bank->name }}</h3>
                @if($bank->bank_type && isset($types[$bank->bank_type]))
                    <span class="bc-type">{{ $types[$bank->bank_type] }}</span>
                @endif
            </div>
            <div class="bc-offers">{{ $bank->offers_count ?? $bank->offers()->count() }} {{ $isRtl ? 'عرض' : 'offers' }}</div>
            <div class="bank-card-body">
                @if($bank->swift_code)
                    <div class="bc-row"><span class="k"><i class="fa-solid fa-code"></i> SWIFT</span><span class="v">{{ $bank->swift_code }}</span></div>
                @endif
                @if($bank->country)
                    <div class="bc-row"><span class="k"><i class="fa-solid fa-earth-africa"></i> {{ $isRtl ? 'الدولة' : 'Country' }}</span><span class="v">{{ $bank->country }}</span></div>
                @endif
                @if($bank->established_year)
                    <div class="bc-row"><span class="k"><i class="fa-solid fa-calendar"></i> {{ $isRtl ? 'تأسس' : 'Est.' }}</span><span class="v">{{ $bank->established_year }}</span></div>
                @endif
                @if($bank->website)
                    <div class="bc-row"><span class="k"><i class="fa-solid fa-globe"></i> {{ $isRtl ? 'الموقع' : 'Website' }}</span>
                        <a href="{{ $bank->website }}" target="_blank" rel="noopener" style="color:var(--bc);font-weight:600;text-decoration:none;">
                            {{ parse_url($bank->website, PHP_URL_HOST) ?: $bank->website }} <i class="fa-solid fa-arrow-up-right-from-square" style="font-size:.7rem;"></i>
                        </a>
                    </div>
                @endif
                @if($bank->phone)
                    <div class="bc-row"><span class="k"><i class="fa-solid fa-phone"></i> {{ $isRtl ? 'الهاتف' : 'Phone' }}</span><span class="v" style="direction:ltr;">{{ $bank->phone }}</span></div>
                @endif
                <div class="bc-row"><span class="k"><i class="fa-solid fa-link"></i> Slug</span><span class="v"><code style="font-size:.78rem;">{{ $bank->slug }}</code></span></div>
            </div>
            <div class="bank-card-footer">
                <a href="{{ route('admin.banks.edit', $bank) }}" class="btn-admin btn-admin-outline btn-admin-sm" style="flex:1;justify-content:center;">
                    <i class="fa-solid fa-pen"></i> {{ $isRtl ? 'تعديل' : 'Edit' }}
                </a>
                <form method="POST" action="{{ route('admin.banks.destroy', $bank) }}" style="flex:0 0 auto;" onsubmit="return confirm('{{ $isRtl ? 'تأكيد الحذف؟' : 'Confirm delete?' }}')">
                    @csrf @method('DELETE')
                    <button class="btn-admin btn-admin-danger btn-admin-sm"><i class="fa-solid fa-trash"></i></button>
                </form>
            </div>
        </div>
    @endforeach
</div>

{{-- List view --}}
<div class="admin-card" id="view-list" style="display:none;">
    <table class="admin-table">
        <thead>
        <tr>
            <th>{{ $isRtl ? 'الشعار' : 'Logo' }}</th>
            <th>{{ $isRtl ? 'الاسم' : 'Name' }}</th>
            <th>SWIFT</th>
            <th>{{ $isRtl ? 'الدولة' : 'Country' }}</th>
            <th>{{ $isRtl ? 'العروض' : 'Offers' }}</th>
            <th>{{ $isRtl ? 'الحالة' : 'Status' }}</th>
            <th></th>
        </tr>
        </thead>
        <tbody>
        @foreach($banks as $bank)
            <tr>
                <td>
                    @if($bank->logo)
                        <img src="{{ asset($bank->logo) }}" style="width:42px;height:42px;object-fit:contain;background:#f9fafb;border-radius:6px;padding:3px;">
                    @else
                        <div style="width:42px;height:42px;background:{{ $bank->brand_color ?: '#f3f4f6' }};color:#fff;border-radius:6px;display:grid;place-items:center;font-weight:700;">
                            {{ mb_substr($bank->name ?? 'B', 0, 1) }}
                        </div>
                    @endif
                </td>
                <td><strong>{{ $bank->name }}</strong><br><small style="color:#6b7280;">{{ $bank->slug }}</small></td>
                <td><code>{{ $bank->swift_code ?? '—' }}</code></td>
                <td>{{ $bank->country ?? '—' }}</td>
                <td>{{ $bank->offers_count ?? $bank->offers()->count() }}</td>
                <td>
                    @if($bank->is_active)
                        <span class="badge-pill badge-success">{{ $isRtl ? 'نشط' : 'Active' }}</span>
                    @else
                        <span class="badge-pill badge-muted">{{ $isRtl ? 'معطل' : 'Inactive' }}</span>
                    @endif
                </td>
                <td>
                    <a href="{{ route('admin.banks.edit', $bank) }}" class="btn-admin btn-admin-outline btn-admin-sm"><i class="fa-solid fa-pen"></i></a>
                    <form method="POST" action="{{ route('admin.banks.destroy', $bank) }}" style="display:inline;" onsubmit="return confirm('{{ $isRtl ? 'تأكيد الحذف؟' : 'Confirm delete?' }}')">
                        @csrf @method('DELETE')
                        <button class="btn-admin btn-admin-danger btn-admin-sm"><i class="fa-solid fa-trash"></i></button>
                    </form>
                </td>
            </tr>
        @endforeach
        </tbody>
    </table>
</div>

<div style="margin-top:1rem;">{{ $banks->links() }}</div>
@endif

@push('scripts')
<script>
    document.querySelectorAll('.view-toggle button').forEach(btn => {
        btn.addEventListener('click', () => {
            document.querySelectorAll('.view-toggle button').forEach(b => b.classList.remove('active'));
            btn.classList.add('active');
            const view = btn.dataset.view;
            document.getElementById('view-grid').style.display = view === 'grid' ? '' : 'none';
            document.getElementById('view-list').style.display = view === 'list' ? '' : 'none';
        });
    });
</script>
@endpush

@endsection