@extends('agency.layouts.app')

@section('title', 'Faturalar')

@section('content')
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">

@php
    $dtColumns = [
        ['key' => 'invoice_number', 'label' => 'Fatura No', 'sortable' => true, 'sort' => 'invoice_number'],
        ['key' => 'issue_date', 'label' => 'Tarih', 'sortable' => true, 'sort' => 'issue_date', 'width' => '105px'],
        ['key' => 'billing', 'label' => 'Muhatap'],
        ['key' => 'source', 'label' => 'Kaynak', 'width' => '120px'],
        ['key' => 'items', 'label' => 'Kalem', 'align' => 'center', 'width' => '70px', 'visible' => false],
        ['key' => 'amount', 'label' => 'Tutar', 'sortable' => true, 'sort' => 'amount', 'align' => 'end', 'width' => '130px'],
        ['key' => 'status', 'label' => 'Durum', 'sortable' => true, 'sort' => 'status', 'align' => 'center', 'width' => '100px'],
        ['key' => 'official', 'label' => 'Resmi Fatura', 'sortable' => true, 'sort' => 'official_status', 'align' => 'center', 'width' => '130px'],
        ['key' => '_actions', 'label' => '', 'fixed' => true, 'align' => 'end', 'width' => '190px'],
    ];

    $dtFilters = [
        ['key' => 'date_from', 'label' => 'Başlangıç', 'type' => 'date', 'value' => request('date_from')],
        ['key' => 'date_to', 'label' => 'Bitiş', 'type' => 'date', 'value' => request('date_to')],
        ['key' => 'status', 'label' => 'Durum', 'value' => request('status'),
         'options' => \App\Models\Sale\SaleInvoice::STATUSES],
        ['key' => 'official_status', 'label' => 'Resmi Fatura', 'value' => request('official_status'),
         'options' => \App\Models\Sale\SaleInvoice::OFFICIAL_STATUSES],
        ['key' => 'invoice_type', 'label' => 'Tür', 'value' => request('invoice_type'),
         'options' => \App\Models\Sale\SaleInvoice::TYPES],
        ['key' => 'billing_type', 'label' => 'Muhatap', 'value' => request('billing_type'),
         'options' => ['individual' => 'Şahıs', 'company' => 'Şirket']],
        ['key' => 'product_type', 'label' => 'Ürün Tipi', 'value' => request('product_type'),
         'options' => $productTypes->pluck('name', 'id')->all()],
    ];

    $dtStats = [
        ['label' => 'Toplam Fatura', 'value' => number_format($stats['total'], 0, ',', '.'), 'icon' => 'fa-file-invoice', 'color' => '#059669'],
        ['label' => 'Bu Ay Kesilen', 'value' => number_format($stats['month_count'], 0, ',', '.'), 'icon' => 'fa-calendar-check', 'color' => '#2563eb'],
        ['label' => 'Kesilen Tutar (tüm birimler)', 'value' => number_format((float) $stats['issued_sum'], 2, ',', '.'), 'icon' => 'fa-coins', 'color' => '#0f766e'],
        ['label' => 'Resmi Fatura Bekleyen', 'value' => number_format($stats['official_pending'], 0, ',', '.'), 'icon' => 'fa-triangle-exclamation', 'color' => '#d97706'],
    ];
@endphp

<div class="container-fluid py-4 finv-page">

    <x-data-table
        module="invoices"
        title="Faturalar"
        subtitle="Sistemdeki tüm faturalar — resmi fatura takibi, önizleme ve PDF"
        icon="fa-file-invoice-dollar"
        :columns="$dtColumns"
        :filters="$dtFilters"
        :stats="$dtStats"
        :search="request('search', request('q', ''))"
        search-placeholder="Fatura no, unvan, not ara…"
        :sort="$sort"
        :dir="$dir"
        :paginator="$invoices"
        create-onclick="openQuickView('{{ route('agency.invoices.quick-create') }}')"
        create-label="Yeni Fatura Oluştur"
    >
        @forelse($invoices as $inv)
            <tr class="finv-row {{ $inv->status === 'cancelled' ? 'is-cancelled' : '' }} {{ $inv->official_status === 'pending' && $inv->status !== 'cancelled' ? 'finv-official-pending' : '' }}">
                <td data-col="invoice_number">
                    <span class="finv-no finv-no-link" onclick="openQuickView('{{ route('agency.invoices.quick-view', $inv) }}')" title="Hızlı görünümde aç">{{ $inv->invoice_number }}</span>
                    @if($inv->invoice_type === 'refund')
                        <span class="finv-tag refund">İade</span>
                    @endif
                </td>
                <td data-col="issue_date" class="finv-mono">{{ $inv->issue_date?->format('d.m.Y') }}</td>
                <td data-col="billing">
                    <div class="d-flex align-items-center gap-2">
                        <span class="finv-btype {{ $inv->billing_type }}">
                            <i class="fas {{ $inv->billing_type === 'company' ? 'fa-building' : 'fa-id-card' }}"></i>
                        </span>
                        <div style="min-width:0;">
                            <div class="fw-bold text-dark text-truncate" style="max-width: 240px; font-size:.85rem;">{{ $inv->billing_name }}</div>
                            <div class="text-muted" style="font-size:.7rem;">{{ $inv->billing_type_label }}
                                @if(($inv->billing_snapshot['tax_number'] ?? null))
                                    · {{ $inv->billing_snapshot['tax_number'] }}
                                @endif
                            </div>
                        </div>
                    </div>
                </td>
                <td data-col="source">
                    @if($inv->sale_id)
                        <span class="finv-tag sale" title="Satıştan kesildi">Satış #{{ $inv->sale_id }}</span>
                        @if($inv->sale?->productType?->name)
                            <div class="text-muted mt-1" style="font-size:.66rem;"><i class="fas fa-tag me-1"></i>{{ $inv->sale->productType->name }}</div>
                        @endif
                    @else
                        <span class="finv-tag free">Serbest</span>
                    @endif
                </td>
                <td data-col="items" class="text-center finv-mono">{{ is_array($inv->items) ? count($inv->items) : 0 }}</td>
                <td data-col="amount" class="text-end">
                    <span class="finv-amount">{{ number_format((float) $inv->amount, 2, ',', '.') }}</span>
                    <small class="text-muted">{{ $inv->currency }}</small>
                </td>
                <td data-col="status" class="text-center">
                    <span class="finv-status" style="--sc: {{ $inv->status_color }};">{{ $inv->status_label }}</span>
                </td>
                <td data-col="official" class="text-center">
                    @if($inv->official_status === 'pending' && $inv->status !== 'cancelled')
                        <span class="finv-official pending" title="Resmi fatura henüz kesilmedi!"><i class="fas fa-hourglass-half"></i> Bekliyor</span>
                    @else
                        <span class="finv-official" style="--sc: {{ $inv->official_status_color }};">{{ $inv->official_status_label }}</span>
                    @endif
                </td>
                <td data-col="_actions" class="text-end">
                    <div class="finv-acts">
                        @if($inv->official_status === 'pending' && $inv->status !== 'cancelled')
                            <button type="button" class="finv-issue-btn" onclick="finvIssueOfficial({{ $inv->id }}, '{{ $inv->invoice_number }}')" title="Resmi faturayı kes (entegrasyon bağlanana kadar durumu günceller)">
                                <i class="fas fa-stamp"></i> Faturayı Kes
                            </button>
                        @endif
                        <a href="{{ route('agency.invoices.preview', $inv) }}" target="_blank" class="finv-act" title="Önizle"><i class="fas fa-eye"></i></a>
                        <a href="{{ route('agency.invoices.download', $inv) }}" class="finv-act" title="PDF indir"><i class="fas fa-file-arrow-down"></i></a>
                        <button type="button" class="finv-act" title="Düzenle" onclick="openQuickView('{{ route('agency.invoices.quick-view', $inv) }}')"><i class="fas fa-pen"></i></button>
                        <button type="button" class="finv-act danger" title="Sil" onclick="finvDelete({{ $inv->id }})"><i class="fas fa-trash-can"></i></button>
                    </div>
                </td>
            </tr>
        @empty
            <tr>
                <td colspan="{{ count($dtColumns) }}" class="text-center text-muted py-5">
                    <i class="fas fa-file-invoice mb-2 d-block" style="font-size:2rem; opacity:.2;"></i>
                    <div class="fw-bold">Henüz fatura yok</div>
                    <div class="small">Sağ üstteki "Yeni Fatura Oluştur" ile ilk faturanızı oluşturun.</div>
                </td>
            </tr>
        @endforelse
    </x-data-table>
</div>

<style>
    .finv-page { font-family: 'Manrope', system-ui, sans-serif; }

    .finv-row.is-cancelled td { opacity: .5; }
    .finv-no { font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: .8rem; color: #065f46; }
    .finv-no-link { cursor: pointer; transition: color .14s; }
    .finv-no-link:hover { color: #059669; text-decoration: underline; text-underline-offset: 3px; }
    .finv-mono { font-family: 'JetBrains Mono', monospace; font-size: .76rem; color: #475569; }
    .finv-amount { font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: .88rem; color: #0f172a; }

    .finv-tag { display: inline-block; font-size: .64rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
    .finv-tag.sale { color: #4f46e5; background: #eef2ff; }
    .finv-tag.free { color: #64748b; background: #f1f5f9; }
    .finv-tag.refund { color: #b91c1c; background: #fee2e2; margin-left: 6px; }

    .finv-btype { width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: .74rem; flex-shrink: 0; }
    .finv-btype.company { color: #4f46e5; background: #eef2ff; }
    .finv-btype.individual { color: #059669; background: #ecfdf5; }

    .finv-status {
        display: inline-block; font-size: .7rem; font-weight: 800; padding: 3px 11px; border-radius: 999px;
        color: var(--sc); background: color-mix(in srgb, var(--sc) 10%, white); border: 1px solid color-mix(in srgb, var(--sc) 28%, white);
    }

    /* Resmi fatura durumu — bekleyenler belirgin */
    .finv-official {
        display: inline-flex; align-items: center; gap: 5px; font-size: .7rem; font-weight: 800; padding: 3px 11px; border-radius: 999px;
        color: var(--sc, #64748b); background: color-mix(in srgb, var(--sc, #64748b) 10%, white); border: 1px solid color-mix(in srgb, var(--sc, #64748b) 28%, white);
    }
    .finv-official.pending {
        color: #92400e; background: #fef3c7; border: 1px solid #fcd34d;
        animation: finvPendingPulse 2.2s ease-in-out infinite;
    }
    @keyframes finvPendingPulse {
        0%, 100% { box-shadow: 0 0 0 0 rgba(217, 119, 6, .35); }
        50% { box-shadow: 0 0 0 5px rgba(217, 119, 6, 0); }
    }
    /* Bekleyen satır: sol amber şerit + hafif zemin */
    tr.finv-official-pending td:first-child { box-shadow: inset 3px 0 0 #f59e0b; }
    tr.finv-official-pending td { background: #fffdf5; }

    .finv-issue-btn {
        display: inline-flex; align-items: center; gap: 5px; border: none; cursor: pointer;
        font-family: inherit; font-size: .7rem; font-weight: 800; padding: 6px 11px; border-radius: 9px;
        color: white; background: linear-gradient(135deg, #d97706, #b45309);
        box-shadow: 0 6px 14px -6px rgba(217, 119, 6, .6); transition: all .16s ease; white-space: nowrap;
    }
    .finv-issue-btn:hover { transform: translateY(-1px); filter: brightness(1.08); }

    .finv-acts { display: inline-flex; gap: 5px; align-items: center; }
    .finv-act {
        width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
        border: 1px solid #e8edf4; background: white; color: #64748b; font-size: .74rem; cursor: pointer;
        text-decoration: none; transition: all .15s ease;
    }
    .finv-act:hover { color: #059669; border-color: #a7f3d0; background: #ecfdf5; }
    .finv-act.danger:hover { color: #dc2626; border-color: #fca5a5; background: #fef2f2; }
</style>

<script>
    function finvIssueOfficial(id, number) {
        Swal.fire({
            title: 'Resmi fatura kesildi mi?',
            html: `<b>${number}</b> için resmi fatura durumu <b>"Kesildi"</b> olarak işaretlenecek.<br><small class="text-muted">Entegrasyon bağlandığında bu işlem resmi faturayı otomatik kesecek.</small>`,
            icon: 'question', showCancelButton: true,
            confirmButtonText: 'Evet, kesildi olarak işaretle', cancelButtonText: 'Vazgeç', confirmButtonColor: '#d97706'
        }).then(r => {
            if (!r.isConfirmed) return;
            fetch(`{{ url('agency/invoices') }}/${id}/official-status`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' },
                body: JSON.stringify({ official_status: 'issued' })
            })
            .then(r2 => r2.json())
            .then(d => {
                if (d.success) {
                    Swal.fire({ title: 'Kesildi', text: d.message, icon: 'success', timer: 1300, showConfirmButton: false })
                        .then(() => window.location.reload());
                } else {
                    Swal.fire('Hata', d.message || 'Güncellenemedi.', 'error');
                }
            })
            .catch(() => Swal.fire('Hata', 'Bağlantı hatası oluştu.', 'error'));
        });
    }

    function finvDelete(id) {
        Swal.fire({
            title: 'Fatura silinsin mi?',
            text: 'Bu işlem geri alınamaz.',
            icon: 'warning', showCancelButton: true,
            confirmButtonText: 'Evet, sil', cancelButtonText: 'Vazgeç', confirmButtonColor: '#dc2626'
        }).then(r => {
            if (!r.isConfirmed) return;
            fetch(`{{ url('agency/invoices') }}/${id}`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' },
                body: JSON.stringify({ _method: 'DELETE' })
            })
            .then(r2 => r2.json())
            .then(d => { if (d.success) window.location.reload(); });
        });
    }
</script>
@endsection