@extends('layouts.master')

@section('styles')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <style>
        .card-body label {
            font-size: 13px;
            color: #6c757d;
        }

        .card-body .form-control,
        .card-body .form-select {
            font-size: 14px;
        }

        #search-button {
            font-weight: 600;
            letter-spacing: .3px;
        }
        .table-garis, .garis {
            border: 0.1px solid black; /* Sets a 1px solid black border */
            border-collapse: collapse;
        }

        .text-label {
            color: #000000;
        }
/*
        .table-selectable tbody tr {
            cursor: pointer;
            transition: 0.15s;
        }

        .table-selectable tbody tr:hover {
            background-color: #f2f6ff;
        }

        .table-selectable tbody tr.selected {
            background-color: #0d6efd !important;
            color: #fff;
        }

        .table-selectable tbody tr.selected td {
            color: #fff !important;
        } */
    </style>
@endsection

@section('content')
    <!-- partial -->
    <div class="container-fluid page-body-wrapper">
        <div class="main-panel">
            <div class="content-wrapper">
                <div class="row">
                    <div class="col-12 col-md-8 grid-margin stretch-card">
                        <div class="card shadow-sm h-100">
                            <div class="card">
                                <div class="card-body">
                                <h4 class="card-title">Daftar Level Pengguna</h4>
                                <div class="table-responsive mb-2">
                                    <table class="table table-bordered table-selectable" id="level-table" data-url="">
                                        <thead>
                                            <tr>
                                                <th class="p-3" width="3%">No.</th>
                                                <th style="text-align: center;"  width="10%">Level Code</th>
                                                <th style="text-align: center;">Level Pengguna</th>
                                                <th style="text-align: center;">Tanggal Dibuat</th>
                                                <th style="text-align: center;">Hak Akses</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($levelAvail as $level)
                                                <tr>
                                                    <td class="text-center">{{ $loop->iteration }}</td>
                                                    <td class="text-center" hidden>{{ $level->level_id }}</td>
                                                    <td class="text-center" width="7%" data-level-id="{{ $level->level_id }}" data-level-code="{{ $level->level_code }}" data-level-name="{{ $level->level_name }}">{{ $level->level_code }} </td>
                                                    <td>{{ $level->level_name }}</td>
                                                    <td class="text-center" width="10%">{{ $level->create_date ? \Carbon\Carbon::parse($level->create_date)->format('Y-m-d') : '-' }}</td>
                                                    <td class="text-center" width="12%">
                                                        <button type="button" class="user-acess" data-bs-toggle="modal"  title="Izin Akses" data-bs-target=".bd-ubah-modal-lg"><i class="fa-solid fa-user-gear"></i></button>
                                                        <button type="button" class="user-menu" data-bs-toggle="modal" id="menuakses" title="Menu Akses" data-bs-target=".user-menu-modal-lg"><i class="fa-solid fa-bars"></i></button>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                                <div class="d-flex justify-content-center align-items-center mt-2">
                                    <div class="d-flex gap-2">
                                        <button class="btn btn-primary btn-sm" id="btnAddLevel" type="button">Tambah</button>
                                        <button class="btn btn-warning btn-sm" id="btnEditLevel" type="button" disabled>Ubah</button>
                                        <button class="btn btn-danger btn-sm" id="btnDeleteLevel" type="button" disabled>Hapus</button>
                                        <button class="btn btn-info btn-sm" id="btnDetailLevel" type="button" disabled>Detail</button>
                                    </div>
                                </div>
                            </div>
                        <!--</div>-->
                    </div>
                    <div class="col-2">
                        <!-- ADD MEMMBER MODAL -->
                            @include('setup.UserLevel.level-user-menu')
                        <!-- END MEMMBER MODAL -->
                    </div>
                </div>
                <div class="modal fade" id="level-detail-modal" tabindex="-1">
                    <div class="modal-dialog modal-dialog-centered"><div class="modal-content">
                        <div class="modal-header"><h5 class="modal-title">Detail Level Pengguna</h5><button class="btn-close" data-bs-dismiss="modal"></button></div>
                        <div class="modal-body" id="level-detail-body"></div>
                    </div></div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('javascript')
<!--********* Scripts *********-->
    <!-- Datatable -->
    <!--********* Scripts *********-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/metisMenu/3.0.7/metisMenu.min.js"></script>
    <script src="{{asset ('vendor/moment/moment.min.js') }}"></script>
    <script src="{{asset ('vendor/bootstrap-daterangepicker/daterangepicker.js') }}"></script>
	<script src="{{asset ('vendor/bootstrap-select/dist/js/bootstrap-select.min.js') }}"></script>
    <script src="{{asset ('vendor/sweetalert2/dist/sweetalert2.min.js') }}"></script>
    <script src="{{asset ('js/custom.min.js') }}"></script>
	<script src="{{asset ('js/dlabnav-init.js') }}"></script>
    <script>
        $(function () {
            let selected = null;
            const csrf = $('meta[name="csrf-token"]').attr('content');
            const routes = {
                store: '{{ route('levelUser.store', [], false) }}',
                show: '{{ route('levelUser.show', ':id', false) }}',
                update: '{{ route('levelUser.update', ':id', false) }}',
                destroy: '{{ route('levelUser.destroy', ':id', false) }}'
            };

            function setSelected(row) {
                $('#level-table tbody tr').removeClass('table-active');
                selected = row ? $(row).find('[data-level-id]').data() : null;
                if (row) $(row).addClass('table-active');
                $('#btnDetailLevel, #btnEditLevel, #btnDeleteLevel').prop('disabled', !selected);
            }

            function formRow(mode, level) {
                const isEdit = mode === 'edit';
                return `<tr class="level-form-row"><td colspan="5"><form class="level-inline-form" data-mode="${mode}" data-id="${level?.levelId || ''}"><div class="row g-2 align-items-end"><div class="col-md-3"><label class="form-label mb-1">Level Code</label><input class="form-control" name="level_code" maxlength="10" value="${level?.levelCode || ''}" ${isEdit ? 'readonly' : ''} required></div><div class="col-md-5"><label class="form-label mb-1">Level Pengguna</label><input class="form-control" name="level_name" maxlength="30" value="${level?.levelName || ''}" required></div><div class="col-md-4 d-flex gap-2"><button class="btn btn-success" type="submit">Simpan</button><button class="btn btn-light border cancel-level-form" type="button">Batal</button></div></div></form></td></tr>`;
            }

            $('#level-table tbody').on('click', 'tr:not(.level-form-row)', function () { setSelected(this); });
            $('#btnAddLevel').on('click', function () { $('.level-form-row').remove(); $('#level-table tbody').prepend(formRow('create')); setSelected(null); });
            $('#btnEditLevel').on('click', function () { if (!selected) return; $('.level-form-row').remove(); $('#level-table tbody tr').filter(function(){ return $(this).find('[data-level-id]').data('level-id') === selected.levelId; }).after(formRow('edit', selected)); });
            $(document).on('click', '.cancel-level-form', function () { $(this).closest('tr').remove(); });

            $(document).on('submit', '.level-inline-form', function (event) {
                event.preventDefault(); const form = $(this); const id = form.data('id'); const edit = form.data('mode') === 'edit';
                const btn = form.find('[type="submit"]'); const btnHtml = btn.html();
                btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span>Menyimpan...');
                $.ajax({
                    url: edit ? routes.update.replace(':id', encodeURIComponent(id)) : routes.store,
                    type: edit ? 'PUT' : 'POST', data: form.serialize(), headers: {'X-CSRF-TOKEN': csrf},
                    success: () => window.location.reload(),
                    error: xhr => {
                        btn.prop('disabled', false).html(btnHtml);
                        Swal.fire({icon: 'error', title: 'Gagal menyimpan', text: xhr.responseJSON?.message || Object.values(xhr.responseJSON?.errors || {}).flat().join('\n') || 'Gagal menyimpan level.'});
                    }
                });
            });

            $('#btnDeleteLevel').on('click', function () {
                if (!selected) return;
                Swal.fire({title:'Hapus level?', text:`${selected.levelCode} - ${selected.levelName}`, icon:'warning', showCancelButton:true, confirmButtonText:'Ya, hapus', cancelButtonText:'Batal', confirmButtonColor:'#dc3545', showLoaderOnConfirm: true, preConfirm: () => $.ajax({url: routes.destroy.replace(':id', encodeURIComponent(selected.levelId)), type:'DELETE', headers:{'X-CSRF-TOKEN':csrf}}).catch(xhr => { Swal.showValidationMessage(xhr.responseJSON?.message || 'Level tidak dapat dihapus.'); })})
                    .then(result => { if (result.isConfirmed && result.value) { Swal.fire({icon: 'success', title: 'Berhasil', text: 'Level dihapus.', timer: 1500, showConfirmButton: false}).then(() => window.location.reload()); } });
            });

            $('#btnDetailLevel').on('click', function () {
                if (!selected) return;
                const btn = $(this); const btnHtml = btn.html();
                btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span>Memuat...');
                $('#level-detail-body').html('<div class="text-center py-3"><span class="spinner-border spinner-border-sm me-2"></span>Memuat detail...</div>');
                new bootstrap.Modal(document.getElementById('level-detail-modal')).show();
                $.get(routes.show.replace(':id', encodeURIComponent(selected.levelId)), function(r) {
                    $('#level-detail-body').html(`<dl class="row mb-0"><dt class="col-5">Level Code</dt><dd class="col-7">${r.data.level_code}</dd><dt class="col-5">Nama Level</dt><dd class="col-7">${r.data.level_name}</dd><dt class="col-5">Dibuat</dt><dd class="col-7">${r.data.create_date ?? '-'}</dd><dt class="col-5">Diubah</dt><dd class="col-7">${r.data.update_date ?? '-'}</dd></dl>`);
                }).fail(xhr => { $('#level-detail-body').html('<div class="text-danger text-center">' + (xhr.responseJSON?.message || 'Gagal memuat detail.') + '</div>'); }).always(() => btn.prop('disabled', false).html(btnHtml));
            });
        });
    </script>
@endsection