@extends('layouts.app')
@section('title', 'Jurnal Harian')

@section('content')
@php($q = request()->query())
<div class="card mb-3">
    <div class="card-body">
        <form class="row g-2 align-items-end" id="formJurnal">
            <div class="col-md-2">
                <label class="form-label small">Periode</label>
                <select name="mode" id="mode" class="form-select">
                    @foreach(\App\Http\Controllers\LaporanJurnalController::MODE as $k => $v)
                        <option value="{{ $k }}" @selected($mode === $k)>{{ $v }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2" data-mode="harian">
                <label class="form-label small">Tanggal</label>
                <input type="date" name="tanggal" value="{{ $dari }}" class="form-control">
            </div>
            <div class="col-md-2" data-mode="bulanan">
                <label class="form-label small">Bulan</label>
                <input type="month" name="bulan" value="{{ substr($dari, 0, 7) }}" class="form-control">
            </div>
            <div class="col-md-2" data-mode="rentang">
                <label class="form-label small">Dari</label>
                <input type="date" name="dari" value="{{ $dari }}" class="form-control">
            </div>
            <div class="col-md-2" data-mode="rentang">
                <label class="form-label small">Sampai</label>
                <input type="date" name="sampai" value="{{ $sampai }}" class="form-control">
            </div>
            <div class="col-md-4">
                <label class="form-label small">Pembeli</label>
                <select name="pembeli_id" id="pembeli_id" class="form-select" data-cari="{{ route('pembeli.cari') }}" placeholder="Semua pembeli — ketik nama / NIK">
                    <option value="">Semua pembeli</option>
                    @if($pembeli)<option value="{{ $pembeli->id }}" data-nik="{{ $pembeli->nik }}" selected>{{ $pembeli->nama }}</option>@endif
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label small">Pos Transaksi</label>
                <select name="pos_id" class="form-select">
                    <option value="">Semua Pos</option>
                    @foreach($daftarPos as $jenis => $list)
                        <optgroup label="{{ \App\Models\PosKas::JENIS[$jenis] }}">
                            @foreach($list as $p)
                                <option value="{{ $p->id }}" @selected(request('pos_id') == $p->id)>{{ $p->nama }}</option>
                            @endforeach
                        </optgroup>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label small">Jenis</label>
                <select name="jenis" class="form-select">
                    <option value="">Masuk &amp; Keluar</option>
                    @foreach(\App\Models\PosKas::JENIS as $k => $v)<option value="{{ $k }}" @selected(request('jenis') === $k)>{{ $v }}</option>@endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label small">Cara Bayar</label>
                <select name="cara" class="form-select">
                    <option value="">Semua</option>
                    @foreach(\App\Http\Controllers\LaporanJurnalController::CARA as $k => $v)<option value="{{ $k }}" @selected(request('cara') === $k)>{{ $v }}</option>@endforeach
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label small">Cari</label>
                <input type="search" name="q" value="{{ request('q') }}" class="form-control" placeholder="uraian / pihak / no. bukti / kode">
            </div>
            <div class="col-md-2"><button class="btn btn-primary w-100"><i class="bi bi-search"></i> Tampilkan</button></div>
            <div class="col-12 d-flex flex-wrap gap-2 align-items-center">
                <div class="btn-group btn-group-sm" role="group" aria-label="Pintasan periode">
                    <a href="{{ route('laporan.jurnal', ['mode' => 'harian', 'tanggal' => now()->toDateString()] + \Illuminate\Support\Arr::except($q, ['mode', 'tanggal', 'bulan', 'dari', 'sampai'])) }}" class="btn btn-outline-secondary">Hari ini</a>
                    <a href="{{ route('laporan.jurnal', ['mode' => 'harian', 'tanggal' => now()->subDay()->toDateString()] + \Illuminate\Support\Arr::except($q, ['mode', 'tanggal', 'bulan', 'dari', 'sampai'])) }}" class="btn btn-outline-secondary">Kemarin</a>
                    <a href="{{ route('laporan.jurnal', ['mode' => 'bulanan', 'bulan' => now()->format('Y-m')] + \Illuminate\Support\Arr::except($q, ['mode', 'tanggal', 'bulan', 'dari', 'sampai'])) }}" class="btn btn-outline-secondary">Bulan ini</a>
                    <a href="{{ route('laporan.jurnal', ['mode' => 'bulanan', 'bulan' => now()->subMonthNoOverflow()->format('Y-m')] + \Illuminate\Support\Arr::except($q, ['mode', 'tanggal', 'bulan', 'dari', 'sampai'])) }}" class="btn btn-outline-secondary">Bulan lalu</a>
                </div>
                @if(request()->hasAny(['pembeli_id', 'pos_id', 'jenis', 'cara', 'q']))<a href="{{ route('laporan.jurnal', \Illuminate\Support\Arr::only($q, ['mode', 'tanggal', 'bulan', 'dari', 'sampai'])) }}" class="btn btn-sm btn-link">Reset filter</a>@endif
                <div class="ms-auto d-flex gap-2">
                    <a href="{{ route('laporan.jurnal.export', ['format' => 'excel'] + $q) }}" class="btn btn-success"><i class="bi bi-file-earmark-excel"></i> Export Excel</a>
                    <a href="{{ route('laporan.jurnal.export', ['format' => 'pdf'] + $q) }}" class="btn btn-danger"><i class="bi bi-file-earmark-pdf"></i> Export PDF</a>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="row g-3 mb-3">
    @foreach([
        ['Jumlah Transaksi', $ringkasan['transaksi'].' transaksi', 'secondary', $ringkasan['hari'].' hari bertransaksi'],
        ['Kas Masuk', rupiah($ringkasan['masuk']), 'success', 'Pendapatan usaha '.rupiah($ringkasan['pendapatan_usaha'])],
        ['Kas Keluar', rupiah($ringkasan['keluar']), 'danger', null],
        ['Total Debit = Kredit', rupiah($ringkasan['total']), 'primary', 'Jurnal seimbang'],
    ] as [$label, $nilai, $warna, $catatan])
        <div class="col-6 col-lg-3">
            <div class="card h-100 border-{{ $warna }}-subtle"><div class="card-body">
                <div class="small text-muted">{{ $label }}</div>
                <div class="fs-5 fw-bold text-{{ $warna }}">{{ $nilai }}</div>
                @if($catatan)<div class="small text-muted">{{ $catatan }}</div>@endif
            </div></div>
        </div>
    @endforeach
</div>

<div class="card mb-3">
    <div class="card-header bg-white fw-semibold d-flex justify-content-between">
        <span><i class="bi bi-journal-bookmark"></i> Jurnal Harian</span>
        <span class="small text-muted fw-normal">{{ $filter }}</span>
    </div>
    <div class="table-responsive">
        <table class="table table-sm align-middle mb-0 jurnal">
            <thead class="table-light"><tr>
                <th class="ps-3" style="width: 90px">Tanggal</th><th>No. Bukti</th><th>Keterangan</th><th>Akun</th>
                <th class="text-end">Debit</th><th class="text-end pe-3">Kredit</th>
            </tr></thead>
            @forelse($hari as $h)
                <tbody>
                <tr class="table-primary"><th colspan="6" class="ps-3">{{ $h->tanggal->translatedFormat('l, d F Y') }}</th></tr>
                @foreach($h->entri as $e)
                    <tr class="baris-debit">
                        <td class="ps-3 text-muted small" rowspan="2">{{ $e->tanggal->format('d/m/Y') }}</td>
                        <td rowspan="2" class="small text-nowrap">
                            @if($e->pdf)<a href="{{ $e->pdf }}" target="_blank" class="text-decoration-none">{{ $e->nomor }}</a>@else{{ $e->nomor }}@endif
                            <div class="font-monospace text-muted" style="font-size: .7rem">{{ $e->kode_format }}</div>
                        </td>
                        <td rowspan="2">
                            {{ $e->uraian }}
                            @if($e->pihak)<div class="small text-muted"><i class="bi bi-person"></i> {{ $e->pihak }}</div>@endif
                        </td>
                        <td>{{ $e->debit }}</td>
                        <td class="text-end text-nowrap">{{ rupiah($e->jumlah) }}</td>
                        <td class="pe-3"></td>
                    </tr>
                    <tr class="baris-kredit">
                        <td class="ps-4 fst-italic">{{ $e->kredit }}</td>
                        <td></td>
                        <td class="text-end text-nowrap pe-3">{{ rupiah($e->jumlah) }}</td>
                    </tr>
                @endforeach
                <tr class="table-light fw-semibold">
                    <td colspan="4" class="ps-3 small">Jumlah {{ $h->tanggal->translatedFormat('d M Y') }} · {{ $h->entri->count() }} transaksi
                        <span class="text-success ms-2">masuk {{ rupiah($h->masuk) }}</span> <span class="text-danger ms-1">keluar {{ rupiah($h->keluar) }}</span></td>
                    <td class="text-end text-nowrap">{{ rupiah($h->debit) }}</td>
                    <td class="text-end text-nowrap pe-3">{{ rupiah($h->debit) }}</td>
                </tr>
                </tbody>
            @empty
                <tbody><tr><td colspan="6" class="text-center text-muted py-4">Tidak ada transaksi pada periode / filter ini.</td></tr></tbody>
            @endforelse
            @if($jurnal->isNotEmpty())
            <tfoot><tr class="table-dark">
                <th colspan="4" class="ps-3">TOTAL ({{ $ringkasan['transaksi'] }} transaksi)</th>
                <th class="text-end text-nowrap">{{ rupiah($ringkasan['total']) }}</th>
                <th class="text-end text-nowrap pe-3">{{ rupiah($ringkasan['total']) }}</th>
            </tr></tfoot>
            @endif
        </table>
    </div>
</div>

@if($rekap->isNotEmpty())
<div class="card">
    <div class="card-header bg-white fw-semibold"><i class="bi bi-list-columns"></i> Rekap per Akun</div>
    <div class="table-responsive">
        <table class="table table-sm mb-0">
            <thead class="table-light"><tr><th class="ps-3">Akun</th><th class="text-end">Debit</th><th class="text-end">Kredit</th><th class="text-end pe-3">Selisih</th></tr></thead>
            <tbody>
            @foreach($rekap as $r)
                <tr class="{{ $r->kas ? 'fw-semibold' : '' }}">
                    <td class="ps-3">{{ $r->akun }}</td>
                    <td class="text-end">{{ $r->debit ? rupiah($r->debit) : '' }}</td>
                    <td class="text-end">{{ $r->kredit ? rupiah($r->kredit) : '' }}</td>
                    <td class="text-end pe-3 {{ $r->debit - $r->kredit < 0 ? 'text-danger' : '' }}">{{ rupiah(abs($r->debit - $r->kredit)) }} {{ $r->debit >= $r->kredit ? 'D' : 'K' }}</td>
                </tr>
            @endforeach
            </tbody>
            <tfoot class="table-light"><tr><th class="ps-3">Total</th><th class="text-end">{{ rupiah($rekap->sum('debit')) }}</th><th class="text-end">{{ rupiah($rekap->sum('kredit')) }}</th><th></th></tr></tfoot>
        </table>
    </div>
    <div class="card-footer bg-white small text-muted">
        Akun Kas = tunai, Bank = transfer. Angsuran yang dibayar dari saldo deposit dijurnal <em>Titipan Deposit Pembeli (D) / Pendapatan Usaha (K)</em> tanpa memengaruhi kas.
    </div>
</div>
@endif
@endsection

@push('styles')
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/css/tom-select.bootstrap5.min.css" rel="stylesheet">
<style>
    .jurnal .baris-debit td { border-bottom-width: 0; }
    .jurnal .baris-kredit td { padding-top: 0; }
</style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/js/tom-select.complete.min.js"></script>
<script>
(() => {
    // Tampilkan input periode sesuai mode; input mode lain dinonaktifkan agar tidak ikut terkirim
    const mode = document.getElementById('mode');
    const atur = () => document.querySelectorAll('[data-mode]').forEach(el => {
        const aktif = el.dataset.mode === mode.value;
        el.hidden = !aktif;
        el.querySelectorAll('input').forEach(i => i.disabled = !aktif);
    });
    mode.addEventListener('change', atur);
    atur();

    const el = document.getElementById('pembeli_id');
    if (el && typeof TomSelect !== 'undefined') {
        const esc = s => String(s ?? '').replace(/[&<>"']/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
        const awal = [...el.options].filter(o => o.value).map(o => ({ id: o.value, nama: o.text, nik: o.dataset.nik }));
        new TomSelect(el, {
            valueField: 'id', labelField: 'nama', searchField: ['nama', 'nik', 'telepon'],
            options: awal, maxOptions: 50, loadThrottle: 250, preload: 'focus', allowEmptyOption: true,
            plugins: ['clear_button'],
            load(query, callback) {
                fetch(el.dataset.cari + '?q=' + encodeURIComponent(query), { headers: { Accept: 'application/json' } })
                    .then(r => r.json()).then(callback).catch(() => callback());
            },
            render: {
                option: d => `<div><div class="fw-semibold">${esc(d.nama)}</div>${d.nik ? `<small class="text-muted">NIK ${esc(d.nik)}</small>` : ''}</div>`,
                item: d => `<div>${esc(d.nama)}${d.nik ? ` <small class="text-muted ms-1">NIK ${esc(d.nik)}</small>` : ''}</div>`,
            },
        });
    }
})();
</script>
@endpush