@extends('app')
@section('content')

<title>Manage Roles</title>

<meta name="csrf-token" content="{{ csrf_token() }}">

<div class="content-wrapper">
    <div class="container">
        <div class="row">
            <div class="col-md-12"> 
                <h1 class="page-head-line">Role List</h1>

                @if(session('success'))
                    <div class="alert alert-success mt-3">{{ session('success') }}</div>
                @endif

                @if($roles->count() > 0)
                <form method="POST" id="bulkDeleteForm">
                    <div class="mb-3 d-flex gap-2 align-items-center">
                        <div style="float: left;padding:10px 5px;">
                            <a id="delete" class="btn btn-danger pull-right display_button" data-toggle="tooltip" title="Delete entry" href="javascript:void(0);" onclick="submitdelfrm();" style="margin-right:0.5%;margin-top:1%" >
                                <i class="fa fa-trash-o"></i>
                            </a> 
                        </div>
                        <div style="float: left;padding:10px 5px;"> 
                            <a href="javascript:void(0);" onclick="editSelectedRole()" id="edit" class="btn btn-info pull-right display_button" data-toggle="tooltip" title="Edit details" style="margin-right:0.5%;margin-top:1%">
                                <i class="fa fa-pencil"></i>
                            </a>
                        </div>
                        <div class="col-lg-1.5 col-md-1.5 col-sm-1.5 col-xs-1.5" style="float: left;padding:10px 2px;">
                            <a href="{{ route('roles.create') }}" id="add" data-toggle="tooltip" title="Add New Role" class="btn btn-primary display_button">
                                <i class="fa fa-plus"></i>
                            </a> 
                        </div>
                    </div>

                    <table class="table table-bordered mt-4">
                        <thead>
                            <tr>
                                <th><input type="checkbox" id="select-all"></th>
                                <th>Role Title</th>
                                <th>Role Slug</th>
                                <th>Is_Active</th>
                            </tr>
                        </thead>
                            <tbody>
                                @foreach($roles as $role)
                                <tr>
                                    <td>
                                        @if(!in_array($role->role_slug, ['super_admin', 'admin']))
                                            <input type="checkbox" name="role_ids[]" value="{{ $role->id }}">
                                        @else
                                            <input type="checkbox" disabled>
                                        @endif
                                    </td>
                                    <td>{{ $role->role_title }}</td>
                                    <td>{{ $role->role_slug }}</td>
                                    <td>
                                        @if($role->is_active === 'Y')
                                            <span class="">Active</span>
                                        @else
                                            <span class="">Inactive</span>
                                        @endif
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>

                    </table>
                </form>
                @else
                    <p>No roles found.</p>
                @endif
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const checkboxes = document.querySelectorAll('input[name="role_ids[]"]');
    const selectAll = document.getElementById('select-all');
    const deleteBtn = document.getElementById('delete');
    const editBtn = document.getElementById('edit');

    function toggleActionButtons() {
        const selected = document.querySelectorAll('input[name="role_ids[]"]:checked');
        deleteBtn.classList.toggle('disabled', selected.length === 0);
        editBtn.classList.toggle('disabled', selected.length !== 1);
        deleteBtn.style.pointerEvents = selected.length === 0 ? 'none' : 'auto';
        editBtn.style.pointerEvents = selected.length === 1 ? 'auto' : 'none';
    }

    checkboxes.forEach(checkbox => {
        checkbox.addEventListener('change', toggleActionButtons);
    });

    if (selectAll) {
        selectAll.addEventListener('change', function (e) {
            checkboxes.forEach(cb => cb.checked = e.target.checked);
            toggleActionButtons();
        });
    }

    toggleActionButtons(); // Initial state

    deleteBtn.addEventListener('click', function(e) {
    const selectedCheckboxes = document.querySelectorAll('input[name="role_ids[]"]:checked');
    if (selectedCheckboxes.length === 0) {
        alert('Please select at least one role to delete.');
        return;
    }

    if (!confirm('Are you sure to delete selected roles?')) {
        return;
    }

    const roleIds = Array.from(selectedCheckboxes).map(cb => cb.value);

    // fetch("{{ route('roles.bulkDelete') }}", {
    fetch("/roles/bulk-delete", {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({ role_ids: roleIds })
    })
    .then(response => response.json())
    .then(data => {
        alert(data.message || 'Selected roles deleted successfully.');
        window.location.reload();
    })
    .catch(error => {
        alert('An error occurred while deleting roles. Check console for details.');
        console.error('Fetch error:', error);
    });
});


    window.editSelectedRole = function () {
        const selected = document.querySelectorAll('input[name="role_ids[]"]:checked');
        if (selected.length === 1) {
            const roleId = selected[0].value;
            let editUrl = "{{ route('roles.edit', ':id') }}";
            window.location.href = editUrl.replace(':id', roleId);
        } else {
            alert("Please select exactly one role to edit.");
        }
    };
});
</script>

@endsection