@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    <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 type="button" class="btn btn-secondary mb-0" onclick="window.location='{{ url($url_menu) }}'">
                            <i class="fas fa-circle-left me-1"></i> Kembali
                        </button>
                        @if ($authorize->add == '1')
                            <button class="btn btn-primary mb-0"
                                onclick="event.preventDefault(); submitWithLoading(this, '{{ $dmenu }}-form');">
                                <i class="fas fa-floppy-disk me-1"></i> Simpan
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <form role="form" method="POST" action="{{ URL::to($url_menu) }}" id="{{ $dmenu }}-form">
                    @csrf
                    <div class="card">
                        <div class="card-body">

                            <p class="text-uppercase text-sm">Insert {{ $title_menu }}</p>
                            <hr class="horizontal dark mt-0">
                            <div class="row">

                                {{-- Kiri --}}
                                <div class="col-md-6">
                                    <div class="form-group mb-3">
                                        <label class="form-control-label">No. COA</label>
                                        <div class="position-relative mb-1">
                                            <input type="text" name="id_coa" id="no_coa_suggestion" class="form-control @error('id_coa') is-invalid @enderror" placeholder="Generating..." style="background-color: #fff;" value="{{ old('id_coa') }}" required oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                                            <div class="spinner-border spinner-border-sm text-primary d-none position-absolute" id="coa_loader" role="status" style="right: 10px; top: 30%;">
                                                <span class="visually-hidden">Loading...</span>
                                            </div>
                                        </div>
                                        @error('id_coa') <p class="text-danger text-xs pt-1">{{ $message }}</p> @enderror
                                        <p class="text-secondary text-xs pt-1 px-1 mb-0">Bisa generate otomatis saat memilih tipe akun.</p>
                                    </div>

                                    <div class="form-group mb-3">
                                        <label class="form-control-label">Tipe Akun</label>
                                        <select name="tipe" id="tipe_select" class="form-select" required>
                                            <option value="">-- Pilih Tipe --</option>
                                            @php
                                                $enumTipe = DB::select("select value, name as label from sys_enum where idenum = 'tipe_akun' and isactive = '1'");
                                            @endphp
                                            @foreach ($enumTipe as $enum)
                                                <option value="{{ $enum->value }}"
                                                    {{ old('tipe', request()->query('tipe')) == $enum->value ? 'selected' : '' }}>
                                                    {{ $enum->label }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('tipe') <p class="text-danger text-xs pt-1">{{ $message }}</p> @enderror
                                    </div>

                                    <div class="form-group mb-3" id="jenis_bank_group" style="display: none;">
                                        <label class="form-control-label">Jenis Bank</label>
                                        <select name="id_bank_info" id="jenis_bank_select" class="form-select">
                                            <option value="">-- Pilih Jenis Bank --</option>
                                            @php
                                                $banksList = DB::table('mst_bank_info')->where('isactive', '1')->orderBy('urut')->get();
                                            @endphp
                                            @foreach ($banksList as $b)
                                                <option value="{{ $b->id }}" data-digits="{{ $b->digit_bank }}" {{ old('id_bank_info') == $b->id ? 'selected' : '' }}>
                                                    {{ $b->nama }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('id_bank_info') <p class="text-danger text-xs pt-1">{{ $message }}</p> @enderror
                                    </div>

                                    <div class="form-group mb-3">
                                        <label class="form-control-label">Keterangan</label>
                                        <input type="text" name="nama" class="form-control" value="{{ old('nama') }}" required maxlength="255" placeholder="Contoh: Operasional, JPY, dll.">
                                        @error('nama') <p class="text-danger text-xs pt-1">{{ $message }}</p> @enderror
                                    </div>

                                    <div class="mb-3 px-1" id="coa_preview_group" style="display: none;">
                                        <span class="text-xs text-secondary font-weight-bold">Preview Format Nama COA:</span><br>
                                        <span class="badge bg-light text-primary font-weight-bold text-xs border" id="coa_name_preview">-</span>
                                    </div>
                                </div>

                                {{-- Kanan --}}
                                <div class="col-md-6">
                                    <div class="form-group mb-3" id="no_rekening_group" style="display: none;">
                                        <label class="form-control-label">No. Rekening</label>
                                        <input type="text" name="no_rekening" id="no_rekening_input" class="form-control" value="{{ old('no_rekening') }}" maxlength="50" oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                                        <div id="no_rekening_feedback" class="text-secondary text-xs pt-1 px-1 mb-0">Isi no rekening jika tipe akun adalah bank.</div>
                                        @error('no_rekening') <p class="text-danger text-xs pt-1">{{ $message }}</p> @enderror
                                    </div>

                                    <div class="form-group mb-3">
                                        <label class="form-control-label">Mata Uang</label>
                                        <select name="mata_uang" id="mata_uang_select" class="form-select" required>
                                            @php
                                                $id_perusahaan = session('id_perusahaan') ?? 1;
                                                $kursList = DB::table('mst_kurs')
                                                    ->select('kode', 'nama')
                                                    ->where('id_perusahaan', $id_perusahaan)
                                                    ->where('isactive', '1')
                                                    ->get()
                                                    ->unique('kode')
                                                    ->map(function($item) {
                                                        return (object)[
                                                            'kode' => $item->kode,
                                                            'nama' => $item->nama
                                                        ];
                                                     });

                                                if (!$kursList->contains('kode', 'IDR')) {
                                                    $kursList->push((object)['kode' => 'IDR', 'nama' => 'Rupiah Indonesia']);
                                                }
                                                $sortedKurs = $kursList->sortBy('kode');
                                            @endphp
                                            @foreach($sortedKurs as $k)
                                                <option value="{{ $k->kode }}" {{ old('mata_uang', 'IDR') == $k->kode ? 'selected' : '' }}>
                                                    {{ $k->kode }} - {{ $k->nama }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <p class="text-secondary text-xs pt-1 px-1">Daftar mata uang dimuat dari Master Kurs.</p>
                                        @error('mata_uang') <p class="text-danger text-xs pt-1">{{ $message }}</p> @enderror
                                    </div>

                                    <div class="form-group mb-3">
                                        <label class="form-control-label">Saldo Awal</label>
                                        <input type="text" name="saldo_akhir" class="form-control" value="{{ old('saldo_akhir') }}" oninput="formatRupiahInput(this)" placeholder="0">
                                        <p class="text-secondary text-xs pt-1 px-1 mb-0">Isi nominal saldo awal. Biarkan 0 jika tidak ada.</p>
                                        @error('saldo_akhir') <p class="text-danger text-xs pt-1">{{ $message }}</p> @enderror
                                    </div>

                                    <input type="hidden" name="isactive" value="1">
                                </div>
                            </div>

                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('js')
<script>
    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 : '';
    }

    function updateNoRekeningValidation() {
        var selectedOpt = $('#jenis_bank_select option:selected');
        var digits = selectedOpt.data('digits');
        var noRekInput = $('#no_rekening_input');
        var feedback = $('#no_rekening_feedback');

        if (digits) {
            noRekInput.attr('required', true);
            noRekInput.attr('pattern', '^\\d{' + digits + '}$');
            noRekInput.attr('maxlength', digits);
            
            var val = noRekInput.val();
            if (val) {
                if (val.length === digits) {
                    feedback.html('<span class="text-success"><i class="fas fa-check-circle me-1"></i>Digit nomor rekening sesuai (' + digits + ' digit).</span>');
                    noRekInput[0].setCustomValidity('');
                } else {
                    feedback.html('<span class="text-danger"><i class="fas fa-exclamation-circle me-1"></i>Nomor rekening harus ' + digits + ' digit (saat ini ' + val.length + ' digit).</span>');
                    noRekInput[0].setCustomValidity('Nomor rekening harus berisi tepat ' + digits + ' digit.');
                }
            } else {
                feedback.html('<span class="text-warning"><i class="fas fa-info-circle me-1"></i>Harap isi nomor rekening sebanyak ' + digits + ' digit.</span>');
                noRekInput[0].setCustomValidity('Nomor rekening harus diisi.');
            }
        } else {
            noRekInput.removeAttr('pattern');
            noRekInput.removeAttr('maxlength');
            feedback.text('Isi no rekening jika tipe akun adalah bank.').removeClass('text-danger text-success').addClass('text-secondary');
            if (noRekInput[0]) {
                noRekInput[0].setCustomValidity('');
            }
        }
        updateCoaNamePreview();
    }

    function updateCoaNamePreview() {
        var tipe = $('#tipe_select').val();
        var bankName = $('#jenis_bank_select option:selected').text().trim();
        if (bankName.indexOf('--') === 0 || !bankName) {
            bankName = '';
        }
        var keterangan = $('input[name="nama"]').val().trim();
        var noRek = $('#no_rekening_input').val().trim();
        
        if (tipe === 'bank') {
            $('#coa_preview_group').show();
            var preview = (bankName || '[Jenis Bank]') + ' (' + (keterangan || '[Keterangan]') + ') - ' + (noRek || '[No. Rekening]');
            $('#coa_name_preview').text(preview);
        } else {
            $('#coa_preview_group').hide();
            $('#coa_name_preview').text(keterangan || '-');
        }
    }

    $(document).ready(function() {
        $('#mata_uang_select').select2({ width: '100%' });
        $('#jenis_bank_select').select2({ width: '100%' });

        function triggerSuggest() {
            var val = $('#tipe_select').val();
            
            // Toggle rekening and jenis bank requirement
            if (val === 'bank') {
                $('#jenis_bank_group').slideDown();
                $('#no_rekening_group').slideDown();
                $('#jenis_bank_select').attr('required', true);
                $('#no_rekening_input').attr('required', true);
            } else {
                $('#jenis_bank_group').slideUp();
                $('#no_rekening_group').slideUp();
                $('#jenis_bank_select').removeAttr('required').val('').trigger('change');
                $('#no_rekening_input').removeAttr('required').val('');
                if ($('#no_rekening_input')[0]) {
                    $('#no_rekening_input')[0].setCustomValidity('');
                }
            }

            // Fetch suggested COA
            if (val) {
                $('#coa_loader').removeClass('d-none');
                $('#no_coa_suggestion').val('Generating...');
                $.ajax({
                    url: '{{ url($url_menu . "/api/suggestNoCoaApi") }}',
                    method: 'GET',
                    data: { tipe: val },
                    success: function(res) {
                        $('#coa_loader').addClass('d-none');
                        if(res.success) {
                            $('#no_coa_suggestion').val(res.suggested_coa);
                        } else {
                            $('#no_coa_suggestion').val('Error memuat COA');
                        }
                    },
                    error: function() {
                        $('#coa_loader').addClass('d-none');
                        $('#no_coa_suggestion').val('Gagal menghubungi server');
                    }
                });
            } else {
                $('#no_coa_suggestion').val('');
            }
            updateNoRekeningValidation();
        }

        $('#tipe_select').on('change', triggerSuggest);
        $('#jenis_bank_select').on('change', updateNoRekeningValidation);
        $('#no_rekening_input').on('input', updateNoRekeningValidation);
        $('input[name="nama"]').on('input', updateCoaNamePreview);
        
        // Trigger on load for validation errors redirection
        if ($('#tipe_select').val() != '') {
            triggerSuggest();
        }
    });

    // Function removed because mata uang is loaded directly via PHP.
</script>
@endpush

@push('js')
    @include('js.submit_loading')
@endpush