@extends('layouts.panel')

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

@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 = 'voucher.expense'

            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 $businessUnitName = $transaction.find('#businessUnitName')
                    const $rollbackStatusDescription = $transaction.find('#rollbackStatusDescription')
                    const $transactionNumber = $transaction.find('#transactionNumber')
                    const $transactionDate = $transaction.find('#transactionDate')
                    const $description = $transaction.find('#description')
                    const $action = $transaction.find('#action')

                    // set value
                    $businessUnitName.text(get('business_unit')?.name)
                    $status.text(get('voucher_status').name)
                    $transactionNumber.text(get('transaction_number'))
                    $transactionDate.text(moment(get('transaction_date')).format('DD/MM/YYYY'))
                    $description.text(get('description'))

                    if (get('voucher_status').status == 3) {
                        $rollbackStatusDescription.html(`
                            <div class="alert alert-warning">
                                <div class="font-weight-bold mb-2">Keterangan Rollback</div>
                                <div>${get('voucher_status').description}</div>
                            </div>
                        `)
                    }

                    $action.empty()

                    const actions = []

                    if (get('can_rollback')) {
                        actions.push(`
                            <div class="col-auto">
                                <button type="button" id="rollback" class="btn btn-warning mb-3" data-id="${id}">Rollback</button>
                            </div>
                        `)
                    }

                    if (get('can_approve')) {
                        actions.push(`
                            <div class="col-auto">
                                <button type="button" id="approve" class="btn btn-success mb-3" data-id="${id}">
                                    <i class="fas fa-check"></i>
                                    <span class="ml-2">Setujui</span>
                                </button>
                            </div>
                        `)
                    }

                    if (actions.length) {
                        $action.html(`
                            <div class="card-body pb-0">
                                <div class="row justify-content-end">${actions.join('')}</div>
                            </div>
                        `)
                    }

                    render()
                },
                data() {
                    return get()
                },
                fetch(id) {
                    const url = "{{ route('voucher.expense.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 $approve = $action.find('button#approve')
            const $rollback = $action.find('button#rollback')

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

                Swal.fire({
                    title: 'Setujui pengeluaran?',
                    text: 'Pastikan data pengeluaran sudah benar karena tidak dapat diubah setelah disetujui.',
                    icon: 'warning',
                    showCancelButton: () => !Swal.isLoading(),
                    confirmButtonText: 'Ya, setujui',
                    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('voucher.expense.approve', ':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()
                            })
                    }
                });
            });

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

                const url = "{{ route('voucher.expense.rollback', ':id') }}".replace(':id', id)

                $teleport.append(`
                    <div class="modal fade" id="modalRollbackVoucher" tabindex="-1" role="dialog">
                        <div class="modal-dialog modal-md modal-dialog-centered" role="document">
                            <div class="modal-content">
                                <div class="modal-header pb-0 border-bottom-0">
                                    <h5 class="modal-title mr-auto">Rollback Pengeluaran</h5>
                                </div>
                                <form method="post">
                                    <div class="modal-body">
                                        <div id="message"></div>
                                        <div class="form-group">
                                            <label for="inputRollbackVoucherDescription" class="small font-weight-bold">Keterangan</label>
                                            <textarea name="description" id="inputRollbackVoucherDescription" class="form-control" rows="3" placeholder="Masukkan alasan rollback pengajuan"></textarea>
                                        </div>
                                    </div>
                                    <div class="modal-footer pt-0 border-top-0">
                                        <button type="button" class="btn btn-light" data-dismiss="modal" tabindex="-1">Batal</button>
                                        <button type="submit" class="btn btn-warning">Simpan</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                `)

                $('#modalRollbackVoucher').modal({
                    backdrop: 'static',
                    keyboard: false,
                    show: true
                }).one('shown.bs.modal', function() {
                    $btn.prop('disabled', false);

                    const $modal = $(this)
                    const $form = $modal.find('form')
                    const $message = $form.find('#message')
                    const $submit = $form.find('button[type="submit"]')
                    const $dismiss = $form.find('button[data-dismiss="modal"]')

                    $form.submit(function(e) {
                        e.preventDefault()

                        $message.empty()
                        $submit.prop('disabled', true)
                        $dismiss.prop('disabled', true)

                        const $description = $form.find('textarea[name="description"]')

                        $.ajax({
                            type: "post",
                            url: url,
                            data: {
                                _token: "{{ csrf_token() }}",
                                description: $description.val()
                            },
                            success: function(response) {
                                $modal.modal('hide')

                                Swal.fire({
                                    icon: 'success',
                                    title: 'Berhasil',
                                    text: response.message,
                                });

                                Voucher.fetch(id)
                                    .then(() => {
                                        Voucher.init()
                                    })
                            },
                            error: function(xhr) {
                                $message.html(buildErrorAlertHTML(xhr))
                            },
                            complete: function() {
                                $submit.prop('disabled', false);
                                $dismiss.prop('disabled', false)
                            }
                        });
                    })
                })

                $teleport.on(
                    'hidden.bs.modal',
                    '#modalRollbackVoucher',
                    function() {
                        $(this).remove();
                    }
                );
            })
        });
    </script>
@endpush

@section('content')
    <div class="content-wrapper">
        <div class="content-header">
            <div class="container">
                <div class="mb-3">
                    <a href="{{ route('voucher.expense.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 class="col-auto">
                                <span id="status" class="badge badge-info">-</span>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div id="rollbackStatusDescription"></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