{{-- resources/views/yayasan/master/akun/index.blade.php --}}

@extends('layouts.app')

@section('title', 'Master Akun (COA)')

@push('styles')

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css">
<!-- <link rel="stylesheet" href="{{ asset('assets/css/libs/datatable-bs5.css') }}"> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
@endpush

@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">
                    <div class="nk-block-between">
                        <div class="nk-block-head-content">
                            <h3 class="nk-block-title page-title">Master Akun (COA)</h3>
                            <div class="nk-block-des text-soft">
                                <p>Kelola daftar akun dalam Chart of Accounts (COA).</p>
                            </div>
                        </div>
                        <div class="nk-block-head-content">
                            <div class="toggle-wrap nk-block-tools-toggle">
                                <a href="#" class="btn btn-icon btn-trigger toggle-expand me-n1" data-target="pageMenu"><em class="icon ni ni-menu-alt-r"></em></a>
                                <div class="toggle-expand-content" data-content="pageMenu">
                                    <ul class="nk-block-tools g-3">
                                        <li>
                                            <form action="{{ route('yayasan.master.akun.import') }}" method="POST" class="d-inline">
                                                @csrf
                                                <button type="submit" class="btn btn-white btn-dim btn-outline-success">
                                                    <em class="icon ni ni-reload-alt"></em><span>Sinkronisasi</span>
                                                </button>
                                            </form>
                                        </li>
                                        <li>
                                            <a href="{{ route('yayasan.master.akun.perbaiki-level') }}" class="btn btn-white btn-dim btn-outline-warning" onclick="return confirm('Perbaiki level dan struktur?')">
                                                <em class="icon ni ni-setting"></em><span>Perbaiki Level</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="{{ route('yayasan.master.akun.export') }}" class="btn btn-white btn-dim btn-outline-primary">
                                                <em class="icon ni ni-download-cloud"></em><span>Export</span>
                                            </a>
                                        </li>
                                        <li class="nk-block-tools-opt">
                                            <a href="{{ route('yayasan.master.akun.create') }}" class="btn btn-primary">
                                                <em class="icon ni ni-plus"></em><span>Tambah Akun</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Alert Messages --}}
                @if (session('success'))
                <div class="alert alert-success alert-icon alert-dismissible fade show" role="alert">
                    <em class="icon ni ni-check-circle"></em> {{ session('success') }}
                    <button class="close" data-bs-dismiss="alert"></button>
                </div>
                @endif
                @if (session('error'))
                <div class="alert alert-danger alert-icon alert-dismissible fade show" role="alert">
                    <em class="icon ni ni-cross-circle"></em> {{ session('error') }}
                    <button class="close" data-bs-dismiss="alert"></button>
                </div>
                @endif

                <div class="nk-block">
                    <div class="card card-preview">
                        <div class="card-inner border-bottom">
                            <div class="card-title-group">
                                <div class="card-title">
                                    <h5 class="title">Daftar Akun</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 kode atau nama...">
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div id="akun-table" class="table-responsive">
                            @include('yayasan.master.akun.table', ['akun' => $akun])
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')

{{-- <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> --}}
<script>
    $(document).ready(function(){

        $('.table').DataTable({
            responsive: true,
            paging: false, 
            searching: false, 
            info: false,
            ordering: true
        });

        function fetchAkun(query = '') {
            $.ajax({
                url: "{{ route('yayasan.master.akun.index') }}",
                type: "GET",
                data: { search: query },
                success: function(data){
                    $('#akun-table').html(data);
                }
            });
        }

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

        $(document).on('click', '#akun-table .pagination a', function(e){
            e.preventDefault();
            let page = $(this).attr('href').split('page=')[1];
            let query = $('#search').val();
            $.ajax({
                url: "{{ route('yayasan.master.akun.index') }}?page=" + page + "&search=" + query,
                success: function(data){
                    $('#akun-table').html(data);
                }
            });
        });

    });

    document.querySelectorAll('.delete-form').forEach(form => {
        form.addEventListener('submit', function(event) {
            event.preventDefault();
            Swal.fire({
                title: 'Yakin ingin menghapus?',
                text: "Data tidak bisa dikembalikan!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#e3342f',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Ya, hapus!',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    const form = document.createElement('form');
                    form.method = 'POST';
                    form.action = url;

                    const csrf = document.createElement('input');
                    csrf.type = 'hidden';
                    csrf.name = '_token';
                    csrf.value = '{{ csrf_token() }}';
                    form.appendChild(csrf);

                    const method = document.createElement('input');
                    method.type = 'hidden';
                    method.name = '_method';
                    method.value = 'DELETE';
                    form.appendChild(method);

                    document.body.appendChild(form);
                    form.submit();
                }
            });
        });
    });


    document.addEventListener('DOMContentLoaded', function() {
        const successAlert = document.getElementById('success-alert');
        const errorAlert = document.getElementById('error-alert');

        if (successAlert) {
            setTimeout(function() {
                successAlert.style.display = 'none';
            }, 5000);
        }

        if (errorAlert) {
            setTimeout(function() {
                errorAlert.style.display = 'none';
            }, 5000);
        }
    });
</script>
@endpush