@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
@section('content')
    @include('layouts.navbars.auth.topnav', [
        'title' => 'Tambah',
        'title_group' => $title_group,
        'title_menu' => $title_menu,
    ])
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        <button class="btn btn-secondary mb-0" onclick="history.back()">
                            <i class="fas fa-arrow-left me-1"></i><span class="font-weight-bold">Kembali</span>
                        </button>
                        @if ($authorize->add == '1')
                            <button class="btn btn-primary mb-0" onclick="saveData()">
                                <i class="fas fa-save me-1"></i><span class="font-weight-bold">Simpan</span>
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
        /* Styling agar Select2 matches Argon Dashboard inputs */
        .select2-container--default .select2-selection--single {
            height: 38px !important;
            border: 1px solid #d2d6da !important;
            border-radius: 0.5rem !important;
            display: flex !important;
            align-items: center !important;
            background-color: #fff !important;
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
        }

        .select2-container--default.select2-container--focus .select2-selection--single,
        .select2-container--default .select2-selection--single:hover {
            border-color: #00b7bd !important;
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            color: #495057 !important;
            padding-left: 0.75rem !important;
            font-size: 0.875rem !important;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 36px !important;
        }

        span.select2.select2-container {
            width: 100% !important;
        }

        body>.select2-container {
            width: auto !important;
        }

        /* Custom Dropdown Styling */
        .select2-container--default .select2-dropdown {
            border: 1px solid #d2d6da !important;
            border-radius: 0.5rem !important;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1) !important;
            z-index: 1060 !important;
            overflow: hidden !important;
        }

        /* Custom Search Input */
        .select2-container--default .select2-search--dropdown {
            padding: 8px 10px !important;
            background-color: #f8f9fa !important;
            border-bottom: 1px solid #e9ecef !important;
        }

        .select2-container--default .select2-search--dropdown .select2-search__field {
            border: 1px solid #d2d6da !important;
            border-radius: 0.375rem !important;
            padding: 6px 10px !important;
            font-size: 0.875rem !important;
            outline: none !important;
        }

        .select2-container--default .select2-search--dropdown .select2-search__field:focus {
            border-color: #00b7bd !important;
        }

        /* Options List */
        .select2-container--default .select2-results>.select2-results__options {
            max-height: 320px !important;
            overflow-y: auto !important;
            overflow-x: hidden !important;
            /* Prevents horizontal scrollbar */
        }

        .select2-container--default .select2-results__option {
            padding: 8px 16px !important;
            font-size: 0.875rem !important;
            color: #495057 !important;
            text-align: left !important;
            white-space: nowrap !important;
            /* Prevents wrapping and forces ellipsis */
            text-overflow: ellipsis !important;
            overflow: hidden !important;
        }

        /* Hover/Highlight state */
        .select2-container--default .select2-results__option--highlighted[aria-selected] {
            background-color: #00b7bd !important;
            color: #fff !important;
        }

        /* Selected option */
        .select2-container--default .select2-results__option[aria-selected=true] {
            background-color: #e9ecef !important;
            color: #32325d !important;
        }

        /* Disabled/Header option (like parents) */
        .select2-container--default .select2-results__option[aria-disabled=true] {
            color: #444444 !important;
            background-color: #dcdcdc !important;
            font-weight: 600 !important;
            cursor: not-allowed !important;
        }
    </style>

    <div class="container-fluid py-4">
        <form role="form" id="mutasi-form" onsubmit="event.preventDefault(); return false;">
            @csrf

            {{-- ===== HEADER MUTASI ===== --}}
            <div class="card mb-4">
                <div class="card-header pb-0 mt-2">
                    <h6 class="text-uppercase text-xs font-weight-bolder" style="color: #028284;">Header Mutasi</h6>
                </div>
                <div class="card-body pt-2">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-control-label">Bank</label>
                                <input type="hidden" id="id_bank" name="id_bank" readonly
                                    value="{{ $selected_bank->id_bank ?? '' }}">
                                <input type="text" class="form-control"
                                    value="{{ $selected_bank ? $selected_bank->coa_nama ?? $selected_bank->nama : '' }}"
                                    disabled>
                                @if ($selected_bank)
                                    <div class="mt-2 text-sm">
                                        <span class="font-weight-bold" style="color: #6c757d;">Saldo Saat Ini:</span>
                                        @if ($selected_bank->mata_uang !== 'IDR')
                                            <span class="font-weight-bold text-primary ms-1">
                                                {{ \App\Helpers\Format_Helper::getSymbol($selected_bank->mata_uang) }}
                                                {{ number_format($selected_bank->saldo_valas, 2, ',', '.') }}
                                            </span>
                                            <span class="mx-2 text-muted">|</span>
                                            <span class="font-weight-bold text-primary">
                                                Saldo IDR: Rp {{ number_format($selected_bank->saldo_idr, 2, ',', '.') }}
                                            </span>
                                        @else
                                            <span class="font-weight-bold text-primary ms-1">
                                                Rp {{ number_format($selected_bank->saldo_idr, 2, ',', '.') }}
                                            </span>
                                        @endif
                                    </div>
                                @endif
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label class="form-control-label">Tanggal <span class="text-danger">*</span></label>
                                <input class="form-control" type="date" name="tanggal" id="tanggal"
                                    value="{{ date('Y-m-d') }}" required>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- ===== DETAIL MUTASI ===== --}}
            <div class="card">
                <div class="card-header pb-0 border-bottom">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h6 class="text-uppercase text-xs font-weight-bolder mb-0" style="color: #028284;">Detail Transaksi
                        </h6>
                        <button type="button" class="btn btn-sm btn-primary mb-0" onclick="addRow()">
                            <i class="fas fa-plus me-1"></i> Tambah Baris
                        </button>
                    </div>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table align-items-center mb-0" id="detail-table">
                            @php
                                $currency = $selected_bank ? $selected_bank->mata_uang : 'IDR';
                                $symbol = \App\Helpers\Format_Helper::getSymbol($currency);
                            @endphp
                            <thead>
                                <tr style="background-color: #00b7bd4f;">
                                    <th class="text-sm font-weight-bolder ps-4" style="width: 5%">No.</th>
                                    <th class="text-sm font-weight-bolder ps-4" style="width: 30%">Keterangan</th>
                                    <th class="text-sm font-weight-bolder" style="width: 30%">COA (No - Nama COA)</th>
                                    <th class="text-sm font-weight-bolder" style="width: 20%">Debit (Pengeluaran)</th>
                                    <th class="text-sm font-weight-bolder" style="width: 20%">Kredit (Penerimaan)</th>
                                    <th class="text-center text-sm font-weight-bolder" style="width: 6%"></th>
                                </tr>
                            </thead>
                            <tbody id="detail-body">
                                {{-- Baris 1 --}}
                                <tr class="detail-row">
                                    <td class="text-sm font-weight-normal text-center ps-4 row-number">1</td>
                                    <td class="p-2">
                                        <input type="text" class="form-control input-keterangan" name="keterangan[]"
                                            placeholder="Ketik keterangan..." title="">
                                    </td>
                                    <td class="p-2">
                                        <select class="coa-select" name="id_coa[]" required>
                                            <option value="">-- Pilih COA --</option>
                                            @foreach ($coas as $coa)
                                                {{-- <option value="{{ $coa->id_coa }}" {{ $coa->is_parent || $coa->id_parent == 1102 || $coa->id_parent == 1101 ? 'disabled class=font-weight-bold style=background-color:#f8f9fa' : '' }}>{!! str_repeat('&nbsp;', $coa->level * 4) !!}{{ $coa->id_coa }} - {{ $coa->nama }}</option> --}}
                                                <option value="{{ $coa->id_coa }}"
                                                    @if ($coa->is_parent) disabled
                                                    class="font-weight-bold text-muted"
                                                    style="background-color:#f8f9fa; font-weight:700;" @endif>
                                                    {!! str_repeat('&nbsp;', $coa->level * 4) !!}
                                                    {{ $coa->id_coa }} - {{ $coa->nama }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </td>
                                    <td class="p-2">
                                        <input type="text" class="form-control input-debit text-end" name="debit[]"
                                            placeholder="0"
                                            oninput="formatRupiahInput(this); handleDebitKreditExclusion(this); calculateTotal()">
                                    </td>
                                    <td class="p-2">
                                        <input type="text" class="form-control input-kredit text-end" name="kredit[]"
                                            placeholder="0"
                                            oninput="formatRupiahInput(this); handleDebitKreditExclusion(this); calculateTotal()">
                                    </td>
                                    <td class="text-center p-2">
                                        <button type="button" class="btn btn-link text-danger mb-0 px-2"
                                            onclick="removeRow(this)"><i class="fas fa-trash-alt"></i></button>
                                    </td>
                                </tr>
                            </tbody>
                            @php
                                $currencySymbol = $selected_bank
                                    ? \App\Helpers\Format_Helper::getSymbol($selected_bank->mata_uang)
                                    : 'Rp';
                            @endphp
                            <tfoot>
                                <tr style="background-color: #f8f9fa;">
                                    <td class="ps-4"></td>

                                    <td class="text-end font-weight-bold py-3 pe-3">
                                        <span class="text-dark">Total</span>
                                    </td>

                                    <td class="py-3 px-2">
                                        <input type="text" id="total-debit-display"
                                            class="form-control font-weight-bold text-dark border-0 bg-transparent text-end"
                                            readonly value="{{ $currencySymbol }} 0">

                                        <input type="hidden" id="total-debit" value="0">
                                    </td>

                                    <td class="py-3 px-2">
                                        <input type="text" id="total-kredit-display"
                                            class="form-control font-weight-bold text-dark border-0 bg-transparent text-end"
                                            readonly value="{{ $currencySymbol }} 0">

                                        <input type="hidden" id="total-kredit" value="0">
                                    </td>
                                    <td></td>
                                </tr>

                                {{-- <tr id="balance-row">
                                    <td colspan="5" class="text-center py-2">
                                        <span id="balance-status" class="badge bg-secondary text-sm px-4 py-2">
                                            Belum ada data
                                        </span>
                                    </td>
                                </tr> --}}
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection

@push('js')
    <script>
        @php
            $rate = 1;
            if ($selected_bank && $selected_bank->mata_uang !== 'IDR') {
                $kurs = DB::table('mst_kurs')->where('id_perusahaan', session('id_perusahaan'))->where('kode', $selected_bank->mata_uang)->where('kode_lawan', 'IDR')->orderByDesc('id_kurs')->first();
                $rate = $kurs && $kurs->nilai > 0 ? $kurs->nilai : 1;
            }
        @endphp
        const rate = {{ $rate }};
        const bankCurrency = "{{ $selected_bank ? $selected_bank->mata_uang : 'IDR' }}";
        const foreignSymbol =
            "{{ $selected_bank ? \App\Helpers\Format_Helper::getSymbol($selected_bank->mata_uang) : 'Rp' }}";

        function formatRupiahInput(element) {
            let value = element.value.replace(/[^,\d]/g, '').toString();
            let split = value.split(',');
            let sisa = split[0].length % 3;
            let rupiah = split[0].substr(0, sisa);
            let ribuan = split[0].substr(sisa).match(/\d{3}/gi);

            if (ribuan) {
                let separator = sisa ? '.' : '';
                rupiah += separator + ribuan.join('.');
            }

            rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;
            element.value = rupiah ? rupiah : '';
        }

        $(document).on('input', '.input-keterangan', function() {
            $(this).attr('title', $(this).val());
        });

        function handleDebitKreditExclusion(element) {
            let row = $(element).closest('tr');
            let debitInput = row.find('.input-debit');
            let kreditInput = row.find('.input-kredit');

            let debitVal = debitInput.val().replace(/[^0-9]/g, '');
            let kreditVal = kreditInput.val().replace(/[^0-9]/g, '');

            if (debitVal && parseInt(debitVal) > 0) {
                kreditInput.val('').prop('readonly', true);
            } else if (kreditVal && parseInt(kreditVal) > 0) {
                debitInput.val('').prop('readonly', true);
            } else {
                debitInput.prop('readonly', false);
                kreditInput.prop('readonly', false);
            }
        }

        function initCoaSelect2(element) {
            $(element).select2({
                width: '100%',
                placeholder: '-- Pilih COA --',
                allowClear: true,
                escapeMarkup: function(markup) {
                    return markup;
                }
            });
        }

        $(document).ready(function() {
            $('.coa-select').each(function() {
                initCoaSelect2(this);
            });
        });

        $(document).on('change', '.coa-select', function() {
            var select = $(this);
            var id_coa = select.val();

            if (id_coa) {
                var isDuplicate = false;
                $('.coa-select').not(select).each(function() {
                    if ($(this).val() == id_coa) {
                        isDuplicate = true;
                    }
                });

                {{-- if (isDuplicate) {
                    Swal.fire('Peringatan', 'COA ini sudah dipilih di baris lain!', 'warning');
                    select.val('').trigger('change');
                    return;
                } --}}
            }
        });

        function parseAmount(value) {
            value = String(value ?? '')
                .replace(/Rp/gi, '')
                .replace(/[^\d,.\-()]/g, '')
                .trim();

            if (value === '') return 0;

            let isNegative = false;

            if (value.includes('(') && value.includes(')')) {
                isNegative = true;
                value = value.replace(/[()]/g, '');
            }

            const lastComma = value.lastIndexOf(',');
            const lastDot = value.lastIndexOf('.');

            if (lastComma !== -1 && lastDot !== -1) {
                // Format Indonesia: 1.000,50
                if (lastComma > lastDot) {
                    value = value.replace(/\./g, '').replace(',', '.');
                }
                // Format internasional: 1,000.50
                else {
                    value = value.replace(/,/g, '');
                }
            } else if (lastComma !== -1) {
                const decimalLength = value.length - lastComma - 1;

                if (decimalLength <= 2) {
                    value = value.replace(',', '.');
                } else {
                    value = value.replace(/,/g, '');
                }
            } else if (lastDot !== -1) {
                // Kalau 1.000 atau 1.000.000 dianggap ribuan
                if (/^\d{1,3}(\.\d{3})+$/.test(value)) {
                    value = value.replace(/\./g, '');
                }
                // Kalau 10.50 tetap decimal
            }

            let number = parseFloat(value) || 0;

            return isNegative ? number * -1 : number;
        }

        function formatAmount(value) {
            return new Intl.NumberFormat('id-ID', {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            }).format(value);
        }

        function calculateTotal() {
            let totalDebit = 0;
            let totalKredit = 0;

            $('.input-debit').each(function() {
                totalDebit += parseAmount($(this).val());
            });

            $('.input-kredit').each(function() {
                totalKredit += parseAmount($(this).val());
            });

            // Nilai numeric asli
            $('#total-debit').val(totalDebit.toFixed(2));
            $('#total-kredit').val(totalKredit.toFixed(2));

            // Tampilan mengikuti mata uang bank
            $('#total-debit-display').val(
                foreignSymbol + ' ' + formatAmount(totalDebit)
            );

            $('#total-kredit-display').val(
                foreignSymbol + ' ' + formatAmount(totalKredit)
            );
        }

        function addRow() {
            var rowCount = $('.detail-row').length + 1;
            var rawHtml = `
                <tr class="detail-row">
                    <td class="text-sm font-weight-normal text-center ps-4 row-number">${rowCount}</td>
                        <td class="p-2">
                                        <input type="text" class="form-control input-keterangan" name="keterangan[]"
                                            placeholder="Ketik keterangan..." title="">
                                    </td>
                    <td class="p-2">
                        <select class="coa-select" name="id_coa[]" required>
                            <option value="">-- Pilih COA --</option>
                            @foreach ($coas as $coa)
                                <option value="{{ $coa->id_coa }}"
                                                    @if ($coa->is_parent) disabled
                                                    class="font-weight-bold text-muted"
                                                    style="background-color:#f8f9fa; font-weight:700;" @endif>
                                                    {!! str_repeat('&nbsp;', $coa->level * 4) !!}
                                                    {{ $coa->id_coa }} - {{ $coa->nama }}
                                                </option>
                            @endforeach
                        </select>
                    </td>
                    <td class="p-2">
                        <input type="text" class="form-control input-debit text-end" name="debit[]" placeholder="0"
                             oninput="formatRupiahInput(this); handleDebitKreditExclusion(this); calculateTotal()">
                    </td>
                    <td class="p-2">
                        <input type="text" class="form-control input-kredit text-end" name="kredit[]" placeholder="0"
                             oninput="formatRupiahInput(this); handleDebitKreditExclusion(this); calculateTotal()">
                    </td>
                    <td class="text-center p-2">
                        <button type="button" class="btn btn-link text-danger mb-0 px-2" onclick="removeRow(this)"><i class="fas fa-trash-alt"></i></button>
                    </td>
                </tr>
            `;
            $('#detail-body').append(rawHtml);
            // Init searchable COA for new row
            var newRow = $('#detail-body .detail-row:last');
            initCoaSelect2(newRow.find('.coa-select')[0]);
            renumberRows();
        }

        function removeRow(btn) {
            if ($('.detail-row').length > 1) {
                $(btn).closest('tr').remove();
                renumberRows();
                calculateTotal();
            } else {
                Swal.fire('Info', 'Minimal harus ada 1 detail transaksi!', 'info');
            }
        }

        function renumberRows() {
            $('.detail-row').each(function(i) {
                $(this).find('.row-number').text(i + 1);
            });
        }

        function saveData() {
            var form = $('#mutasi-form');

            if (!form[0].checkValidity()) {
                form[0].reportValidity();
                return;
            }

            // Validate bank selection (must be set from filter)
            if (!$('#id_bank').val()) {
                Swal.fire('Peringatan', 'Mohon pilih Bank dari filter terlebih dahulu!', 'warning');
                return;
            }

            let totalD = parseInt($('#total-debit').val().replace(/[^0-9]/g, '') || 0);
            let totalK = parseInt($('#total-kredit').val().replace(/[^0-9]/g, '') || 0);

            if (totalD === 0 && totalK === 0) {
                Swal.fire('Peringatan', 'Mohon isi minimal satu transaksi!', 'warning');
                return;
            }

            // Check for duplicate COAs before saving
            let selectedCoas = [];
            let duplicateFound = false;
            $('.coa-select').each(function() {
                let coa = $(this).val();
                if (coa) {
                    if (selectedCoas.includes(coa)) {
                        duplicateFound = true;
                        return false;
                    }
                    selectedCoas.push(coa);
                }
            });

            {{-- if (duplicateFound) {
                Swal.fire('Peringatan', 'Terdapat COA yang sama di beberapa baris!', 'warning');
                return;
            } --}}

            let details = [];
            $('.detail-row').each(function() {
                var ket = $(this).find('.input-keterangan').val();
                var coaSelect = $(this).find('.coa-select')[0];
                var coa = coaSelect ? coaSelect.value : null;
                var d = $(this).find('.input-debit').val();
                var k = $(this).find('.input-kredit').val();
                if (coa && (d || k)) {
                    details.push({
                        keterangan: ket,
                        id_coa: coa,
                        debit: d || 0,
                        kredit: k || 0
                    });
                }
            });

            let payload = {
                _token: '{{ csrf_token() }}',
                id_bank: $('#id_bank').val(),
                tanggal: $('#tanggal').val(),
                keterangan_header: $('#keterangan_header').val(),
                details: details
            };

            $.ajax({
                url: "{{ url($url_menu) }}",
                type: "POST",
                data: payload,
                beforeSend: function() {
                    Swal.fire({
                        title: 'Memproses...',
                        text: 'Sedang menyimpan transaksi.',
                        allowOutsideClick: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });
                },
                success: function(res) {
                    if (res.status === 'success') {
                        Swal.fire('Berhasil', res.message, 'success').then(() => {
                            window.location.href = res.redirect;
                        });
                    } else {
                        Swal.fire('Gagal', res.message, 'error');
                    }
                },
                error: function(xhr) {
                    console.log(xhr.responseText);
                    Swal.fire('Error', 'Terjadi kesalahan sistem.', 'error');
                }
            });
        }
    </script>
@endpush