@extends('layouts.app')

@section('content')
    <div class="nk-content nk-content-fluid">
        <div class="container-xl wide-xl">
            <div class="nk-content-inner">
                <div class="nk-content-body">
                    <div class="nk-block-head nk-block-head-sm pb-4">
                        <div class="nk-block-between">
                            <div class="nk-block-head-content">
                                <h3 class="nk-block-title page-title">Data Kas Unit</h3>
                                <div class="nk-block-des text-soft">
                                    <p>Kelola data kas untuk setiap unit.</p>
                                </div>
                            </div>
                            <div class="nk-block-head-content">
                                <button class="btn btn-primary-custom" data-bs-toggle="modal" data-bs-target="#modalTambah">
                                    <em class="icon ni ni-plus"></em>
                                    <span>Tambah Kas Unit</span>
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="card card-preview">
                        <div class="card-inner border-bottom">
                            <div class="card-title-group">
                                <div class="card-title">
                                    <h5 class="title">Daftar Kas Unit</h5>
                                </div>
                                <div class="card-tools me-n1">
                                    <ul class="btn-toolbar gx-1">
                                        <li>
                                            <div class="form-control-wrap">
                                                <div class="form-icon form-icon-left"><em class="icon ni ni-search"></em></div>
                                                <input type="text" id="search" class="form-control" placeholder="Cari...">
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-custom" id="tableKas">
                                <thead>
                                    <tr>
                                        <th width="5%">#</th>
                                        <th>Unit</th>
                                        <th>Nama Kas</th>
                                        <th>Kategori</th>
                                        <th>Kode Akun</th>
                                        <th>Nama Akun</th>
                                        <th class="text-center" width="10%">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- Data akan di-load via AJAX -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


<!-- Modal Tambah (Keep logic functionality roughly same but ensure classes are standard bootstrap) -->
<div class="modal fade" id="modalTambah" tabindex="-1">
    <div class="modal-dialog">
        <form id="formTambahKas" method="POST">
            @csrf
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Tambah Kas Unit</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="kode_unit" class="form-label">Unit</label>
                        <select name="kode_unit" id="kode_unit" class="form-select" required>
                            <option value="">-- Pilih Unit --</option>
                            @foreach($units as $unit)
                            <option value="{{ $unit->kode_unit }}">{{ $unit->nama_unit }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="kode_akun" class="form-label">Akun</label>
                        <select name="kode_akun" id="kode_akun" class="form-select" required>
                            <option value="">-- Pilih Akun --</option>
                            @foreach($akuns as $akun)
                            <option value="{{ $akun->kode_akun }}">{{ $akun->kode_akun }} - {{ $akun->nama_akun }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="nama_kas" class="form-label">Nama Kas</label>
                        <input type="text" name="nama_kas" id="nama_kas" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label for="kategori_kas" class="form-label">Kategori Kas</label>
                        <select name="kategori_kas" id="kategori_kas" class="form-select" required>
                            <option value="bank">Kas Bank</option>
                            <option value="tangan">Kas Tangan</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Simpan</button>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')

<script>
    $(document).ready(function() {

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

        

        var table;

        function loadData(query = '') {
            if ($.fn.DataTable.isDataTable('#tableKas')) {
                table.destroy(); 
            }

            table = $('#tableKas').DataTable({
                processing: true,
                serverSide: false,
                searching: false,
                ajax: {
                    url: "{{ route('yayasan.master.kas-unit.index') }}",
                    data: { search: query },

                    dataSrc: ''
                },
                columns: [
                { data: null },
                { data: 'unit.nama_unit', defaultContent: '-' },
                { data: 'nama_kas' },
                { data: 'kategori_kas', render: function(data) {
                    const map = {
                        umum: 'Kas Umum',
                        bank: 'Kas Bank',
                        tangan: 'Kas Tangan'
                    };
                    return map[data] || '-';
                } },
                { data: 'akun.kode_akun', defaultContent: '-' },
                { data: 'akun.nama_akun', defaultContent: '-' },
                { data: 'id', className: 'text-center', render: function(data) {
                    return `<div class="d-flex justify-content-center">
                                <button class="btn-action btn-action-delete btn-hapus" data-id="${data}" title="Hapus">
                                    <em class="icon ni ni-trash"></em>
                                </button>
                            </div>`;
                }}
                ],
                columnDefs: [
                {
                    targets: 0,
                    render: function (data, type, row, meta) {
                        return meta.row + 1; 
                    }
                }
                ]
            });
        }
        loadData();

        $('#search').on('keyup', function() {
            let query = $(this).val();
            loadData(query);
        });


        // Handle submit form Tambah Kas Unit menggunakan event delegation
        $(document).on('submit', '#formTambahKas', function(e){
            e.preventDefault();
            
            $.ajax({
                url: "{{ route('yayasan.master.kas-unit.store') }}",
                type: "POST",
                data: $(this).serialize(),
                success: function(res){
                    // Sembunyikan modal
                    $('#modalTambah').modal('hide');
                    // Reset form setelah berhasil
                    $('#formTambahKas')[0].reset();
                    // Muat ulang data tabel
                    loadData();
                    // Tampilkan notifikasi sukses
                    Swal.fire('Berhasil','Data kas unit berhasil ditambahkan','success');
                },
                error: function(err){
                    // Tampilkan pesan error spesifik dari validasi Laravel
                    if (err.responseJSON && err.responseJSON.errors) {
                     let errors = err.responseJSON.errors;
                     let errorMessages = Object.values(errors).flat().join('<br>');
                     Swal.fire('Gagal', errorMessages, 'error');
                 } else {
                     Swal.fire('Gagal','Terjadi kesalahan.','error');
                 }
             }
         });
        });

        $(document).on('click', '.btn-hapus', function() {
            let id = $(this).data('id');
            Swal.fire({
                title: 'Yakin hapus data?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Ya, hapus!',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if(result.isConfirmed) {
                    $.ajax({
                        url: "{{ route('yayasan.master.kas-unit.destroy', ':id') }}".replace(':id', id),
                        type: 'POST',
                        data: {
                            _method: 'DELETE',
                            _token: "{{ csrf_token() }}"
                        },
                        success: function(res) {
                            Swal.fire('Terhapus!', res.message, 'success');
                    loadData(); // refresh table
                },
                error: function(err) {
                    Swal.fire('Gagal!', 'Terjadi kesalahan', 'error');
                }
            });
                }
            });
        });

    });
</script>
@endpush