@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 Pintu/Pos</h4>
                                <div class="table-responsive mb-2">
                                    <table class="table table-bordered table-selectable" id="example" 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%">{{ $level->level_code }} </td>
                                                    <td>{{ $level->level_name }}</td>
                                                    <td class="text-center" width="10%">{{ \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>
                                        <button class="btn btn-primary btn-sm add-button" data-bs-toggle="modal" data-bs-target=".bd-example-modal-lg">Tambah</button>
                                        <button class="btn btn-warning btn-sm edit-button" id="btnEdit" data-bs-toggle="modal" data-bs-target=".bd-ubah-modal-lg">Ubah</button>
                                        <button class="btn btn-danger btn-sm" id="btnDelete">Hapus</button>
                                        <button class="btn btn-danger btn-sm" id="btnDelete">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>
        </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>
        $(document).ready(function () {

            $(document).on('click', '.user-menu', function () {

                let id = $(this).data('id')

                let url = "{{ route() }}"
            });

            // MODE EDIT
            $(document).on('click', '.btn-edit', function () {

                $('.view-mode').addClass('d-none');
                $('.edit-mode').removeClass('d-none');

                $('.btn-edit').addClass('d-none');
                $('.btn-save, .btn-cancel').removeClass('d-none');
            });

            // CANCEL
            $(document).on('click', '.btn-cancel', function () {

                $('.edit-mode').addClass('d-none');
                $('.view-mode').removeClass('d-none');

                $('.btn-save, .btn-cancel').addClass('d-none');
                $('.btn-edit').removeClass('d-none');
            });

            // SAVE
            $(document).on('click', '.btn-save', function () {

                let dataToSend = {};

                $('.edit-mode').each(function () {
                    let key = $(this).data('key');
                    dataToSend[key] = $(this).val();
                });

                console.log(dataToSend);
                let gateId = $('.edit-row').data('id');

                $.ajax({
                    url: "{{ route('hardware.update', '') }}/" + gateId,
                    type: "PUT",
                    data: {
                        _token: "{{ csrf_token() }}",
                        data: dataToSend
                    },
                    success: function () {

                        $('.edit-mode').each(function () {
                            let val = $(this).val();
                            $(this).siblings('.view-mode').text(val);
                        });

                        $('.btn-cancel').click();
                        Swal.fire({icon: 'success', title: 'Berhasil', text: 'Level pengguna tersimpan.'});
                    }
                });
            });

            function formatValue(key, value) {

                // kalau field *_avail kita kasih badge
                if (key.includes('_avail')) {

                    if (value == 1) {
                        return `<span class="badge rounded-pill bg-success px-3">ON</span>`;
                    } else {
                        return `<span class="badge rounded-pill bg-danger px-3">OFF</span>`;
                    }
                }

                // default
                return value ?? '-';
            }
        });

    </script> --}}
@endsection