@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">
    <div class="flex items-center justify-between 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-edit text-amber-500"></i>
                تعديل بيانات البنك: {{ $bank->bank_name ?: $bank->name }}
            </h1>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">تحديث إعدادات المصادقة والحساب البنكي</p>
        </div>
        <a href="{{ route('banks.index') }}" class="px-4 py-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-200 rounded-xl font-bold text-sm transition flex items-center gap-2">
            <i class="fas fa-arrow-right"></i> العودة للبنوك
        </a>
    </div>

    @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

    <form method="POST" action="{{ route('banks.update', $bank->id) }}" class="bg-white dark:bg-gray-800 p-6 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 space-y-5 max-w-3xl">
        @csrf
        @method('PUT')

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <!-- 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', $bank->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 -->
            <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', $bank->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 -->
            <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', $bank->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', $bank->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 Update -->
            <div class="md:col-span-2">
                <label class="block text-xs font-bold text-gray-700 dark:text-gray-300 mb-1">تغيير كلمة المرور (اختياري)</label>
                <input type="password" name="password" 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">
                <span class="text-[11px] text-gray-400 mt-1 block">تستخدم كلمة المرور للمصادقة عبر نقطة تسجيل الدخول /api/login</span>
            </div>
        </div>

        <!-- Active Status -->
        <div class="flex items-center gap-2 pt-2">
            <input type="checkbox" name="is_active" id="is_active" value="1" {{ old('is_active', $bank->is_active) ? '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>

        <div class="flex items-center gap-3 pt-4 border-t border-gray-100 dark:border-gray-700">
            <button type="submit" class="px-6 py-2.5 bg-amber-600 hover:bg-amber-700 text-white font-bold rounded-xl text-sm transition shadow-md flex items-center gap-2 cursor-pointer">
                <i class="fas fa-save"></i> حفظ التعديلات
            </button>
            <a href="{{ route('banks.index') }}" class="px-6 py-2.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-200 font-bold rounded-xl text-sm transition">
                إلغاء
            </a>
        </div>
    </form>
</div>
@endsection