@extends('layouts.adminlte')

@section('title', 'JURNAL MEMORIAL')
@section('page_title', 'JURNAL MEMORIAL')

@push('styles')
    <link rel="stylesheet" href="{{ asset('vendor/datatables/css/dataTables.bootstrap5.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('vendor/datatables/css/responsive.bootstrap5.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('vendor/select2/css/select2.min.css') }}" />
    <style>
        /* Make the list readable (dense but clear) */
        #memorialTable td, #memorialTable th { vertical-align: middle; }
        #memorialTable .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
        #memorialTable .desc-cell { max-width: 520px; white-space: normal; }
        #memorialTable .dt-actions .btn { white-space: nowrap; }
        #memorialFilters .form-control, #memorialFilters .form-select { height: 34px; padding-top: 4px; padding-bottom: 4px; }
    </style>
@endpush

@section('content')
    <div class="card mb-3">
        <div class="card-header">
            <div class="d-flex align-items-center justify-content-between gap-2">
                <h3 class="card-title m-0">Jurnal Memorial</h3>
                <button class="btn btn-primary btn-sm" id="btnOpenCreate">
                    <i class="fas fa-plus me-1"></i>Buat Jurnal
                </button>
            </div>
        </div>
        <div class="card-body">
            <div id="memorialFilters" class="row g-2 align-items-end mb-3">
                <div class="col-md-2">
                    <label class="form-label small text-muted mb-1">Dari</label>
                    <input type="date" class="form-control" id="fFrom">
                </div>
                <div class="col-md-2">
                    <label class="form-label small text-muted mb-1">Sampai</label>
                    <input type="date" class="form-control" id="fTo">
                </div>
                <div class="col-md-2">
                    <label class="form-label small text-muted mb-1">Status</label>
                    <select class="form-select" id="fStatus">
                        <option value="">Semua</option>
                        <option value="draft">Draft</option>
                        <option value="posted">Posted</option>
                        <option value="void">Void</option>
                    </select>
                </div>
                <div class="col-md-6 d-flex gap-2">
                    <button class="btn btn-outline-primary btn-sm" id="btnApplyFilter">
                        <i class="fas fa-filter me-1"></i>Filter
                    </button>
                    <button class="btn btn-outline-secondary btn-sm" id="btnResetFilter">
                        Reset
                    </button>
                    <div class="ms-auto small text-muted align-self-center d-none d-md-block">
                        Tip: klik tombol <span class="badge text-bg-light border">Detail</span> untuk lihat breakdown akun per jurnal.
                    </div>
                </div>
            </div>
            <div class="table-responsive">
                <table id="memorialTable" class="table table-striped table-hover align-middle w-100">
                    <thead>
                    <tr>
                        <th>Tanggal</th>
                        <th>No Jurnal</th>
                        <th>Status</th>
                        <th>Deskripsi</th>
                        <th class="text-end">Debit</th>
                        <th class="text-end">Kredit</th>
                        <th>Aksi</th>
                    </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="modal fade" id="memorialModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Buat Jurnal Memorial</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-3 mb-3">
                        <div class="col-md-3">
                            <label class="form-label">Tanggal</label>
                            <input type="date" class="form-control" id="mDate" value="{{ now()->format('Y-m-d') }}">
                        </div>
                        <div class="col-md-9">
                            <label class="form-label">Deskripsi</label>
                            <input class="form-control" id="mDesc" placeholder="Keterangan jurnal...">
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-bordered align-middle" id="mLines">
                            <thead class="table-light">
                            <tr>
                                <th style="width: 42%;">Akun</th>
                                <th>Catatan</th>
                                <th class="text-end" style="width: 14%;">Debit</th>
                                <th class="text-end" style="width: 14%;">Kredit</th>
                                <th style="width: 60px;"></th>
                            </tr>
                            </thead>
                            <tbody></tbody>
                            <tfoot class="table-light">
                            <tr>
                                <td colspan="2" class="text-end fw-semibold">Total</td>
                                <td class="text-end fw-semibold" id="mTotalD">0</td>
                                <td class="text-end fw-semibold" id="mTotalC">0</td>
                                <td></td>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                    <button class="btn btn-outline-secondary btn-sm" id="btnAddLine">
                        <i class="fas fa-plus me-1"></i>Tambah Baris
                    </button>
                    <div class="small text-muted mt-2">
                        Validasi: total debit harus sama dengan total kredit.
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                    <button class="btn btn-outline-primary" id="btnSaveDraft">Simpan Draft</button>
                    <button class="btn btn-primary" id="btnPost">Post</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('vendor/datatables/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/dataTables.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/responsive.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('vendor/select2/js/select2.min.js') }}"></script>

    <script>
        $(function () {
            const modal = new bootstrap.Modal(document.getElementById('memorialModal'));
            const fmt = (n) => Number(n || 0).toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
            const fmtIdr = (n) => 'Rp ' + fmt(n);

            const esc = (s) => (s || '').toString()
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;')
                .replace(/'/g, '&#039;');

            const statusBadge = (v) => {
                const vv = (v || '').toString();
                if (vv === 'posted') return `<span class="badge text-bg-success"><i class="fas fa-check-circle me-1"></i>POSTED</span>`;
                if (vv === 'void') return `<span class="badge text-bg-danger"><i class="fas fa-ban me-1"></i>VOID</span>`;
                return `<span class="badge text-bg-secondary"><i class="fas fa-pencil-alt me-1"></i>DRAFT</span>`;
            };

            const renderDetailHtml = (r) => {
                const lines = Array.isArray(r.lines) ? r.lines : [];
                const rows = lines.map((l) => `
                    <tr>
                        <td class="mono">${esc(l.account_code || '')}</td>
                        <td>${esc(l.account_name || '')}</td>
                        <td class="text-muted">${esc(l.description || '')}</td>
                        <td class="text-end">${fmtIdr(l.debit || 0)}</td>
                        <td class="text-end">${fmtIdr(l.credit || 0)}</td>
                    </tr>
                `).join('');

                return `
                    <div class="mb-2">
                        <div class="d-flex flex-wrap gap-2 align-items-center">
                            <div class="mono fw-semibold">${esc(r.journal_number || '')}</div>
                            <div class="text-muted">${esc(r.journal_date || '')}</div>
                            <div>${statusBadge(r.status)}</div>
                        </div>
                        <div class="mt-1">${esc(r.description || '-')}</div>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-sm table-bordered align-middle mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th style="width: 90px;">Kode</th>
                                    <th>Akun</th>
                                    <th>Catatan</th>
                                    <th class="text-end" style="width: 140px;">Debit</th>
                                    <th class="text-end" style="width: 140px;">Kredit</th>
                                </tr>
                            </thead>
                            <tbody>
                                ${rows || `<tr><td colspan="5" class="text-center text-muted">Tidak ada baris jurnal.</td></tr>`}
                            </tbody>
                            <tfoot class="table-light">
                                <tr>
                                    <th colspan="3" class="text-end">Total</th>
                                    <th class="text-end">${fmtIdr(r.total_debit || 0)}</th>
                                    <th class="text-end">${fmtIdr(r.total_credit || 0)}</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                `;
            };

            const table = $('#memorialTable').DataTable({
                responsive: true,
                ajax: {
                    url: '{{ route('accounting.memorial.data') }}',
                    data: () => ({
                        date_from: ($('#fFrom').val() || '').toString(),
                        date_to: ($('#fTo').val() || '').toString(),
                        status: ($('#fStatus').val() || '').toString(),
                    }),
                },
                columns: [
                    { data: 'journal_date' },
                    {
                        data: 'journal_number',
                        render: (v) => `<span class="mono">${esc(v || '')}</span>`,
                    },
                    { data: 'status', render: (v) => statusBadge(v) },
                    { data: 'description', render: (v) => `<div class="desc-cell">${esc(v || '-')}</div>` },
                    { data: 'total_debit', className: 'text-end', render: (v) => fmtIdr(v) },
                    { data: 'total_credit', className: 'text-end', render: (v) => fmtIdr(v) },
                    { data: null, orderable: false, render: (r) => {
                        const btnDetail = `<button class="btn btn-sm btn-outline-secondary btn-detail" data-id="${r.id}"><i class="fas fa-eye me-1"></i>Detail</button>`;
                        const btnPost = r.status === 'draft'
                            ? `<button class="btn btn-sm btn-success btn-post" data-id="${r.id}">Post</button>`
                            : '';
                        const btnVoid = r.status !== 'void'
                            ? `<button class="btn btn-sm btn-outline-danger btn-void" data-id="${r.id}">Void</button>`
                            : '';
                        return `<div class="d-flex gap-1 dt-actions">${btnDetail}${btnPost}${btnVoid}</div>`;
                    }},
                ],
                order: [[0, 'desc']],
            });

            const recomputeTotals = () => {
                let td = 0, tc = 0;
                $('#mLines tbody tr').each(function () {
                    const d = Number($(this).find('.m-debit').val() || 0);
                    const c = Number($(this).find('.m-credit').val() || 0);
                    td += d;
                    tc += c;
                });
                $('#mTotalD').text(fmt(td));
                $('#mTotalC').text(fmt(tc));

                // Visual hint if not balanced.
                const ok = Math.abs(td - tc) < 0.000001 && td > 0;
                $('#mTotalD').toggleClass('text-danger', !ok);
                $('#mTotalC').toggleClass('text-danger', !ok);
            };

            const addLineRow = () => {
                const $tr = $(`
                    <tr>
                        <td><select class="form-select m-account" style="width:100%"></select></td>
                        <td><input class="form-control m-desc" placeholder="Catatan (opsional)"></td>
                        <td><input type="number" step="0.01" min="0" class="form-control text-end m-debit" value="0"></td>
                        <td><input type="number" step="0.01" min="0" class="form-control text-end m-credit" value="0"></td>
                        <td class="text-center"><button class="btn btn-sm btn-outline-danger btn-del"><i class="fas fa-trash"></i></button></td>
                    </tr>
                `);
                $('#mLines tbody').append($tr);

                // Select2 live search to accounts.
                $tr.find('.m-account').select2({
                    dropdownParent: $('#memorialModal'),
                    ajax: {
                        url: '{{ route('accounting.accounts.search') }}',
                        dataType: 'json',
                        delay: 200,
                        data: (params) => ({ q: params.term || '' }),
                        processResults: (data) => data,
                    },
                    placeholder: 'Cari akun...',
                    allowClear: true,
                });
            };

            const openCreate = () => {
                $('#mDate').val('{{ now()->format('Y-m-d') }}');
                $('#mDesc').val('');
                $('#mLines tbody').html('');
                addLineRow();
                addLineRow();
                recomputeTotals();
                modal.show();
            };

            $('#btnOpenCreate').on('click', openCreate);
            $('#btnAddLine').on('click', addLineRow);

            $('#mLines').on('click', '.btn-del', function () {
                $(this).closest('tr').remove();
                recomputeTotals();
            });

            $('#mLines').on('input', '.m-debit,.m-credit', recomputeTotals);

            const collectPayload = (action) => {
                const lines = [];
                $('#mLines tbody tr').each(function () {
                    const accId = $(this).find('.m-account').val();
                    const desc = ($(this).find('.m-desc').val() || '').toString();
                    const debit = Number($(this).find('.m-debit').val() || 0);
                    const credit = Number($(this).find('.m-credit').val() || 0);
                    if (!accId) return;
                    lines.push({ account_id: accId, line_desc: desc, debit, credit });
                });
                return {
                    journal_date: ($('#mDate').val() || '').toString(),
                    description: ($('#mDesc').val() || '').toString(),
                    action,
                    lines,
                };
            };

            const submit = (action) => {
                $.ajax({
                    url: '{{ route('accounting.memorial.store') }}',
                    method: 'POST',
                    data: collectPayload(action),
                    headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                }).done(() => {
                    modal.hide();
                    table.ajax.reload(null, false);
                }).fail((xhr) => {
                    Swal.fire('Error', xhr.responseJSON?.message || 'Gagal submit.', 'error');
                });
            };

            $('#btnSaveDraft').on('click', () => submit('save_draft'));
            $('#btnPost').on('click', () => submit('post'));

            $('#btnApplyFilter').on('click', () => table.ajax.reload());
            $('#btnResetFilter').on('click', () => {
                $('#fFrom').val('');
                $('#fTo').val('');
                $('#fStatus').val('');
                table.ajax.reload();
            });

            $('#memorialTable').on('click', '.btn-detail', function () {
                const row = table.row($(this).closest('tr')).data();
                if (!row) return;
                Swal.fire({
                    title: 'Detail Jurnal',
                    html: renderDetailHtml(row),
                    width: 920,
                    confirmButtonText: 'Tutup',
                });
            });

            $('#memorialTable').on('click', '.btn-post', function () {
                const id = $(this).data('id');
                Swal.fire({ title: 'Post jurnal?', icon: 'question', showCancelButton: true }).then((r) => {
                    if (!r.isConfirmed) return;
                    $.ajax({
                        url: `{{ url('/accounting/memorial-journals') }}/${id}/post`,
                        method: 'POST',
                        headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                    }).done(() => table.ajax.reload(null, false))
                    .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal post.', 'error'));
                });
            });

            $('#memorialTable').on('click', '.btn-void', function () {
                const id = $(this).data('id');
                Swal.fire({ title: 'Void jurnal?', icon: 'warning', showCancelButton: true }).then((r) => {
                    if (!r.isConfirmed) return;
                    $.ajax({
                        url: `{{ url('/accounting/memorial-journals') }}/${id}/void`,
                        method: 'POST',
                        headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                    }).done(() => table.ajax.reload(null, false))
                    .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal void.', 'error'));
                });
            });
        });
    </script>
@endpush