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

@extends('layouts.app')

@section('title', 'Master Unit Yayasan')

@push('styles')
{{-- Link CSS DataTables --}}
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">
{{-- Jika menggunakan Bootstrap 5 dengan DataTables --}}
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css">
{{-- Jika menggunakan Dashlite theme untuk DataTables (opsional, sesuaikan path) --}}
{{-- <link rel="stylesheet" href="{{ asset('assets/css/libs/datatable-bs5.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 Unit Yayasan</h3>
                            <div class="nk-block-des text-soft">
                                <p>Kelola daftar unit dalam yayasan.</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"></em>
                                </a>
                                <div class="toggle-expand-content" data-content="pageMenu">
                                    <ul class="nk-block-tools g-3">
                                        {{-- Tombol Tambah Unit (Hanya tampil jika user tidak punya unit_id) --}}
                                        @if (Auth::user() && Auth::user()->unit_id=='1')
                                        <li class="nk-block-tools-opt">
                                            <a href="{{ route('yayasan.master.unit.create') }}" class="btn btn-primary">
                                                <em class="icon ni ni-plus"></em>
                                                <span>Tambah Unit Baru</span>
                                            </a>
                                        </li>
                                        @endif
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Menampilkan pesan sukses jika ada --}}
                @if (session('success'))
                <div class="alert alert-success" id="success-alert">
                    {{ session('success') }}
                </div>
                @endif

                    {{-- Menampilkan pesan error jika ada --}}
                    @if (session('error'))
                        <div class="alert alert-danger" id="error-alert">
                            {{ session('error') }}
                        </div>
                    @endif
                <div class="nk-block">
                    <div class="card card-bordered">
                        <div class="card-inner">
                            {{-- Tabel Daftar Unit --}}
                            <div class="nk-tb-list nk-tb-ulog">
                                <div class="nk-tb-item nk-tb-head text-center">
                                    <div class="nk-tb-col" width="10%">#</div>
                                    <div class="nk-tb-col" width="40%">Nama Unit</div>
                                    <div class="nk-tb-col" width="20%">Kode Unit</div>
                                    <div class="nk-tb-col" width="25%">Deskripsi</div>
                                    <div class="nk-tb-col" width="15%">Aksi</div>
                                </div>

                                @forelse ($units as $unit)
                                    <div class="nk-tb-item">
                                        <div class="nk-tb-col">
                                            <span>{{ $units->firstItem() + $loop->index }}</span>
                                        </div>
                                        <div class="nk-tb-col">
                                            <span>{{ $unit->nama_unit }}</span>
                                        </div>
                                        <div class="nk-tb-col">
                                            <span>{{ $unit->kode_unit ?? '-' }}</span>
                                        </div>
                                        <div class="nk-tb-col">
                                            <span>{{ $unit->deskripsi ?? '-' }}</span>
                                        </div>
                                        <div class="nk-tb-col nk-tb-col-tools">
                                            <ul class="nk-tb-actions gx-1">
                                                <li>
                                                    <div class="drodown">
                                                        <a href="#" class="dropdown-toggle btn btn-icon btn-trigger" data-bs-toggle="dropdown">
                                                            <em class="icon ni ni-more-h"></em>
                                                        </a>
                                                        <div class="dropdown-menu dropdown-menu-center">
                                                            <ul class="link-list-opt no-bdr">
                                                                <li>
                                                                    <a href="{{ route('yayasan.master.unit.show', $unit->id) }}">
                                                                        <em class="icon ni ni-eye"></em><span>Detail</span>
                                                                    </a>
                                                                </li>
                                                                <li>
                                                                    <a href="{{ route('yayasan.master.unit.edit', $unit->id) }}">
                                                                        <em class="icon ni ni-edit"></em><span>Edit</span>
                                                                    </a>
                                                                </li>
                                                                @if (Auth::user() && !Auth::user()->unit_id)
                                                                    <li>
                                                                        <a href="#" onclick="event.preventDefault();
                                                                            Swal.fire({
                                                                                title: 'Hapus Unit?',
                                                                                text: 'Data yang dihapus tidak dapat dikembalikan.',
                                                                                icon: 'warning',
                                                                                showCancelButton: true,
                                                                                confirmButtonText: 'Ya, hapus!',
                                                                                cancelButtonText: 'Batal'
                                                                            }).then((result) => {
                                                                                if (result.isConfirmed) {
                                                                                    document.getElementById('delete-form-{{ $unit->id }}').submit();
                                                                                }
                                                                            });">
                                                                            <em class="icon ni ni-trash"></em><span>Hapus</span>
                                                                        </a>
                                                                        <form id="delete-form-{{ $unit->id }}" action="{{ route('yayasan.master.unit.destroy', $unit->id) }}" method="POST" class="d-none">
                                                                            @csrf
                                                                            @method('DELETE')
                                                                        </form>
                                                                    </li>
                                                                @endif
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                @empty
                                    <div class="nk-tb-item">
                                        <div class="nk-tb-col">
                                            <span class="text-center w-100">Tidak ada data unit.</span>
                                        </div>
                                    </div>
                                @endforelse
                            </div>
                        </div>
                    </div>
                </div>
                <div class="d-flex justify-content-end mt-3">
                    {{ $units->links('pagination::bootstrap-4') }}
                </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

{{-- Link JS DataTables --}}
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>
{{-- Jika menggunakan Bootstrap 5 dengan DataTables --}}
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>
{{-- Jika menggunakan Dashlite theme untuk DataTables (opsional, sesuaikan path) --}}
{{-- <script src="{{ asset('assets/js/libs/datatable-init.js') }}"></script> --}}


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

        $('#unit-table').DataTable({
            "paging": true, 
            "ordering": true, 
            "info": true,
            "searching": true
        });
    });

    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('.btn-delete').forEach(function (el) {
            el.addEventListener('click', function (e) {
                e.preventDefault();
                const url = this.getAttribute('data-url');

                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