@extends('layouts.admin')

@section('title', trans('admin.invoice_show_title', ['number' => $invoice->invoice_number]))
@section('header_title', trans('admin.invoice_show_header', ['number' => $invoice->invoice_number]))

@section('content')
<div class="space-y-6 text-xs" x-data="{ showXml: false, showPayload: false }">

    <div>
        <a href="{{ route('admin.invoices.index') }}" class="text-slate-400 hover:text-white transition">
            {{ trans('admin.back_to_invoices') }}
        </a>
    </div>

    <!-- Header Card -->
    <div class="p-6 rounded-2xl bg-navy-900 border border-slate-800 shadow-xl flex flex-col lg:flex-row lg:items-center justify-between gap-6">
        <div>
            <div class="flex items-center gap-3">
                <h2 class="text-xl font-black text-white code-font">{{ trans('admin.invoice_number_col') }} #{{ $invoice->invoice_number }}</h2>
                @if($invoice->status->value === 'cleared')
                    <span class="px-2.5 py-0.5 rounded-full bg-emerald-500/10 text-emerald-400 text-xs font-bold">{{ trans('admin.cleared_status') }}</span>
                @elseif($invoice->status->value === 'reported')
                    <span class="px-2.5 py-0.5 rounded-full bg-sky-500/10 text-sky-400 text-xs font-bold">{{ trans('admin.reported_status') }}</span>
                @elseif($invoice->status->value === 'rejected' || $invoice->status->value === 'failed')
                    <span class="px-2.5 py-0.5 rounded-full bg-rose-500/10 text-rose-400 text-xs font-bold">{{ $invoice->status->label() }}</span>
                @else
                    <span class="px-2.5 py-0.5 rounded-full bg-amber-500/10 text-amber-400 text-xs font-bold">{{ $invoice->status->label() }}</span>
                @endif
                <span class="px-2.5 py-0.5 rounded-full bg-emerald-500/10 text-emerald-400 text-xs font-bold uppercase">
                    {{ $invoice->type instanceof \App\Enums\InvoiceType ? $invoice->type->clientLabel() : $invoice->type }}
                </span>
            </div>

            <div class="flex flex-wrap items-center gap-x-6 gap-y-2 text-slate-400 mt-2 text-xs">
                <div>{{ trans('admin.issuing_company_col') }}:
                    @if($invoice->tenant)
                        <a href="{{ route('admin.tenants.show', $invoice->tenant->uuid) }}" class="text-white font-bold hover:text-emerald-400 transition">
                            {{ $invoice->tenant->name }}
                        </a>
                    @else
                        -
                    @endif
                </div>
                <div>{{ trans('admin.device_serial_label') }} <span class="code-font text-slate-200">{{ $invoice->device->serial_number ?? '-' }}</span></div>
                <div>{{ trans('admin.issued_at_col') }}: <span class="code-font text-slate-200">{{ $invoice->issued_at ? $invoice->issued_at->format('Y-m-d H:i:s') : $invoice->created_at->format('Y-m-d H:i:s') }}</span></div>
            </div>
        </div>

        <div class="flex items-center gap-3">
            <form action="{{ route('admin.invoices.destroy', $invoice->uuid) }}" method="POST" onsubmit="return confirm('{{ trans('admin.delete_invoice_confirm') }}');">
                @csrf
                @method('DELETE')
                <button type="submit" class="px-4 py-2 rounded-xl bg-red-500/10 hover:bg-red-500/20 text-red-400 font-bold transition flex items-center gap-1.5">
                    <span><i class="fa-solid fa-trash-can"></i></span>
                    <span>{{ trans('admin.delete_invoice_title') }}</span>
                </button>
            </form>
        </div>
    </div>

    <!-- Financial & Seller/Buyer Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

        <!-- Financial Summary -->
        <div class="p-6 rounded-2xl bg-navy-900 border border-slate-800 shadow-xl space-y-3">
            <h3 class="font-bold text-white text-sm pb-2 border-b border-slate-800">{{ trans('admin.financial_summary_heading') }}</h3>
            <div class="flex items-center justify-between text-slate-300">
                <span>{{ trans('admin.subtotal_label') }}</span>
                <span class="code-font text-white">{{ number_format($invoice->subtotal, 2) }} <span class="sar-symbol">﷼</span></span>
            </div>
            <div class="flex items-center justify-between text-slate-300">
                <span>{{ trans('admin.vat_15_label') }}</span>
                <span class="code-font text-emerald-400">{{ number_format($invoice->vat_amount, 2) }} <span class="sar-symbol">﷼</span></span>
            </div>
            <div class="flex items-center justify-between text-slate-300">
                <span>{{ trans('admin.discount_label') }}</span>
                <span class="code-font text-slate-400">{{ number_format($invoice->discount, 2) }} <span class="sar-symbol">﷼</span></span>
            </div>
            <div class="pt-3 border-t border-slate-800 flex items-center justify-between text-sm font-bold text-white">
                <span>{{ trans('admin.grand_total_label') }}</span>
                <span class="code-font text-emerald-400 text-base">{{ number_format($invoice->total, 2) }} <span class="sar-symbol">﷼</span></span>
            </div>
        </div>

        <!-- Seller Company Details -->
        <div class="p-6 rounded-2xl bg-navy-900 border border-slate-800 shadow-xl space-y-2.5">
            <h3 class="font-bold text-white text-sm pb-2 border-b border-slate-800">{{ trans('admin.seller_details_heading') }}</h3>
            <div>{{ trans('admin.name_label') }} <strong class="text-white">{{ $invoice->tenant->name ?? '-' }}</strong></div>
            <div>{{ trans('admin.vat_label') }} <span class="code-font text-slate-300">{{ $invoice->tenant->vat_number ?? '-' }}</span></div>
            <div>{{ trans('admin.cr_label') }} <span class="code-font text-slate-300">{{ $invoice->tenant->cr_number ?? '-' }}</span></div>
            <div>{{ trans('dashboard.address') }}: <span class="text-slate-300">{{ $invoice->tenant->address_street ?? '' }} - {{ $invoice->tenant->address_city ?? '' }}</span></div>
            <div>{{ trans('admin.env_label') }}
                <span class="px-2 py-0.5 rounded text-[10px] font-bold {{ $invoice->tenant->is_sandbox ? 'bg-amber-500/10 text-amber-400' : 'bg-emerald-500/10 text-emerald-400' }}">
                    {{ $invoice->tenant->is_sandbox ? 'Sandbox' : 'Production Live' }}
                </span>
            </div>
        </div>

        <!-- Buyer Customer Details -->
        <div class="p-6 rounded-2xl bg-navy-900 border border-slate-800 shadow-xl space-y-2.5">
            <h3 class="font-bold text-white text-sm pb-2 border-b border-slate-800">{{ trans('admin.buyer_details_heading') }}</h3>
            <div>{{ trans('admin.name_label') }} <strong class="text-white">{{ $invoice->buyer_name ?? trans('admin.general_cash_customer') }}</strong></div>
            <div>{{ trans('admin.vat_label') }} <span class="code-font text-slate-300">{{ $invoice->buyer_vat_number ?? trans('admin.unregistered_simplified') }}</span></div>
            <div>{{ trans('admin.cr_label') }} <span class="code-font text-slate-300">{{ $invoice->buyer_cr_number ?? '-' }}</span></div>
            <div>{{ trans('admin.icv_counter_label') }} <span class="code-font text-emerald-400">#{{ $invoice->invoice_counter }}</span></div>
        </div>
    </div>

    <!-- ZATCA Gateway Response & Hash Chain -->
    <div class="p-6 rounded-2xl bg-navy-900 border border-slate-800 shadow-xl space-y-4">
        <h3 class="font-bold text-white text-sm flex items-center gap-2">
            <span><i class="fa-solid fa-shield-halved text-emerald-400"></i></span>
            <span>{{ trans('admin.zatca_engine_heading') }}</span>
        </h3>

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
                <span class="text-slate-400 block mb-1">{{ trans('admin.invoice_hash_label') }}</span>
                <div class="p-2.5 rounded-xl bg-navy-950 border border-slate-800 code-font text-slate-300 break-all select-all text-[11px]">
                    {{ $invoice->invoice_hash ?? '-' }}
                </div>
            </div>
            <div>
                <span class="text-slate-400 block mb-1">{{ trans('admin.pih_hash_label') }}</span>
                <div class="p-2.5 rounded-xl bg-navy-950 border border-slate-800 code-font text-slate-400 break-all select-all text-[11px]">
                    {{ $invoice->previous_invoice_hash ?? trans('admin.first_invoice_in_chain') }}
                </div>
            </div>
        </div>

        <!-- ZATCA Warnings / Errors if any -->
        @if(!empty($invoice->errors) || !empty($invoice->warnings))
            <div class="p-4 rounded-xl bg-amber-500/10 border border-amber-500/30 text-amber-300 space-y-2">
                <div class="font-bold flex items-center gap-1.5">
                    <span><i class="fa-solid fa-triangle-exclamation text-rose-400"></i></span>
                    <span>{{ trans('admin.zatca_validation_messages') }}</span>
                </div>
                @if(!empty($invoice->errors))
                    <div class="text-rose-400 font-semibold">{{ trans('admin.errors_label') }}</div>
                    <pre class="code-font text-[11px] bg-navy-950 p-2 rounded-lg text-rose-300 overflow-x-auto">{{ json_encode($invoice->errors, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE) }}</pre>
                @endif
                @if(!empty($invoice->warnings))
                    <div class="text-amber-400 font-semibold">{{ trans('admin.warnings_label') }}</div>
                    <pre class="code-font text-[11px] bg-navy-950 p-2 rounded-lg text-amber-300 overflow-x-auto">{{ json_encode($invoice->warnings, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE) }}</pre>
                @endif
            </div>
        @endif

        <!-- Action Toggles for XML & Raw Payload -->
        <div class="flex flex-wrap items-center gap-3 pt-2">
            @if($invoice->qr_code)
                <div class="p-3 bg-white rounded-xl inline-block shadow">
                    <img src="https://api.qrserver.com/v1/create-qr-code/?size=100x100&data={{ urlencode($invoice->qr_code) }}" alt="ZATCA QR Code" class="w-24 h-24">
                </div>
            @endif

            <button type="button" @click="showXml = !showXml" class="px-4 py-2 rounded-xl bg-slate-800 hover:bg-slate-700 text-emerald-300 font-bold transition">
                <span x-text="showXml ? '{{ trans('admin.hide_signed_xml') }}' : '{{ trans('admin.show_signed_xml') }}'"></span>
            </button>

            <button type="button" @click="showPayload = !showPayload" class="px-4 py-2 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-300 font-bold transition">
                <span x-text="showPayload ? '{{ trans('admin.hide_zatca_payload') }}' : '{{ trans('admin.show_zatca_payload') }}'"></span>
            </button>
        </div>

        <div x-show="showXml" x-cloak class="mt-4">
            <span class="block text-slate-400 mb-1">UBL 2.1 Signed XML Document:</span>
            <pre class="p-4 rounded-xl bg-navy-950 border border-slate-800 code-font text-[11px] text-emerald-300 max-h-96 overflow-auto whitespace-pre-wrap select-all">{{ $invoice->signed_xml }}</pre>
        </div>

        <div x-show="showPayload" x-cloak class="mt-4">
            <span class="block text-slate-400 mb-1">ZATCA API JSON Response:</span>
            <pre class="p-4 rounded-xl bg-navy-950 border border-slate-800 code-font text-[11px] text-sky-300 max-h-96 overflow-auto whitespace-pre-wrap select-all">{{ json_encode($invoice->zatca_response, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE) }}</pre>
        </div>
    </div>

</div>

<!-- AlpineJS -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
@endsection