@extends('layouts.app')
@section('styles')
<!-- DataTables -->
<link rel="stylesheet" href="{{ get_asset('dist/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css')}}">
<link rel=" stylesheet" href="{{ get_asset('dist/plugins/datatables-responsive/css/responsive.bootstrap4.min.css')}}">
<link rel=" stylesheet" href="{{ get_asset('dist/plugins/datatables-buttons/css/buttons.bootstrap4.min.css')}}">

@endsection

@section('content')
@include('dashboard.users.partials._group-modal',['id'=>'add-group'])
<div id="edit-group-modal-container">

</div>

<div id="edit-user-modal-container">

</div>
@include('dashboard.users.partials._group-delete-modal')
@include('dashboard.users.partials._user-activate-modal')
@include('dashboard.users.partials.success-modal')
@include('dashboard.users.partials._user-confirmation-modal',[
'id' => 'block-user',
'modal_title' =>'Block Confirmation',
'method'=> 'PATCH'
])

@include('dashboard.users.partials._user-confirmation-modal',[
'id' => 'unblock-user',
'modal_title' =>'Unblock Confirmation',
'method'=> 'PATCH'
])

@include('dashboard.users.partials._user-confirmation-modal',[
'id' => 'delete-user',
'modal_title' =>'Delete Confirmation',
'method'=> 'DELETE'
])
@include('dashboard.users.partials._user-add-modal')

<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header mx-3">
        <div class="container-fluid">
            <div class="row mb-2 mt-3">
                <div class="col-sm-6">
                    <h3> <i class="fa-solid fa-user"></i>
                        User Management</h3>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                        <li class="breadcrumb-item active">User Management</li>
                    </ol>
                </div>
            </div>
        </div>
        <!-- /.container-fluid -->
        <div class="container-fluid mt-5">
            <ul class="nav nav-tabs" id="myTabs">
                <li class="nav-item ">
                    <a class="nav-link tab-item active" id="groups-tab" data-toggle="tab" href="#groups-pane"><i
                            class="fa-solid fa-users mx-2"></i>Groups</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link tab-item" id="users-tab" data-toggle="tab" href="#users-pane"><i
                            class="fa-solid fa-user mx-2"></i>Users</a>
                </li>
            </ul>

            <div class="tab-content mt-2">
                <div class="tab-pane fade show active" id="groups-pane">
                    @include('dashboard.users.partials._groups')
                </div>

                <div class="tab-pane fade" id="users-pane">
                    @include('dashboard.users.partials._users')
                </div>

            </div>

    </section>

</div>
@endsection
@section('scripts')
<script src="{{ get_asset('dist/plugins/datatables/jquery.dataTables.min.js')}}"></script>
<script src="{{ get_asset('dist/plugins/datatables-responsive/js/dataTables.responsive.min.js')}}"></script>
<script src="{{ get_asset('dist/plugins/datatables-responsive/js/responsive.bootstrap4.min.js')}}"></script>
<script src="{{ get_asset('dist/plugins/datatables-buttons/js/dataTables.buttons.min.js')}}"></script>
<script src="{{ get_asset('dist/plugins/datatables-buttons/js/buttons.bootstrap4.min.js')}}"></script>
<script src="{{ get_asset('dist/plugins/jszip/jszip.min.js')}}"></script>
<script src="{{ get_asset('dist/plugins/pdfmake/pdfmake.min.js')}}"></script>
<script src="{{ get_asset('dist/plugins/pdfmake/vfs_fonts.js')}}"></script>
<script src="{{ get_asset('dist/plugins/datatables-buttons/js/buttons.html5.min.js')}}"></script>
<script src="{{ get_asset('dist/plugins/datatables-buttons/js/buttons.print.min.js')}}"></script>
<script src="{{ get_asset('dist/plugins/datatables-buttons/js/buttons.colVis.min.js')}}"></script>
<script src="{{ get_asset('dist/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js')}}"></script>
<script src="{{ get_asset('dist/js/custom-datatables.js')}}"></script>


<script>
    function showTab(tabId) {
      // Hide all tabs
      var tabs = document.querySelectorAll('.tab-content');
      tabs.forEach(function(tab) {
        tab.classList.remove('active');
      });

      // Show the selected tab
      document.getElementById(tabId).classList.add('active');

      // Remove 'active' class from all tabs
      var tabButtons = document.querySelectorAll('.tab');
      tabButtons.forEach(function(button) {
        button.classList.remove('active');
      });

      // Add 'active' class to the clicked tab
      event.currentTarget.classList.add('active');
    }
</script>

<script>
    displayUserPanel();
</script>
<script src="{{ get_asset('dist/js/users.js') }}" defer>
</script>

@if(session('add') && session('type') == "group")

<script>
    window.onload= function(){
        $('.add-group-button').click();
    }
</script>

@elseif(session('add') && session('type') == "user")

<script>
    window.onload= function(){
        $('.add-user-button').click();
    }
</script>

@endif

@endsection
