@extends('layout.main')
<style>
    .file-tree-ul {
        list-style: none;
        padding-left: 20px;
        position: relative;
    }

    /* Garis vertikal */
    .file-tree-ul::before {
        content: '';
        position: absolute;
        top: 0;
        left: 10px;
        bottom: 0;
        border-left: 1px solid #ccc;
    }

    .file-tree-li {
        margin: 4px 0;
        padding-left: 20px;
        position: relative;
    }

    /* Garis horizontal */
    .file-tree-li::before {
        content: '';
        position: absolute;
        top: 12px;
        left: 0;
        width: 20px;
        border-top: 1px solid #ccc;
    }

    /* Hilangkan garis di root */
    .file-tree-ul > .file-tree-li::before {
        border-top: none;
    }

    .folder > span {
        cursor: pointer;
        user-select: none;
    }

    .collapsed > .file-tree-ul {
        display: none;
    }

    .add-file-btn {
        margin-left: 8px;
        font-size: 12px;
        color: blue;
        cursor: pointer;
    }
</style>
@section('body_main')
    <div class="row">
    <div class="col-md-12">
        <div class="card w-100">
          <div class="card-header d-flex justify-content-between align-items-center">
                <h4 class="mb-0">Data</h4>
            </div>
            <div class="card-body p-3">
                <div class="row mb-3 mt-3">
                    <div class="col-md-3">
                            <label for="exampleFormControlInput1" class="form-label">Unit Kerja</label>
                            <select class="unit_kerja form-control" id="unit_kerja">
                                <option value="" disable >Select Choose</option>
                                @foreach ($unitKerja as $unit)
                                <option value="{{ $unit->id }}">{{ $unit->name }}</option>
                                @endforeach
                            </select>
                    </div>
                    <div class="col-md-3">
                          <label for="exampleFormControlInput1" class="form-label">Sub Unit Kerja</label>
                          <select class="sub_unit_kerja form-control" id="sub_unit_kerja">
                                <option value="" disable >Select Choose</option>
                                @foreach ($subUnitKerja as $sub)
                                <option value="{{ $sub->id }}">{{ $sub->name }}</option>
                                @endforeach
                          </select>
                    </div>
                    <div class="col-md-2">
                        <label for="exampleFormControlInput1" class="form-label">Kategori Dok.</label>
                        <select class="kategori_dok form-control" id="kategori_dok">
                            <option value="" disable >Select Choose</option>
                              @foreach ($katDok as $kat)
                                <option value="{{ $kat->id }}">{{ $kat->nama_kategori_directory }}</option>
                              @endforeach
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label for="exampleFormControlInput1" class="form-label">Klasifikasi Dok.</label>
                        <select class="klasifikasi_dok form-control" id="klasifikasi_dok">
                            <option value="" disable >Select Choose</option>
                             @foreach ($klasifikasiDok as $kla)
                                <option value="{{ $kla->id }}">{{ $kla->nama_klasifikasi_directory }}</option>
                              @endforeach
                        </select>
                    </div>
                    <div class="col-md-2">
                        <button type="button" class="btn btn-primary mt-3">Cari</button>
                    </div>
                </div>
                <div id="file_tree"></div>
            </div>
        </div>
    </div>
</div>
@include('dashboard.modal.create')
<script>
    const klasifikasiDok = @json($klasifikasiDok);
</script>
<script src="{{ ver('/js/dashboard/_init.js') }}"></script>
<script src="{{ ver('/js/dashboard/index.js') }}"></script>
<script src="{{ ver('/js/dashboard/functions.js') }}"></script>
<script src="{{ ver('/js/dashboard/action.js') }}"></script>
@endsection