@extends('layouts.master')

@section('content')
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<style>
    .font-cairo { font-family: 'Cairo', sans-serif !important; }
</style>

<div class="p-4 sm:p-6 space-y-6 font-cairo" dir="rtl" x-data="{ copiedToast: false }">
    <!-- Header Card -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 bg-white dark:bg-gray-800 p-6 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700">
        <div>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
                <i class="fas fa-university text-emerald-500"></i>
                إدارة البنوك والربط المصرفي (Banks & Passport API Integration)
            </h1>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">توليد وإدارة حسابات ورموز وصول الأنظمة المصرفية المعتمدة للتحصيل وتدقيق العمليات</p>
        </div>
    </div>

    @if(session('success_message'))
        <div class="p-4 bg-emerald-50 border border-emerald-200 text-emerald-800 rounded-xl flex items-center gap-3 shadow-sm">
            <i class="fas fa-check-circle text-emerald-600 text-xl"></i>
            <div class="text-sm font-semibold">{!! session('success_message') !!}</div>
        </div>
    @endif

    @if($errors->any())
        <div class="p-4 bg-rose-50 border border-rose-200 text-rose-800 rounded-xl space-y-1 text-sm shadow-sm">
            @foreach($errors->all() as $err)
                <div class="flex items-center gap-2"><i class="fas fa-exclamation-circle text-rose-600"></i> {{ $err }}</div>
            @endforeach
        </div>
    @endif

    <!-- Copy Toast Notification -->
    <div x-show="copiedToast" x-transition.duration.300ms class="fixed bottom-5 left-5 z-50 bg-emerald-600 text-white px-4 py-2.5 rounded-xl shadow-xl font-bold text-sm flex items-center gap-2">
        <i class="fas fa-clipboard-check text-lg"></i> تم نسخ رمز الوصول البنكي بنجاح!
    </div>

    <!-- Two-Column Layout Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
        <!-- Right Column: Add New Bank Form (4 cols) -->
        <div class="lg:col-span-4 bg-white dark:bg-gray-800 p-6 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 space-y-4">
            <h2 class="text-base font-bold text-gray-800 dark:text-gray-200 border-b border-gray-100 dark:border-gray-700 pb-3 flex items-center gap-2">
                <i class="fas fa-plus-circle text-emerald-500"></i> إضافة بنك جديد
            </h2>

            <form method="POST" action="{{ route('banks.store') }}" class="space-y-4">
                @csrf

                <!-- Arabic Name -->
                <div>
                    <label class="block text-xs font-bold text-gray-700 dark:text-gray-300 mb-1">اسم البنك (بالعربية) <span class="text-rose-500">*</span></label>
                    <input type="text" name="bank_name" value="{{ old('bank_name') }}" required placeholder="مثال: بنك فيصل الإسلامي" class="w-full bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-xl px-3 py-2 text-sm text-gray-800 dark:text-gray-200">
                </div>

                <!-- English Name / System Name -->
                <div>
                    <label class="block text-xs font-bold text-gray-700 dark:text-gray-300 mb-1">اسم البنك (بالإنجليزية / النظام) <span class="text-rose-500">*</span></label>
                    <input type="text" name="name" value="{{ old('name') }}" required placeholder="مثال: Faisal Islamic Bank" class="w-full bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-xl px-3 py-2 text-sm text-gray-800 dark:text-gray-200">
                </div>

                <!-- Bank Identifier Code -->
                <div>
                    <label class="block text-xs font-bold text-gray-700 dark:text-gray-300 mb-1">المعرف البنكي للربط (Bank Identifier)</label>
                    <input type="text" name="bank_identifier" value="{{ old('bank_identifier') }}" placeholder="مثال: FIB-SD أو TokenForNileBank77" class="w-full bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-xl px-3 py-2 text-sm font-mono text-gray-800 dark:text-gray-200">
                </div>

                <!-- Auth Email -->
                <div>
                    <label class="block text-xs font-bold text-gray-700 dark:text-gray-300 mb-1">البريد الإلكتروني للمصادقة (API Email)</label>
                    <input type="email" name="email" value="{{ old('email') }}" placeholder="مثال: api@fib.sd" class="w-full bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-xl px-3 py-2 text-sm font-mono text-gray-800 dark:text-gray-200">
                </div>

                <!-- Password -->
                <div>
                    <label class="block text-xs font-bold text-gray-700 dark:text-gray-300 mb-1">كلمة مرور الحساب (API Password)</label>
                    <input type="password" name="password" placeholder="أدخل كلمة المرور (6 أحرف على الأقل)..." class="w-full bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-xl px-3 py-2 text-sm text-gray-800 dark:text-gray-200">
                </div>

                <!-- Active Status -->
                <div class="flex items-center gap-2 pt-1">
                    <input type="checkbox" name="is_active" id="is_active" value="1" {{ old('is_active', '1') ? 'checked' : '' }} class="rounded border-gray-300 text-emerald-600 focus:ring-emerald-500">
                    <label for="is_active" class="text-xs font-bold text-gray-700 dark:text-gray-300">حساب مفعل وجاهز للربط الفوري</label>
                </div>

                <p class="text-[11px] text-gray-400 leading-relaxed">سيتم تلقائياً إصدار رمز وصول (Passport Personal Access Token) وتعيين صلاحية سنة كاملة للبنك.</p>

                <button type="submit" class="w-full py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white font-bold rounded-xl text-sm transition shadow-md flex items-center justify-center gap-2 cursor-pointer">
                    <i class="fas fa-key"></i> حفظ البنك وتوليد الرمز
                </button>
            </form>
        </div>

        <!-- Left Column: Banks List Table (8 cols) -->
        <div class="lg:col-span-8 bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden space-y-4">
            <div class="p-4 border-b border-gray-100 dark:border-gray-700 font-bold text-gray-800 dark:text-gray-200 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
                <span class="flex items-center gap-2"><i class="fas fa-list text-emerald-500"></i> قائمة البنوك المعرفة</span>
                
                <form method="GET" action="{{ route('banks.index') }}" class="flex items-center gap-2">
                    <input type="text" name="search" value="{{ request('search') }}" placeholder="بحث بالاسم، المعرف، البريد..." class="bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-xl px-3 py-1.5 text-xs text-gray-800 dark:text-gray-200">
                    <button type="submit" class="px-3 py-1.5 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl font-bold text-xs transition">
                        <i class="fas fa-search"></i>
                    </button>
                </form>
            </div>

            <div class="overflow-x-auto">
                <table class="w-full text-sm text-right text-gray-600 dark:text-gray-300">
                    <thead class="bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 border-b border-gray-200 dark:border-gray-600 text-xs uppercase font-bold">
                        <tr>
                            <th class="p-3">#</th>
                            <th class="p-3">اسم البنك (عربي / إنجليزي)</th>
                            <th class="p-3">معرف الربط / البريد</th>
                            <th class="p-3">الحالة</th>
                            <th class="p-3">صلاحية الرمز</th>
                            <th class="p-3 text-center">الإجراءات</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
                        @forelse($banks as $b)
                            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/30">
                                <td class="p-3 font-mono font-bold text-gray-900 dark:text-white">{{ $b->id }}</td>
                                <td class="p-3">
                                    <a href="{{ route('banks.show', $b->id) }}" class="font-bold text-gray-900 dark:text-white hover:text-emerald-600 block">{{ $b->bank_name }}</a>
                                    <span class="text-xs text-gray-400 block">{{ $b->name }}</span>
                                </td>
                                <td class="p-3 text-xs font-mono">
                                    @if($b->bank_identifier)
                                        <span class="px-2 py-0.5 bg-indigo-50 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300 rounded font-bold inline-block mb-1">{{ $b->bank_identifier }}</span>
                                    @endif
                                    @if($b->email)
                                        <span class="text-gray-500 block text-[11px]">{{ $b->email }}</span>
                                    @endif
                                </td>
                                <td class="p-3">
                                    @if($b->is_active)
                                        <span class="px-2.5 py-1 bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-300 rounded-full text-xs font-bold">مفعل</span>
                                    @else
                                        <span class="px-2.5 py-1 bg-rose-100 text-rose-800 dark:bg-rose-900/40 dark:text-rose-300 rounded-full text-xs font-bold">معطل</span>
                                    @endif
                                </td>
                                <td class="p-3 text-xs font-mono">
                                    @if($b->token_expires_at)
                                        <span class="{{ $b->token_expires_at->isPast() ? 'text-rose-600 font-bold' : 'text-gray-700 dark:text-gray-300' }}">
                                            {{ $b->token_expires_at->format('Y-m-d') }}
                                        </span>
                                    @else
                                        <span class="text-gray-400">-</span>
                                    @endif
                                </td>
                                <td class="p-3">
                                    <div class="flex flex-wrap items-center justify-center gap-1.5">
                                        <!-- Copy Access Token Button -->
                                        @if($b->access_token)
                                            <button type="button" onclick="copyToken('{{ $b->access_token }}')" class="px-2.5 py-1 bg-indigo-50 text-indigo-700 hover:bg-indigo-100 dark:bg-indigo-900/30 dark:text-indigo-300 rounded-lg text-xs font-bold transition flex items-center gap-1">
                                                <i class="fas fa-copy"></i> الرمز
                                            </button>
                                        @endif

                                        <!-- Refresh 1-Year Token Button -->
                                        <form method="POST" action="{{ route('banks.refresh-token', $b->id) }}" class="inline">
                                            @csrf
                                            <button type="submit" class="px-2 py-1 bg-amber-50 text-amber-700 hover:bg-amber-100 dark:bg-amber-900/30 dark:text-amber-300 rounded-lg text-xs font-bold transition flex items-center gap-1" title="تجديد رمز الوصول لسنة جديدة">
                                                <i class="fas fa-sync-alt"></i> تجديد
                                            </button>
                                        </form>

                                        <!-- Show Bank -->
                                        <a href="{{ route('banks.show', $b->id) }}" class="px-2 py-1 bg-emerald-50 text-emerald-700 hover:bg-emerald-100 dark:bg-emerald-900/30 dark:text-emerald-300 rounded-lg text-xs font-bold transition">
                                            <i class="fas fa-eye"></i>
                                        </a>

                                        <!-- Edit Bank -->
                                        <a href="{{ route('banks.edit', $b->id) }}" class="px-2 py-1 bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-200 rounded-lg text-xs font-bold transition">
                                            <i class="fas fa-edit"></i>
                                        </a>

                                        <!-- Delete Bank -->
                                        <form method="POST" action="{{ route('banks.destroy', $b->id) }}" class="inline" onsubmit="return confirm('هل أنت متأكد من رغبتك في حذف / تعطيل هذا البنك؟');">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="px-2 py-1 bg-rose-50 text-rose-700 hover:bg-rose-100 dark:bg-rose-900/30 dark:text-rose-300 rounded-lg text-xs font-bold transition">
                                                <i class="fas fa-trash-alt"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="p-8 text-center text-gray-400">
                                    لا توجد بنوك مسجلة حالياً.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            @if($banks->hasPages())
                <div class="p-4 border-t border-gray-100 dark:border-gray-700">
                    {{ $banks->links() }}
                </div>
            @endif
        </div>
    </div>
</div>

<script>
    function copyToken(tokenText) {
        if (!tokenText) {
            alert('لا يوجد رمز وصول متاح');
            return;
        }
        navigator.clipboard.writeText(tokenText).then(() => {
            const toast = document.querySelector('[x-data]').__x.$data;
            toast.copiedToast = true;
            setTimeout(() => { toast.copiedToast = false; }, 3000);
        }).catch(err => {
            prompt('انسخ رمز الوصول الخاص بالبنك يدويًا:', tokenText);
        });
    }
</script>
@endsection