@extends('layouts.app')
@section('title', 'الخزنة')
@section('content')
<div class="relative overflow-hidden rounded-[20px] bg-gradient-to-br from-primary-900 via-secondary-600 to-primary-800 p-7 mb-6 shadow-xl">
    <div class="absolute inset-0 opacity-50" style="background-image:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iMC4wNCI+PGNpcmNsZSBjeD0iMzAiIGN5PSIzMCIgcj0iMiIvPjwvZz48L2c+PC9zdmc+')"></div>
    <div class="relative flex items-start justify-between">
        <div>
            <span class="inline-block px-3 py-1 rounded-full bg-white/15 border border-white/20 text-[0.7rem] font-semibold tracking-wider mb-2">FINANCE</span>
            <h1 class="text-white text-[1.6rem] font-display font-extrabold">الخزنة</h1>
            <p class="text-white/70 text-sm mt-1">إدارة أموال الشركة والتمويل والإيداعات</p>
        </div>
        <div class="flex gap-2">
            <button onclick="document.getElementById('addCashboxModal').classList.remove('hidden')" class="px-4 py-2 bg-white/15 text-white rounded-xl text-xs font-semibold hover:bg-white/25 transition-all border border-white/20 cursor-pointer">+ خزنة جديدة</button>
            <button onclick="document.getElementById('depositModal').classList.remove('hidden')" class="px-4 py-2 bg-accent-500 text-white rounded-xl text-xs font-semibold hover:bg-accent-600 transition-all cursor-pointer">💳 إيداع تمويل</button>
            <button onclick="document.getElementById('withdrawModal').classList.remove('hidden')" class="px-4 py-2 bg-danger text-white rounded-xl text-xs font-semibold hover:bg-red-700 transition-all cursor-pointer">📤 سحب من الخزنة</button>
        </div>
    </div>
</div>

@if (session('success'))
    <div class="mb-5 p-4 rounded-[14px] bg-success/10 border border-success/20 text-success text-sm font-semibold flex items-center gap-2">✅ {{ session('success') }}</div>
@endif

{{-- ==================== الإعدادات الافتراضية ==================== --}}
<div class="bg-white rounded-[16px] border border-gray-200 p-5 shadow-sm mb-6">
    <div class="flex items-center gap-2 mb-4">
        <span class="w-7 h-7 rounded-lg bg-accent-500/10 flex items-center justify-center text-sm">⚙️</span>
        <h2 class="font-display font-bold text-primary-900 text-base">الإعدادات الافتراضية</h2>
    </div>
    <form method="POST" action="{{ route('finance.cashbox.updateDefaults') }}" class="flex flex-wrap items-end gap-4">
        @csrf
        <div class="flex-1 min-w-[200px]">
            <label class="block text-xs font-semibold text-muted mb-1.5">💰 الخزنة الافتراضية للعمولات</label>
            <select name="commission_default" class="w-full rounded-xl border border-gray-200 bg-surface px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500/20 focus:border-accent-500 transition-all">
                <option value="">— لا توجد —</option>
                @foreach ($cashboxes as $cb)
                    <option value="{{ $cb->id }}" {{ $cb->is_commission_default ? 'selected' : '' }}>{{ $cb->name }}</option>
                @endforeach
            </select>
        </div>
        <div class="flex-1 min-w-[200px]">
            <label class="block text-xs font-semibold text-muted mb-1.5">👨‍🏫 الخزنة الافتراضية لمستحقات المعلمين</label>
            <select name="teacher_payout_default" class="w-full rounded-xl border border-gray-200 bg-surface px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500/20 focus:border-accent-500 transition-all">
                <option value="">— لا توجد —</option>
                @foreach ($cashboxes as $cb)
                    <option value="{{ $cb->id }}" {{ $cb->is_teacher_payout_default ? 'selected' : '' }}>{{ $cb->name }}</option>
                @endforeach
            </select>
        </div>
        <button type="button" onclick="this.disabled=true;this.form.submit()"
                class="px-5 py-2.5 bg-accent-500 text-white rounded-xl text-sm font-semibold hover:bg-accent-600 disabled:opacity-50 disabled:cursor-not-allowed transition-all shadow-sm shadow-accent-500/20 cursor-pointer">💾 حفظ</button>
    </form>
</div>

{{-- ==================== الخزائن ==================== --}}
@foreach ($cashboxes as $cb)
<div class="bg-white rounded-[16px] border border-gray-200 p-5 shadow-sm mb-4">
    <div class="flex items-start justify-between mb-4">
        <div>
            <h3 class="font-display font-bold text-primary-900 text-base flex items-center gap-2 flex-wrap">🏦 {{ $cb->name }}
                @if ($cb->is_commission_default)
                    <span class="text-[0.6rem] px-2 py-0.5 rounded-full bg-green-50 text-green-700 border border-green-200 font-semibold">✅ افتراضي للعمولات</span>
                @endif
                @if ($cb->is_teacher_payout_default)
                    <span class="text-[0.6rem] px-2 py-0.5 rounded-full bg-blue-50 text-blue-700 border border-blue-200 font-semibold">✅ افتراضي لمستحقات المعلمين</span>
                @endif
            </h3>
        </div>
    </div>
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
        <div class="rounded-xl border border-gray-100 bg-surface p-4">
            <div class="flex items-center gap-2 mb-1">
                <span class="text-lg">🇪🇬</span>
                <span class="text-xs font-semibold text-muted">مصري (EGP)</span>
            </div>
            <p class="text-xl font-display font-extrabold text-primary-900">{{ number_format($cb->balance_egp, 2) }} EGP</p>
        </div>
        <div class="rounded-xl border border-gray-100 bg-surface p-4">
            <div class="flex items-center gap-2 mb-1">
                <span class="text-lg">🇹🇷</span>
                <span class="text-xs font-semibold text-muted">تركي (TRY)</span>
            </div>
            <p class="text-xl font-display font-extrabold text-primary-900">{{ number_format($cb->balance_try, 2) }} TRY</p>
        </div>
        <div class="rounded-xl border border-gray-100 bg-surface p-4">
            <div class="flex items-center gap-2 mb-1">
                <span class="text-lg">🇺🇸</span>
                <span class="text-xs font-semibold text-muted">دولار (USD)</span>
            </div>
            <p class="text-xl font-display font-extrabold text-primary-900">{{ number_format($cb->balance_usd, 2) }} USD</p>
        </div>
    </div>
</div>
@endforeach

@if ($cashboxes->isEmpty())
<div class="bg-white rounded-[16px] border border-gray-200 p-10 text-center shadow-sm mb-6">
    <div class="text-4xl mb-3">🏦</div>
    <p class="text-muted text-sm font-semibold">لا توجد خزائن بعد — أضف خزنة أولاً</p>
</div>
@endif

<div class="bg-white rounded-[16px] border border-gray-200 shadow-sm overflow-hidden">
    <div class="px-5 py-4 border-b border-gray-100">
        <h2 class="font-display font-bold text-primary-900 text-sm flex items-center gap-2">📋 حركات الخزنة</h2>
    </div>
    <div class="overflow-x-auto">
        <table class="w-full text-right">
            <thead><tr class="border-b border-gray-100">
                <th class="px-4 py-3 text-xs font-semibold text-muted">الخزنة</th>
                <th class="px-4 py-3 text-xs font-semibold text-muted">النوع</th>
                <th class="px-4 py-3 text-xs font-semibold text-muted">المبلغ</th>
                <th class="px-4 py-3 text-xs font-semibold text-muted">العملة</th>
                <th class="px-4 py-3 text-xs font-semibold text-muted">الوصف</th>
                <th class="px-4 py-3 text-xs font-semibold text-muted">بواسطة</th>
                <th class="px-4 py-3 text-xs font-semibold text-muted">التاريخ</th>
            </tr></thead>
            <tbody class="divide-y divide-gray-50">
                @forelse ($movements as $m)
                <tr class="hover:bg-surface/50 transition-colors text-sm">
                    <td class="px-4 py-3 font-semibold text-primary-900">{{ $m->cashbox_name ?? '—' }}</td>
                    <td class="px-4 py-3">
                        <span class="text-xs px-2 py-0.5 rounded-full {{ $m->type === 'in' ? 'bg-green-50 text-green-700' : 'bg-red-50 text-red-700' }}">
                            {{ $m->type === 'in' ? 'إيداع' : 'سحب' }}
                        </span>
                    </td>
                    <td class="px-4 py-3 font-bold {{ $m->type === 'in' ? 'text-green-600' : 'text-red-600' }}">
                        {{ $m->type === 'in' ? '+' : '-' }}{{ number_format($m->amount, 2) }}
                    </td>
                    <td class="px-4 py-3"><span class="inline-block px-2 py-0.5 rounded-md bg-accent-50 text-accent-600 border border-accent-100 text-xs font-semibold">{{ $m->currency ?? '—' }}</span></td>
                    <td class="px-4 py-3 text-muted">{{ $m->description ?? '—' }}</td>
                    <td class="px-4 py-3 text-muted">{{ $m->creator_name ?? '—' }}</td>
                    <td class="px-4 py-3 text-muted">{{ \Carbon\Carbon::parse($m->created_at)->format('Y-m-d H:i') }}</td>
                </tr>
                @empty
                <tr><td colspan="7" class="px-4 py-12 text-center text-muted text-sm">لا توجد حركات بعد</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if (method_exists($movements, 'links'))<div class="px-5 py-4 border-t border-gray-100">{{ $movements->links() }}</div>@endif
</div>

{{-- Add Cashbox Modal --}}
<div id="addCashboxModal" class="fixed inset-0 z-[9999] bg-black/40 backdrop-blur-sm flex items-center justify-center hidden" onclick="if(event.target===this)this.classList.add('hidden')">
    <div class="bg-white rounded-[20px] shadow-2xl border border-gray-200 p-8 w-full max-w-md mx-4" onclick="event.stopPropagation()">
        <div class="flex items-center justify-between mb-6">
            <h2 class="text-lg font-bold text-primary-900">إضافة خزنة جديدة</h2>
            <button onclick="document.getElementById('addCashboxModal').classList.add('hidden')" class="w-8 h-8 rounded-lg bg-gray-100 text-muted hover:bg-gray-200 flex items-center justify-center cursor-pointer text-lg">&times;</button>
        </div>
        <form method="POST" action="{{ route('finance.cashbox.store') }}">
            @csrf
            <div class="mb-6">
                <label class="block text-xs font-semibold text-muted mb-1.5">اسم الخزنة</label>
                <input type="text" name="name" required placeholder="مثال: خزنة المكتب..."
                       class="w-full rounded-xl border border-gray-200 bg-surface px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500/20 focus:border-accent-500 transition-all">
            </div>
            <p class="text-xs text-muted mb-4">الخزنة هتكون تحتوي على 3 أرصدة: مصري — تركي — دولار</p>
            <button type="submit" class="w-full px-5 py-3 bg-accent-500 text-white rounded-xl text-sm font-bold hover:bg-accent-600 transition-all cursor-pointer">➕ إضافة</button>
        </form>
    </div>
</div>

{{-- Deposit Modal --}}
<div id="depositModal" class="fixed inset-0 z-[9999] bg-black/40 backdrop-blur-sm flex items-center justify-center hidden" onclick="if(event.target===this)this.classList.add('hidden')">
    <div class="bg-white rounded-[20px] shadow-2xl border border-gray-200 p-8 w-full max-w-md mx-4" onclick="event.stopPropagation()">
        <div class="flex items-center justify-between mb-6">
            <h2 class="text-lg font-bold text-primary-900">إيداع تمويل</h2>
            <button onclick="document.getElementById('depositModal').classList.add('hidden')" class="w-8 h-8 rounded-lg bg-gray-100 text-muted hover:bg-gray-200 flex items-center justify-center cursor-pointer text-lg">&times;</button>
        </div>
        <form method="POST" action="{{ route('finance.cashbox.deposit') }}">
            @csrf
            <div class="mb-4">
                <label class="block text-xs font-semibold text-muted mb-1.5">الخزنة</label>
                <select name="cashbox_id" required class="w-full rounded-xl border border-gray-200 bg-surface px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500/20 focus:border-accent-500 transition-all">
                    <option value="">اختر الخزنة</option>
                    @foreach ($cashboxes as $cb)
                        <option value="{{ $cb->id }}">{{ $cb->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="mb-4">
                <label class="block text-xs font-semibold text-muted mb-1.5">العملة</label>
                <select name="currency" required class="w-full rounded-xl border border-gray-200 bg-surface px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500/20 focus:border-accent-500 transition-all">
                    <option value="EGP">🇪🇬 جنيه مصري</option>
                    <option value="TRY">🇹🇷 ليرة تركية</option>
                    <option value="USD">🇺🇸 دولار</option>
                </select>
            </div>
            <div class="mb-4">
                <label class="block text-xs font-semibold text-muted mb-1.5">المبلغ</label>
                <input type="number" step="0.01" name="amount" required min="0.01" placeholder="0.00"
                       class="w-full rounded-xl border border-gray-200 bg-surface px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500/20 focus:border-accent-500 transition-all">
            </div>
            <div class="mb-6">
                <label class="block text-xs font-semibold text-muted mb-1.5">الوصف</label>
                <input type="text" name="description" maxlength="500" placeholder="مثال: تمويل أولي..."
                       class="w-full rounded-xl border border-gray-200 bg-surface px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500/20 focus:border-accent-500 transition-all">
            </div>
            <button type="submit" class="w-full px-5 py-3 bg-success text-white rounded-xl text-sm font-bold hover:bg-green-700 transition-all cursor-pointer">💳 إيداع</button>
        </form>
    </div>
</div>

{{-- Withdraw Modal --}}
<div id="withdrawModal" class="fixed inset-0 z-[9999] bg-black/40 backdrop-blur-sm flex items-center justify-center hidden" onclick="if(event.target===this)this.classList.add('hidden')">
    <div class="bg-white rounded-[20px] shadow-2xl border border-gray-200 p-8 w-full max-w-md mx-4" onclick="event.stopPropagation()">
        <div class="flex items-center justify-between mb-6">
            <h2 class="text-lg font-bold text-primary-900">📤 سحب من الخزنة</h2>
            <button onclick="document.getElementById('withdrawModal').classList.add('hidden')" class="w-8 h-8 rounded-lg bg-gray-100 text-muted hover:bg-gray-200 flex items-center justify-center cursor-pointer text-lg">&times;</button>
        </div>
        @if ($errors->has('msg'))
            <div class="mb-4 p-3 rounded-xl bg-danger/10 border border-danger/20 text-danger text-sm font-semibold">{{ $errors->first('msg') }}</div>
        @endif
        <form method="POST" action="{{ route('finance.cashbox.withdraw') }}">
            @csrf
            <div class="mb-4">
                <label class="block text-xs font-semibold text-muted mb-1.5">الخزنة</label>
                <select name="cashbox_id" required class="w-full rounded-xl border border-gray-200 bg-surface px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500/20 focus:border-accent-500 transition-all">
                    <option value="">اختر الخزنة</option>
                    @foreach ($cashboxes as $cb)
                        <option value="{{ $cb->id }}">{{ $cb->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="mb-4">
                <label class="block text-xs font-semibold text-muted mb-1.5">العملة</label>
                <select name="currency" required class="w-full rounded-xl border border-gray-200 bg-surface px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500/20 focus:border-accent-500 transition-all">
                    <option value="EGP">🇪🇬 جنيه مصري</option>
                    <option value="TRY">🇹🇷 ليرة تركية</option>
                    <option value="USD">🇺🇸 دولار</option>
                </select>
            </div>
            <div class="mb-4">
                <label class="block text-xs font-semibold text-muted mb-1.5">المبلغ</label>
                <input type="number" step="0.01" name="amount" required min="0.01" placeholder="0.00"
                       class="w-full rounded-xl border border-gray-200 bg-surface px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500/20 focus:border-accent-500 transition-all">
            </div>
            <div class="mb-6">
                <label class="block text-xs font-semibold text-muted mb-1.5">ملاحظات <span class="text-danger">*</span></label>
                <input type="text" name="description" required maxlength="500" placeholder="مثال: أحمد أخد سلفة"
                       class="w-full rounded-xl border border-gray-200 bg-surface px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500/20 focus:border-accent-500 transition-all">
            </div>
            <button type="submit" class="w-full px-5 py-3 bg-danger text-white rounded-xl text-sm font-bold hover:bg-red-700 transition-all cursor-pointer">📤 سحب</button>
        </form>
    </div>
</div>
@endsection