@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->edit == '1')
                            <button class="btn btn-primary mb-0" id="{{ $dmenu }}-save"
                                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">
                @php
                    $currentParentId   = $list->id_parent ?? null;
                    $currentParentName = '';
                    if ($currentParentId) {
                        $parentCoa = \Illuminate\Support\Facades\DB::table('mst_coa')
                            ->where('id_coa', $currentParentId)
                            ->where('id_perusahaan', session('id_perusahaan'))
                            ->first();
                        if ($parentCoa) {
                            $currentParentName = $currentParentId . ' - ' . $parentCoa->nama;
                        }
                    }
                @endphp

                <form role="form" method="POST"
                    action="{{ URL::to($url_menu . '/' . $idencrypt) }}"
                    enctype="multipart/form-data" id="{{ $dmenu }}-form">
                    @csrf
                    @method('PUT')

                    {{-- Primary key (hidden) --}}
                    <input type="hidden" name="id_coa" value="{{ $list->id_coa }}">

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

                            <div class="row">

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

                                    {{-- No. COA (readonly display) --}}
                                    <div class="form-group mb-3">
                                        <label class="form-control-label">No. COA</label>
                                        <input type="text" class="form-control" readonly disabled value="{{ $list->id_coa }}">
                                    </div>

                                    {{-- Parent COA (readonly display) --}}
                                    <div class="form-group mb-3">
                                        <label class="form-control-label">Parent COA</label>
                                        <input type="hidden" name="id_parent" value="{{ $currentParentId }}">
                                        <input type="text" class="form-control" readonly disabled value="{{ $currentParentName ?: '-' }}">
                                    </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', $list->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 (readonly - tidak bisa diubah setelah COA dibuat) --}}
                                    <div class="form-group mb-3">
                                        <label class="form-control-label">Jenis Laporan</label>
                                        <input type="hidden" name="jenis_laporan" value="{{ $list->jenis_laporan }}">
                                        <input type="text" class="form-control" readonly disabled
                                            value="{{ $list->jenis_laporan }}">
                                    </div>

                                    {{-- Status --}}
                                    <div class="form-group mb-3">
                                        <label class="form-control-label">Status</label>
                                        <select name="isactive" class="form-select">
                                            <option value="1"
                                                {{ old('isactive', $list->isactive) == '1' ? 'selected' : '' }}>
                                                Aktif
                                            </option>
                                            <option value="0"
                                                {{ old('isactive', $list->isactive) == '0' ? 'selected' : '' }}>
                                                Non Aktif
                                            </option>
                                        </select>
                                        @error('isactive')
                                            <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' => 'edit',
                                    ])
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
<script>
    function selectParentCoa(fieldSuffix, id, nama) {
        $('#input_id_parent').val(id);
        $('#display_id_parent').val(id + ' - ' + nama);
        $('#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('edit', $(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('edit', 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