@extends('layouts.app')

@section('title', 'فاتورة ' . $invoice->invoice_number)

@section('content')
<x-page-header :title="'فاتورة ' . $invoice->invoice_number" :pretitle="$invoice->issue_date->format('Y-m-d')">
    <x-slot:actions>
        <a href="{{ route('invoices.pdf', $invoice) }}" target="_blank" class="btn btn-outline-primary"><i class="ti ti-printer me-1"></i> طباعة</a>
        @if($invoice->balance > 0)
            @can('payments.create')
                <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#paymentModal"><i class="ti ti-cash me-1"></i> تسجيل دفعة</button>
            @endcan
        @endif
    </x-slot:actions>
</x-page-header>

<div class="alert alert-{{ ['paid' => 'success', 'partial' => 'warning', 'overdue' => 'danger', 'cancelled' => 'secondary', 'draft' => 'info', 'sent' => 'primary'][$invoice->status] ?? 'info' }}">
    حالة الفاتورة: <strong>{{ $invoice->status }}</strong>
    @if($invoice->balance > 0)· المتبقي: <strong>{{ number_format($invoice->balance, 2) }} <x-sar /></strong>@endif
</div>

<div class="row row-cards">
    <div class="col-md-8">
        <x-card>
            <div class="row mb-3">
                <div class="col-md-6">
                    <h4>{{ $currentClinic->name ?? '' }}</h4>
                    <div class="text-muted small">{{ $currentClinic->address ?? '' }}</div>
                </div>
                <div class="col-md-6 text-end">
                    <div><strong>رقم الفاتورة:</strong> {{ $invoice->invoice_number }}</div>
                    <div><strong>التاريخ:</strong> {{ $invoice->issue_date->format('Y-m-d') }}</div>
                    @if($invoice->due_date)<div><strong>الاستحقاق:</strong> {{ $invoice->due_date->format('Y-m-d') }}</div>@endif
                </div>
            </div>

            <div class="bg-light p-3 rounded mb-3">
                <strong>المريض:</strong> {{ $invoice->patient->first_name }} {{ $invoice->patient->last_name }}
                <span class="text-muted">· {{ $invoice->patient->file_number }} · {{ $invoice->patient->phone }}</span>
            </div>

            <table class="table">
                <thead>
                    <tr><th>#</th><th>الوصف</th><th>الكمية</th><th>السعر</th><th>الخصم</th><th class="text-end">الإجمالي</th></tr>
                </thead>
                <tbody>
                    @foreach($invoice->items as $i => $item)
                        <tr>
                            <td>{{ $i+1 }}</td>
                            <td>{{ $item->description }}</td>
                            <td>{{ $item->quantity }}</td>
                            <td>{{ number_format($item->unit_price, 2) }}</td>
                            <td>{{ number_format($item->discount, 2) }}</td>
                            <td class="text-end">{{ number_format($item->total, 2) }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>

            <div class="row justify-content-end">
                <div class="col-md-6">
                    <div class="d-flex justify-content-between"><span>المجموع الفرعي:</span><strong>{{ number_format($invoice->subtotal, 2) }}</strong></div>
                    <div class="d-flex justify-content-between"><span>الخصم:</span><strong>-{{ number_format($invoice->discount_amount, 2) }}</strong></div>
                    <div class="d-flex justify-content-between"><span>الضريبة:</span><strong>{{ number_format($invoice->tax_amount, 2) }}</strong></div>
                    <hr>
                    <div class="d-flex justify-content-between fs-3"><span>الإجمالي:</span><strong>{{ number_format($invoice->total, 2) }}</strong></div>
                    <div class="d-flex justify-content-between text-success"><span>المدفوع:</span><strong>{{ number_format($invoice->paid_amount, 2) }}</strong></div>
                    <div class="d-flex justify-content-between text-danger"><span>المتبقي:</span><strong>{{ number_format($invoice->balance, 2) }}</strong></div>
                </div>
            </div>

            @if($invoice->notes)
                <hr><p class="text-muted">{{ $invoice->notes }}</p>
            @endif
        </x-card>
    </div>

    <div class="col-md-4">
        <x-card title="سجل المدفوعات">
            @forelse($invoice->payments as $p)
                <div class="border-bottom py-2">
                    <strong>{{ number_format($p->amount, 2) }}</strong>
                    <span class="badge bg-secondary-lt">{{ $p->payment_method }}</span>
                    <div class="small text-muted">{{ $p->paid_at->format('Y-m-d H:i') }} · {{ $p->receiver?->name }}</div>
                </div>
            @empty
                <p class="text-muted">لا توجد مدفوعات.</p>
            @endforelse
        </x-card>
    </div>
</div>

<x-modal id="paymentModal" title="تسجيل دفعة" size="md">
    <form id="paymentForm">
        @csrf
        <x-form-input name="amount" label="المبلغ" type="number" step="0.01" :value="$invoice->balance" required />
        <x-form-select name="payment_method" label="طريقة الدفع" required
            :options="['cash' => 'نقدي', 'card' => 'بطاقة', 'transfer' => 'تحويل', 'insurance' => 'تأمين', 'other' => 'أخرى']" />
        <x-form-input name="reference_number" label="رقم المرجع (للبطاقة/التحويل)" />
        <x-form-input name="paid_at" label="التاريخ" type="datetime-local" :value="now()->format('Y-m-d\TH:i')" />
        <x-form-textarea name="notes" label="ملاحظات" rows="2" />
        <div class="text-end mt-3">
            <button type="button" class="btn btn-link" data-bs-dismiss="modal">إلغاء</button>
            <button type="submit" class="btn btn-primary">حفظ الدفعة</button>
        </div>
    </form>
</x-modal>
@endsection

@push('scripts')
<script>
$('#paymentForm').on('submit', function (e) {
    e.preventDefault();
    $.ajax({
        url: @json(route('invoices.payments.store', $invoice)),
        method: 'POST',
        data: $(this).serialize(),
        globalErrorHandled: true,
    }).done(res => { Notify.success(res.message); window.location.reload(); })
      .fail(xhr => Notify.error(xhr.responseJSON?.message || 'خطأ.'));
});
</script>
@endpush