@extends('layout_dashboard')
@section('title', $title ?? '')
@section('content')
<div class="app-content content">
    <div class="content-overlay"></div>
    <div class="header-navbar-shadow"></div>
    <div class="content-wrapper">
        <div class="content-body">
            <!-- Zero configuration table -->
            <section id="">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">{{ $title }}</h4>
                            </div>
                            <div class="card-content">
                                <div class="card-body card-dashboard">
                                    <form id="form_input" enctype="multipart/form-data">
                                        <table style="width: 100%;" class="custom-table table table-bordered">
                                            <thead>
                                                <tr>
                                                    <th style="width: 5%;">No</th>
                                                    <th style="width: 30%;">Regional Entity</th>
                                                    <th style="width: 65%;">Akses</th>
                                                </tr>
                                            </thead>
                                            <tbody class="">
                                                @php
                                                    $no = 1;
                                                @endphp
                                                @foreach ( $groups ?? [] as $a)
                                                    <tr>
                                                        <td style="align-content: right !important;">{{ $no++ }}</td>
                                                        <td><strong>{{ $a->nama }}</strong></td>
                                                        <td>
                                                            @foreach ( $groups ?? [] as $b)
                                                                @php
                                                                    $isChecked = $a->access_contains()
                                                                                            ->where('parent_id', $a->id)
                                                                                            ->where('children_id', $b->id)
                                                                                            ->exists();
                                                                @endphp
                                                                <div class="form-check">
                                                                    <input class="form-check-input" type="checkbox" name="access[{{ $a->id }}][]" value="{{ $b->id }}" id="checkBox{{ $a->id }}_{{ $b->id }}" {{ $isChecked ? 'checked' : '' }}>
                                                                    <label class="form-check-label" for="checkBox{{ $a->id }}_{{ $b->id }}">
                                                                        {!! $a->id == $b->id ? '<strong class="text-danger">' . $b->nama . '</strong>' : $b->nama !!}
                                                                    </label>
                                                                </div>
                                                            @endforeach
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                        <button type="submit" class="btn btn-success">Simpan</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!--/ Zero configuration table -->
        </div>
    </div>
</div>

<!-- CRUD -->
<script type="text/javascript">
    $(document).ready(function() {
        $.ajaxSetup({
            headers: {'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')}
        });

        // create
        $('#form_input').on('submit', function() {
            $.ajax({
                type: "POST",
                url: "{{ route('group-access.store') }}",
                data: new FormData($('#form_input')[0]),
                processData: false,
                contentType: false,
                dataType: "JSON",
                beforeSend: function() {
                    xLoaderShow();
                },
                success: function(data) {
                    xLoaderHide();
                    $('#modal_form_input').modal('hide');
                    $("#form_input")[0].reset();
                    $('#datatable').DataTable().ajax.reload();
                    const Toast = Swal.mixin({
                        toast: true,
                        position: 'top-end',
                        showConfirmButton: false,
                        timer: 3000,
                        timerProgressBar: true,
                        onOpen: (toast) => {
                            toast.addEventListener('mouseenter', Swal.stopTimer)
                            toast.addEventListener('mouseleave', Swal.resumeTimer)
                        }
                    })
                    Toast.fire({
                        icon: 'success',
                        title: 'Menambahkan {{ strtolower($title) }}'
                    })
                },
                error: function(xhr, status, error) {
                    xLoaderHide();
                    console.error(error);
                }
            })
            return false;
        });

    });
</script>
@endsection

@section('css')

<style>
.custom-table td {
    text-align: left;     /* Align text to the left */
    vertical-align: top;  /* Align text to the top */
}
</style>

@endsection