@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>Realisasi 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="">Semua 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>
                        <button type="button" class="btn btn-success btn-active-success-primary" id="exportBtn">
                            <span class="svg-icon svg-icon-2">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                    fill="none">
                                    <rect opacity="0.3" x="12.75" y="4.25" width="12" height="2" rx="1"
                                        transform="rotate(90 12.75 4.25)" fill="black"></rect>
                                    <path
                                        d="M12.0573 6.11875L13.5203 7.87435C13.9121 8.34457 14.6232 8.37683 15.056 7.94401C15.4457 7.5543 15.4641 6.92836 15.0979 6.51643L12.4974 3.59084C12.0996 3.14332 11.4004 3.14332 11.0026 3.59084L8.40206 6.51643C8.0359 6.92836 8.0543 7.5543 8.44401 7.94401C8.87683 8.37683 9.58785 8.34458 9.9797 7.87435L11.4427 6.11875C11.6026 5.92684 11.8974 5.92684 12.0573 6.11875Z"
                                        fill="black"></path>
                                    <path
                                        d="M18.75 8.25H17.75C17.1977 8.25 16.75 8.69772 16.75 9.25C16.75 9.80228 17.1977 10.25 17.75 10.25C18.3023 10.25 18.75 10.6977 18.75 11.25V18.25C18.75 18.8023 18.3023 19.25 17.75 19.25H5.75C5.19772 19.25 4.75 18.8023 4.75 18.25V11.25C4.75 10.6977 5.19771 10.25 5.75 10.25C6.30229 10.25 6.75 9.80228 6.75 9.25C6.75 8.69772 6.30229 8.25 5.75 8.25H4.75C3.64543 8.25 2.75 9.14543 2.75 10.25V19.25C2.75 20.3546 3.64543 21.25 4.75 21.25H18.75C19.8546 21.25 20.75 20.3546 20.75 19.25V10.25C20.75 9.14543 19.8546 8.25 18.75 8.25Z"
                                        fill="#C4C4C4"></path>
                                </svg>
                            </span>Ekspor Data</button>
                        @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 class="menu-item px-3">
                                <a href="javascript:void(0)" class="menu-link px-3" data-bs-toggle="modal"
                                    data-bs-target="#downloadModal">Unduh Data</a>
                            </div> --}}
                            </div>
                        @endif
                    </div>
                </div>
            </div>
            <div class="card-body pt-0">
                <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>
                                <!--begin::Table row-->
                                <tr class="text-start text-muted fw-bolder fs-7 text-uppercase gs-0">
                                    <th class="min-w-125px sorting" tabindex="0" aria-controls="table" rowspan="1"
                                        colspan="1" aria-label="User: activate to sort column ascending"
                                        style="width: 257.672px;">
                                        Tahun</th>
                                    <th class="min-w-125px sorting" tabindex="0" aria-controls="table" rowspan="1"
                                        colspan="1" aria-label="Role: activate to sort column ascending"
                                        style="width: 145.359px;">
                                        Departemen</th>
                                    <th class="min-w-125px sorting" tabindex="0" aria-controls="table" rowspan="1"
                                        colspan="1" aria-label="Role: activate to sort column ascending"
                                        style="width: 145.359px;">
                                        Aktivitas</th>
                                    <th class="min-w-125px sorting" tabindex="0" aria-controls="table" rowspan="1"
                                        colspan="1" aria-label="Role: activate to sort column ascending"
                                        style="width: 145.359px;">
                                        Bulan</th>
                                    <th class="min-w-125px sorting" tabindex="0" aria-controls="table" rowspan="1"
                                        colspan="1" aria-label="Role: activate to sort column ascending"
                                        style="width: 145.359px;">
                                        Nominal</th>
                                    <th class="min-w-125px sorting" tabindex="0" aria-controls="table" rowspan="1"
                                        colspan="1" aria-label="Role: activate to sort column ascending"
                                        style="width: 145.359px;">
                                        Sisa Anggaran</th>
                                    <th>Aksi</th>
                                    {{-- <th class="min-w-125px sorting" tabindex="0" aria-controls="table" rowspan="1"
                                        colspan="1" aria-label="Role: activate to sort column ascending"
                                        style="width: 145.359px;">
                                        Deskripsi</th>
                                    <th class="min-w-125px sorting" tabindex="0" aria-controls="table" rowspan="1"
                                        colspan="1" aria-label="Role: activate to sort column ascending"
                                        style="width: 145.359px;">
                                        Tgl. Input</th> --}}
                                </tr>
                                <!--end::Table row-->
                            </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">
                        <form id="form" class="form" action="#">
                            <div class="mb-13">
                                <h1 class="mb-3">Tambah Realisasi Anggaran</h1>
                                <div class="text-muted fw-bold fs-5">Tambah data realisasi anggaran untuk divisi anda.
                                </div>
                            </div>
                            <div class="d-flex flex-column mb-8 fv-row">
                                <label class="d-flex align-items-center fs-6 fw-bold mb-2">
                                    <span class="required">Tahun</span>
                                    <i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip"
                                        title="Spesifikasi kode untuk referensi divisi"></i>
                                </label>
                                <select name="formYear" id="formYear" class="form-select form-select-solid">
                                    <option value="">Pilih Tahun</option>
                                    @for ($year = date('Y'); $year >= date('Y') - 5; $year--)
                                        <option value="{{ $year }}">{{ $year }}</option>
                                    @endfor
                                </select>
                            </div>
                            @if (Auth::user()->role->code !== 'OTH' && Auth::user()->role->code !== 'SLS')
                                <div class="d-flex flex-column mb-8 fv-row">
                                    <label class="d-flex align-items-center fs-6 fw-bold mb-2">
                                        <span class="required">Departemen</span>
                                        <i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip"
                                            title="Spesifikasi kode untuk referensi departemen"></i>
                                    </label>
                                    <select name="formDivision" id="formDivision" class="form-select form-select-solid">
                                        <option value="">Pilih Departemen</option>
                                    </select>
                                </div>
                            @endif
                            <div class="d-flex flex-column mb-8 fv-row">
                                <label class="d-flex align-items-center fs-6 fw-bold mb-2">
                                    <span class="required">Aktivitas</span>
                                    <i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip"
                                        title="Spesifikasi kode untuk referensi aktivitas"></i>
                                </label>
                                <select name="formActivity" id="formActivity" class="form-select form-select-solid">
                                    <option value="">Pilih Aktivitas</option>
                                </select>
                            </div>
                            <div class="d-flex flex-column mb-8 fv-row">
                                <label class="d-flex align-items-center fs-6 fw-bold mb-2">
                                    <span class="required">Tanggal</span>
                                    <i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip"
                                        title="Spesifikasi tanggal transaksi"></i>
                                </label>
                                <input type="date" class="form-control form-control-solid" id="formDate"
                                    name="formDate" />
                            </div>
                            {{-- <div class="d-flex flex-column mb-8 fv-row">
                                <label class="d-flex align-items-center fs-6 fw-bold mb-2">
                                    <span class="required">Bulan</span>
                                    <i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip"
                                        title="Spesifikasi kode untuk referensi bulan"></i>
                                </label>
                                <select name="formMonth" id="formMonth" class="form-select form-select-solid">
                                    <option value="">Pilih Bulan</option>
                                    @for ($month = 1; $month <= 12; $month++)
                                        <option value="{{ $month }}">
                                            {{ date('M', mktime(0, 0, 0, $month, 1)) }}
                                        </option>
                                    @endfor
                                </select>
                            </div> --}}
                            <div class="d-flex flex-column mb-8 fv-row">
                                <label class="d-flex align-items-center fs-6 fw-bold mb-2">
                                    <span class="required">Nominal</span>
                                    <i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip"
                                        title="Spesifikasi nominal realisasi anggaran"></i>
                                </label>
                                <input type="text" class="form-control form-control-solid" placeholder="0"
                                    id="formNominal" name="formNominal" />
                            </div>
                            <div class="d-flex flex-column mb-8 fv-row">
                                <label class="d-flex align-items-center fs-6 fw-bold mb-2">
                                    <span>Deskripsi</span>
                                    <i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip"
                                        title="Spesifikasi deskripsi realisasi anggaran"></i>
                                </label>
                                <textarea type="text" class="form-control form-control-solid" placeholder="Deskripsi realisasi anggaran"
                                    id="formDescription" name="formDescription" rows="5"></textarea>
                            </div>
                            <div class="text-end">
                                <button type="reset" id="kt_modal_new_target_cancel"
                                    class="btn btn-light me-3">Batal</button>
                                <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 Realisasi Anggaran</h1>
                                <div class="text-muted fw-mdeium fs-5">Unggah file realisasi anggaran anda untuk
                                    mempermudah proses
                                    pendataan.</div>
                            </div>
                            <p class="mb-2">Silahkan unduh file anggaran yang benar!</p>
                            <div class="d-flex flex-column mb-8 fv-row">
                                @if (Auth::user()->role->code !== 'OTH' && Auth::user()->role->code !== 'SLS')
                                    <label class="d-flex align-items-center fs-6 fw-bold mb-2">
                                        <span class="required">Pilih Departemen</span>
                                        <i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip"
                                            title="Spesifikasi departemen yang akan diunduh"></i>
                                    </label>
                                    <select name="divisionDownloadSelect" id="divisionDownloadSelect"
                                        class="form-select form-select-solid mb-5">
                                        <option value="all">Semua Departemen</option>
                                    </select>
                                @endif
                                <label class="d-flex align-items-center fs-6 fw-bold mb-2">
                                    <span class="required">Pilih Tahun Anggaran</span>
                                    <i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip"
                                        title="Spesifikasi tahun anggaran yang akan diunduh"></i>
                                </label>
                                @php
                                    $currentYear = now()->year;
                                @endphp
                                <select
                                    class="form-select yearDownloadSelect form-select-solid form-select select2-hidden-accessible mb-5"
                                    name="yearDownload" data-control="select2" data-hide-search="true"
                                    data-select2-id="select2-data-19-9rgk" tabindex="-1" aria-hidden="true"
                                    id="yearDownloadSelect">
                                    <option value="">Pilih Tahun</option>
                                    @for ($i = 0; $i < 3; $i++)
                                        <option value="{{ $currentYear - $i }}">
                                            {{ $currentYear - $i }}
                                        </option>
                                    @endfor
                                </select>
                                <button type="submit" id="buttonDownload"
                                    class="d-flex align-items-center justify-content-center gap-2
              border border-2 border-secondary border-dashed
              rounded-3 py-4 text-decoration-none text-dark
              bg-light-subtle hover-shadow">
                                    <i class="bi bi-file-earmark-arrow-down fs-5"></i>
                                    <span class="fw-semibold">Unduh Data Anggaran</span>
                                </button>
                            </div>
                            {{-- <a href="{{ asset('assets/file/contoh_anggaran_aktual.xlsx') }}"
                                download="contoh-anggaran-aktual.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> --}}
                            <label class="d-flex align-items-center fs-6 fw-bold mb-2">
                                <span class="required">Unggah Data Aktual Anggaran</span>
                            </label>
                            <div class="upload-box mb-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 data anggaran terlebih dahulu sebelum mengunggah file</li>
                                    <li>Sesuaikan nilai tanggal, nominal dan deskripsi sesuai dengan realisasi</li>
                                    <li>File harus dalam format .xlsx atau .xls</li>
                                    {{-- <li>Format bulan wajib seperti ini : <strong>Jan, Feb, Mar, Apr, Mei, Jun, Jul, Agu, --}}
                                    <li>Format tanggal wajib seperti ini : <strong>YYYY-MM-DD</strong></li>
                                    <li>Khusus data <strong>Non Anggaran</strong> kosongkan kolom <strong>"kode"</strong>
                                        dan <strong>"aktivitas"</strong></li>
                                </ul>
                            </div>
                            <div class="text-end">
                                <button type="submit" id="buttonUpload" class="btn btn-primary">
                                    <span class="indicator-label">Unggah File</span>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="downloadModal" 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="formDownload" class="formDownload" action="#">
                            <div class="mb-7">
                                <h1 class="mb-3">Unduh Rancangangan Anggaran</h1>
                                <div class="text-muted fw-mdeium fs-5">Unduh file rancangan anggaran anda untuk mempermudah
                                    proses
                                    pendataan.</div>
                            </div>
                            <div class="d-flex flex-column mb-8 fv-row">
                                <label class="d-flex align-items-center fs-6 fw-bold mb-2">
                                    <span class="required">Pilih Tahun Anggaran</span>
                                    <i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip"
                                        title="Spesifikasi tahun anggaran yang akan diunduh"></i>
                                </label>
                                @php
                                    $currentYear = now()->year;
                                @endphp
                                <select
                                    class="form-select yearDownloadSelect form-select-solid form-select select2-hidden-accessible"
                                    name="yearDownload" data-control="select2" data-hide-search="true"
                                    data-select2-id="select2-data-19-9rgk" tabindex="-1" aria-hidden="true"
                                    id="yearDownloadSelect">
                                    <option value="">Pilih Tahun</option>
                                    @for ($i = 0; $i < 3; $i++)
                                        <option value="{{ $currentYear - $i }}">
                                            {{ $currentYear - $i }}
                                        </option>
                                    @endfor
                                </select>
                            </div>
                            <div class="text-start">
                                <button type="submit" id="buttonDownload"
                                    class="btn btn-light-success d-flex gap-3 flex-row my-auto">
                                    <i class="bi bi-download fs-3"></i>
                                    <span class="indicator-label">Unduh File</span>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(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')
                }
            });

            function getDivisionValue() {
                return $('#formDivision').length ?
                    $('#formDivision').val() :
                    null;
            }

            function triggerLoad() {
                let year = $('#formYear').val();
                let division = getDivisionValue();

                loadActivities(year, division);
            }

            // Year selalu trigger
            $('#formYear').on('change', function() {
                triggerLoad();
            });

            // Division hanya jika ada
            if ($('#formDivision').length) {
                $('#formDivision').on('change', function() {
                    triggerLoad();
                });
            }

            function loadActivities(year, division) {
                $('#formActivity').html('<option value="">Mohon Tunggu...</option>');

                if (!year) {
                    $('#formActivity').html('<option value="">Pilih Aktivitas</option>');
                    return;
                }

                $.ajax({
                    url: "{{ route('budget-actual.activities') }}",
                    type: "POST",
                    data: {
                        year: year,
                        division: division
                    },
                    success: function(response) {
                        let options = '<option value="">Pilih Aktivitas</option>';

                        if (response.length > 0) {
                            options +=
                                `<option value="non_anggaran" class="text-primary">Non Anggaran</option>`;
                            $.each(response, function(index, item) {
                                options += `<option value="${item.slug}">${item.name}</option>`;
                            });
                        } else {
                            options += '<option value="">Tidak ada aktivitas</option>';
                        }

                        $('#formActivity').html(options);
                    },
                    error: function(xhr) {
                        $('#formActivity').html(
                            '<option value="" class="text-danger">Gagal memuat data</option>');
                    }
                });
            }

            var table = $('#table').DataTable({
                processing: false,
                serverSide: true,
                language: {
                    processing: `...`
                },
                ajax: {
                    url: "{{ route('budget-actual.datatable') }}",
                    data: function(d) {
                        d.year = $('#filterYear').val();
                        d.division = $('#filterDivision').val();
                    }
                },
                // ajax: "{{ route('budget-actual.datatable') }}",
                dom: 'rtip',
                columns: [{
                        data: 'year',
                        name: 'year'
                    },
                    {
                        data: 'division',
                        name: 'division'
                    },
                    {
                        data: 'item_name',
                        name: 'item_name'
                    },
                    {
                        data: 'month',
                        name: 'month'
                    },
                    {
                        data: 'amount',
                        name: 'amount'
                    },
                    {
                        data: 'balance',
                        name: 'balance'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    }
                    // {
                    //     data: 'description',
                    //     name: 'description',
                    //     orderable: false,
                    //     searchable: false
                    // },
                    // {
                    //     data: 'created_at',
                    //     name: 'created_at',
                    //     orderable: false,
                    //     searchable: false
                    // },
                ],
                pageLength: 10,
                responsive: true
            });

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

            $.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 selectForm = $('#formDivision');
                        selectForm.empty();
                        selectForm.append('<option value="">Pilih Departemen</option>');

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

                        selectForm.trigger('change');

                        let selectDownload = $('#divisionDownloadSelect');
                        selectDownload.empty();
                        selectDownload.append('<option value="all">Semua Departemen</option>');

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

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

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

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

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

            $('#buttonDownload').click(function(e) {
                e.preventDefault();
                let year = $('#yearDownloadSelect').val();
                let division = $('#divisionDownloadSelect').val();

                if (!year) {
                    showToast('Pilih tahun terlebih dahulu', 'danger');
                    return;
                }
                let url = "{{ route('budget-actual.export') }}?year=" + year + "&division=" + division;
                window.location.href = url;
            });

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

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

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

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

                $.ajax({
                    url: "{{ route('budget-actual.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');
                            if ($.fn.DataTable.isDataTable('#table')) {
                                $('#table').DataTable().ajax.reload(null, false);
                            }
                        }
                    },
                    error: function(xhr) {
                        showToast('Terjadi kesalahan sistem', 'danger');
                    },
                    complete: function() {
                        $('#buttonUpload')
                            .prop('disabled', false)
                            .html('<span class="indicator-label">Unggah File</span>');
                    }
                });
            });

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

                let activities = $('#formActivity').val();
                let division = $('#formDivision').val();
                let year = $('#formYear').val();
                let date = $('#formDate').val();
                // let month = $('#formMonth').val();
                let nominal = $('#formNominal').val();
                let description = $('#formDescription').val();

                $.ajax({
                    url: '/budget-actual',
                    type: 'POST',
                    data: {
                        activites: activities,
                        division: division,
                        year: year,
                        // month: month,
                        date: date,
                        amount: nominal,
                        description: description
                    },
                    beforeSend: function() {
                        $('#buttonSave').prop('disabled', true).text('Menyimpan...');
                    },
                    success: function(response) {
                        if (response.success) {
                            $('#form')[0].reset();

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

                            showToast('Data berhasil disimpan', 'success');
                            if ($.fn.DataTable.isDataTable('#table')) {
                                $('#table').DataTable().ajax.reload(null, false);
                            }
                        }
                    },
                    error: function(xhr) {
                        showToast('Data gagal disimpan', 'danger');
                    },
                    complete: function() {
                        $('#buttonSave').prop('disabled', false).text('Simpan');
                    }
                });
            });

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

                let month = $(this).data('month');
                let year = $(this).data('year');
                let division = $(this).data('division');
                let slug = $(this).data('slug');

                let url = "{{ route('budget-actual') }}/" + year + "/" + month + "/" + division +
                    "/" + slug;
                window.location.href = url; // ini trigger download


                // $.ajax({
                //     url: '/brand/' + id,
                //     type: 'GET',
                //     beforeSend: function() {},
                //     success: function(response) {
                //         if (response.success) {
                //             $('#edit_id').val(response.data.id);
                //             $('#edit_code').val(response.data.code);
                //             $('#edit_name').val(response.data.name);
                //             if (response.data.status == 'active') {
                //                 $('#edit_status').prop('checked', true);
                //                 $('#labelStatus').text('Aktif');
                //             } else {
                //                 $('#edit_status').prop('checked', false);
                //                 $('#labelStatus').text('Non Aktif');
                //             }
                //             let modal = new bootstrap.Modal(document.getElementById(
                //                 'editModal'));
                //             modal.show();
                //         }
                //     },
                //     error: function() {
                //         showToast('Data tidak ditemukan', 'danger');
                //     }
                // });
            });

            document.getElementById('exportBtn').addEventListener('click', function() {

                let year = $('#filterYear').val(); // sesuaikan dengan filter kamu
                let division = $('#filterDivision').val(); // kalau ada

                let url = "{{ route('budget-actual.export-actual') }}?year=" + year +
                    "&division=" + division;

                window.location.href = url; // ini trigger download
            });
        });
    </script>
@endsection