<div>
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
        <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('إدارة الوردية') }}</h1>
        <a href="{{ route('cash-sessions.list') }}" wire:navigate
           class="inline-flex items-center gap-2 px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 text-sm font-medium w-full sm:w-auto justify-center">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
            {{ __('عودة للقائمة') }}
        </a>
    </div>

    {{-- Flash Messages --}}
    @if(session('success'))
    <div class="mb-4 p-4 bg-green-50 border border-green-200 rounded-lg text-green-700 text-sm">
        {{ session('success') }}
    </div>
    @endif
    @if(session('error'))
    <div class="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm">
        {{ session('error') }}
    </div>
    @endif

    @if($currentSession)
        {{-- Current Open Session Info --}}
        <div class="bg-white rounded-xl shadow-sm border border-green-200 p-4 sm:p-6 mb-4 sm:mb-6">
            <div class="flex items-center gap-2 mb-4">
                <div class="w-3 h-3 bg-green-500 rounded-full animate-pulse"></div>
                <h3 class="text-base sm:text-lg font-semibold text-gray-800">{{ __('وردية مفتوحة حالياً') }}</h3>
            </div>

            <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 lg:gap-6">
                <div>
                    <p class="text-sm text-gray-500 mb-1">{{ __('رصيد الافتتاح') }}</p>
                    <p class="text-lg sm:text-xl font-bold text-gray-800" dir="ltr">
                        {{ number_format($currentSession->opening_balance / 100, 2) }} {{ __('ج.م') }}
                    </p>
                </div>
                <div>
                    <p class="text-sm text-gray-500 mb-1">{{ __('إجمالي الوارد') }}</p>
                    <p class="text-lg sm:text-xl font-bold text-green-700" dir="ltr">
                        +{{ number_format(($currentSession->total_cash_in ?? 0) / 100, 2) }} {{ __('ج.م') }}
                    </p>
                </div>
                <div>
                    <p class="text-sm text-gray-500 mb-1">{{ __('إجمالي الصادر') }}</p>
                    <p class="text-lg sm:text-xl font-bold text-red-700" dir="ltr">
                        -{{ number_format(($currentSession->total_cash_out ?? 0) / 100, 2) }} {{ __('ج.م') }}
                    </p>
                </div>
                <div>
                    <p class="text-sm text-gray-500 mb-1">{{ __('الرصيد المتوقع') }}</p>
                    @php
                        $expected = $currentSession->opening_balance + ($currentSession->total_cash_in ?? 0) - ($currentSession->total_cash_out ?? 0);
                    @endphp
                    <p class="text-lg sm:text-xl font-bold text-blue-700" dir="ltr">
                        {{ number_format($expected / 100, 2) }} {{ __('ج.م') }}
                    </p>
                </div>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-3 gap-3 sm:gap-4 mt-4 pt-4 border-t border-gray-100">
                <div>
                    <p class="text-sm text-gray-500">{{ __('الفرع') }}</p>
                    <p class="text-sm font-medium text-gray-800">{{ $currentSession->branch?->name_ar ?? '—' }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-500">{{ __('وقت الفتح') }}</p>
                    <p class="text-sm font-medium text-gray-800" dir="ltr">{{ $currentSession->opened_at?->format('Y-m-d H:i') }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-500">{{ __('عدد العمليات') }}</p>
                    <p class="text-sm font-medium text-gray-800">{{ $currentSession->transactions_count ?? 0 }}</p>
                </div>
            </div>
        </div>

        {{-- Close Session Form --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
            <h3 class="text-base sm:text-lg font-semibold text-gray-800 mb-4">{{ __('إغلاق الوردية') }}</h3>
            <form wire:submit="closeSession" class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('رصيد الإغلاق الفعلي (ج.م)') }}</label>
                    <input type="number" wire:model="closing_balance" step="0.01" min="0" dir="ltr"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    @error('closing_balance') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                    <p class="text-xs text-gray-500 mt-1">
                        {{ __('الرصيد المتوقع:') }}
                        <span class="font-mono" dir="ltr">{{ number_format($expected / 100, 2) }}</span>
                        {{ __('ج.م') }}
                    </p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('ملاحظات الإغلاق') }}</label>
                    <textarea wire:model="closing_notes" rows="3"
                              placeholder="{{ __('ملاحظات اختيارية...') }}"
                              class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
                </div>

                {{-- Variance Preview --}}
                @if($closing_balance > 0)
                @php
                    $closingPiasters = (int) round($closing_balance * 100);
                    $variancePreview = $closingPiasters - $expected;
                @endphp
                <div class="p-3 rounded-lg {{ $variancePreview == 0 ? 'bg-green-50 border border-green-200' : ($variancePreview > 0 ? 'bg-amber-50 border border-amber-200' : 'bg-red-50 border border-red-200') }}">
                    <p class="text-sm font-medium {{ $variancePreview == 0 ? 'text-green-700' : ($variancePreview > 0 ? 'text-amber-700' : 'text-red-700') }}">
                        {{ __('الفرق:') }}
                        <span dir="ltr">{{ $variancePreview >= 0 ? '+' : '' }}{{ number_format($variancePreview / 100, 2) }}</span>
                        {{ __('ج.م') }}
                        @if($variancePreview == 0)
                            — {{ __('متطابق') }}
                        @elseif($variancePreview > 0)
                            — {{ __('زيادة') }}
                        @else
                            — {{ __('عجز') }}
                        @endif
                    </p>
                </div>
                @endif

                <button type="submit" wire:loading.attr="disabled" wire:target="closeSession"
                        class="w-full px-4 py-2.5 bg-red-600 text-white rounded-lg hover:bg-red-700 disabled:opacity-50 font-medium text-sm">
                    <span wire:loading.remove wire:target="closeSession">{{ __('إغلاق الوردية') }}</span>
                    <span wire:loading wire:target="closeSession">{{ __('جارٍ الإغلاق...') }}</span>
                </button>
            </form>
        </div>
    @else
        {{-- Open New Session Form --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
            <h3 class="text-base sm:text-lg font-semibold text-gray-800 mb-4">{{ __('فتح وردية جديدة') }}</h3>
            <form wire:submit="openSession" class="space-y-4">
                {{-- The drawer belongs to the branch you are working in, taken
                     from the topbar switcher. It was a free choice of every
                     branch in the academy, which is how a shift's cash could
                     land in another branch's books. --}}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الفرع') }}</label>
                    @if($branch)
                        <p class="px-4 py-2 border border-gray-200 bg-gray-50 rounded-lg text-sm font-medium text-gray-900">{{ $branch->name_ar }}</p>
                    @else
                        <p class="px-4 py-2 border border-amber-200 bg-amber-50 rounded-lg text-sm text-amber-800">
                            {{ __('اختر فرعاً محدداً من القائمة العلوية قبل فتح الوردية') }}
                        </p>
                    @endif
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('رصيد الافتتاح (ج.م)') }}</label>
                    <input type="number" wire:model="opening_balance" step="0.01" min="0" dir="ltr"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    @error('opening_balance') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('ملاحظات') }}</label>
                    <textarea wire:model="opening_notes" rows="3"
                              placeholder="{{ __('ملاحظات اختيارية...') }}"
                              class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
                </div>
                <button type="submit" wire:loading.attr="disabled" wire:target="openSession" @disabled(! $branch)
                        class="w-full px-4 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed font-medium text-sm">
                    <span wire:loading.remove wire:target="openSession">{{ __('فتح الوردية') }}</span>
                    <span wire:loading wire:target="openSession">{{ __('جارٍ الفتح...') }}</span>
                </button>
            </form>
        </div>
    @endif
</div>
