@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">

                                    @if($user_add_status == 1)
                                        @php
                                            $permission = session('permissions');
                                        @endphp
                                        @if ($permission === 'Admin' || !empty($permission['Team Management']['creat']))
                                            <a class="btn btn-success mx-2 w-100" style="border:1px solid white;"  href="{{ route('userCreate') }}">
                                                <i class="ri-add-circle-fill"></i> Add New User
                                            </a>
                                        @endif
                                    @else
                                    <h4 style="color:whitesmoke;">Reached Maximum Team Members</h4>
                                    @endif
                                </div>



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

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

                        <table id="user-list" class="display" style="width:100%">
                            <thead>
                               <tr>
                                 
                                  <th>User Name</th>
                                  <th>Email</th>
                                  <th>Mobile</th>
                                  <th>Role</th>
                                  @if ($permission === 'Admin' || !empty($permission['Team Management']['creat'] || !empty($permission['Team Management']['delet'])))
                                  <th class="text-center">Action</th>
                                  @endif
                               </tr>
                            </thead>
                            <tbody>

                            @foreach($users as $user)
                                <tr>
                                    <td>{{ $user->first_name ." ". $user->last_name}}</td>
                                    <td>{{ $user->email }}</td>
                                    <td>{{ $user->mobile }}</td>
                                    <td>{{ $user->name }}</td>
                                    @if ($permission === 'Admin' || !empty($permission['Team Management']['creat'] || !empty($permission['Team Management']['delet'])))
                                    <td>
                                        <div class="d-flex align-items-center">

                                            @if ($user->id != Auth::id())
                                                @if ($permission === 'Admin' || !empty($permission['Team Management']['creat']))
                                                    <a href="{{ route('userCreate', ['user_id' => $user->id]) }}" class="btn btn-success mx-1"><i class="ri-pencil-fill"></i></a>
                                                @endif
                                                @if ($permission === 'Admin' || !empty($permission['Team Management']['delet']))
                                                    <a href="#" class="btn btn-success mx-1 delete" data-id="{{ $user->id }}"><i class="ri-delete-bin-fill"></i></a>
                                                @endif
                                            @endif

                                        </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 =  $('#user-list').DataTable({
              "paging": true,             // Enable pagination
              "searching": true,          // Enable search box
              "ordering": true,           // 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("users.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