@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">Master Rekening Penerimaan</h3>
                                <div class="nk-block-des text-soft">
                                    <p>Tentukan rekening yayasan tujuan untuk sinkronisasi penerimaan 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 Mapping</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 Mapping Rekening Penerimaan</h5>
                                </div>
                                <div class="card-tools me-n1">
                                    <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 unit atau rekening...">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-custom" id="tableRekeningPenerimaan">
                                <thead>
                                    <tr>
                                        <th width="5%">#</th>
                                        <th>Unit</th>
                                        <th>Kode Akun</th>
                                        <th>Nama Rekening Tujuan</th>
                                        <th class="text-center" width="12%">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalTambah" tabindex="-1">
        <div class="modal-dialog">
            <form id="formTambahMapping" method="POST">
                @csrf
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Tambah Mapping Rekening Penerimaan</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="unit_id" class="form-label">Unit</label>
                            <select name="unit_id" id="unit_id" class="form-select" required>
                                <option value="">-- Pilih Unit --</option>
                                @foreach($units as $unit)
                                    <option value="{{ $unit->kode_unit }}">{{ $unit->kode_unit }} - {{ $unit->nama_unit }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="mb-0">
                            <label for="kode_akun_yayasan" class="form-label">Rekening Tujuan Yayasan</label>
                            <select name="kode_akun_yayasan" id="kode_akun_yayasan" class="form-select" required>
                                <option value="">-- Pilih Rekening --</option>
                                @foreach($akuns as $akun)
                                    <option value="{{ $akun->kode_akun }}">{{ $akun->kode_akun }} - {{ $akun->nama_akun }}</option>
                                @endforeach
                            </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>

    <div class="modal fade" id="modalEdit" tabindex="-1">
        <div class="modal-dialog">
            <form id="formEditMapping" method="POST">
                @csrf
                @method('PUT')
                <input type="hidden" name="id" id="edit_id">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Edit Mapping Rekening Penerimaan</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="edit_unit_id" class="form-label">Unit</label>
                            <select name="unit_id" id="edit_unit_id" class="form-select" required>
                                <option value="">-- Pilih Unit --</option>
                                @foreach($units as $unit)
                                    <option value="{{ $unit->kode_unit }}">{{ $unit->kode_unit }} - {{ $unit->nama_unit }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="mb-0">
                            <label for="edit_kode_akun_yayasan" class="form-label">Rekening Tujuan Yayasan</label>
                            <select name="kode_akun_yayasan" id="edit_kode_akun_yayasan" class="form-select" required>
                                <option value="">-- Pilih Rekening --</option>
                                @foreach($akuns as $akun)
                                    <option value="{{ $akun->kode_akun }}">{{ $akun->kode_akun }} - {{ $akun->nama_akun }}</option>
                                @endforeach
                            </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 Perubahan</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    $(document).ready(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        let table;

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

            table = $('#tableRekeningPenerimaan').DataTable({
                processing: true,
                serverSide: false,
                searching: false,
                ajax: {
                    url: "{{ route('yayasan.master.rekening-penerimaan.index') }}",
                    data: { search: query },
                    dataSrc: ''
                },
                columns: [
                    { data: null },
                    {
                        data: 'unit',
                        render: function(data) {
                            return data ? `${data.kode_unit} - ${data.nama_unit}` : '-';
                        }
                    },
                    { data: 'akun.kode_akun', defaultContent: '-' },
                    { data: 'akun.nama_akun', defaultContent: '-' },
                    {
                        data: null,
                        className: 'text-center',
                        render: function(data) {
                            const payload = encodeURIComponent(JSON.stringify({
                                id: data.id,
                                unit_id: data.unit_id,
                                kode_akun_yayasan: data.kode_akun_yayasan
                            }));

                            return `<div class="d-flex justify-content-center gap-1">
                                <button class="btn-action btn-action-edit btn-edit" data-payload="${payload}" title="Edit">
                                    <em class="icon ni ni-edit"></em>
                                </button>
                                <button class="btn-action btn-action-delete btn-hapus" data-id="${data.id}" 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() {
            loadData($(this).val());
        });

        function showErrors(xhr) {
            if (xhr.responseJSON && xhr.responseJSON.errors) {
                const errorMessages = Object.values(xhr.responseJSON.errors).flat().join('<br>');
                Swal.fire('Gagal', errorMessages, 'error');
                return;
            }

            Swal.fire('Gagal', 'Terjadi kesalahan saat memproses data.', 'error');
        }

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

            $.ajax({
                url: "{{ route('yayasan.master.rekening-penerimaan.store') }}",
                type: 'POST',
                data: $(this).serialize(),
                success: function(response) {
                    $('#modalTambah').modal('hide');
                    $('#formTambahMapping')[0].reset();
                    loadData();
                    Swal.fire('Berhasil', response.message, 'success');
                },
                error: showErrors
            });
        });

        $(document).on('click', '.btn-edit', function() {
            const payload = JSON.parse(decodeURIComponent($(this).data('payload')));

            $('#edit_id').val(payload.id);
            $('#edit_unit_id').val(payload.unit_id);
            $('#edit_kode_akun_yayasan').val(payload.kode_akun_yayasan);
            $('#modalEdit').modal('show');
        });

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

            const id = $('#edit_id').val();
            $.ajax({
                url: "{{ route('yayasan.master.rekening-penerimaan.update', ':id') }}".replace(':id', id),
                type: 'POST',
                data: $(this).serialize(),
                success: function(response) {
                    $('#modalEdit').modal('hide');
                    loadData();
                    Swal.fire('Berhasil', response.message, 'success');
                },
                error: showErrors
            });
        });

        $(document).on('click', '.btn-hapus', function() {
            const id = $(this).data('id');

            Swal.fire({
                title: 'Yakin hapus mapping ini?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Ya, hapus',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (!result.isConfirmed) {
                    return;
                }

                $.ajax({
                    url: "{{ route('yayasan.master.rekening-penerimaan.destroy', ':id') }}".replace(':id', id),
                    type: 'POST',
                    data: {
                        _method: 'DELETE',
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(response) {
                        loadData();
                        Swal.fire('Berhasil', response.message, 'success');
                    },
                    error: showErrors
                });
            });
        });
    });
</script>
@endpush