@extends('layouts.panel')

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

@push('styles')
    <link rel="stylesheet" href="{{ asset('plugins/sweetalert2/sweetalert2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/toastr/toastr.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/select2/css/select2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.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/select2/js/select2.min.js') }}"></script>
    <script src="{{ asset('plugins/moment/moment.min.js') }}"></script>
    <script src="{{ asset('plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.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>
                                <td class="text-center">
                                    <button type="button" class="btn btn-xs btn-danger" style="min-width: 24px;" onclick="Voucher.remove(${i})">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </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 $transaction = $('#transaction')
                    const $status = $transaction.find('#status')
                    const $rollbackStatusDescription = $transaction.find('#rollbackStatusDescription')
                    const $businessUnit = $transaction.find('select[name="business_unit_id"]');
                    const $transactionNumber = $transaction.find('input[name="transaction_number"]')
                    const $transactionDate = $transaction.find('#transactionDate')
                    const $description = $transaction.find('textarea[name="description"]')

                    // set value
                    $status.text(get('voucher_status').name)

                    const businessUnit = get('business_unit')
                    if (businessUnit) {
                        $businessUnit.html(`
                            <option value="${businessUnit.id}" selected>${businessUnit.name}</option>
                        `)
                    }

                    $transactionNumber.val(get('transaction_number'))
                    $description.val(get('description'))

                    $transactionDate.datetimepicker({
                        format: 'DD/MM/YYYY',
                        locale: 'id',
                        date: moment(get('transaction_date'))
                    });

                    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>
                        `)
                    }

                    $businessUnit.select2({
                        placeholder: 'Pilih unit usaha',
                        allowClear: true,
                        ajax: {
                            url: "{{ route('businessUnit.list') }}",
                            delay: 250,
                            data: function(params) {
                                return {
                                    search: params.term,
                                    page: params.page || 1,
                                }
                            },
                            processResults: function(response, params) {
                                params.page = params.page || 1

                                return {
                                    results: response.data.map(function(v) {
                                        return {
                                            id: v.id,
                                            text: v.name,
                                            meta: {
                                                code: v.code,
                                                name: v.name,
                                            }
                                        }
                                    }),
                                    pagination: {
                                        more: response.current_page < response.last_page
                                    }
                                }
                            }
                        }
                    })

                    // put value
                    $transactionDate.on('change.datetimepicker', function(e) {
                        set('transaction_date', e.date.format('YYYY-MM-DD'))
                    });

                    $description.change(function(e) {
                        set('description', e.target.value)
                    })

                    $businessUnit.change(function() {
                        const data = $(this).select2('data');

                        if (!data || !data.length) {
                            set('business_unit', null);
                            return;
                        }

                        const selected = data[0];

                        set('business_unit', {
                            id: selected.id,
                            code: selected?.meta?.code,
                            name: selected?.meta?.name,
                        });
                    });

                    render()
                },
                add(data) {
                    const items = get('voucher_details') || [];

                    items.push(data);
                    set('voucher_details', items);
                    render();
                },
                remove(index) {
                    const items = (get('voucher_details') || [])
                        .filter((_, i) => i != index);

                    set('voucher_details', items);
                    render();

                },
                clear() {
                    set({});
                    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 $transaction = $('#transaction')

            $('#btnAddVoucher').click(function() {
                const $btn = $(this)

                $btn.prop('disabled', true)

                $teleport.append(`
                    <div class="modal fade" id="modalAddVoucher" 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">Tambah Pengeluaran</h5>
                                </div>
                                <form method="post">
                                    <div class="modal-body">
                                        <div id="message"></div>
                                        <div class="form-group">
                                            <label class="small font-weight-bold">Debit</label>
                                            <select name="debit_coa_id" id="selectAddVoucherDebitCoaId" class="form-control" data-level="4"></select>
                                            <div class="small error-message text-danger"></div>
                                        </div>
                                        <div class="form-group">
                                            <label class="small font-weight-bold">Kredit</label>
                                            <select name="credit_coa_id" id="selectAddVoucherCreditCoaId" class="form-control" data-level="4"></select>
                                            <div class="small error-message text-danger"></div>
                                        </div>
                                        <div class="form-group">
                                            <label class="small font-weight-bold">Nominal</label>
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">Rp</span>
                                                </div>
                                                <input type="number" name="amount" class="form-control" min="0" placeholder="100000">
                                            </div>
                                            <div class="small error-message text-danger"></div>
                                        </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-primary">Tambah</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                `)

                initCoaList('#selectAddVoucherDebitCoaId', '#modalAddVoucher')
                initCoaList('#selectAddVoucherCreditCoaId', '#modalAddVoucher')

                $('#modalAddVoucher').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 $error = $form.find('.error-message')
                    const $submit = $form.find('button[type="submit"]')
                    const $dismiss = $form.find('button[data-dismiss="modal"]')

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

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

                        const $debitCoa = $form.find('select[name="debit_coa_id"]')
                        const $creditCoa = $form.find('select[name="credit_coa_id"]')
                        const $amount = $form.find('input[name="amount"]');

                        const debitData = $debitCoa.select2('data')[0] || null;
                        const creditData = $creditCoa.select2('data')[0] || null;

                        const data = {
                            id: null,
                            amount: $amount.val(),
                            debit_coa: {
                                id: debitData?.id,
                                code: debitData?.meta?.code,
                                name: debitData?.meta?.name
                            },
                            credit_coa: {
                                id: creditData?.id,
                                code: creditData?.meta?.code,
                                name: creditData?.meta?.name
                            },
                        };

                        const errors = []

                        if (!data.amount || data.amount < 0) {
                            errors.push(1)
                            $amount.closest('.form-group')
                                .find('.error-message')
                                .text('Nominal wajib diisi')
                        }

                        if (!data.debit_coa || !data.debit_coa.id) {
                            errors.push(1)
                            $debitCoa.closest('.form-group')
                                .find('.error-message')
                                .text('Akun debit wajib diisi')
                        }

                        if (!data.credit_coa || !data.credit_coa.id) {
                            errors.push(1)
                            $creditCoa.closest('.form-group')
                                .find('.error-message')
                                .text('Akun kredit wajib diisi')
                        }

                        if (!errors.length) {
                            Voucher.add(data)
                            toastr.success('Pengeluaran berhasil ditambahkan')
                            $modal.modal('hide');
                        }

                        $submit.prop('disabled', false);
                        $dismiss.prop('disabled', false);
                    })
                })

                $teleport.on(
                    'hidden.bs.modal',
                    '#modalAddVoucher',
                    function() {
                        $(this).remove();
                    }
                );
            })

            $transaction.on(
                'click',
                'button[type="submit"]',
                function(e) {
                    e.preventDefault()

                    const $this = $(this)
                    const $submit = $transaction.find('button[type="submit"]')
                    const $message = $transaction.find('#message')

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

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

                    $.ajax({
                        type: "post",
                        url: url,
                        data: {
                            _token: "{{ csrf_token() }}",
                            _method: 'put',
                            submit: $this.data('submit'),
                            business_unit_id: data.business_unit?.id,
                            transaction_date: data.transaction_date,
                            description: data.description,
                            voucher_details: data.voucher_details.map((item) => ({
                                id: item.id || '',
                                debit_coa_id: item.debit_coa.id,
                                credit_coa_id: item.credit_coa.id,
                                amount: item.amount,
                            }))
                        },
                        success: function(response) {
                            const data = response.data || {}

                            Swal.fire({
                                icon: 'success',
                                title: 'Berhasil',
                                text: response.message
                            }).then(function(confirm) {
                                Voucher.fetch(id)
                                    .then((response) => {
                                        if ($this.data('submit')) {
                                            window.location.href =
                                                "{{ route('voucher.expense.index') }}"
                                        }
                                    })
                                    .done(function() {
                                        $submit.prop('disabled', false)
                                    })
                            })
                        },
                        error: function(err) {
                            $message.html(buildErrorAlertHTML(err))
                            $submit.prop('disabled', false)
                        },
                    });
                }
            )

            const initCoaList = function(selector, parent) {
                const $el = $(selector)

                $el.select2({
                    placeholder: 'Pilih Akun',
                    allowClear: true,
                    dropdownParent: parent,
                    ajax: {
                        url: "{{ route('coa.list') }}",
                        delay: 250,
                        data: function(params) {
                            return {
                                search: params.term,
                                page: params.page || 1,
                                level: $el.data('level'),
                                normal_balance: $el.data('normal-balance'),
                            }
                        },
                        processResults: function(response, params) {
                            params.page = params.page || 1

                            return {
                                results: response.data.map(function(v) {
                                    return {
                                        id: v.id,
                                        text: `${v.code} - ${v.name}`,
                                        meta: {
                                            code: v.code,
                                            name: v.name,
                                        }
                                    }
                                }),
                                pagination: {
                                    more: response.current_page < response.last_page
                                }
                            }
                        }
                    }
                })
            }
        });
    </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="message"></div>
                        <div id="rollbackStatusDescription"></div>
                        <div class="row">
                            <div class="col-12 col-md-3">
                                <div class="form-group">
                                    <label class="small font-weight-bold">Unit
                                        Usaha</label>
                                    <select name="business_unit_id" style="width: 100%;"></select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12 col-md-auto">
                                <div class="form-group">
                                    <label for="transactionNumber" class="small font-weight-bold">Nomor</label>
                                    <input type="text" name="transaction_number" id="transactionNumber"
                                        class="form-control" disabled>
                                </div>
                            </div>
                            <div class="col-12 col-md">
                                <div class="form-group">
                                    <label class="small font-weight-bold">Tanggal</label>
                                    <div class="input-group date" id="transactionDate" data-target-input="nearest">
                                        <input type="text" name="transaction_date"
                                            class="form-control datetimepicker-input" data-target="#transactionDate" />
                                        <div class="input-group-append" data-target="#transactionDate"
                                            data-toggle="datetimepicker">
                                            <div class="input-group-text">
                                                <i class="fa fa-calendar"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-group mb-0">
                                    <label class="small font-weight-bold">Keterangan</label>
                                    <textarea name="description" class="form-control" placeholder="Pembelian ATK" rows="3"></textarea>
                                </div>
                            </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="row">
                            <div class="col-auto">
                                <button type="button" id="btnAddVoucher" class="btn btn-primary mb-3">
                                    <i class="fas fa-plus"></i>
                                    <span class="ml-2">Tambah Pengeluaran</span>
                                </button>
                            </div>
                        </div>
                        <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>
                                        <th class="text-center" width="1">Aksi</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>
                                        <td></td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                    <div class="card-body pb-0">
                        <div class="row justify-content-end">
                            <div class="col-auto">
                                <button type="submit" class="btn btn-secondary mb-3" data-submit="0">Simpan
                                    Draf</button>
                            </div>
                            <div class="col-auto">
                                <button type="submit" class="btn btn-primary mb-3" data-submit="1">Simpan &
                                    Ajukan</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection