@extends('layout.dashboard.index')

@section('content')
    <div class="container-fluid">
        <div class="card">
            <div class="card-header border-0 pt-6">
                <div class="card-title">
                    <h2>Rancangan Anggaran</h2>
                </div>

                <div class="card-toolbar">
                    <div class="d-flex gap-4 justify-content-end" data-kt-user-table-toolbar="base">
                        <div class="d-flex align-items-center position-relative my-1">
                            <span class="svg-icon svg-icon-1 position-absolute ms-6">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                    fill="none">
                                    <rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546" height="2"
                                        rx="1" transform="rotate(45 17.0365 15.1223)" fill="black"></rect>
                                    <path
                                        d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z"
                                        fill="black"></path>
                                </svg>
                            </span>
                            <input type="text" id="searchTable"
                                data-kt-user-table-filter="search"class="form-control form-control-solid ps-14" style="width: 400px"
                                placeholder="Cari data departemen dan aktivitas" />
                        </div>
                        @if (Auth::user()->role->code !== 'OTH' && Auth::user()->role->code !== 'SLS')
                            <select name="filterDivision" id="filterDivision" class="form-select form-select-solid w-200px">
                                <option value="">Pilih Departemen</option>
                            </select>
                        @endif
                        <select name="filterYear" id="filterYear" class="form-select form-select-solid w-150px">
                            <option value="">Pilih Tahun</option>
                            @for ($year = date('Y'); $year >= date('Y') - 2; $year--)
                                <option value="{{ $year }}">{{ $year }}</option>
                            @endfor
                        </select>
                        @if (Auth::user()->role->code !== 'OTH' && Auth::user()->role->code !== 'SLS' && Auth::user()->role->code !== 'TMP')
                            <button class="btn btn-icon btn-bg-light btn-active-color-primary" data-kt-menu-trigger="click"
                                data-kt-menu-placement="bottom-end">
                                <i class="bi bi-three-dots fs-3"></i>
                            </button>
                            <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-bold w-200px py-3"
                                data-kt-menu="true" style="">
                                <div class="menu-item px-3">
                                    <div class="menu-content text-muted pb-2 px-3 fs-7 text-uppercase">Menu Detail</div>
                                </div>
                                <div class="menu-item px-3">
                                    <a href="javascript:void(0)" class="menu-link px-3" data-bs-toggle="modal"
                                        data-bs-target="#addModal">Tambah Data</a>
                                </div>
                                <div class="menu-item px-3">
                                    <a href="javascript:void(0)" class="menu-link px-3" data-bs-toggle="modal"
                                        data-bs-target="#uploadModal">Unggah Data</a>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div id="kt_table_users_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer">
                    <div class="table-responsive">
                        <div id="custom-loading"
                            class="position-absolute top-0 start-0 w-100 h-100 
                                d-flex justify-content-center align-items-center"
                            style="background: rgba(255,255,255,0.8); z-index: 10;">

                            <div class="text-center">
                                <div class="spinner-border text-primary" style="width:1rem;height:1rem;"></div>
                                <div class="mt-3 fw-semibold text-gray-700">
                                    Memuat data...
                                </div>
                            </div>
                        </div>
                        <table class="table align-middle table-row-dashed fs-6 gy-5 dataTable no-footer" id="table">
                            <!--begin::Table head-->
                            <thead>
                                <tr class="">
                                    <th>Tahun</th>
                                    <th>Departemen</th>
                                    <th>Aktivitas</th>
                                    <th>Deskripsi</th>

                                    <th>Jan</th>
                                    <th>Feb</th>
                                    <th>Mar</th>
                                    <th>Q1</th>

                                    <th>Apr</th>
                                    <th>Mei</th>
                                    <th>Jun</th>
                                    <th>Q2</th>

                                    <th>Jul</th>
                                    <th>Agu</th>
                                    <th>Sep</th>
                                    <th>Q3</th>

                                    <th>Okt</th>
                                    <th>Nov</th>
                                    <th>Des</th>
                                    <th>Q4</th>

                                    <th>Total</th>

                                    <th>Aksi</th>
                                </tr>
                            </thead>
                            <tbody class="text-gray-600 fw-bold">

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="addModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered mw-650px">
                <div class="modal-content rounded">
                    <div class="modal-header pb-0 border-0 justify-content-end">
                        <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                            <span class="svg-icon svg-icon-1">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                    fill="none">
                                    <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1"
                                        transform="rotate(-45 6 17.3137)" fill="black" />
                                    <rect x="7.41422" y="6" width="16" height="2" rx="1"
                                        transform="rotate(45 7.41422 6)" fill="black" />
                                </svg>
                            </span>
                        </div>
                    </div>
                    <div class="modal-body scroll-y px-10 px-lg-15 pt-0 pb-15">
                        {{-- <img src="assets/media/illustrations/sketchy-1/18.png" alt=""
                            style="width: 100%; height: 100%">
                        <p class="text-center my-3 fs-3">Fitur akan segera tersedia</p> --}}
                        <form id="formEdit" class="form" action="#">
                            <div class="mb-13">
                                <h1 class="mb-3">Tambah Rancangan Anggaran</h1>
                                <div class="text-muted fw-bold fs-5">Tambah rancangan anggaran untuk deoartemen anda.
                                </div>
                            </div>
                            {{-- @if (Auth::user()->role->code !== 'OTH' && Auth::user()->role->code !== 'SLS')
                                <div class="row mb-3">
                                    <div class="col-md-12">
                                        <label class="form-label">Division <span class="text-danger">*</span></label>
                                        <select class="form-select form-select-solid" id="editDivision"
                                            name="editDivision">
                                            <option value="">Pilih Divisi</option>
                                        </select>
                                    </div>
                                </div>
                            @endif --}}
                            
                            <div class="row mb-3">
                                <div class="col-4">
                                    <label class="form-label">Kode COA <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control form-control-solid" id="coa_code"
                                        name="coa_code" placeholder="Masukkan Kode COA" oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                                </div>
                                <div class="col-8">
                                    <label class="form-label">Nama COA <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control form-control-solid" id="coa_name"
                                        name="coa_name" placeholder="Masukkan Nama COA">
                                </div>
                            </div>

                            <!-- Activity -->
                            <div class="mb-3">
                                <label class="form-label">Aktivitas <span class="text-danger">*</span></label>
                                <input type="text" class="form-control form-control-solid" id="activity"
                                    name="activity" placeholder="Contoh : AWS Cloud Services">
                            </div>

                            <!-- Description -->
                            <div class="mb-4">
                                <label class="form-label">Deskripsi</label>
                                <textarea class="form-control form-control-solid" id="description" name="description" rows="3"
                                    placeholder="Deskripsi aktivitas"></textarea>
                            </div>

                            <!-- Monthly Budget -->
                            <h6 class="fw-bold mb-3">Rancangan Anggaran Bulanan</h6>
                            <div class="row g-3">
                                <!-- Loop 12 bulan -->
                                <div class="col-md-4">
                                    <label class="form-label">Jan</label>
                                    <input type="text" id="jan" name="jan"
                                        class="form-control form-control-solid" value="0"
                                        oninput="this.value = this.value.replace(/[^0-9.]/g, '')">
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">Feb</label>
                                    <input type="text" id="feb" name="feb"
                                        class="form-control form-control-solid" value="0"
                                        oninput="this.value = this.value.replace(/[^0-9.]/g, '')">
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">Mar</label>
                                    <input type="text" id="mar" name="mar"
                                        class="form-control form-control-solid" value="0"
                                        oninput="this.value = this.value.replace(/[^0-9.]/g, '')">
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">Apr</label>
                                    <input type="text" id="apr" name="apr"
                                        class="form-control form-control-solid" value="0"
                                        oninput="this.value = this.value.replace(/[^0-9.]/g, '')">
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">Mei</label>
                                    <input type="text" id="mei" name="mei"
                                        class="form-control form-control-solid" value="0"
                                        oninput="this.value = this.value.replace(/[^0-9.]/g, '')">
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">Jun</label>
                                    <input type="text" id="jun" name="jun"
                                        class="form-control form-control-solid" value="0"
                                        oninput="this.value = this.value.replace(/[^0-9.]/g, '')">
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">Jul</label>
                                    <input type="text" id="jul" name="jul"
                                        class="form-control form-control-solid" value="0"
                                        oninput="this.value = this.value.replace(/[^0-9.]/g, '')">
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">Agu</label>
                                    <input type="text" id="agu" name="agu"
                                        class="form-control form-control-solid" value="0"
                                        oninput="this.value = this.value.replace(/[^0-9.]/g, '')">
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">Sep</label>
                                    <input type="text" id="sep" name="sep"
                                        class="form-control form-control-solid" value="0"
                                        oninput="this.value = this.value.replace(/[^0-9.]/g, '')">
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">Okt</label>
                                    <input type="text" id="okt" name="okt"
                                        class="form-control form-control-solid" value="0"
                                        oninput="this.value = this.value.replace(/[^0-9.]/g, '')">
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">Nov</label>
                                    <input type="text" id="nov" name="nov"
                                        class="form-control form-control-solid" value="0"
                                        oninput="this.value = this.value.replace(/[^0-9.]/g, '')">
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">Des</label>
                                    <input type="text" id="des" name="des"
                                        class="form-control form-control-solid" value="0"
                                        oninput="this.value = this.value.replace(/[^0-9.]/g, '')">
                                </div>

                            </div>

                            <!-- Buttons -->
                            <div class="d-flex justify-content-end gap-2 mt-5">
                                <button type="submit" id="buttonSave" class="btn btn-primary">
                                    <span class="indicator-label">Simpan</span>
                                    <span class="indicator-progress">Please wait...
                                        <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="uploadModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered mw-650px">
                <div class="modal-content rounded">
                    <div class="modal-header pb-0 border-0 justify-content-end">
                        <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                            <span class="svg-icon svg-icon-1">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                    viewBox="0 0 24 24" fill="none">
                                    <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1"
                                        transform="rotate(-45 6 17.3137)" fill="black" />
                                    <rect x="7.41422" y="6" width="16" height="2" rx="1"
                                        transform="rotate(45 7.41422 6)" fill="black" />
                                </svg>
                            </span>
                        </div>
                    </div>
                    <div class="modal-body scroll-y px-10 px-lg-15 pt-0 pb-15">
                        <form id="formUpload" class="formUpload" action="#" enctype="multipart/form-data">
                            <div class="mb-7">
                                <h1 class="mb-3">Unggah Rancangan Anggaran</h1>
                                <div class="text-muted fw-mdeium fs-5">Unggah file rancangan anggaran anda untuk
                                    mempermudah proses
                                    pendataan.</div>
                            </div>
                            <p class="mb-2">Silahkan unduh contoh file anggaran yang benar!</p>
                            <a href="{{ asset('assets/file/template_anggaran.xlsx') }}" download="contoh-anggaran.xlsx"
                                class="btn btn-sm btn-secondary d-flex gap-3 flex-row w-25 my-auto">
                                <i class="bi bi-download fs-3"></i>
                                Unduh File
                            </a>
                            <div class="upload-box my-5" onclick="document.getElementById('fileInput').click()">
                                <i class="bi bi-cloud-arrow-up" style="font-size: 75pt"></i>
                                <h6 class="fw-semibold">Pilih file excel</h6>
                                <small class="text-muted">Support .xlsx and .xls files</small>

                                <input type="file" id="fileInput" name="fileInput" accept=".xls,.xlsx">
                                <div class="file-name" id="fileName"></div>
                            </div>
                            <div class="notes-box p-5 mb-8">
                                <p class="fw-bold">Catatan :</p>
                                <ul class="mb-0 ps-3">
                                    <li>Silahkan unduh contoh file anggaran terlebih dahulu</li>
                                    <li>File harus dalam format .xlsx atau .xls</li>
                                </ul>
                            </div>
                            <div class="text-end">
                                <button type="submit" id="buttonCheckExisting" class="btn btn-primary">
                                    <span class="indicator-label">Unggah File</span>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="editModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered mw-650px">
                <div class="modal-content rounded">
                    <div class="modal-header pb-0 border-0 justify-content-end">
                        <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                            <span class="svg-icon svg-icon-1">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                    viewBox="0 0 24 24" fill="none">
                                    <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1"
                                        transform="rotate(-45 6 17.3137)" fill="black" />
                                    <rect x="7.41422" y="6" width="16" height="2" rx="1"
                                        transform="rotate(45 7.41422 6)" fill="black" />
                                </svg>
                            </span>
                        </div>
                    </div>
                    <div class="modal-body scroll-y px-10 px-lg-15 pt-0 pb-15">
                        <form id="formEdit" class="form" action="#">
                            <div class="mb-13">
                                <h1 class="mb-3">Ubah Rancangan Anggaran</h1>
                                <div class="text-muted fw-bold fs-5">Ubah rancangan anggaran untuk departemen anda.
                                </div>
                            </div>
                            <input type="hidden" id="editID">
                            {{-- @if (Auth::user()->role->code !== 'OTH' && Auth::user()->role->code !== 'SLS')
                                <div class="row mb-3">
                                    <div class="col-md-12">
                                        <label class="form-label">Division <span class="text-danger">*</span></label>
                                        <select class="form-select form-select-solid" id="editDivision"
                                            name="editDivision">
                                            <option value="">Pilih Divisi</option>
                                        </select>
                                    </div>
                                </div>
                            @endif --}}
                            <div class="row mb-3">
                                <div class="col-4">
                                    <label class="form-label">Kode COA <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control form-control-solid" id="editCoaCode"
                                        name="editCoaCode" placeholder="Masukkan Kode COA" oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                                </div>
                                <div class="col-8">
                                    <label class="form-label">Nama COA <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control form-control-solid" id="editCoaName"
                                        name="editCoaName" placeholder="Masukkan Nama COA">
                                </div>
                            </div>

                            <!-- Activity -->
                            <div class="mb-3">
                                <label class="form-label">Aktivitas <span class="text-danger">*</span></label>
                                <input type="text" class="form-control form-control-solid" id="editActivity"
                                    name="editActivity" placeholder="Contoh : AWS Cloud Services">
                            </div>

                            <!-- Description -->
                            <div class="mb-4">
                                <label class="form-label">Deskripsi</label>
                                <textarea class="form-control form-control-solid" id="editDescription" name="editDescription" rows="3"
                                    placeholder="Deskripsi aktivitas"></textarea>
                            </div>

                            <!-- Monthly Budget -->
                            <h6 class="fw-bold mb-3">Rancangan Anggaran Bulanan</h6>
                            <div class="row g-3">
                                <!-- Loop 12 bulan -->
                                <div class="col-md-4">
                                    <label class="form-label">Jan</label>
                                    <input type="text" id="editJan" name="editJan"
                                        class="form-control form-control-solid" value="0"
                                        oninput="this.value = this.value.replace(/[^0-9.]/g, '')">
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">Feb</label>
                                    <input type="text" id="editFeb" name="editFeb"
                                        class="form-control form-control-solid" value="0"
                                        oninput="this.value = this.value.replace(/[^0-9.]/g, '')">
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">Mar</label>
                                    <input type="text" id="editMar" name="editMar"
                                        class="form-control form-control-solid" value="0"
                                        oninput="this.value = this.value.replace(/[^0-9.]/g, '')">
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">Apr</label>
                                    <input type="text" id="editApr" name="editApr"
                                        class="form-control form-control-solid" value="0"
                                        oninput="this.value = this.value.replace(/[^0-9.]/g, '')">
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">Mei</label>
                                    <input type="text" id="editMei" name="editMei"
                                        class="form-control form-control-solid" value="0"
                                        oninput="this.value = this.value.replace(/[^0-9.]/g, '')">
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">Jun</label>
                                    <input type="text" id="editJun" name="editJun"
                                        class="form-control form-control-solid" value="0"
                                        oninput="this.value = this.value.replace(/[^0-9.]/g, '')">
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">Jul</label>
                                    <input type="text" id="editJul" name="editJul"
                                        class="form-control form-control-solid" value="0"
                                        oninput="this.value = this.value.replace(/[^0-9.]/g, '')">
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">Agu</label>
                                    <input type="text" id="editAgu" name="editAgu"
                                        class="form-control form-control-solid" value="0"
                                        oninput="this.value = this.value.replace(/[^0-9.]/g, '')">
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">Sep</label>
                                    <input type="text" id="editSep" name="editSep"
                                        class="form-control form-control-solid" value="0"
                                        oninput="this.value = this.value.replace(/[^0-9.]/g, '')">
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">Okt</label>
                                    <input type="text" id="editOkt" name="editOkt"
                                        class="form-control form-control-solid" value="0"
                                        oninput="this.value = this.value.replace(/[^0-9.]/g, '')">
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">Nov</label>
                                    <input type="text" id="editNov" name="editNov"
                                        class="form-control form-control-solid" value="0"
                                        oninput="this.value = this.value.replace(/[^0-9.]/g, '')">
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">Des</label>
                                    <input type="text" id="editDes" name="editDes"
                                        class="form-control form-control-solid" value="0"
                                        oninput="this.value = this.value.replace(/[^0-9.]/g, '')">
                                </div>

                            </div>

                            <!-- Buttons -->
                            <div class="d-flex justify-content-end gap-2 mt-5">
                                <button type="submit" id="buttonUpdate" class="btn btn-primary">
                                    <span class="indicator-label">Simpan</span>
                                    <span class="indicator-progress">Please wait...
                                        <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function() {
            const fileInput = document.getElementById('fileInput');
            const fileName = document.getElementById('fileName');

            fileInput.addEventListener('change', function() {
                if (this.files.length > 0) {
                    fileName.textContent = "File terpilih : " + this.files[0].name;
                }
            });

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            let table = $('#table').DataTable({
                processing: false,
                serverSide: true,
                dom: 'rtip',
                scrollX: true,
                language: {
                    processing: `...`
                },
                ajax: {
                    url: "{{ route('budget.datatable') }}",
                    data: function(d) {
                        d.year = $('#filterYear').val();
                        d.division = $('#filterDivision').val();
                    }
                },
                fixedColumns: {
                    leftColumns: 2, // kolom index 0 dan 1
                    rightColumns: 1 // kolom index 0 dan 1
                },
                columns: [{
                        data: 'year',
                        name: 'year'
                    },
                    {
                        data: 'division',
                        name: 'division'
                    },
                    {
                        data: 'item_name',
                        name: 'item_name'
                    },
                    {
                        data: 'description',
                        name: 'description'
                    },
                    {
                        data: 'jan',
                        name: 'jan',
                        searchable: false
                    },
                    {
                        data: 'feb',
                        name: 'feb',
                        searchable: false
                    },
                    {
                        data: 'mar',
                        name: 'mar',
                        searchable: false
                    },
                    {
                        data: 'q1',
                        name: 'q1',
                        searchable: false
                    },
                    {
                        data: 'apr',
                        name: 'apr',
                        searchable: false
                    },
                    {
                        data: 'may',
                        name: 'may',
                        searchable: false
                    },
                    {
                        data: 'jun',
                        name: 'jun',
                        searchable: false
                    },
                    {
                        data: 'q2',
                        name: 'q2',
                        searchable: false
                    },
                    {
                        data: 'jul',
                        name: 'jul',
                        searchable: false
                    },
                    {
                        data: 'aug',
                        name: 'aug',
                        searchable: false
                    },
                    {
                        data: 'sep',
                        name: 'sep',
                        searchable: false
                    },
                    {
                        data: 'q3',
                        name: 'q3',
                        searchable: false
                    },
                    {
                        data: 'oct',
                        name: 'oct',
                        searchable: false
                    },
                    {
                        data: 'nov',
                        name: 'nov',
                        searchable: false
                    },
                    {
                        data: 'dec',
                        name: 'dec',
                        searchable: false
                    },
                    {
                        data: 'q4',
                        name: 'q4',
                        searchable: false
                    },
                    {
                        data: 'total_budget',
                        name: 'total_budget',
                        searchable: false
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    }
                ],
                columnDefs: [{
                    targets: '_all',
                    className: 'text-nowrap'
                }],
                order: [
                    [1, 'desc']
                ],
                pageLength: 15,
            });

            $.ajax({
                url: '/user/division',
                type: 'GET',
                beforeSend: function() {},
                success: function(response) {
                    if (response.success) {
                        let select = $('#filterDivision');
                        select.empty();
                        select.append('<option value="">Semua Departemen</option>');

                        $.each(response.data, function(index, division) {
                            select.append(
                                '<option value="' + division.id + '">' + division.name +
                                '</option>'
                            );
                        });

                        select.trigger('change');

                        let select2 = $('#editDivision');
                        select2.empty();
                        select2.append('<option value="">Pilih Departemen</option>');

                        $.each(response.data, function(index, division) {
                            select2.append(
                                '<option value="' + division.id + '">' + division.name +
                                '</option>'
                            );
                        });

                        select2.trigger('change');
                    }
                },
                error: function() {
                    showToast('Gagal memuat data divisi', 'danger');
                }
            });

            // Filter change
            $('#filterYear').change(function() {
                table.ajax.reload();
            });
            $('#filterDivision').change(function() {
                table.ajax.reload();
            });

            $('#searchTable').on('keyup', function() {
                table.search(this.value).draw();
            });

            table.on('processing.dt', function(e, settings, processing) {
                if (processing) {
                    $('#custom-loading').removeClass('d-none');
                } else {
                    $('#custom-loading').addClass('d-none');
                }
            });

            $('#buttonCheckExisting').on('click', function(e) {
                e.preventDefault();

                $.ajax({
                    url: "{{ route('budget.check-existing') }}",
                    type: "POST",
                    beforeSend: function() {
                        $('#buttonCheckExisting')
                            .prop('disabled', true)
                            .html(
                                '<span class="spinner-border spinner-border-sm me-2"></span> Mengunggah...'
                            );
                    },
                    success: function(response) {
                        if (response.exists) {
                            Swal.fire({
                                title: 'Data sudah ada',
                                text: 'Rancangan anggaran untuk tahun ini sudah ada. Apakah Anda ingin menimpa data yang ada?',
                                icon: 'warning',
                                showCancelButton: true,
                                confirmButtonColor: '#3085d6',
                                cancelButtonColor: '#d33',
                                confirmButtonText: 'Ya, timpa data!',
                                cancelButtonText: 'Batal'
                            }).then((result) => {
                                if (result.isConfirmed) {
                                    $('#formUpload').submit();
                                }
                            });
                        } else {
                            $('#formUpload').submit();
                        }
                    },
                    error: function() {
                        showToast('Gagal memeriksa data', 'danger');
                    },
                    complete: function() {
                        /*$('#buttonCheckExisting')
                            .prop('disabled', false)
                            .html('<span class="indicator-label">Unggah File</span>'); */
                    }
                });
            });

            $('#formUpload').on('submit', function(e) {
                e.preventDefault();

                let fileInput = $('#fileInput')[0];

                if (!fileInput.files.length) {
                    Swal.fire('Warning!', 'Silakan pilih file terlebih dahulu.', 'warning');
                    return;
                }

                let formData = new FormData();
                formData.append('file', fileInput.files[0]);

                $.ajax({
                    url: "{{ route('budget.import') }}",
                    type: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,

                    beforeSend: function() {
                        $('#buttonUpload')
                            .prop('disabled', true)
                            .html(
                                '<span class="spinner-border spinner-border-sm me-2"></span> Mengunggah...'
                            );
                    },

                    success: function(response) {

                        if (response.success) {

                            $('#formUpload')[0].reset();
                            $('#fileName').html('');

                            var modalEl = document.getElementById('uploadModal');
                            var modal = bootstrap.Modal.getInstance(modalEl);
                            modal.hide();

                            showToast('File berhasil diunggah', 'success');

                            // Reload DataTable kalau ada
                            if ($.fn.DataTable.isDataTable('#table')) {
                                $('#table').DataTable().ajax.reload(null, false);
                            }
                        }
                    },

                    error: function(xhr) {
                        showToast('Gagal mengunggah file', 'danger');
                    },

                    complete: function() {
                        $('#buttonCheckExisting')
                            .prop('disabled', false)
                            .html('<span class="indicator-label">Unggah File</span>');
                        // $('#buttonUpload')
                        //     .prop('disabled', false)
                        //     .html('<span class="indicator-label">Unggah File</span>');
                    }
                });
            });

            $(document).on('click', '#buttonEdit', function(e) {
                e.preventDefault();

                let id = $(this).data('budget');

                $.ajax({
                    url: "{{ route('budget.show') }}",
                    type: 'POST',
                    data: {
                        id: id
                    },
                    beforeSend: function() {},
                    success: function(response) {
                        if (response.success) {
                            console.log(response.data);
                            $('#editID').val(response.data.id);
                            $('#editCoaCode').val(response.data.coa_code);
                            $('#editCoaName').val(response.data.coa_name);
                            $('#editActivity').val(response.data.item_name);
                            $('#editDescription').val(response.data.description);
                            $('#editJan').val(Number(response.data.jan));
                            $('#editFeb').val(Number(response.data.feb));
                            $('#editMar').val(Number(response.data.mar));
                            $('#editApr').val(Number(response.data.apr));
                            $('#editMei').val(Number(response.data.may));
                            $('#editJun').val(Number(response.data.jun));
                            $('#editJul').val(Number(response.data.jul));
                            $('#editAgu').val(Number(response.data.aug));
                            $('#editSep').val(Number(response.data.sep));
                            $('#editOkt').val(Number(response.data.oct));
                            $('#editNov').val(Number(response.data.nov));
                            $('#editDes').val(Number(response.data.dec));

                            let modal = new bootstrap.Modal(document.getElementById(
                                'editModal'));
                            modal.show();
                        }
                    },
                    error: function() {
                        showToast('Data tidak ditemukan', 'danger');
                    }
                });
            });

            $('#buttonUpdate').on('click', function(e) {
                e.preventDefault();

                let id = $('#editID').val();
                let coa_code = $('#editCoaCode').val();
                let coa_name = $('#editCoaName').val();
                let activity = $('#editActivity').val();
                let description = $('#editDescription').val();
                let jan = $('#editJan').val();
                let feb = $('#editFeb').val();
                let mar = $('#editMar').val();
                let apr = $('#editApr').val();
                let may = $('#editMei').val();
                let jun = $('#editJun').val();
                let jul = $('#editJul').val();
                let aug = $('#editAgu').val();
                let sep = $('#editSep').val();
                let oct = $('#editOkt').val();
                let nov = $('#editNov').val();
                let dec = $('#editDes').val();

                $.ajax({
                    url: "{{ route('budget.update') }}",
                    type: 'POST',
                    data: {
                        id: id,
                        coa_code: coa_code,
                        coa_name: coa_name,
                        activity: activity,
                        description: description,
                        jan: jan,
                        feb: feb,
                        mar: mar,
                        apr: apr,
                        may: may,
                        jun: jun,
                        jul: jul,
                        aug: aug,
                        sep: sep,
                        oct: oct,
                        nov: nov,
                        dec: dec
                    },
                    beforeSend: function() {
                        $('#buttonUpdate').prop('disabled', true).text('Menyimpan...');
                    },
                    success: function(response) {
                        if (response.success) {

                            let modal = bootstrap.Modal.getInstance(
                                document.getElementById('editModal')
                            );
                            modal.hide();

                            showToast('Data berhasil dirubah', 'success');
                            $('#table').DataTable().ajax.reload(null, false);
                        }
                    },
                    error: function(xhr) {
                        showToast('Terjadi kesalahan sistem', 'danger');
                    },
                    complete: function() {
                        $('#buttonUpdate').prop('disabled', false).text('Simpan');
                    }
                });
            });

            $('#buttonSave').on('click', function(e) {
                e.preventDefault();

                let activity = $('#activity').val();
                let description = $('#description').val();
                let jan = $('#jan').val();
                let feb = $('#feb').val();
                let mar = $('#mar').val();
                let apr = $('#apr').val();
                let may = $('#mei').val();
                let jun = $('#jun').val();
                let jul = $('#jul').val();
                let aug = $('#agu').val();
                let sep = $('#sep').val();
                let oct = $('#okt').val();
                let nov = $('#nov').val();
                let dec = $('#des').val();

                $.ajax({
                    url: "{{ route('budget.store') }}",
                    type: 'POST',
                    data: {
                        activity: activity,
                        description: description,
                        jan: jan,
                        feb: feb,
                        mar: mar,
                        apr: apr,
                        may: may,
                        jun: jun,
                        jul: jul,
                        aug: aug,
                        sep: sep,
                        oct: oct,
                        nov: nov,
                        dec: dec
                    },
                    beforeSend: function() {
                        $('#buttonUpdate').prop('disabled', true).text('Menyimpan...');
                    },
                    success: function(response) {
                        if (response.success) {

                            let modal = bootstrap.Modal.getInstance(
                                document.getElementById('addModal')
                            );
                            modal.hide();

                            showToast('Data berhasil ditambah', 'success');
                            $('#table').DataTable().ajax.reload(null, false);
                        }
                    },
                    error: function(xhr) {
                        showToast('Terjadi kesalahan sistem', 'danger');
                    },
                    complete: function() {
                        $('#buttonUpdate').prop('disabled', false).text('Simpan');
                    }
                });
            });
        });
    </script>
@endsection