@extends('layouts.main', [
    'title' => 'RKAS',
])

@push('styles')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/iconify/3.1.1/iconify.min.js"
        integrity="sha512-oQ1yQwSEIc9CTcK7pffEyS8fxom2iUWQrALk3j3+wfdSDjQ77EZbzGMGe2ZYmfoC8M9vR47apbS1ZYbW05y/pg=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link href="https://cdn.jsdelivr.net/npm/simple-datatables@latest/dist/style.css" rel="stylesheet" type="text/css">
    <script src="https://cdn.jsdelivr.net/npm/simple-datatables@latest" type="text/javascript"></script>
@endpush

@push('scripts')
    <script>
        //.add-komponen
        document.querySelectorAll('.add-komponen').forEach(function(el) {
            el.addEventListener('click', function() {
                document.querySelector("#form-komponen-title").innerText = "Tambah Komponen"
                let modal = document.getElementById('modal-komponen')
                let kegiatan_id = el.getAttribute('data-id')
                let kode_kegiatan = el.getAttribute('data-kode')
                let nama_kegiatan = el.getAttribute('data-nama')
                let form = modal.querySelector('form')
                let kegiatan_id_input = form.querySelector('#kegiatan_id')
                let kode_kegiatan_span = form.querySelector('#kode_kegiatan')
                let nama_kegiatan_span = form.querySelector('#nama_kegiatan')

                kegiatan_id_input.value = kegiatan_id
                kode_kegiatan_span.innerText = kode_kegiatan
                nama_kegiatan_span.innerText = nama_kegiatan
            })
        });

        //.edit-komponen
        document.querySelectorAll('.edit-komponen').forEach(function(el) {
            el.addEventListener('click', function() {
                document.querySelector("#form-komponen-title").innerText = "Edit Komponen"
                let modal = document.getElementById('modal-komponen')
                let kegiatan_id = el.getAttribute('data-id')
                let kode_kegiatan = el.getAttribute('data-kode')
                let nama_kegiatan = el.getAttribute('data-nama')
                let form = modal.querySelector('form')
                let kegiatan_id_input = form.querySelector('#kegiatan_id')
                let kode_kegiatan_span = form.querySelector('#kode_kegiatan')
                let nama_kegiatan_span = form.querySelector('#nama_kegiatan')
                let data = JSON.parse(el.getAttribute('data-edit'))

                kegiatan_id_input.value = kegiatan_id
                kode_kegiatan_span.innerText = kode_kegiatan
                nama_kegiatan_span.innerText = nama_kegiatan
                form.querySelector('input[name="kode_komponen"]').value = data.kode_komponen
                form.querySelector('input[name="nama_komponen"]').value = data.nama_komponen
                form.action = `{{ route('komponen.update', '') }}/${data.id}`
                form.insertAdjacentHTML('beforeend', '<input type="hidden" name="_method" value="PUT">')
            })
        });

        //.add-akun
        document.querySelectorAll('.add-akun').forEach(function(el) {
            el.addEventListener('click', function() {
                document.querySelector("#form-akun-title").innerText = "Tambah Akun"
                let modal = document.getElementById('modal-akun')
                let komponen_id = el.getAttribute('data-id')
                let kode_komponen = el.getAttribute('data-kode')
                let nama_komponen = el.getAttribute('data-nama')
                let form = modal.querySelector('form')
                let komponen_id_input = form.querySelector('#komponen_id')
                let kode_komponen_span = form.querySelector('#kode_komponen')
                let nama_komponen_span = form.querySelector('#nama_komponen')

                komponen_id_input.value = komponen_id
                kode_komponen_span.innerText = kode_komponen
                nama_komponen_span.innerText = nama_komponen
            })
        });

        //.edit-akun
        document.querySelectorAll('.edit-akun').forEach(function(el) {
            el.addEventListener('click', function() {
                document.querySelector("#form-akun-title").innerText = "Edit Akun"
                let modal = document.getElementById('modal-akun')
                let form = modal.querySelector('form')
                let data = JSON.parse(el.getAttribute('data-edit'))
                let komponen_id = el.getAttribute('data-id')
                let kode_komponen = el.getAttribute('data-kode')
                let nama_komponen = el.getAttribute('data-nama')
                let komponen_id_input = form.querySelector('#komponen_id')
                let kode_komponen_span = form.querySelector('#kode_komponen')
                let nama_komponen_span = form.querySelector('#nama_komponen')

                komponen_id_input.value = komponen_id
                kode_komponen_span.innerText = kode_komponen
                nama_komponen_span.innerText = nama_komponen
                form.querySelector('input[name="akun_id[]"]').value = data.akun_id
                form.action = `{{ route('komponen-akun.update', '') }}/${data.id}`
                form.insertAdjacentHTML('beforeend', '<input type="hidden" name="_method" value="PUT">')
            })
        });

        //.add-detail
        document.querySelectorAll('.add-detail').forEach(function(el) {
            el.addEventListener('click', function() {
                document.querySelector("#form-detail-title").innerText = "Tambah Detail Akun"
                let modal = document.getElementById('modal-detail')
                let komponen_akun_id = el.getAttribute('data-id')
                let kode_akun = el.getAttribute('data-kode')
                let nama_akun = el.getAttribute('data-nama')
                let form = modal.querySelector('form')
                let komponen_akun_id_input = form.querySelector('#komponen_akun_id')
                let kode_akun_span = form.querySelector('#kode_akun')
                let nama_akun_span = form.querySelector('#nama_akun')

                komponen_akun_id_input.value = komponen_akun_id
                kode_akun_span.innerText = kode_akun
                nama_akun_span.innerText = nama_akun
            })
        });

        //.edit-detail
        document.querySelectorAll('.edit-detail').forEach(function(el) {
            el.addEventListener('click', function() {
                document.querySelector("#form-detail-title").innerText = "Edit Akun"
                let modal = document.getElementById('modal-detail')
                let form = modal.querySelector('form')
                let data = JSON.parse(el.getAttribute('data-edit'))
                let komponen_akun_id = el.getAttribute('data-id')
                let kode_akun = el.getAttribute('data-kode')
                let nama_akun = el.getAttribute('data-nama')
                let komponen_akun_id_input = form.querySelector('#komponen_akun_id')
                let kode_akun_span = form.querySelector('#kode_akun')
                let nama_akun_span = form.querySelector('#nama_akun')

                komponen_akun_id_input.value = komponen_akun_id
                kode_akun_span.innerText = kode_akun
                nama_akun_span.innerText = nama_akun
                form.querySelector('input[name="nilai"]').value = data.nilai
                form.querySelector('input[name="satuan"]').value = data.satuan
                form.querySelector('input[name="harga_satuan"]').value = data.harga_satuan
                form.querySelector('input[name="keterangan"]').value = data.keterangan
                form.action = `{{ route('komponen-akun-detail.update', '') }}/${data.id}`
                form.insertAdjacentHTML('beforeend', '<input type="hidden" name="_method" value="PUT">')
            })
        });

        const dataTable = new simpleDatatables.DataTable("#table-akun");
    </script>
@endpush

@push('modal')
    <div id="modal-komponen" class="modal" data-form="">
        <div class="modal-background --modal-delete-close"></div>
        <div class="modal-card">
            <header class="modal-card-head">
                <p class="modal-card-title" id="form-komponen-title">Tambah Komponen</p>
            </header>
            <section class="modal-card-body">
                <form action="{{ route('komponen.store') }}" method="POST">
                    @csrf
                    <ul class="mb-6">
                        <li class="font-bold">Kode Kegiatan : <span id="kode_kegiatan"></span></li>
                        <li class="font-bold">Nama Kegiatan : <span id="nama_kegiatan"></span></li>
                    </ul>
                    <hr>
                    <input type="hidden" id="kegiatan_id" name="kegiatan_id">
                    <div class="w-full flex gap-4 mb-6">
                        <div class="w-full md:w-1/2">
                            <div class="field">
                                <label class="label">Kode Komponen</label>
                                <div class="field-body">
                                    <div class="control">
                                        <input class="input" name="kode_komponen" type="text"
                                            placeholder="Kode Komponen"
                                            value="{{ old('kode_komponen', @$data->kode_komponen) }}">

                                    </div>
                                    @error('kode_komponen')
                                        <p class="help is-danger text-red-500">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <div class="w-full md:w-1/2">
                            <div class="field">
                                <label class="label">Nama Komponen</label>
                                <div class="field-body">
                                    <div class="control">
                                        <input class="input" name="nama_komponen" type="text"
                                            placeholder="Nama Komponen"
                                            value="{{ old('nama_komponen', @$data->nama_komponen) }}">

                                    </div>
                                    @error('nama_komponen')
                                        <p class="help is-danger text-red-500">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                        </div>


                    </div>
                    <div class="w-full">
                        <hr>
                        <div class="field grouped">
                            <div class="control">
                                <button type="submit" class="button green">
                                    Submit
                                </button>
                            </div>
                            <div class="control">
                                <button type="reset" class="button red">
                                    Reset
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </section>
            <footer class="modal-card-foot">
                <button class="button --modal-close">Cancel</button>
            </footer>

        </div>
    </div>

    <div id="modal-akun" class="modal" data-form="">
        <div class="modal-background --modal-delete-close"></div>
        <div class="modal-card">
            <header class="modal-card-head">
                <p class="modal-card-title" id="form-akun-title">Tambah Akun</p>
            </header>
            <section class="modal-card-body">
                <form action="{{ route('komponen-akun.store') }}" method="POST">
                    @csrf
                    <ul class="mb-6">
                        <li class="font-bold">Kode Komponen : <span id="kode_komponen"></span></li>
                        <li class="font-bold">Nama Komponen : <span id="nama_komponen"></span></li>
                    </ul>
                    <hr>
                    <input type="hidden" id="komponen_id" name="komponen_id">
                    <div>
                        <table id="table-akun">
                            <thead>
                                <tr>
                                    <th class="checkbox-cell" data-sortable="false">
                                        {{-- <label class="checkbox">
                                            <input type="checkbox" id="check-data-all">
                                            <span class="check"></span>
                                        </label> --}}
                                    </th>
                                    <th>Kode Akun</th>
                                    <th>Nama Akun</th>

                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($akuns as $akun)
                                    <tr>
                                        <td class="checkbox-cell">
                                            <label class="checkbox check-data" data-id="{{ $akun->id }}">
                                                <input type="checkbox" name="akun_id[]" value="{{ $akun->id }}">
                                                <span class="check"></span>
                                            </label>
                                        </td>
                                        <td data-label="City">
                                            {{ $akun->kode_akun }}
                                        </td>
                                        <td data-label="City">
                                            {{ $akun->nama_akun }}
                                        </td>



                                    </tr>
                                @endforeach

                            </tbody>
                        </table>
                    </div>

                    <div class="w-full">
                        <hr>
                        <div class="field grouped">
                            <div class="control">
                                <button type="submit" class="button green">
                                    Submit
                                </button>
                            </div>
                            <div class="control">
                                <button type="reset" class="button red">
                                    Reset
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </section>
            <footer class="modal-card-foot">
                <button class="button --modal-close">Cancel</button>
            </footer>

        </div>
    </div>

    <div id="modal-detail" class="modal" data-form="">
        <div class="modal-background --modal-delete-close"></div>
        <div class="modal-card">
            <header class="modal-card-head">
                <p class="modal-card-title" id="form-detail-title">Tambah Komponen</p>
            </header>
            <section class="modal-card-body">
                <form action="{{ route('komponen-akun-detail.store') }}" method="POST">
                    @csrf
                    <ul class="mb-6">
                        <li class="font-bold">Kode Akun : <span id="kode_akun"></span></li>
                        <li class="font-bold">Nama Akun : <span id="nama_akun"></span></li>
                    </ul>
                    <hr>
                    <input type="hidden" id="komponen_akun_id" name="komponen_akun_id">
                    <div class="w-full grid grid-cols-2 gap-4 mb-6">
                        <div class="w-full ">
                            <div class="field">
                                <label class="label">Nilai</label>
                                <div class="field-body">
                                    <div class="control">
                                        <input class="input" name="nilai" type="number"
                                            placeholder="Nilai"
                                            value="{{ old('nilai', @$data->nilai) }}">

                                    </div>
                                    @error('nilai')
                                        <p class="help is-danger text-red-500">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <div class="w-full ">
                            <div class="field">
                                <label class="label">Satuan</label>
                                <div class="field-body">
                                    <div class="control">
                                        <input class="input" name="satuan" type="text"
                                            placeholder="Satuan"
                                            value="{{ old('satuan', @$data->satuan) }}">

                                    </div>
                                    @error('satuan')
                                        <p class="help is-danger text-red-500">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="w-full ">
                            <div class="field">
                                <label class="label">Harga Satuan</label>
                                <div class="field-body">
                                    <div class="control">
                                        <input class="input" name="harga_satuan" type="number"
                                            placeholder="Harga Satuan"
                                            value="{{ old('harga_satuan', @$data->harga_satuan) }}">

                                    </div>
                                    @error('harga_satuan')
                                        <p class="help is-danger text-red-500">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="w-full ">
                            <div class="field">
                                <label class="label">Keterangan</label>
                                <div class="field-body">
                                    <div class="control">
                                        <input class="input" name="keterangan" type="text"
                                            placeholder="Keterangan"
                                            value="{{ old('keterangan', @$data->keterangan) }}">

                                    </div>
                                    @error('keterangan')
                                        <p class="help is-danger text-red-500">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                        </div>


                    </div>
                    
                    <div class="w-full">
                        <hr>
                        <div class="field grouped">
                            <div class="control">
                                <button type="submit" class="button green">
                                    Submit
                                </button>
                            </div>
                            <div class="control">
                                <button type="reset" class="button red">
                                    Reset
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </section>
            <footer class="modal-card-foot">
                <button class="button --modal-close">Cancel</button>
            </footer>

        </div>
    </div>
@endpush

@section('content')
    <section class="section main-section">
        <div class="card  mb-6">
            <header class="card-header">
                <p class="card-header-title">
                    <span class="icon"><i class="mdi mdi-account-multiple"></i></span>
                    Detail RKAS
                </p>

            </header>
            <div class="card-content">
                <table>
                    <thead>
                        <tr>
                            <th>
                                Kode/Akun
                            </th>
                            <th>
                                Uraian
                            </th>
                            <th>
                                Nilai
                            </th>
                            <th>
                                Satuan
                            </th>
                            <th>
                                Harga Satuan
                            </th>
                            <th>
                                Jumlah
                            </th>
                            <th>
                                Aksi
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="text-red-500">
                            <td>
                                A
                            </td>
                            <td>
                                PENDAPATAN
                            </td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>{{ number_format($pendapatans->sum('jumlah')) }}</td>
                            <td></td>
                        </tr>
                        @foreach ($pendapatans as $kegiatan)
                            <tr>
                                <td style="padding-left:50px;">
                                    {{ $kegiatan->kode_kegiatan }}
                                </td>
                                <td>
                                    {{ $kegiatan->nama_kegiatan }}
                                </td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td>{{ number_format($kegiatan->jumlah) }}</td>
                                <td>
                                    <button class="--modal add-komponen" data-id="{{ $kegiatan->id }}"
                                        data-kode="{{ $kegiatan->kode_kegiatan }}"
                                        data-nama="{{ $kegiatan->nama_kegiatan }}" data-target="modal-komponen"><span
                                            class="iconify" data-icon="mdi-file-document-plus"></span></button>

                                </td>
                            </tr>
                            @foreach ($kegiatan->komponens as $komponen)
                                <tr>
                                    <td style="padding-left:100px;">
                                        {{ $komponen->kode_komponen }}
                                    </td>
                                    <td>
                                        {{ $komponen->nama_komponen }}
                                    </td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td>{{ number_format($komponen->jumlah) }}</td>
                                    <td>
                                        <button class="--modal add-akun" data-target="modal-akun"
                                            data-id="{{ $komponen->id }}" data-kode="{{ $komponen->kode_komponen }}"
                                            data-nama="{{ $komponen->nama_komponen }}"><span class="iconify"
                                                data-icon="mdi-file-document-plus"></span></button>
                                        <button class="--modal edit-komponen" data-edit="{{ json_encode($komponen) }}"
                                            data-id="{{ $kegiatan->id }}" data-kode="{{ $kegiatan->kode_kegiatan }}"
                                            data-nama="{{ $kegiatan->nama_kegiatan }}" data-target="modal-komponen"><span
                                                class="iconify" data-icon="mdi-file-document-edit"></span></button>
                                        <button class="--modal-delete" data-form="delete-komponen-{{ $komponen->id }}"
                                            data-target="modal-delete" type="button">
                                            <span class="iconify" data-icon="mdi-trash-can"></span>
                                        </button>
                                        <form action="{{ route('komponen.destroy', $komponen->id) }}" method="POST"
                                            id="delete-komponen-{{ $komponen->id }}">
                                            @csrf
                                            @method('DELETE')
                                        </form>
                                    </td>
                                </tr>
                                @foreach ($komponen->komponen_akuns as $komponen_akun)
                                    <tr>
                                        <td style="padding-left:150px;">
                                            {{ $komponen_akun->akun->kode_akun }}
                                        </td>
                                        <td>
                                            {{ $komponen_akun->akun->nama_akun }}
                                        </td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td>{{ number_format($komponen_akun->jumlah) }}</td>
                                        <td>
                                            <button class="--modal add-detail" data-target="modal-detail"
                                            data-id="{{ $komponen_akun->id }}" 
                                            data-kode="{{ $komponen_akun->akun->kode_akun }}"
                                            data-nama="{{ $komponen_akun->akun->nama_akun }}"
                                               ><span class="iconify"
                                                    data-icon="mdi-file-document-plus"></span></button>
                                            <button class="--modal edit-akun"
                                                data-edit="{{ json_encode($komponen_akun) }}"
                                                data-id="{{ $komponen->id }}" 
                                                data-kode="{{ $komponen->kode_komponen }}"
                                                data-nama="{{ $komponen->nama_komponen }}"
                                                data-target="modal-akun"><span class="iconify"
                                                    data-icon="mdi-file-document-edit"></span></button>
                                            <button class="--modal-delete"
                                                data-form="delete-akun-{{ $komponen_akun->id }}"
                                                data-target="modal-delete" type="button">
                                                <span class="iconify" data-icon="mdi-trash-can"></span>
                                            </button>
                                            <form action="{{ route('komponen-akun.destroy', $komponen_akun->id) }}" method="POST"
                                                id="delete-akun-{{ $komponen_akun->id }}">
                                                @csrf
                                                @method('DELETE')
                                            </form>
                                        </td>
                                    </tr>
                                    @foreach ($komponen_akun->komponen_akun_details as $detail)
                                    <tr>
                                        <td style="padding-left:200px;">
                                            
                                        </td>
                                        <td>
                                            {{ $detail->keterangan }}
                                        </td>
                                        <td>{{ $detail->nilai }}</td>
                                        <td>{{ $detail->satuan }}</td>
                                        <td>{{ number_format($detail->harga_satuan) }}</td>
                                        <td>{{ number_format($detail->jumlah) }}</td>
                                        <td>
                                            
                                            <button class="--modal edit-detail"
                                                data-edit="{{ json_encode($detail) }}"
                                                data-id="{{ $detail->id }}" 
                                                data-kode="{{ $komponen->kode_komponen }}"
                                                data-nama="{{ $komponen->nama_komponen }}"
                                                data-target="modal-detail"><span class="iconify"
                                                    data-icon="mdi-file-document-edit"></span></button>
                                            <button class="--modal-delete"
                                                data-form="delete-detail-{{ $detail->id }}"
                                                data-target="modal-delete" type="button">
                                                <span class="iconify" data-icon="mdi-trash-can"></span>
                                            </button>
                                            <form action="{{ route('komponen-akun-detail.destroy', $detail->id) }}" method="POST"
                                                id="delete-detail-{{ $detail->id }}">
                                                @csrf
                                                @method('DELETE')
                                            </form>
                                        </td>
                                    </tr>
                                @endforeach
                                @endforeach
                            @endforeach
                        @endforeach
                        <tr class="text-red-500">
                            <td>
                                B
                            </td>
                            <td>
                                BELANJA
                            </td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>{{ number_format($belanjas->sum('jumlah')) }}</td>
                            <td></td>
                        </tr>
                        @foreach ($belanjas as $kegiatan)
                            <tr>
                                <td style="padding-left:50px;">
                                    {{ $kegiatan->kode_kegiatan }}
                                </td>
                                <td>
                                    {{ $kegiatan->nama_kegiatan }}
                                </td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td>{{ number_format($kegiatan->jumlah) }}</td>
                                <td>
                                    <button class="--modal add-komponen" data-id="{{ $kegiatan->id }}"
                                        data-kode="{{ $kegiatan->kode_kegiatan }}"
                                        data-nama="{{ $kegiatan->nama_kegiatan }}" data-target="modal-komponen"><span
                                            class="iconify" data-icon="mdi-file-document-plus"></span></button>

                                </td>
                            </tr>
                            @foreach ($kegiatan->komponens as $komponen)
                                <tr>
                                    <td style="padding-left:100px;">
                                        {{ $komponen->kode_komponen }}
                                    </td>
                                    <td>
                                        {{ $komponen->nama_komponen }}
                                    </td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td>{{ number_format($komponen->jumlah) }}</td>
                                    <td>
                                        <button class="--modal add-akun" data-target="modal-akun"
                                            data-id="{{ $komponen->id }}" data-kode="{{ $komponen->kode_komponen }}"
                                            data-nama="{{ $komponen->nama_komponen }}"><span class="iconify"
                                                data-icon="mdi-file-document-plus"></span></button>
                                        <button class="--modal edit-komponen" data-edit="{{ json_encode($komponen) }}"
                                            data-id="{{ $kegiatan->id }}" data-kode="{{ $kegiatan->kode_kegiatan }}"
                                            data-nama="{{ $kegiatan->nama_kegiatan }}" data-target="modal-komponen"><span
                                                class="iconify" data-icon="mdi-file-document-edit"></span></button>
                                        <button class="--modal-delete" data-form="delete-komponen-{{ $komponen->id }}"
                                            data-target="modal-delete" type="button">
                                            <span class="iconify" data-icon="mdi-trash-can"></span>
                                        </button>
                                        <form action="{{ route('komponen.destroy', $komponen->id) }}" method="POST"
                                            id="delete-komponen-{{ $komponen->id }}">
                                            @csrf
                                            @method('DELETE')
                                        </form>
                                    </td>
                                </tr>
                                @foreach ($komponen->komponen_akuns as $komponen_akun)
                                    <tr>
                                        <td style="padding-left:150px;">
                                            {{ $komponen_akun->akun->kode_akun }}
                                        </td>
                                        <td>
                                            {{ $komponen_akun->akun->nama_akun }}
                                        </td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td>{{ number_format($komponen_akun->jumlah) }}</td>
                                        <td>
                                            <button class="--modal add-detail" data-target="modal-detail"
                                            data-id="{{ $komponen_akun->id }}" 
                                            data-kode="{{ $komponen_akun->akun->kode_akun }}"
                                            data-nama="{{ $komponen_akun->akun->nama_akun }}"
                                               ><span class="iconify"
                                                    data-icon="mdi-file-document-plus"></span></button>
                                            <button class="--modal edit-akun"
                                                data-edit="{{ json_encode($komponen_akun) }}"
                                                data-id="{{ $komponen->id }}" 
                                                data-kode="{{ $komponen->kode_komponen }}"
                                                data-nama="{{ $komponen->nama_komponen }}"
                                                data-target="modal-akun"><span class="iconify"
                                                    data-icon="mdi-file-document-edit"></span></button>
                                            <button class="--modal-delete"
                                                data-form="delete-akun-{{ $komponen_akun->id }}"
                                                data-target="modal-delete" type="button">
                                                <span class="iconify" data-icon="mdi-trash-can"></span>
                                            </button>
                                            <form action="{{ route('komponen-akun.destroy', $komponen_akun->id) }}" method="POST"
                                                id="delete-akun-{{ $komponen_akun->id }}">
                                                @csrf
                                                @method('DELETE')
                                            </form>
                                        </td>
                                    </tr>
                                    @foreach ($komponen_akun->komponen_akun_details as $detail)
                                        <tr>
                                            <td style="padding-left:200px;">
                                                
                                            </td>
                                            <td>
                                                {{ $detail->keterangan }}
                                            </td>
                                            <td>{{ $detail->nilai }}</td>
                                            <td>{{ $detail->satuan }}</td>
                                            <td>{{ number_format($detail->harga_satuan) }}</td>
                                            <td>{{ number_format($detail->jumlah) }}</td>
                                            <td>
                                                
                                                <button class="--modal edit-detail"
                                                    data-edit="{{ json_encode($detail) }}"
                                                    data-id="{{ $detail->id }}" 
                                                    data-kode="{{ $komponen->kode_komponen }}"
                                                    data-nama="{{ $komponen->nama_komponen }}"
                                                    data-target="modal-detail"><span class="iconify"
                                                        data-icon="mdi-file-document-edit"></span></button>
                                                <button class="--modal-delete"
                                                    data-form="delete-detail-{{ $detail->id }}"
                                                    data-target="modal-delete" type="button">
                                                    <span class="iconify" data-icon="mdi-trash-can"></span>
                                                </button>
                                                <form action="{{ route('komponen-akun-detail.destroy', $detail->id) }}" method="POST"
                                                    id="delete-detail-{{ $detail->id }}">
                                                    @csrf
                                                    @method('DELETE')
                                                </form>
                                            </td>
                                        </tr>
                                    @endforeach
                                @endforeach
                            @endforeach
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </section>
@endsection