@extends('user.layouts.template')

@section('style')
    <style>
        /*------New Css for User Dashboard-----*/

        .dataTables_wrapper {
            overflow: auto;
        }

        /*----Form Wizard-----*/

        .form-content-wizard {
            width: 100%
        }

        .nav-underline .nav-link {
            text-align: left;
        }

        .card-body {
            padding: 0px !important;
        }

        /*--Tenant List----*/


        .modal {
            --bs-modal-margin: 1.75rem;
            --bs-modal-box-shadow: var(--bs-box-shadow);
            z-index: 9999999 !important;
        }

        .sidebar-icons {
            width: 40px;
        }

        .mainnav__inner .mainnav__menu .nav-link {
            padding: 3px 0px !important;
        }

        .mn--max .header__brand {
            padding-inline-start: calc(.625rem + var(--nf-mainnav-link-padding-x));
            max-width: var(--nf-mainnav-max-width);
            width: var(--nf-mainnav-max-width);
            will-change: max-width;
            background-color: var(--nf-mainnav-bg);
        }

        .mn--min .header__brand {
            justify-content: center;
            max-width: var(--nf-mainnav-min-width);
            padding-inline-start: 0;
            transition: max-width var(--nf-mainnav-min-transition-duration) var(--nf-mainnav-min-transition-timing);
            width: 100%;
            background: white;
        }

        /*-----Subscription List-----*/


        .sea-bar {
            position: relative;
            right: 20px;

        }

        .sea-bar:hover {
            color: black;
        }

        .input-group-text {
            background: white;
        }

        .ri-search-line {
            color: black;
        }

        .price-table th {
            font-weight: 700;
        }

        span.nav-text {
            font-size: 14px !important;
        }

        #startDate {
            width: 200px;
            margin-right: 10px;
        }

        .form-check {
            display: block;
            min-height: 1.3125rem;
            padding-left: 1.612em;
            margin-bottom: 0;
            margin: 0 0%;
        }

        /*---Data Tables----*/

        table.dataTable {
            position: relative;
            top: 10px;
            margin-bottom: 30px;
            font-size: 14px !important;
        }

        table.dataTable tbody th,
        table.dataTable tbody td {
            padding: 15px 10px;
        }


        /*---End Subscription List-----*/


        .page-title-box {
            padding-bottom: 1.25rem;
            background-color: transparent;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            gap: 0.625rem;
        }


        /*----Toggle btn----*/

        button.toggle-btn {
            background: transparent;
            border: none;
        }

        button.toggle-btn i {
            font-size: 18px;
        }

        /*----Off canvas----*/

        .offcanvas.hiding,
        .offcanvas.show,
        .offcanvas.showing {
            visibility: visible;
            z-index: 9999999 !important;
        }

        .offcanvas.offcanvas-end {
            width: 1200px !important;
        }

        #submitBtn {
            position: relative;
            right: 320px;
        }

        .nav-fill .nav-item .nav-link,
        .nav-justified .nav-item .nav-link {
            width: 100%;
            text-align: justify !important;
        }




        #modalWindow {
            position: absolute;
            width: 400px;
            height: 300px;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            resize: both;
            min-width: 200px;
            min-height: 150px;
            overflow: hidden;
            cursor: default;
        }

        #modalWindow.fullscreen {
            width: 100vw;
            height: 100vh;
            top: 0;
            left: 0;
            margin: 0;
            border-radius: 0;
        }

        .headerone {
            background-color: var(--nf-header-bg);
            color: white;
            padding: 10px;
            display: flex;
            justify-content: end;
            align-items: center;
            cursor: move;
        }

        .controlBtn {
            background: transparent;
            border: none;
            color: white;
            font-size: 18px;
            cursor: pointer;
        }

        #modalBody {
            padding: 20px;
            font-size: 14px;
            height: calc(100% - 40px);
            /* Subtract header height */
            overflow: auto;
        }

        /* Minimized style */
        .minimized {
            display: none;
        }

        .modal-content {
            position: relative;
            display: flex;
            flex-direction: column;
            width: 100%;
            color: #1a1d21b7 !important;
            pointer-events: auto;
            background-color: var(--bs-modal-bg);
            background-clip: padding-box;
            border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
            border-radius: var(--bs-modal-border-radius);
            box-shadow: var(--bs-modal-box-shadow);
            outline: 0;
        }

        .backdrop {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(0, 0, 0, 0.5);
            /* black semi-transparent */
            display: none;
            /* hidden by default */
            z-index: 999;
            /* make sure it's behind modal */
        }

        #modalWindow {
            position: fixed;
            z-index: 1000;
            /* above backdrop */
        }

        .mn--min header .header__inner .brand-wrap .logo-sm {
            display: block;
        }

        .mn--max header .header__inner .brand-wrap .logo-sm {
            display: none;
        }

        .mn--max .header__brand {
            padding: 5px;
        }

        .modal-backdrop.fade.show {
            background: transparent !important;
            display: none !important;
        }

        table.dataTable>thead>tr>th,
        table.dataTable>thead>tr>td {
            padding: 10px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.3);
            text-align: center;
        }

        table.dataTable {
            text-align: center;
        }



        /*----End New Css for User DASHBOARD---*/
    </style>
@endsection

@section('content')
    <!-- Content Start -->
    <div class="content__boxed">
        <div class="content__wrap">

            <div id="page-titl">


            </div>

            <div class="row">
                <div class="col-12">
                    <div class="page-title-box">
                        <div class="le-tit">

                        </div>

                        <div class="right-tit d-flex d-none">

                            <a class="btn btn-success mx-2 w-100" style="border:1px solid white;"
                                href="{{ route('roleCreate') }}"><i class="ri-add-circle-fill"></i>
                                Add New Role
                            </a>
                        </div>



                    </div>
                </div>
            </div>

            <div class="card p-2">
                <div class="errorresponse"></div>

                        @php
                            $permission = session('permissions');
                        @endphp
                <table id="role-list" class="display" style="width:100%">
                    <thead>
                        <tr>
                            <th>Role</th>
                            <th>Description</th>
                            <th>Status</th>
                            @if ($permission === 'Admin' || !empty($permission['Team Management']['edit']))
                            <th class="text-center">Action</th>
                            @endif
                        </tr>
                    </thead>
                    <tbody>

                        @foreach($roles as $role)
                            <tr>
                                <td>{{ $role->name }}</td>
                                <td>{{ Str::limit($role->description, 60) }}</td>
                                <td>{{ ($role->status == 1) ? 'Active' : 'Inactive' }}</td>
                                @if ($permission === 'Admin' || !empty($permission['Team Management']['edit']))
                                    <td>
                                        <div class="d-flex align-items-center">

                                            <a href="{{ route('roleCreate', ['role_id' => $role->id]) }}"
                                                class="btn btn-success mx-1"><i class="ri-pencil-fill"></i></a>
                                            {{-- <a href="#" class="btn btn-success mx-1 delete" data-id="{{ $role->id }}"><i
                                                    class="ri-delete-bin-fill"></i></a> --}}

                                        </div>
                                    </td>
                                @endif
                            </tr>
                        @endforeach


                    </tbody>
                </table>



            </div>




        </div>
    </div>
    <!-- Content End -->
@endsection

@section('script')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $(document).ready(function () {
            var myTable = $('#role-list').DataTable({
                "paging": true,             // Enable pagination
                "searching": true,          // Enable search box
                "ordering": false,           // Enable sorting
                "info": true,               // Show table info
                "lengthMenu": [8, 10, 25],  // Page size options
                "pageLength": 8             // Default page size
            });

            var allPages = myTable.rows().nodes().to$();



            $('.delete', allPages).on('click', function () {
                Swal.fire({
                    title: 'Warning',
                    text: 'Are you sure to delete?',
                    icon: 'warning',
                    showCancelButton: true,
                    customClass: {
                        confirmButton: 'btn btn-danger',
                        cancelButton: 'btn btn-secondary'
                    },
                    confirmButtonText: 'Yes'
                }).then((result) => {
                    if (result.isConfirmed) {
                        let id = $(this).data('id');
                        let editUrl1 = '{{ route("roles.destroy", ["__id__"]) }}';
                        let editUrl = editUrl1.replace("__id__", id);

                        $.ajax({
                            url: editUrl,
                            type: 'DELETE',
                            contentType: false,
                            processData: false,
                            data: {},
                            success: function (response) {
                                console.log(response.message);
                                Swal.fire('Deleted Successfully');
                                location.reload();
                            },
                            error: function (xhr) {
                                $('.errorresponse').html('<p style="color:red;">Error: ' + xhr.responseText + '</p>')
                            }
                        });
                    }
                });
            });
        });
    </script>
@endsection