@extends('layouts.app')

@push('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ar.js"></script>
@endpush

@section('content')
<div style="padding: 2rem;">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
        <h1 style="color: #d4af37; margin: 0;">الفاتورة رقم {{ $invoice->invoice_number }}</h1>
        <div style="display: flex; gap: 1rem;">
            <a href="{{ route('admin.invoices.print', $invoice) }}" target="_blank" style="background: #10b981; color: white; padding: 0.75rem 1.5rem; border-radius: 0.5rem; text-decoration: none; font-weight: bold;">
                🖨️ طباعة
            </a>
            <a href="{{ route('admin.invoices.index') }}" style="background: #6b7280; color: white; padding: 0.75rem 1.5rem; border-radius: 0.5rem; text-decoration: none; font-weight: bold;">
                العودة
            </a>
        </div>
    </div>

    @if($message = session('success'))
    <div style="background: rgba(34, 197, 94, 0.1); border: 1px solid #22c55e; color: #22c55e; padding: 1rem; border-radius: 0.5rem; margin-bottom: 2rem;">
        {{ $message }}
    </div>
    @endif

    <div style="display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; margin-bottom: 2rem;">
        <div style="background: #111; border: 1px solid #333; border-radius: 1rem; padding: 1.5rem;">
            <h2 style="color: #d4af37; margin-bottom: 1rem;">تفاصيل الفاتورة</h2>
            
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 2rem;">
                <div>
                    <div style="color: #999; font-size: 0.875rem; margin-bottom: 0.25rem;">رقم الفاتورة</div>
                    <div style="color: white; font-weight: bold; font-size: 1.25rem;">{{ $invoice->invoice_number }}</div>
                </div>
                <div>
                    <div style="color: #999; font-size: 0.875rem; margin-bottom: 0.25rem;">التاريخ</div>
                    <div style="color: white; font-weight: bold;">{{ $invoice->invoice_date->format('Y-m-d H:i') }}</div>
                </div>
                <div>
                    <div style="color: #999; font-size: 0.875rem; margin-bottom: 0.25rem;">تاريخ الاستحقاق</div>
                    <div style="color: white; font-weight: bold;">{{ $invoice->due_date->format('Y-m-d') }}</div>
                </div>
                <div>
                    <div style="color: #999; font-size: 0.875rem; margin-bottom: 0.25rem;">النوع</div>
                    <div style="color: white; font-weight: bold;">
                        @switch($invoice->type)
                            @case('rental'): إيجار @break
                            @case('sale'): مبيعات @break
                            @case('service'): خدمات @break
                            @default: أخرى
                        @endswitch
                    </div>
                </div>
            </div>

            <div style="border-top: 1px solid #333; padding-top: 1.5rem;">
                <h3 style="color: #d4af37; margin-bottom: 1rem;">بيانات العميل</h3>
                <div style="display: grid; gap: 0.5rem;">
                    <div style="display: flex; justify-content: space-between;">
                        <span style="color: #999;">الاسم:</span>
                        <span style="color: white; font-weight: bold;">{{ $invoice->customer->name }}</span>
                    </div>
                    <div style="display: flex; justify-content: space-between;">
                        <span style="color: #999;">الهاتف:</span>
                        <span style="color: white;">{{ $invoice->customer->phone }}</span>
                    </div>
                    <div style="display: flex; justify-content: space-between;">
                        <span style="color: #999;">البريد الإلكتروني:</span>
                        <span style="color: white;">{{ $invoice->customer->email }}</span>
                    </div>
                </div>
            </div>
        </div>

        <div style="background: #111; border: 1px solid #333; border-radius: 1rem; padding: 1.5rem; height: fit-content;">
            <h3 style="color: #d4af37; margin-bottom: 1rem; text-align: center;">QR Code</h3>
            @php
                $qr = \App\Helpers\QRCodeHelper::generateDataUrl(
                    $invoice->invoice_number,
                    $invoice->total_amount,
                    $invoice->invoice_date->format('Y-m-d')
                );
            @endphp
            <img src="{{ $qr }}" style="width: 100%; border-radius: 0.5rem; background: white; padding: 1rem;">
            
            <div style="margin-top: 1.5rem; text-align: center;">
                <div style="color: #999; font-size: 0.875rem; margin-bottom: 0.5rem;">الحالة</div>
                <span style="display: inline-block; padding: 0.5rem 1rem; border-radius: 0.25rem;
                    @if($invoice->status == 'draft')
                        background: rgba(107, 114, 128, 0.2); color: #9ca3af;
                    @elseif($invoice->status == 'issued')
                        background: rgba(59, 130, 246, 0.2); color: #3b82f6;
                    @elseif($invoice->status == 'partially_paid')
                        background: rgba(245, 158, 11, 0.2); color: #f59e0b;
                    @elseif($invoice->status == 'paid')
                        background: rgba(34, 197, 94, 0.2); color: #22c55e;
                    @else
                        background: rgba(239, 68, 68, 0.2); color: #ef4444;
                    @endif
                ">
                    @switch($invoice->status)
                        @case('draft'): مسودة @break
                        @case('issued'): صادرة @break
                        @case('partially_paid'): مدفوعة جزئياً @break
                        @case('paid'): مدفوعة @break
                        @case('cancelled'): ملغاة @break
                    @endswitch
                </span>
            </div>
        </div>
    </div>

    <div style="background: #111; border: 1px solid #333; border-radius: 1rem; padding: 1.5rem; margin-bottom: 2rem;">
        <h3 style="color: #d4af37; margin-bottom: 1rem;">البنود</h3>
        <table style="width: 100%; border-collapse: collapse;">
            <thead>
                <tr>
                    <th style="padding: 0.75rem; text-align: right; color: #d4af37; border-bottom: 2px solid #333;">الوصف</th>
                    <th style="padding: 0.75rem; text-align: center; color: #d4af37; border-bottom: 2px solid #333;">الكمية</th>
                    <th style="padding: 0.75rem; text-align: center; color: #d4af37; border-bottom: 2px solid #333;">السعر</th>
                    <th style="padding: 0.75rem; text-align: left; color: #d4af37; border-bottom: 2px solid #333;">الإجمالي</th>
                </tr>
            </thead>
            <tbody>
                @foreach($invoice->items as $item)
                <tr style="border-bottom: 1px solid #333;">
                    <td style="padding: 0.75rem; color: white;">{{ $item->description }}</td>
                    <td style="padding: 0.75rem; text-align: center; color: white;">{{ number_format($item->quantity, 2) }}</td>
                    <td style="padding: 0.75rem; text-align: center; color: white;">{{ number_format($item->unit_price, 2) }} ر.س</td>
                    <td style="padding: 0.75rem; text-align: left; color: #10b981; font-weight: bold;">{{ number_format($item->amount, 2) }} ر.س</td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
        <div></div>
        <div style="background: #111; border: 1px solid #333; border-radius: 1rem; padding: 1.5rem;">
            <div style="display: flex; justify-content: space-between; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #333;">
                <span style="color: #999;">الإجمالي الجزئي:</span>
                <span style="color: white; font-weight: bold;">{{ number_format($invoice->subtotal, 2) }} ر.س</span>
            </div>
            <div style="display: flex; justify-content: space-between; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #333;">
                <span style="color: #999;">الضريبة ({{ $invoice->tax_percentage }}%):</span>
                <span style="color: white; font-weight: bold;">{{ number_format($invoice->tax_amount, 2) }} ر.س</span>
            </div>
            <div style="display: flex; justify-content: space-between; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 2px solid #333;">
                <span style="color: #d4af37; font-weight: bold;">الإجمالي:</span>
                <span style="color: #d4af37; font-weight: bold; font-size: 1.25rem;">{{ number_format($invoice->total_amount, 2) }} ر.س</span>
            </div>
            <div style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
                <span style="color: #999;">المدفوع:</span>
                <span style="color: #22c55e; font-weight: bold;">{{ number_format($invoice->paid_amount, 2) }} ر.س</span>
            </div>
        </div>
    </div>

    @if($invoice->remaining_amount > 0 && $invoice->status !== 'cancelled')
    <div style="background: #111; border: 1px solid #333; border-radius: 1rem; padding: 1.5rem; margin-top: 2rem;">
        <h3 style="color: #d4af37; margin-bottom: 1.5rem;">🏦 تسجيل دفع</h3>
        <form method="POST" action="{{ route('admin.invoices.recordPayment', $invoice) }}" style="display: grid; gap: 1rem;">
            @csrf
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
                <div>
                    <label style="color: #999; font-size: 0.875rem; display: block; margin-bottom: 0.5rem;">المبلغ المدفوع *</label>
                    <input type="number" name="amount_paid" step="0.01" max="{{ $invoice->remaining_amount }}" required style="width: 100%; padding: 0.75rem; background: #222; border: 1px solid #333; color: white; border-radius: 0.5rem;">
                    @error('amount_paid')
                    <span style="color: #ef4444; font-size: 0.875rem;">{{ $message }}</span>
                    @enderror
                </div>
                <div>
                    <label style="color: #999; font-size: 0.875rem; display: block; margin-bottom: 0.5rem;">طريقة الدفع *</label>
                    <select name="payment_method" id="paymentMethod" required style="width: 100%; padding: 0.75rem; background: #222; border: 1px solid #333; color: white; border-radius: 0.5rem;">
                        <option value="cash">نقداً</option>
                        <option value="transfer">تحويل بنكي</option>
                        <option value="check">شيك</option>
                        <option value="card">بطاقة ائتمان</option>
                        <option value="other">أخرى</option>
                    </select>
                </div>
            </div>

            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
                <div>
                    <label style="color: #999; font-size: 0.875rem; display: block; margin-bottom: 0.5rem;">رقم المرجع</label>
                    <input type="text" name="reference_number" style="width: 100%; padding: 0.75rem; background: #222; border: 1px solid #333; color: white; border-radius: 0.5rem;">
                </div>
                <div id="checkFields" style="display: none;">
                    <label style="color: #999; font-size: 0.875rem; display: block; margin-bottom: 0.5rem;">رقم الشيك *</label>
                    <input type="text" name="check_number" style="width: 100%; padding: 0.75rem; background: #222; border: 1px solid #333; color: white; border-radius: 0.5rem;">
                </div>
            </div>

            <div id="checkDateFields" style="display: none; grid-template-columns: 1fr 1fr; gap: 1rem;">
                <div>
                    <label style="color: #999; font-size: 0.875rem; display: block; margin-bottom: 0.5rem;">تاريخ الشيك *</label>
                    <input type="text" id="checkDatePicker" name="check_date" placeholder="اختر التاريخ" style="width: 100%; padding: 0.75rem; background: #222; border: 1px solid #333; color: white; border-radius: 0.5rem;">
                </div>
                <div>
                    <label style="color: #999; font-size: 0.875rem; display: block; margin-bottom: 0.5rem;">اسم البنك</label>
                    <input type="text" name="bank_name" style="width: 100%; padding: 0.75rem; background: #222; border: 1px solid #333; color: white; border-radius: 0.5rem;">
                </div>
            </div>

            <div>
                <label style="color: #999; font-size: 0.875rem; display: block; margin-bottom: 0.5rem;">ملاحظات</label>
                <textarea name="notes" style="width: 100%; padding: 0.75rem; background: #222; border: 1px solid #333; color: white; border-radius: 0.5rem; resize: vertical; min-height: 100px;"></textarea>
            </div>

            <button type="submit" style="background: #10b981; color: white; padding: 0.75rem 1.5rem; border: none; border-radius: 0.5rem; font-weight: bold; cursor: pointer;">
                ✓ تسجيل الدفع وإصدار سند قبض
            </button>
        </form>
    </div>
    @endif

    @if($invoice->paymentVouchers->count() > 0)
    <div style="background: #111; border: 1px solid #333; border-radius: 1rem; padding: 1.5rem; margin-top: 2rem;">
        <h3 style="color: #d4af37; margin-bottom: 1rem;">سندات القبض</h3>
        <table style="width: 100%; border-collapse: collapse;">
            <thead>
                <tr>
                    <th style="padding: 0.75rem; text-align: right; color: #d4af37; border-bottom: 2px solid #333;">رقم السند</th>
                    <th style="padding: 0.75rem; text-align: center; color: #d4af37; border-bottom: 2px solid #333;">التاريخ</th>
                    <th style="padding: 0.75rem; text-align: center; color: #d4af37; border-bottom: 2px solid #333;">الطريقة</th>
                    <th style="padding: 0.75rem; text-align: center; color: #d4af37; border-bottom: 2px solid #333;">المبلغ</th>
                    <th style="padding: 0.75rem; text-align: left; color: #d4af37; border-bottom: 2px solid #333;">الإجراءات</th>
                </tr>
            </thead>
            <tbody>
                @foreach($invoice->paymentVouchers as $voucher)
                <tr style="border-bottom: 1px solid #333;">
                    <td style="padding: 0.75rem; color: white; font-weight: bold;">{{ $voucher->voucher_number }}</td>
                    <td style="padding: 0.75rem; text-align: center; color: white;">{{ $voucher->voucher_date->format('Y-m-d') }}</td>
                    <td style="padding: 0.75rem; text-align: center; color: white;">
                        @switch($voucher->payment_method)
                            @case('cash'): نقداً @break
                            @case('transfer'): تحويل بنكي @break
                            @case('check'): شيك @break
                            @case('card'): بطاقة ائتمان @break
                            @default: أخرى
                        @endswitch
                    </td>
                    <td style="padding: 0.75rem; text-align: center; color: #22c55e; font-weight: bold;">{{ number_format($voucher->amount_paid, 2) }} ر.س</td>
                    <td style="padding: 0.75rem;">
                        <a href="{{ route('admin.invoices.printVoucher', [$invoice, $voucher]) }}" target="_blank" style="background: #10b981; color: white; padding: 0.25rem 0.75rem; border-radius: 0.25rem; text-decoration: none; font-size: 0.875rem;">
                            طباعة سند
                        </a>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    @endif
</div>

<script>
    document.getElementById('paymentMethod').addEventListener('change', function() {
        const isCheck = this.value === 'check';
        document.getElementById('checkFields').style.display = isCheck ? 'block' : 'none';
        document.getElementById('checkDateFields').style.display = isCheck ? 'grid' : 'none';
    });

    // تفعيل التقويم
    flatpickr('#checkDatePicker', {
        mode: 'single',
        dateFormat: 'Y-m-d',
        locale: 'ar',
        allowInput: true,
    });
</script>
@endsection
