@extends('layouts.panel')

@section('title', 'Detail Jurnal')

@push('styles')
    <link rel="stylesheet" href="{{ asset('plugins/sweetalert2/sweetalert2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/toastr/toastr.min.css') }}">
@endpush

@push('scripts')
    <script src="{{ asset('plugins/sweetalert2/sweetalert2.min.js') }}"></script>
    <script src="{{ asset('plugins/toastr/toastr.min.js') }}"></script>
    <script src="{{ asset('plugins/moment/moment.min.js') }}"></script>
    <script>
        const Voucher = (function() {
            const SESSION_KEY = 'journal.posting'

            function __construct(data) {
                sessionStorage.setItem(SESSION_KEY, JSON.stringify(data));
            }

            function get(key) {
                const value = JSON.parse(sessionStorage.getItem(SESSION_KEY)) || {}
                if (key) return value[key] ?? null
                return value
            }

            function set(key, value) {
                const item = get()
                item[key] = value
                sessionStorage.setItem(SESSION_KEY, JSON.stringify(item));
            }

            function render() {
                const items = get('voucher_details')

                let total = 0
                let html = '';

                if (items.length) {
                    items.forEach((item, i) => {
                        total += Number(item.amount)

                        html += `
                            <tr data-id="${item.id}">
                                <th class="text-center">${i + 1}</th>
                                <td>${item.debit_coa.code} - ${item.debit_coa.name}</td>
                                <td>${item.credit_coa.code} - ${item.credit_coa.name}</td>
                                <td class="text-right">${numberFormat(item.amount)}</td>
                            </tr>
                        `
                    });
                } else {
                    html += `<tr><td colspan="5" class="text-center text-muted">Belum ada pengeluaran</td></tr>`
                }

                const $table = $('#tableVoucherDetail')

                $table.find('tbody').html(html);
                $table.find('#total').text(numberFormat(total));
            }

            (function() {
                __construct(@json($voucher))
            })()

            return {
                init() {
                    const id = get('id')

                    const $transaction = $('#transaction')
                    const $status = $transaction.find('#status')
                    const $typeLabel = $transaction.find('#typeLabel')
                    const $businessUnitName = $transaction.find('#businessUnitName')
                    const $transactionNumber = $transaction.find('#transactionNumber')
                    const $transactionDate = $transaction.find('#transactionDate')
                    const $description = $transaction.find('#description')
                    const $action = $transaction.find('#action')

                    // set value
                    $typeLabel.text(get('type_data')?.label)
                    $businessUnitName.text(get('business_unit')?.name)
                    $status.html(get('posted_at') ?
                        '<span class="badge badge-success">Sudah diposting</span>' :
                        '<span class="badge badge-info">Belum diposting</span>'
                    )
                    $transactionNumber.text(get('transaction_number'))
                    $transactionDate.text(moment(get('transaction_date')).format('DD/MM/YYYY'))
                    $description.text(get('description'))

                    $action.empty()

                    if (get('can_posting')) {
                        $action.html(`
                            <div class="card-body pb-0">
                                <div class="row justify-content-end">
                                    <div class="col-auto">
                                        <button type="button" id="posting" class="btn btn-success mb-3" data-id="${id}">
                                            <i class="fas fa-check"></i>
                                            <span class="ml-2">Posting</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        `)
                    }

                    render()
                },
                data() {
                    return get()
                },
                fetch(id) {
                    const url = "{{ route('journal.posting.show', ':id') }}".replace(':id', id)

                    return $.ajax({
                        type: "get",
                        url: url,
                        success: function(response) {
                            __construct(response.data)
                        }
                    });
                },
            }
        })()

        $(function() {
            Voucher.init()

            const $teleport = $('#teleport')
            const $form = $('#transaction')
            const $action = $form.find('#action')
            const $posting = $action.find('button#posting')

            $action.on('click', 'button#posting', function() {
                const $btn = $(this)
                const id = $btn.data('id')

                Swal.fire({
                    title: 'Posting jurrnal?',
                    text: 'Pastikan data jurnal sudah benar karena tidak dapat diubah setelah diposting.',
                    icon: 'warning',
                    showCancelButton: () => !Swal.isLoading(),
                    confirmButtonText: 'Ya, posting',
                    cancelButtonText: 'Batal',
                    reverseButtons: true,
                    backdrop: true,
                    allowOutsideClick: () => !Swal.isLoading(),
                    allowEscapeKey: () => !Swal.isLoading(),
                    preConfirm: () => {
                        const cancelBtn = Swal.getCancelButton();

                        Swal.showLoading();
                        cancelBtn.style.display = 'none';

                        const url = "{{ route('journal.posting.store', ':id') }}"
                            .replace(':id', id);

                        return $.ajax({
                            type: 'POST',
                            url: url,
                            data: {
                                _token: "{{ csrf_token() }}"
                            },
                            success: (response) => response,
                            error: (xhr) => {
                                Swal.hideLoading();
                                Swal.showValidationMessage(
                                    xhr.responseJSON?.message
                                );

                                cancelBtn.style.display = '';
                            },
                        })
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil',
                            text: result.value.message,
                        });

                        Voucher.fetch(id)
                            .then(() => {
                                Voucher.init()
                            })
                    }
                });
            });
        });
    </script>
@endpush

@section('content')
    <div class="content-wrapper">
        <div class="content-header">
            <div class="container">
                <div class="mb-3">
                    <a href="{{ route('journal.posting.index') }}" class="text-decoration-none" tabindex="-1">
                        <i class="fas fa-chevron-left"></i>
                        <span class="ml-2">Kembali</span>
                    </a>
                </div>
                <h1 class="mb-0">@yield('title')</h1>
            </div>
        </div>
        <div class="content">
            <div class="container">
                <div id="transaction" class="card">
                    <div class="card-header pb-0 border-bottom-0">
                        <div class="row">
                            <div class="col">
                                <h5 class="mb-0">Transaksi</h5>
                            </div>
                            <div id="status" class="col-auto"></div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            <label for="typeLabel" class="small font-weight-bold">Tipe</label>
                            <div id="typeLabel">-</div>
                        </div>
                        <div class="form-group">
                            <label for="businessUnitName" class="small font-weight-bold">Unit Usaha</label>
                            <div id="businessUnitName">-</div>
                        </div>
                        <div class="form-group">
                            <label for="transactionNumber" class="small font-weight-bold">Nomor</label>
                            <div id="transactionNumber">-</div>
                        </div>
                        <div class="form-group">
                            <label class="small font-weight-bold">Tanggal</label>
                            <div id="transactionDate">-</div>
                        </div>
                        <div class="form-group mb-0">
                            <label class="small font-weight-bold">Keterangan</label>
                            <div id="description">-</div>
                        </div>
                    </div>
                    <div class="border-top"></div>
                    <div class="card-header pb-0 border-bottom-0">
                        <h5 class="mb-0">Detail Transaksi</h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="tableVoucherDetail" class="table table-bordered mb-0">
                                <thead>
                                    <tr>
                                        <th class="text-center" width="1">No</th>
                                        <th class="text-nowrap">Debit</th>
                                        <th class="text-nowrap">Kredit</th>
                                        <th class="text-right text-nowrap" width="1">Nominal (Rp)</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td colspan="5" class="text-center text-muted">Sedang memuat data...</td>
                                    </tr>
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td colspan="3" class="font-weight-bold">Total</td>
                                        <td id="total" class="font-weight-bold text-right"></td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                    <div id="action"></div>
                </div>
            </div>
        </div>
    </div>
@endsection