@extends('layouts.dashboard')

@php
    $isCreditNote = $type === 'credit_note';
    $isDebitNote = $type === 'debit_note';
    $isNote = $isCreditNote || $isDebitNote;

    $pageTitle = match($type) {
        'credit_note' => trans('dashboard.credit_notes_title'),
        'debit_note' => trans('dashboard.debit_notes_title'),
        default => trans('dashboard.invoices_title'),
    };
    $headerTitle = match($type) {
        'credit_note' => trans('dashboard.credit_notes_header'),
        'debit_note' => trans('dashboard.debit_notes_header'),
        default => trans('dashboard.invoices_header'),
    };
@endphp

@section('title', $pageTitle)
@section('header_title', $headerTitle)

@section('content')
<div class="space-y-6">

    {{-- Sandbox / Test Mode Banner --}}
    @if(! $tenant->zatcaEnvironment()->isLive())
        <div class="flex items-start gap-3 p-4 rounded-2xl border border-amber-300/80 bg-amber-50/90 dark:border-amber-500/30 dark:bg-amber-500/10 text-xs shadow-xs">
            <span class="text-amber-600 dark:text-amber-400 text-lg leading-none mt-0.5">🧪</span>
            <div>
                <p class="font-bold text-amber-950 dark:text-amber-300">{{ trans('dashboard.sandbox_mode_title') }}</p>
                <p class="text-amber-800 dark:text-amber-400/90 mt-0.5 leading-relaxed">{{ trans('dashboard.sandbox_mode_desc') }}</p>
            </div>
        </div>
    @endif

    <!-- Filters & Search -->
    <div class="p-4 rounded-2xl bg-white dark:bg-navy-900 border border-slate-200 dark:border-slate-800 shadow-sm flex flex-col sm:flex-row items-center justify-between gap-4 text-xs">
        <div class="flex items-center gap-3 w-full sm:w-auto">
            @if($isCreditNote)
                <a href="{{ route('dashboard.invoices.create', ['type' => 'credit_note']) }}"
                   class="px-4 py-2 rounded-xl bg-brand-600 hover:bg-brand-500 text-white font-bold flex items-center gap-2 shadow-sm transition whitespace-nowrap">
                    <i class="fa-solid fa-plus text-xs"></i>
                    <span>{{ trans('dashboard.new_credit_note_btn') }}</span>
                </a>
            @else
                <a href="{{ route('dashboard.invoices.create', array_filter(['type' => $type ?: null])) }}"
                   class="px-4 py-2 rounded-xl bg-brand-600 hover:bg-brand-500 text-white font-bold flex items-center gap-2 shadow-sm transition whitespace-nowrap">
                    <i class="fa-solid fa-plus text-xs text-white"></i>
                    <span class="text-white">{{ trans('dashboard.new_invoice_btn') }}</span>
                </a>
            @endif
        </div>

        <form method="GET" class="flex flex-wrap items-center gap-3 w-full sm:w-auto justify-end">
            @if($type)
                <input type="hidden" name="type" value="{{ $type }}">
            @endif
            <div class="relative flex-1 sm:flex-initial">
                <input type="text"
                       name="search"
                       value="{{ request('search') }}"
                       placeholder="{{ $isCreditNote ? trans('dashboard.search_credit_notes_placeholder') : trans('dashboard.search_placeholder') }}"
                       class="rounded-xl bg-slate-50 dark:bg-navy-950 border border-slate-300 dark:border-slate-700 text-slate-800 dark:text-slate-100 ps-3 pe-8 py-2 text-xs focus:border-brand-500 focus:outline-none transition w-full sm:w-72">
                <i class="fa-solid fa-magnifying-glass absolute end-2.5 top-1/2 -translate-y-1/2 text-slate-400 text-xs pointer-events-none"></i>
            </div>

            <select name="status" class="rounded-xl bg-slate-50 dark:bg-navy-950 border border-slate-300 dark:border-slate-700 text-slate-800 dark:text-slate-100 px-3 py-2 text-xs focus:border-brand-500 focus:outline-none transition">
                <option value="">{{ trans('dashboard.all_statuses') }}</option>
                <option value="cleared" {{ request('status') === 'cleared' ? 'selected' : '' }}>{{ trans('dashboard.status_cleared') }}</option>
                <option value="reported" {{ request('status') === 'reported' ? 'selected' : '' }}>{{ trans('dashboard.status_reported') }}</option>
                <option value="draft" {{ request('status') === 'draft' ? 'selected' : '' }}>{{ trans('dashboard.status_draft') }}</option>
                <option value="pending" {{ request('status') === 'pending' ? 'selected' : '' }}>{{ trans('dashboard.status_pending') }}</option>
                <option value="rejected" {{ request('status') === 'rejected' ? 'selected' : '' }}>{{ trans('dashboard.status_rejected') }}</option>
            </select>

            <button type="submit" class="px-4 py-2 rounded-xl bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-200 font-bold transition">
                {{ trans('dashboard.filter_btn') }}
            </button>
            @if(request()->hasAny(['search', 'status']))
                <a href="{{ route('dashboard.invoices.index', array_filter(['type' => $type ?: null])) }}" class="text-slate-500 hover:underline">{{ trans('dashboard.clear_filter') }}</a>
            @endif
        </form>
    </div>

    <!-- Invoices Table -->
    <div class="bg-white dark:bg-navy-900 border border-slate-200 dark:border-slate-800 rounded-2xl overflow-hidden shadow-sm">
        <div class="overflow-x-auto">
            <table class="w-full text-start text-xs">
                @if($isNote)
                    {{-- Credit & Debit Notes Dedicated Columns --}}
                    <thead class="bg-slate-50 dark:bg-navy-950/60 text-slate-500 dark:text-slate-400 border-b border-slate-200 dark:border-slate-800 font-bold">
                        <tr>
                            <th class="p-4 text-start">{{ trans('dashboard.th_note_number') }}</th>
                            <th class="p-4 text-start">{{ trans('dashboard.th_original_invoice') }}</th>
                            <th class="p-4 text-start">{{ trans('dashboard.client') }}</th>
                            <th class="p-4 text-start">{{ trans('dashboard.th_reason') }}</th>
                            <th class="p-4 text-start">{{ trans('dashboard.total_amount') }}</th>
                            <th class="p-4 text-start">{{ trans('dashboard.status_in_zatca') }}</th>
                            <th class="p-4 text-center">{{ trans('dashboard.th_actions') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 dark:divide-slate-800/60 text-slate-700 dark:text-slate-300">
                        @forelse($invoices as $inv)
                            <tr class="hover:bg-slate-50 dark:hover:bg-navy-950/40 transition">
                                <td class="p-4 font-bold text-slate-900 dark:text-white code-font">
                                    <a href="{{ route('dashboard.invoices.show', $inv->uuid) }}" class="hover:text-brand-600 dark:hover:text-brand-400 transition">
                                        {{ $inv->invoice_number }}
                                    </a>
                                </td>
                                <td class="p-4 font-semibold text-emerald-600 dark:text-emerald-400 code-font">
                                    @if($inv->originalInvoice)
                                        <a href="{{ route('dashboard.invoices.show', $inv->originalInvoice->uuid) }}" class="hover:underline">
                                            {{ $inv->originalInvoice->invoice_number }}
                                        </a>
                                    @else
                                        <span class="text-slate-400">—</span>
                                    @endif
                                </td>
                                <td class="p-4 font-semibold text-slate-800 dark:text-slate-200">{{ $inv->buyer_name }}</td>
                                <td class="p-4 text-slate-600 dark:text-slate-400">{{ $inv->reason ?: '—' }}</td>
                                <td class="p-4 font-bold code-font whitespace-nowrap {{ $isCreditNote ? 'text-rose-600 dark:text-rose-400' : 'text-emerald-600 dark:text-emerald-400' }}" dir="ltr">
                                    {{ $isCreditNote ? '-' : '+' }}{{ number_format($inv->total, 2) }}
                                </td>
                                <td class="p-4">
                                    @if($inv->status->value === 'cleared')
                                        <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-bold bg-emerald-50 text-emerald-700 border border-emerald-200 dark:bg-emerald-500/10 dark:text-emerald-400 dark:border-emerald-500/30">
                                            <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
                                            <span>{{ trans('dashboard.status_accepted') }}</span>
                                        </span>
                                    @elseif($inv->status->value === 'reported')
                                        <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-bold bg-sky-50 text-sky-700 border border-sky-200 dark:bg-sky-500/10 dark:text-sky-400 dark:border-sky-500/30">
                                            <span class="w-1.5 h-1.5 rounded-full bg-sky-500"></span>
                                            <span>{{ trans('dashboard.status_accepted_reported') }}</span>
                                        </span>
                                    @elseif($inv->status->value === 'rejected')
                                        <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-bold bg-rose-50 text-rose-700 border border-rose-200 dark:bg-rose-500/10 dark:text-rose-400 dark:border-rose-500/30">
                                            <span class="w-1.5 h-1.5 rounded-full bg-rose-500"></span>
                                            <span>{{ trans('dashboard.status_rejected') }}</span>
                                        </span>
                                    @else
                                        <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-bold bg-amber-50 text-amber-700 border border-amber-200 dark:bg-amber-500/10 dark:text-amber-400 dark:border-amber-500/30">
                                            <span class="w-1.5 h-1.5 rounded-full bg-amber-500"></span>
                                            <span>{{ $inv->status->label() }}</span>
                                        </span>
                                    @endif
                                </td>
                                <td class="p-4 text-center">
                                    <div class="inline-flex items-center gap-1.5">
                                        <a href="{{ route('dashboard.invoices.pdf', $inv->uuid) }}" target="_blank" class="px-2.5 py-1 rounded-lg border border-slate-200 dark:border-slate-700 hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-700 dark:text-slate-300 text-[10px] font-bold transition" title="{{ trans('dashboard.download_pdf_title') }}">
                                            PDF
                                        </a>
                                        @if($inv->signed_xml)
                                            <a href="{{ route('dashboard.invoices.xml', $inv->uuid) }}" target="_blank" class="px-2.5 py-1 rounded-lg border border-slate-200 dark:border-slate-700 hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-700 dark:text-slate-300 text-[10px] font-bold transition" title="{{ trans('dashboard.download_xml_title') }}">
                                                XML
                                            </a>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="text-center py-16 px-4">
                                    <div class="max-w-sm mx-auto text-center space-y-3">
                                        <div class="w-12 h-12 rounded-2xl bg-emerald-50 dark:bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 flex items-center justify-center text-xl mx-auto border border-emerald-200 dark:border-emerald-500/20">
                                            <i class="fa-regular fa-file-lines"></i>
                                        </div>
                                        <div>
                                            <h4 class="font-bold text-slate-800 dark:text-slate-100 text-sm">
                                                {{ trans('dashboard.no_notes_found_title') }}
                                            </h4>
                                            <p class="text-xs text-slate-500 dark:text-slate-400 mt-1">
                                                {{ $isDebitNote ? trans('dashboard.no_debit_notes_desc') : trans('dashboard.no_credit_notes_desc') }}
                                            </p>
                                        </div>
                                        <a href="{{ route('dashboard.invoices.create', ['type' => $type]) }}"
                                           class="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl bg-brand-600 hover:bg-brand-500 text-white font-bold text-xs shadow-sm transition">
                                            <span>{{ trans('dashboard.create_note_action') }}</span>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                @else
                    {{-- Standard Invoices Columns --}}
                    <thead class="bg-slate-50 dark:bg-navy-950/60 text-slate-500 dark:text-slate-400 border-b border-slate-200 dark:border-slate-800 font-bold">
                        <tr>
                            <th class="p-4 text-start">{{ trans('dashboard.th_invoice_number') }}</th>
                            <th class="p-4 text-start">{{ trans('dashboard.th_type') }}</th>
                            <th class="p-4 text-start">{{ trans('dashboard.th_issued_at') }}</th>
                            <th class="p-4 text-start">{{ trans('dashboard.th_buyer') }}</th>
                            <th class="p-4 text-start">{{ trans('dashboard.th_subtotal') }}</th>
                            <th class="p-4 text-start">{{ trans('dashboard.th_vat') }}</th>
                            <th class="p-4 text-start">{{ trans('dashboard.th_total') }}</th>
                            <th class="p-4 text-start">{{ trans('dashboard.th_zatca_status') }}</th>
                            <th class="p-4 text-center">{{ trans('dashboard.th_download') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 dark:divide-slate-800/60 text-slate-700 dark:text-slate-300">
                        @forelse($invoices as $inv)
                            <tr class="hover:bg-slate-50 dark:hover:bg-navy-950/40 transition">
                                <td class="p-4 font-bold text-slate-900 dark:text-white code-font">
                                    <a href="{{ route('dashboard.invoices.show', $inv->uuid) }}" class="hover:text-brand-600 dark:hover:text-brand-400 transition">
                                        {{ $inv->invoice_number }}
                                    </a>
                                </td>
                                <td class="p-4 text-[11px] text-slate-500 dark:text-slate-400">
                                    {{ match($inv->type) {
                                        'standard' => trans('dashboard.type_standard'),
                                        'credit_note' => trans('dashboard.action_credit_note'),
                                        'debit_note' => trans('dashboard.action_debit_note'),
                                        default => trans('dashboard.type_simplified'),
                                    } }}
                                </td>
                                <td class="p-4 text-slate-500 dark:text-slate-400 text-[11px]">{{ $inv->issued_at?->format('Y-m-d H:i') }}</td>
                                <td class="p-4 font-semibold text-slate-800 dark:text-slate-200">{{ $inv->buyer_name }}</td>
                                <td class="p-4 text-slate-600 dark:text-slate-300">{{ number_format($inv->subtotal, 2) }}</td>
                                <td class="p-4 text-slate-600 dark:text-slate-300">{{ number_format($inv->vat_amount, 2) }}</td>
                                <td class="p-4 font-bold text-emerald-600 dark:text-emerald-400 code-font whitespace-nowrap">
                                    <span class="inline-flex items-center gap-1.5" dir="ltr">
                                        <x-riyal-symbol class="w-[1.05em] h-[1.05em]" />
                                        <span>{{ number_format($inv->total, 2) }}</span>
                                    </span>
                                </td>
                                <td class="p-4">
                                    @if($inv->status->value === 'cleared')
                                        <span class="px-2.5 py-0.5 rounded-full bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 font-bold text-[10px]">{{ trans('dashboard.badge_cleared') }}</span>
                                    @elseif($inv->status->value === 'reported')
                                        <span class="px-2.5 py-0.5 rounded-full bg-sky-500/10 text-sky-600 dark:text-sky-400 font-bold text-[10px]">{{ trans('dashboard.badge_reported') }}</span>
                                    @elseif($inv->status->value === 'rejected')
                                        <span class="px-2.5 py-0.5 rounded-full bg-rose-500/10 text-rose-600 dark:text-rose-400 font-bold text-[10px]">{{ trans('dashboard.badge_rejected') }}</span>
                                    @else
                                        <span class="px-2.5 py-0.5 rounded-full bg-amber-500/10 text-amber-600 dark:text-amber-400 font-bold text-[10px]">{{ $inv->status->label() }}</span>
                                    @endif
                                </td>
                                <td class="p-4 text-center">
                                    <div class="inline-flex items-center gap-2">
                                        <a href="{{ route('dashboard.invoices.pdf', $inv->uuid) }}" target="_blank" class="px-2 py-1 rounded border border-slate-200 dark:border-slate-700 bg-slate-50 hover:bg-slate-100 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-300 text-[10px] font-bold transition" title="{{ trans('dashboard.download_pdf_title') }}">
                                            PDF
                                        </a>
                                        @if($inv->signed_xml)
                                            <a href="{{ route('dashboard.invoices.xml', $inv->uuid) }}" target="_blank" class="px-2 py-1 rounded border border-slate-200 dark:border-slate-700 bg-slate-50 hover:bg-slate-100 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-300 text-[10px] font-bold transition" title="{{ trans('dashboard.download_xml_title') }}">
                                                XML
                                            </a>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="9" class="text-center py-12 text-slate-400 dark:text-slate-500">
                                    {{ trans('dashboard.no_invoices_found') }}
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                @endif
            </table>
        </div>

        @if($invoices->hasPages())
            <div class="p-4 border-t border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-navy-950/40">
                {{ $invoices->links() }}
            </div>
        @endif
    </div>

</div>
@endsection