{{--
    Operasyon kartı · GİDERLER sekmesi.

    Kalkışın tedarikçi ve kaynak (rehber/araç/kaptan) giderlerini tek tabloda
    toplar: PLANLANAN tutar kaynak atamasından ya da elle girilen gider
    kaleminden gelir, GERÇEKLEŞEN tutar ise ödemeler defterindeki (payments)
    gider hareketlerinden. Fark "kalan" olarak satır satır gösterilir.

    Beklenen:
      $uid, $typeKey, $id       : kalkış kimliği (JS uçları için)
      $rows                     : OperationExpenseService::rows() çıktısı
      $payments                 : kalkışa bağlı gider hareketleri
      $summary                  : OperationExpenseService::summary() çıktısı
      $suppliers, $currencies   : kalem ekleme formu seçenekleri
      $expensesReady            : operation_expenses tablosu migrate edildi mi
--}}
@include('agency.partials.qv-table')

@php
    $rows = $rows ?? collect();
    $payments = $payments ?? collect();
    $suppliers = $suppliers ?? collect();
    $currencies = $currencies ?? collect();
    $baseCurrency = optional($currencies->firstWhere('is_base', true))->code ?? 'TRY';
    $money = fn ($v) => number_format((float) $v, 2, ',', '.');
@endphp

<div class="opsex" id="opsex-{{ $uid }}"
     data-base="{{ url("agency/operations/{$typeKey}/{$id}") }}"
     data-selfurl="{{ route('agency.operations.quick-view', [$typeKey, $id]) }}">

    @unless($expensesReady ?? false)
        <div class="opsex-warn">
            <i class="fas fa-database"></i>
            <div>
                <b>Gider tablosu henüz kurulmadı.</b>
                <span>Elle gider kalemi girebilmek için <code>php artisan migrate</code> çalıştırılmalı.</span>
            </div>
        </div>
    @endunless

    {{-- ── Özet: planlanan / gerçekleşen / bekleyen / kalan ── --}}
    <div class="opsex-sum">
        <div class="opsex-card">
            <span class="opsex-card-lbl">PLANLANAN GİDER</span>
            <span class="opsex-card-val">{{ $money($summary['planned']) }}₺</span>
            <span class="opsex-card-sub">{{ $summary['row_count'] }} kalem</span>
        </div>
        <div class="opsex-card ok">
            <span class="opsex-card-lbl">GERÇEKLEŞEN ÖDEME</span>
            <span class="opsex-card-val">{{ $money($summary['paid']) }}₺</span>
            <span class="opsex-card-sub">{{ $summary['payment_count'] }} hareket</span>
        </div>
        <div class="opsex-card warn">
            <span class="opsex-card-lbl">BEKLEYEN ÖDEME</span>
            <span class="opsex-card-val">{{ $money($summary['pending']) }}₺</span>
            <span class="opsex-card-sub">henüz gerçekleşmedi</span>
        </div>
        <div class="opsex-card {{ $summary['remaining'] > 0 ? 'danger' : 'ok' }}">
            <span class="opsex-card-lbl">KALAN (PLAN − GERÇEKLEŞEN)</span>
            <span class="opsex-card-val">{{ $money($summary['remaining']) }}₺</span>
            <span class="opsex-card-sub">%{{ $summary['progress'] }} ödendi</span>
        </div>
    </div>

    <div class="opsex-progress"><div class="opsex-progress-bar" style="width:{{ $summary['progress'] }}%"></div></div>

    @if(($summary['unlinked_count'] ?? 0) > 0)
        <div class="opsex-note">
            <i class="fas fa-link-slash"></i>
            <span><b>{{ $summary['unlinked_count'] }}</b> ödeme hiçbir gider kalemine bağlı değil
            ({{ $money($summary['unlinked_amount']) }}₺). Aşağıdaki hareket listesinden kartını açıp kaleme bağlayabilirsiniz.</span>
        </div>
    @endif

    {{-- ── Kalem çubuğu ── --}}
    <div class="qvt-bar" style="margin-top:1rem;">
        <span class="qvt-bar-info"><i class="fas fa-file-invoice-dollar"></i> {{ $rows->count() }} gider kalemi</span>
        <span class="qvt-bar-r">
            @if($expensesReady ?? false)
                <button type="button" class="opsex-add" data-act="ex-form"><i class="fas fa-plus"></i> Gider Kalemi Ekle</button>
            @endif
            <button type="button" class="opsex-add ghost"
                    onclick="openQuickView('{{ route('agency.payments.quick-create', ['direction' => 'out', 'payable_type' => get_class($vm['date']), 'payable_id' => $id]) }}')">
                <i class="fas fa-money-bill-transfer"></i> Ödeme Kaydı
            </button>
        </span>
    </div>

    {{-- ── Yeni kalem formu ── --}}
    @if($expensesReady ?? false)
        <div class="opsex-form d-none" id="exForm-{{ $uid }}">
            <div class="opsex-form-grid">
                <label class="opsex-fld opsex-fld-wide">
                    <span>Kalem Başlığı</span>
                    <input type="text" id="exTitle-{{ $uid }}" maxlength="190" placeholder="Otel konaklama, müze giriş, transfer…">
                </label>
                <label class="opsex-fld">
                    <span>Muhatap</span>
                    <select id="exParty-{{ $uid }}">
                        <option value="">— Serbest metin —</option>
                        @foreach($suppliers as $s)
                            <option value="supplier:{{ $s->id }}">{{ $s->full_name ?: ('Tedarikçi #' . $s->id) }}</option>
                        @endforeach
                    </select>
                </label>
                <label class="opsex-fld" id="exPartyFreeWrap-{{ $uid }}">
                    <span>Muhatap Adı</span>
                    <input type="text" id="exPartyFree-{{ $uid }}" maxlength="190" placeholder="Kayıtlı değilse adını yazın">
                </label>
                <label class="opsex-fld">
                    <span>Kategori</span>
                    <select id="exCategory-{{ $uid }}">
                        @foreach(\App\Models\Operation\OperationExpense::CATEGORIES as $key => $label)
                            <option value="{{ $key }}">{{ $label }}</option>
                        @endforeach
                    </select>
                </label>
                <label class="opsex-fld">
                    <span>Planlanan Tutar</span>
                    <input type="number" step="0.01" min="0" id="exAmount-{{ $uid }}" placeholder="0,00">
                </label>
                <label class="opsex-fld opsex-fld-sm">
                    <span>Para Birimi</span>
                    <select id="exCurrency-{{ $uid }}">
                        @forelse($currencies as $c)
                            <option value="{{ $c->code }}" @selected($c->code === $baseCurrency)>{{ $c->code }}</option>
                        @empty
                            <option value="TRY" selected>TRY</option>
                        @endforelse
                    </select>
                </label>
                <label class="opsex-fld opsex-fld-sm">
                    <span>Vade</span>
                    <input type="date" id="exDue-{{ $uid }}">
                </label>
                <label class="opsex-fld opsex-fld-wide">
                    <span>Açıklama</span>
                    <input type="text" id="exDesc-{{ $uid }}" maxlength="255" placeholder="Opsiyonel not">
                </label>
            </div>
            <div class="opsex-form-acts">
                <button type="button" class="opsex-add" data-act="ex-save"><i class="fas fa-check"></i> Kalemi Kaydet</button>
                <button type="button" class="opsex-add ghost" data-act="ex-form"><i class="fas fa-xmark"></i> Vazgeç</button>
            </div>
        </div>
    @endif

    {{-- ── Gider kalemleri tablosu ── --}}
    <div class="qvt-box">
        <div class="qvt-scroll">
            <table class="qvt">
                <thead>
                    <tr>
                        <th>Gider Kalemi</th>
                        <th>Muhatap</th>
                        <th>Kategori</th>
                        <th>Vade</th>
                        <th class="ta-r">Planlanan</th>
                        <th class="ta-r">Gerçekleşen</th>
                        <th class="ta-r">Kalan</th>
                        <th>Durum</th>
                        <th class="qvt-w1"></th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($rows as $r)
                        <tr class="opsex-tr {{ $r['is_cancelled'] ? 'is-muted' : '' }}">
                            <td class="qvt-trunc" title="{{ $r['title'] }}">
                                <i class="fas {{ $r['kind'] === 'resource' ? 'fa-people-carry-box' : 'fa-receipt' }} qvt-dim me-1"></i>
                                @if($r['kind'] === 'resource' && $r['resource_id'])
                                    <span class="qvt-link" title="Kaynak kartını aç"
                                          onclick="event.stopPropagation(); openResourceDrawer({{ $r['resource_id'] }})">{{ $r['title'] }}</span>
                                @else
                                    <span class="qvt-strong">{{ $r['title'] }}</span>
                                @endif
                                @if($r['description'])<div class="qvt-dim" style="font-size:.7rem">{{ $r['description'] }}</div>@endif
                            </td>
                            <td class="qvt-trunc" title="{{ $r['counterparty_label'] }}">
                                @if($r['counterparty_url'])
                                    <span class="qvt-link" title="Tedarikçi kartını aç"
                                          onclick="event.stopPropagation(); openQuickView('{{ $r['counterparty_url'] }}')">{{ $r['counterparty_label'] }}</span>
                                @else
                                    {{ $r['counterparty_label'] ?: '—' }}
                                @endif
                            </td>
                            <td class="qvt-nowrap"><span class="qvt-chip">{{ $r['category_label'] }}</span></td>
                            <td class="qvt-mono qvt-nowrap">{{ $r['due_date']?->format('d.m.Y') ?: '—' }}</td>
                            <td class="ta-r"><span class="qvt-num">{{ $money($r['planned']) }} <small>{{ $r['currency'] }}</small></span></td>
                            <td class="ta-r">
                                <span class="qvt-num {{ $r['paid'] > 0 ? 'pos' : '' }}">{{ $money($r['paid']) }}</span>
                                @if($r['pending'] > 0)<div class="qvt-chip warn" style="margin-top:2px">bekleyen {{ $money($r['pending']) }}</div>@endif
                            </td>
                            <td class="ta-r"><span class="qvt-num {{ $r['remaining'] > 0 ? 'neg' : 'pos' }}">{{ $money($r['remaining']) }}</span></td>
                            <td><span class="qvt-badge" style="--sc:{{ $r['pay_state']['color'] }}">{{ $r['pay_state']['label'] }}</span></td>
                            <td class="qvt-w1">
                                <button type="button" class="qvt-act" title="Ödeme gir"
                                        data-act="ex-pay" data-kind="{{ $r['kind'] }}" data-row="{{ $r['id'] }}"><i class="fas fa-money-bill-wave"></i></button>
                                <button type="button" class="qvt-act" title="Ayrıntılı ödeme kaydı"
                                        onclick="openQuickView('{{ route('agency.payments.quick-create', array_filter([
                                            'direction' => 'out',
                                            'payable_type' => $r['payable_type'],
                                            'payable_id' => $r['payable_id'],
                                            'supplier' => $r['supplier_id'],
                                            'amount' => $r['remaining'] > 0 ? $r['remaining'] : null,
                                        ])) }}')"><i class="fas fa-money-bill-transfer"></i></button>
                                @if($r['editable'])
                                    <button type="button" class="qvt-act" title="Kalemi düzenle"
                                            data-act="ex-edit" data-row="{{ $r['id'] }}"
                                            data-title="{{ $r['title'] }}" data-desc="{{ $r['description'] }}"
                                            data-category="{{ $r['category'] }}" data-amount="{{ $r['planned'] }}"
                                            data-currency="{{ $r['currency'] }}" data-due="{{ $r['due_raw'] }}"
                                            data-party="{{ $r['party_value'] }}" data-partyfree="{{ $r['party_free'] }}"><i class="fas fa-pen"></i></button>
                                    <button type="button" class="qvt-act danger" title="Kalemi sil"
                                            data-act="ex-del" data-row="{{ $r['id'] }}"><i class="fas fa-trash"></i></button>
                                @endif
                            </td>
                        </tr>

                        {{-- Hızlı ödeme satırı (kalem başına) --}}
                        <tr class="opsex-payrow d-none" data-payrow="{{ $r['kind'] }}:{{ $r['id'] }}">
                            <td colspan="9">
                                <div class="opsex-pay">
                                    <span class="opsex-pay-lbl"><i class="fas fa-bolt"></i> {{ $r['title'] }} · gerçekleşen ödeme</span>
                                    <input type="number" step="0.01" min="0.01" class="opsex-pay-amt"
                                           value="{{ $r['remaining'] > 0 ? number_format($r['remaining'], 2, '.', '') : '' }}" placeholder="Tutar">
                                    <select class="opsex-pay-method">
                                        @foreach(\App\Models\Payment\Payment::selectableMethods() as $mk => $ml)
                                            <option value="{{ $mk }}" @selected($mk === 'bank_transfer')>{{ $ml }}</option>
                                        @endforeach
                                    </select>
                                    <select class="opsex-pay-status">
                                        <option value="completed">Gerçekleşti</option>
                                        <option value="pending">Beklemede (planlandı)</option>
                                    </select>
                                    <input type="date" class="opsex-pay-date" value="{{ now()->format('Y-m-d') }}">
                                    <button type="button" class="opsex-add" data-act="ex-pay-save"
                                            data-kind="{{ $r['kind'] }}" data-row="{{ $r['id'] }}"><i class="fas fa-check"></i> Kaydet</button>
                                    <button type="button" class="opsex-add ghost" data-act="ex-pay"
                                            data-kind="{{ $r['kind'] }}" data-row="{{ $r['id'] }}"><i class="fas fa-xmark"></i></button>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr class="qvt-empty">
                            <td colspan="9">
                                <i class="fas fa-file-invoice-dollar"></i>
                                <b>Gider kalemi yok</b>
                                <span>Kaynak atadığınızda maliyetleri burada belirir; tedarikçi giderlerini "Gider Kalemi Ekle" ile elle girebilirsiniz.</span>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
                @if($rows->count())
                    <tfoot>
                        <tr>
                            <td colspan="4">TOPLAM</td>
                            <td class="ta-r">{{ $money($summary['planned']) }}</td>
                            <td class="ta-r">{{ $money($summary['paid']) }}</td>
                            <td class="ta-r">{{ $money($summary['remaining']) }}</td>
                            <td colspan="2"></td>
                        </tr>
                    </tfoot>
                @endif
            </table>
        </div>
    </div>

    {{-- ── Gerçekleşen ödeme hareketleri (ödemeler defterinden) ── --}}
    <div class="opsex-head"><i class="fas fa-money-bill-transfer"></i> Gerçekleşen Ödeme Hareketleri</div>
    @include('agency.payments.partials.payment-list', [
        'payments' => $payments,
        'createUrl' => route('agency.payments.quick-create', ['direction' => 'out', 'payable_type' => get_class($vm['date']), 'payable_id' => $id]),
        'summary' => [],
        'emptyText' => 'Bu kalkış için henüz gider ödemesi kaydedilmedi.',
    ])
</div>

{{-- Quick-view parçaları layout'suz döndüğü için stil satır içi verilir --}}
@once
<style>
    .opsex { font-family: 'Manrope', system-ui, sans-serif; }

    .opsex-warn, .opsex-note {
        display: flex; align-items: flex-start; gap: 10px;
        padding: .7rem .9rem; border-radius: 12px; margin-bottom: .9rem;
        background: color-mix(in srgb, #f59e0b 10%, var(--bg-card, #fff));
        border: 1px solid color-mix(in srgb, #f59e0b 28%, transparent);
        font-size: .76rem; color: var(--text-2, #475569);
    }
    .opsex-warn i, .opsex-note i { color: #b45309; margin-top: 2px; }
    .opsex-warn b { display: block; color: var(--text-1, #0f172a); font-size: .8rem; }
    .opsex-warn code { background: var(--bg-inset, #f1f5f9); padding: 1px 5px; border-radius: 5px; }

    .opsex-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 9px; }
    .opsex-card {
        padding: .7rem .9rem; border-radius: 14px;
        background: var(--bg-card, #fff); border: 1px solid var(--border-1, #e8edf4);
        border-left: 3px solid var(--text-3, #cbd5e1);
    }
    .opsex-card.ok { border-left-color: #10b981; }
    .opsex-card.warn { border-left-color: #f59e0b; }
    .opsex-card.danger { border-left-color: #ef4444; }
    .opsex-card-lbl { display: block; font-size: .61rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3, #94a3b8); }
    .opsex-card-val { display: block; margin-top: 3px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 1.05rem; font-weight: 700; color: var(--text-1, #0f172a); }
    .opsex-card.ok .opsex-card-val { color: #047857; }
    .opsex-card.warn .opsex-card-val { color: #b45309; }
    .opsex-card.danger .opsex-card-val { color: #dc2626; }
    .opsex-card-sub { display: block; margin-top: 1px; font-size: .68rem; font-weight: 600; color: var(--text-3, #94a3b8); }

    .opsex-progress { height: 6px; border-radius: 6px; background: var(--bg-inset, #f1f5f9); overflow: hidden; margin-top: .7rem; }
    .opsex-progress-bar { height: 100%; background: linear-gradient(90deg, #10b981, #059669); }

    .opsex-head {
        display: flex; align-items: center; gap: 7px; margin: 1.4rem 0 .7rem;
        font-size: .8rem; font-weight: 800; color: var(--text-1, #0f172a);
    }
    .opsex-head i { color: var(--text-3, #94a3b8); }

    .opsex-add {
        display: inline-flex; align-items: center; gap: 6px; border: none; cursor: pointer;
        background: linear-gradient(135deg, #334155, #1e293b); color: #fff;
        font-family: inherit; font-size: .74rem; font-weight: 800; padding: .42rem .9rem; border-radius: 10px;
        transition: all .16s ease;
    }
    .opsex-add:hover { transform: translateY(-1px); filter: brightness(1.12); }
    .opsex-add.ghost { background: var(--bg-inset, #f1f5f9); color: var(--text-2, #475569); border: 1px solid var(--border-1, #e2e8f0); }

    /* Yeni kalem formu */
    .opsex-form {
        background: var(--bg-inset, #f8fafc); border: 1px dashed var(--border-1, #cbd5e1);
        border-radius: 16px; padding: .9rem; margin-bottom: .8rem;
    }
    .opsex-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; }
    .opsex-fld { display: flex; flex-direction: column; gap: 3px; margin: 0; }
    .opsex-fld-wide { grid-column: span 2; }
    .opsex-fld-sm { max-width: 160px; }
    .opsex-fld > span { font-size: .63rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3, #94a3b8); }
    /* Defter dili: alan okuma hâlinde çerçevesiz durur, üzerine gelince kutulanır,
       odakta mavi halka açılır (bkz. quick-view/ledger-ui → .pfx-in). */
    .opsex-fld input, .opsex-fld select {
        font-family: inherit; font-size: .815rem; font-weight: 650; padding: .28rem .42rem;
        border: 1.5px solid transparent; border-radius: 7px;
        background: transparent; color: var(--text-1, #0f172a);
        transition: border-color .13s, box-shadow .13s, background .13s;
    }
    .opsex-fld input::placeholder { color: var(--text-3, #c3cddc); font-weight: 500; font-style: italic; }
    .opsex-fld input:hover, .opsex-fld select:hover { background: var(--bg-card, #fff); border-color: var(--border-1, #dbe6f7); }
    .opsex-fld input:focus, .opsex-fld select:focus { outline: none; background: var(--bg-card, #fff); border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .18); }
    /* Dosya alanı tıklanabilir olduğunu belli etmeli: kutusu hep görünür */
    .opsex-fld input[type=file] { border-color: var(--border-1, #e6ecf5); background: var(--bg-card, #fff); }
    .opsex-form-acts { display: flex; gap: .5rem; margin-top: .8rem; }

    /* Satır içi hızlı ödeme */
    .qvt tbody tr.opsex-payrow > td { background: var(--bg-inset, #f8fafc); }
    .opsex-pay { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
    .opsex-pay-lbl { font-size: .72rem; font-weight: 800; color: var(--text-2, #475569); }
    .opsex-pay-lbl i { color: #d97706; margin-right: 4px; }
    .opsex-pay input, .opsex-pay select {
        font-family: inherit; font-size: .78rem; font-weight: 650; padding: .26rem .4rem;
        border: 1.5px solid transparent; border-radius: 7px;
        background: transparent; color: var(--text-1, #0f172a);
        transition: border-color .13s, box-shadow .13s, background .13s;
    }
    .opsex-pay input:hover, .opsex-pay select:hover { background: var(--bg-card, #fff); border-color: var(--border-1, #dbe6f7); }
    .opsex-pay input:focus, .opsex-pay select:focus { outline: none; background: var(--bg-card, #fff); border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .18); }
    .opsex-pay-amt { width: 110px; }

    /* Gider kalemi satırının sol rayı: ödendi yeşil, kalan kırmızı */
    .qvt tbody tr.opsex-tr > td:first-child { box-shadow: inset 3px 0 0 var(--border-1, #e2e8f0); }

    @media (max-width: 760px) {
        .opsex-fld-wide { grid-column: span 1; }
    }
</style>
@endonce