@extends('layouts.app')

@section('content')

<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; margin-top: 15px;">
    <h2 style="color: #d4af37; font-size: 1.5rem; font-weight: bold;">
        {{ app()->getLocale() == 'ar' ? 'سند قبض' : 'Receipt' }} - {{ $receipt->receipt_number }}
    </h2>
    <div style="display: flex; gap: 1rem;">
        <a href="{{ route('admin.receipts.index') }}" style="background: #666; color: white; padding: 0.5rem 1rem; border-radius: 0.5rem; text-decoration: none; font-size: 0.875rem;">
            {{ app()->getLocale() == 'ar' ? 'عودة' : 'Back' }}
        </a>
        <a href="{{ route('admin.receipts.pdf', $receipt->id) }}" target="_blank" style="background: #d4af37; color: black; padding: 0.5rem 1rem; border-radius: 0.5rem; text-decoration: none; font-size: 0.875rem; font-weight: bold;">
            {{ app()->getLocale() == 'ar' ? 'طباعة / تحميل PDF' : 'Print / Download PDF' }}
        </a>
        @if($receipt->status == 'confirmed')
        <form action="{{ route('admin.receipts.cancel', $receipt->id) }}" method="POST" onsubmit="return confirm('{{ app()->getLocale() == 'ar' ? 'هل أنت متأكد من إلغاء هذا السند؟' : 'Are you sure you want to cancel this receipt?' }}')" style="display: inline;">
            @csrf
            <button type="submit" style="background: #ef4444; color: white; padding: 0.5rem 1rem; border-radius: 0.5rem; border: none; font-size: 0.875rem; font-weight: bold; cursor: pointer;">
                {{ app()->getLocale() == 'ar' ? 'إلغاء السند' : 'Cancel Receipt' }}
            </button>
        </form>
        @endif
    </div>
</div>

<div>
            <div class="bg-[#111] border border-gray-800 rounded-2xl overflow-hidden p-8">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-12 mb-12">
                    <div class="space-y-4">
                        <h3 class="text-xs text-gray-500 uppercase tracking-widest">{{ app()->getLocale() == 'ar' ? 'بيانات العميل' : 'Customer Details' }}</h3>
                        <div>
                            <div class="text-xl font-bold text-white">{{ $receipt->customer->name }}</div>
                            <div class="text-sm text-gray-400">{{ $receipt->customer->phone }}</div>
                        </div>
                    </div>
                    <div class="space-y-4 md:text-left">
                        <h3 class="text-xs text-gray-500 uppercase tracking-widest">{{ app()->getLocale() == 'ar' ? 'بيانات السند' : 'Receipt Info' }}</h3>
                        <div>
                            <div class="text-sm text-gray-400">{{ app()->getLocale() == 'ar' ? 'التاريخ:' : 'Date:' }} <span class="text-white">{{ $receipt->receipt_date->format('Y-m-d H:i') }}</span></div>
                            @if($receipt->rental)
                            <div class="text-sm text-gray-400">{{ app()->getLocale() == 'ar' ? 'رقم العقد:' : 'Contract #:' }} <a href="{{ route('admin.rentals.show', $receipt->rental->id) }}" class="text-[#d4af37] hover:underline">{{ $receipt->rental->contract_number }}</a></div>
                            @endif
                            <div class="text-sm text-gray-400">{{ app()->getLocale() == 'ar' ? 'بواسطة:' : 'Received By:' }} <span class="text-white">{{ $receipt->receiver->name }}</span></div>
                        </div>
                    </div>
                </div>

                <div class="bg-black/50 border border-gray-800 rounded-xl p-8 mb-8">
                    <div class="flex justify-between items-center mb-6">
                        <span class="text-gray-400 uppercase tracking-widest text-xs">{{ app()->getLocale() == 'ar' ? 'نوع الدفع' : 'Payment Type' }}</span>
                        <span class="bg-gray-800 text-white px-3 py-1 rounded-full text-[10px] font-bold uppercase">{{ str_replace('_', ' ', $receipt->payment_type) }}</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <div class="text-3xl font-bold text-[#d4af37]">{{ number_format($receipt->amount, 2) }} SAR</div>
                        <div class="text-right">
                            <div class="text-xs text-gray-500 uppercase">{{ app()->getLocale() == 'ar' ? 'طريقة الدفع' : 'Payment Method' }}</div>
                            <div class="text-white font-bold uppercase">{{ $receipt->payment_method }}</div>
                        </div>
                    </div>
                </div>

                @if($receipt->notes)
                <div class="mb-8">
                    <h3 class="text-xs text-gray-500 uppercase tracking-widest mb-2">{{ app()->getLocale() == 'ar' ? 'ملاحظات' : 'Notes' }}</h3>
                    <p class="text-gray-300 text-sm italic">"{{ $receipt->notes }}"</p>
                </div>
                @endif

                @if($receipt->rental)
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8 border-t border-gray-800 pt-8">
                    <div class="bg-[#1a1a1a] rounded-xl p-4">
                        <div class="text-[10px] text-gray-500 uppercase mb-1">{{ app()->getLocale() == 'ar' ? 'إجمالي العقد' : 'Total Contract' }}</div>
                        <div class="text-lg font-bold text-white">{{ number_format($receipt->rental->total_amount, 2) }} SAR</div>
                    </div>
                    <div class="bg-[#1a1a1a] rounded-xl p-4">
                        <div class="text-[10px] text-gray-500 uppercase mb-1">{{ app()->getLocale() == 'ar' ? 'الرصيد المتبقي' : 'Remaining Balance' }}</div>
                        <div class="text-lg font-bold text-[#d4af37]">{{ number_format($receipt->rental->remaining_amount, 2) }} SAR</div>
                    </div>
                </div>
                @endif
            </div>
        </div>
</div>

@endsection