@extends('layouts.app')
@section('title', 'Roles & Permission')

@section('content')
<div class="fixed-action-bar">
  <div class="fw-semibold fixed-nav-title">Roles & Permission</div>
  
  <div class="d-flex align-items-center">

    <!-- Add Role Button -->
    @can('Role create')
    <a href="{{ route('roles.create') }}" data-toggle="tooltip" title="Add" class="mx-1">
      <i class="fa-regular fa-plus fixed-nav-btn fixed-nav-btn-active p-1 d-inline-flex align-items-center justify-content-center"></i>
    </a>
    @endcan

    <!-- Save Button -->
    <i class="fa-regular fa-save fixed-nav-btn rounded-5 p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Save"></i>

    <!-- Edit Button -->
    <i class="fa-regular fa-edit fixed-nav-btn rounded-5 p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Edit"></i>

    <!-- Delete Role Button -->
    @can('Role delete')
    <i class="fa-regular fa-trash-can fixed-nav-btn rounded-5 p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Delete"></i>
    @endcan

    <!-- Close Button -->
    <i class="fa-solid fa-xmark fixed-nav-btn rounded-5 p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Close"></i>

    <!-- Column Visibility Dropdown -->
    <div class="dropdown ms-2">
      <button class="btn btn-de-dark fixed-nav-btn rounded-circle p-1 d-inline-flex align-items-center justify-content-center mx-1"
        type="button" id="columnVisibilityDropdownRoles" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Column Visibility"
        style="width: 38px; height: 38px;">
        <i class="fa-solid fa-columns"></i>
      </button>
      <div class="dropdown-menu dropdown-menu-right columns-menu" aria-labelledby="columnVisibilityDropdownRoles" style="min-width: 180px;">
        <li><label><input type="checkbox" class="columnCheckbox" data-column="role_id" checked> ID</label></li>
        <li><label><input type="checkbox" class="columnCheckbox" data-column="role_name" checked> Role Name</label></li>
        <li><label><input type="checkbox" class="columnCheckbox" data-column="action" checked> Action</label></li>
      </div>
    </div>

  </div>
</div>


    <div class="card mt-3 rounded-border">
        <div class="card-body">
            <div class="row">
                <div class="col-md-8">
                    <div class="">
                        <form action="{{ route('roles.index') }}" method="GET">
                            <div class="input-group mb-3">
                                <input type="text" name="search" placeholder="Type and press enter to search" class="form-control"
                                    aria-label="Search" aria-describedby="button-addon2" value="{{ $search }}">
                            </div>
                        </form>
                    </div>
                </div>
                <div class="col-md-2 d-grid">
                    {{-- <button type="button" class="btn btn-de-dark filter-btn" data-toggle="collapse"
                        data-target="#filtersCollapse" aria-expanded="false" aria-controls="filtersCollapse"
                        disabled>Filters</button> --}}
                </div>
                {{-- <div class="col-md-2">
                    <div class="dropdown">
                        <button class="btn btn-de-dark filter-btn dropdown-toggle" type="button" data-toggle="dropdown"
                            aria-expanded="false">
                            Column Visibility
                        </button>
                        <div class="dropdown-menu columns-menu">
                            <li><input type="checkbox" class="columnCheckbox" data-column="role_id" checked>ID</li>
                            <li><input type="checkbox" class="columnCheckbox" data-column="role_name" checked>Role Name</li>
                            <li><input type="checkbox" class="columnCheckbox" data-column="action" checked>Action</li>
                        </div>
                    </div>
                </div> --}}
                <div class="col-md-2">
                    <select id="perPageFilterRoles" class="form-control" aria-label="select example">
                        <option value="10" {{ session('perPage', 10) == 10 ? 'selected' : '' }}>10 Rows</option>
                        <option value="20" {{ session('perPage') == 20 ? 'selected' : '' }}>20 Rows</option>
                        <option value="50" {{ session('perPage') == 50 ? 'selected' : '' }}>50 Rows</option>
                        <option value="100" {{ session('perPage') == 100 ? 'selected' : '' }}>100 Rows</option>
                        <option value="500" {{ session('perPage') == 500 ? 'selected' : '' }}>500 Rows</option>
                    </select>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 mt-2">
                    <div class="collapse" id="filtersCollapse">

                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="table-responsive">
                        <table class="table mt-3 table-striped" id="userTable">
                            <thead class="bg-light">
                                <tr>
                                    <th scope="col">
                                        <input class="" type="checkbox" id="selectAll">
                                    </th>
                                    <th class="role_id-index" scope="col">ID</th>
                                    <th class="role_name-index" scope="col">Role Name</th>
                                    <th class="action-index" scope="col">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($roles as $role)
                                    <tr>
                                        <td >
                                            <input class="userCheckbox" type="checkbox" id="userCheckbox{{ $role->id }}" data-id="{{ $role->id }}" @if($role->id == 1) style="display: none;" @endif>
                                        </td>
                                        <td class="role_id-index">
                                            @can('Role show')
                                                <a href="{{ route('roles.show', $role->id) }}" class="link">{{ $role->id }}</a>
                                            @else
                                                <span class="link" style="cursor: not-allowed;">{{ $role->id }}</span>
                                            @endcan
                                        </td>                                        
                                        <td class="role_name-index">{{ $role->name }}</a></td>
                                        <td class="action-index">
                                            <div class="d-inline-flex table-action-btns">
                                                @if($role->id != 1)
                                                    @can('Role update')
                                                    <span class="action-btn">
                                                        <a href="{{ route('roles.edit', $role->id) }}">
                                                            <i class="fa-solid fa-pencil rounded-5 p-1 d-inline-flex align-items-center justify-content-center action-btn theme-blue"></i>
                                                        </a>
                                                    </span>
                                                    @endcan
                                                    @can('Role delete')
                                                    <span class="action-btn">
                                                        <a href="{{ route('roles.destroy', $role->id) }}"
                                                            onclick="event.preventDefault(); confirmDelete('{{ $role->id }}');">
                                                            <i class="fa-solid fa-trash-can rounded-5 p-1 d-inline-flex align-items-center justify-content-center action-btn theme-red"></i>
                                                        </a>
                                                        <form id="delete-role-form-{{ $role->id }}"
                                                            action="{{ route('roles.destroy', $role->id) }}" method="POST"
                                                            style="display: none;">
                                                            @csrf
                                                            @method('DELETE')
                                                        </form>
                                                    </span>
                                                    @endauth
                                                @endif
                                            </div>
                                        </td>                                        
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    <div class="d-flex justify-content-between mt-4 align-items-center">
                        <div style="font-size: 14px;" class="fw-normal">
                            Showing {{ $roles->firstItem() }} to {{ $roles->lastItem() }} of {{ $roles->total() }} entries
                        </div>

                        <div>
                            {{ $roles->appends(request()->query())->links() }} 
                        </div>
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('js')
<script>
       function confirmDelete(roleId) {
        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById('delete-role-form-' + roleId).submit();
            }
        });
    }
    document.addEventListener('DOMContentLoaded', function() {
        const checkboxes = document.querySelectorAll('.columnCheckbox');

        // Function to toggle column visibility based on checkbox status
        function toggleColumnVisibility(column, checked) {
            const th = document.querySelector(`th.${column}-index`);
            const tdList = document.querySelectorAll(`td.${column}-index`);

            if (th && tdList) {
                if (checked) {
                    th.style.display = '';
                    tdList.forEach(function(td) {
                        td.style.display = '';
                    });
                } else {
                    th.style.display = 'none';
                    tdList.forEach(function(td) {
                        td.style.display = 'none';
                    });
                }
            } else {
                console.error(`Element not found for column ${column}`);
            }
        }

        // Add change event listeners to checkboxes
        checkboxes.forEach(function(checkbox) {
            checkbox.addEventListener('change', function() {
                const column = this.getAttribute('data-column');
                const checked = this.checked;

                toggleColumnVisibility(column, checked);

                // Save column visibility state to session storage
                sessionStorage.setItem(column, checked ? 'visible' : 'hidden');
            });
        });

        // Check and restore column visibility from session storage
        checkboxes.forEach(function(checkbox) {
            const column = checkbox.getAttribute('data-column');
            const visibility = sessionStorage.getItem(column);

            if (visibility === 'hidden') {
                checkbox.checked = false;
                toggleColumnVisibility(column, false);
            }
        });
    });

    document.addEventListener('DOMContentLoaded', function() {
    const deleteSelectedButton = document.getElementById('deleteSelectedroles');
    const userCheckboxes = document.querySelectorAll('.userCheckbox');

    deleteSelectedButton.addEventListener('click', function() {
        const selectedRoles = [];
        userCheckboxes.forEach(checkbox => {
            if (checkbox.checked) {
                selectedRoles.push(checkbox.dataset.id);
            }
        });

        if (selectedRoles.length > 0) {
            // Use SweetAlert for confirmation
            Swal.fire({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Proceed with deletion
                    fetch('{{ route('roles.deleteSelected') }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        body: JSON.stringify({ selected_roles: selectedRoles }),
                        redirect: 'follow' // Follow redirects
                    })
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('Network response was not ok');
                        }
                        // Check if response is JSON
                        const contentType = response.headers.get('content-type');
                        if (contentType && contentType.indexOf('application/json') !== -1) {
                            return response.json();
                        } else {
                            throw new Error('Response is not JSON');
                        }
                    })
                    .then(data => {
                        // Show success toast message
                        if (data.success) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Roles deleted successfully'
                            });
                            setTimeout(() => {
                          window.location.reload(); 
                     }, 3000); 
                        } else {
                            throw new Error(data.message || 'Deletion failed');
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        // Show error toast message
                        Swal.fire({
                            icon: 'error',
                            text: 'Cannot delete role with assigned users'
                        });
                        setTimeout(() => {
                          window.location.reload(); 
                     }, 3000); 

                    });
                }
            });
        } else {
            // Show error toast if no roles selected
            Swal.fire({
                icon: 'error',
                title: 'Please select roles to delete'
            });
        }
    });
});

</script>

<script>
    document.getElementById('perPageFilterRoles').addEventListener('change', function () {
     const perPage = this.value;
     const urlParams = new URLSearchParams(window.location.search);
     urlParams.set('perPage', perPage);
     window.location.href = '{{ route('roles.index') }}?' + urlParams.toString();
 });
 document.addEventListener('DOMContentLoaded', function() {
    const selectAllCheckbox = document.getElementById('selectAll');
    const userCheckboxes = document.querySelectorAll('.userCheckbox');

    selectAllCheckbox.addEventListener('change', function() {
        const isChecked = this.checked; // Get the checked state of selectAll checkbox

        userCheckboxes.forEach(function(checkbox) {
            checkbox.checked = isChecked; // Set all user checkboxes to match selectAll checkbox state
        });
    });
});
 </script>
@endpush