@extends('layouts.adminlte')

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

@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') }}" />
@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 Otomatis (AUTO-*)</h3>
                <a class="btn btn-outline-secondary btn-sm" href="{{ route('accounting.memorial.page') }}">
                    <i class="fas fa-book me-1"></i>Ke Jurnal Memorial
                </a>
            </div>
        </div>
        <div class="card-body">
            <div class="alert alert-info py-2">
                Jurnal ini dibuat otomatis oleh sistem (contoh: penerimaan gudang, invoice approved).
                Default dibuat sebagai <strong>draft</strong>. Silakan cek lalu <strong>Post</strong> jika sudah benar.
            </div>

            <div class="table-responsive">
                <table id="autoJournalTable" class="table table-striped table-hover align-middle w-100">
                    <thead>
                    <tr>
                        <th>Tanggal</th>
                        <th>No Jurnal</th>
                        <th>Status</th>
                        <th>Referensi</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>
@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>
        $(function () {
            const fmt = (n) => Number(n || 0).toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 });

            const table = $('#autoJournalTable').DataTable({
                responsive: true,
                ajax: '{{ route('accounting.auto.data') }}',
                columns: [
                    { data: 'journal_date' },
                    { data: 'journal_number' },
                    { data: 'status', render: (v) => {
                        const cls = v === 'posted' ? 'success' : v === 'void' ? 'danger' : 'secondary';
                        return `<span class="badge text-bg-${cls}">${v}</span>`;
                    }},
                    { data: null, render: (r) => {
                        const ref = (r.reference_number || '').toString();
                        const type = (r.reference_type || '').toString();
                        if (!ref && !type) return '-';
                        return `${ref || '-'}<div class="small text-muted">${type}</div>`;
                    }},
                    { data: 'description', render: (v) => v || '-' },
                    { data: 'total_debit', className: 'text-end', render: (v) => fmt(v) },
                    { data: 'total_credit', className: 'text-end', render: (v) => fmt(v) },
                    { data: null, orderable: false, render: (r) => {
                        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">${btnPost}${btnVoid}</div>`;
                    }},
                ],
            });

            $('#autoJournalTable').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'));
                });
            });

            $('#autoJournalTable').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