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

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

    {{-- Top action bar --}}
    <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-circle-left me-1"></i>
                            <span class="font-weight-bold">Kembali</span>
                        </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>
                                <span class="font-weight-bold">Simpan</span>
                            </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" enctype="multipart/form-data">
                    @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">

                                {{-- Left Column --}}
                                <div class="col-md-6">

                                    {{-- Parent COA --}}
                                    <div class="form-group mb-3">
                                        <label class="form-control-label">Parent COA</label>
                                        <div class="input-group">
                                            @php
                                                $selected_parent = old('id_parent', request()->query('parent_id'));
                                                $parent_name = '';
                                                $parent_jenis_laporan = '';
                                                if ($selected_parent) {
                                                    $parent_record = \Illuminate\Support\Facades\DB::table('mst_coa')
                                                        ->where('id_coa', $selected_parent)
                                                        ->where('id_perusahaan', session('id_perusahaan'))
                                                        ->first();
                                                    if ($parent_record) {
                                                        $parent_name = $parent_record->nama;
                                                        $parent_jenis_laporan = $parent_record->jenis_laporan;
                                                    }
                                                }
                                            @endphp
                                            <input type="hidden" name="id_parent" id="input_id_parent" value="{{ $selected_parent }}">
                                            <input type="text" readonly id="display_id_parent"
                                                class="form-control"
                                                placeholder="-- Pilih Parent COA --"
                                                value="{{ $selected_parent ? $selected_parent . ' - ' . $parent_name : '' }}">
                                            <span class="input-group-text bg-primary text-light"
                                                data-bs-toggle="modal" data-bs-target="#modalParentCoa"
                                                style="cursor:pointer;">
                                                <i class="fas fa-search"></i>
                                            </span>
                                            <span class="input-group-text bg-danger text-light"
                                                onclick="clearParentCoa()"
                                                style="cursor:pointer;" title="Hapus">
                                                <i class="fas fa-times"></i>
                                            </span>
                                        </div>
                                        @error('id_parent')
                                            <p class="text-danger text-xs pt-1">{{ $message }}</p>
                                        @enderror
                                    </div>

                                    {{-- Nama COA --}}
                                    <div class="form-group mb-3">
                                        <label class="form-control-label">Nama COA</label>
                                        <input type="text" name="nama" class="form-control"
                                            value="{{ old('nama') }}" maxlength="255">
                                        @error('nama')
                                            <p class="text-danger text-xs pt-1">{{ $message }}</p>
                                        @enderror
                                    </div>

                                </div>

                                {{-- Right Column --}}
                                <div class="col-md-6">

                                    {{-- Jenis Laporan --}}
                                    <div class="form-group mb-3">
                                        <label class="form-control-label">Jenis Laporan</label>
                                        <select name="jenis_laporan" class="form-select">
                                            <option value=""></option>
                                            @php
                                                $enumJenisLaporan = DB::select("select value, name from sys_enum where idenum = 'jenis_laporan' and isactive = '1'");
                                            @endphp
                                            @foreach ($enumJenisLaporan as $enum)
                                                <option value="{{ $enum->value }}"
                                                    {{ old('jenis_laporan', $parent_jenis_laporan ?? '') == $enum->value ? 'selected' : '' }}>
                                                    {{ $enum->value }} - {{ $enum->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('jenis_laporan')
                                            <p class="text-danger text-xs pt-1">{{ $message }}</p>
                                        @enderror
                                    </div>

                                </div>

                            </div>{{-- /row --}}

                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- COA Parent Tree Modal --}}
    <div class="modal fade" id="modalParentCoa" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Pilih Parent COA</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-2">
                        <input type="text" class="form-control form-control-sm"
                            id="coaSearchInput" placeholder="Cari No. COA / Nama COA...">
                    </div>
                    <div class="table-responsive" style="max-height:420px;overflow-y:auto;">
                        <table class="table table-bordered table-sm mb-0" id="coaTreeTable">
                            <thead style="background-color:#00b7bd4f;position:sticky;top:0;">
                                <tr>
                                    <th width="30px">Pilih</th>
                                    <th>No. COA</th>
                                    <th>Nama COA</th>
                                    <th>Jenis Laporan</th>
                                </tr>
                            </thead>
                            <tbody id="coaTreeBody">
                                @foreach ($coa_tree as $node)
                                    @include('master.mstcoa.partials.coa_modal_rows', [
                                        'item'         => $node,
                                        'depth'        => 0,
                                        'field_suffix' => 'add',
                                    ])
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
<script>
    function selectParentCoa(fieldSuffix, id, nama, jenis_laporan) {
        // Jika parent yang dipilih adalah Kas (1101) atau Bank (1102), arahkan ke Master Bank
        var idStr = id.toString();
        if (idStr.startsWith('1101') || idStr.startsWith('1102')) {
            var tipe = idStr.startsWith('1102') ? 'bank' : 'kas';
            window.location.href = '{{ url("/msbank/add") }}?parent_id=' + idStr + '&tipe=' + tipe;
            return;
        }

        $('#input_id_parent').val(id);
        $('#display_id_parent').val(id + ' - ' + nama);
        if (jenis_laporan) {
            $('select[name="jenis_laporan"]').val(jenis_laporan).trigger('change');
        }
        $('#modalParentCoa').modal('hide');
    }

    function clearParentCoa() {
        $('#input_id_parent').val('');
        $('#display_id_parent').val('');
    }

    function showParents_modal(fieldSuffix, parentId) {
        if (!parentId) return;
        var row = $('#coaTreeBody tr[data-coa-id="' + parentId + '"]');
        if (row.length) {
            row.show();
            showParents_modal(fieldSuffix, row.data('coa-parent'));
        }
    }

    function collapseModalChildren(fieldSuffix, parentId) {
        $('#coaTreeBody tr[data-coa-parent="' + parentId + '"]').each(function () {
            var childId = $(this).data('coa-id');
            $(this).hide();
            $('#coaTreeBody td.coa-modal-toggle[data-coa-id="' + childId + '"]').find('i').removeClass('fa-chevron-down').addClass('fa-chevron-right');
            collapseModalChildren(fieldSuffix, childId);
        });
    }

    $('#coaSearchInput').on('input', function () {
        var q = $(this).val().toLowerCase();
        if (q === '') {
            $('#coaTreeBody tr[data-coa-id]').each(function () {
                $(this).data('coa-parent') ? $(this).hide() : $(this).show();
            });
        } else {
            $('#coaTreeBody tr[data-coa-id]').hide();
            $('#coaTreeBody tr[data-coa-id]').each(function () {
                var id   = $(this).find('.modal-coa-id').text().toLowerCase();
                var nama = $(this).find('.modal-coa-nama').text().toLowerCase();
                if (id.includes(q) || nama.includes(q)) {
                    $(this).show();
                    showParents_modal('add', $(this).data('coa-parent'));
                }
            });
        }
    });

    $('#coaTreeBody').on('click', 'td.coa-modal-toggle', function (e) {
        e.stopPropagation();
        var id       = $(this).data('coa-id');
        var icon     = $(this).find('i');
        var children = $('#coaTreeBody tr[data-coa-parent="' + id + '"]');
        if (children.first().is(':visible')) {
            collapseModalChildren('add', id);
            icon.removeClass('fa-chevron-down').addClass('fa-chevron-right');
        } else {
            children.show();
            icon.removeClass('fa-chevron-right').addClass('fa-chevron-down');
        }
    });
</script>
@endpush

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