@extends('layouts.app')
@section('title', 'Bangladesh Unbound - Edit Roles')
@section('page-title', 'Roles')
@section('breadcrumb')
<!-- Breadcrumb Navigation -->
<nav class="breadcrumb-container" aria-label="breadcrumb" class="mb-4">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="{{ route('admin.dashboard') }}">
                <img src="{{ asset('backend/img/ico/ico-dashboard.svg') }}" alt="Dashboard" class="breadcrumb-icon">
                Dashboard
            </a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">
            <img src="{{ asset('backend/img/ico/ico-coupons.svg') }}" alt="Coupons" class="breadcrumb-icon">
            Roles Management
        </li>
    </ol>
</nav>
@endsection
@section('content')
<div class="coupons-header">
    <div class="d-flex align-items-center justify-content-between">
        <h3 class="mb-0 section-title">
            <img src="{{ asset('backend/img/ico/ico-coupons.svg') }}" alt="Coupons" class="section-icon">
            Edit Roles
        </h3>
        <a href="{{ route('admin.roles.index') }}" class="btn btn-add-coupon"><i class="bi bi-arrow-left"></i> Back to
            List</a>
    </div>
</div>

<div class="border-0 shadow-sm card">
    <div class="card-body">
        <form action="{{ route('admin.roles.update', $role->id) }}" id="editRoleForm" method="POST"
            data-id="{{ $role->id }}">
            @csrf
            @method('POST')
            <div class="mb-4 row">
                <div class="col-md-12">
                    <div class="mb-3">
                        <label for="name" class="form-label">
                            Name <span class="text-danger">*</span> <small>(The Admin, Super Admin,
                                Tour Guide and Team Leader role name is Not editable)</small>
                        </label>

                        @php
                        $isLockedRole = in_array($role->name, [
                        'super_admin',
                        'admin',
                        'team_leader',
                        'tour_guide',
                        'Super Admin',
                        'Admin',
                        'Team Leader',
                        'Tour Guide',
                        'team leader',
                        'tour guide',
                        ]);
                        @endphp

                        <input type="text" class="form-control @error('name') is-invalid @enderror" id="name"
                            name="name" placeholder="Name" value="{{ $role->title ?? old('name') }}" required>
                        <p class="px-1 text-sm text-danger" role="alert" id="nameError"></p>


                        @if ($isLockedRole)
                        <input type="hidden" name="name" id="currentRoleName" value="{{ $role->title }}">
                        @endif

                        @error('name')
                        <span class="text-sm text-danger" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                    </div>
                </div>
            </div>
            <div class="px-0 mb-3 border-0 card">
                <div class="card-header bg-light">
                    <h6 class="mb-0">Assign Permissions</h6>
                </div>
                <div class="card-body">
                    <div class="row g-4">
                        @foreach ($groupedPermissions as $section => $sectionPermissions)
                        @php
                        $sectionNameWithoutSpace = str_replace(' ', '', $section);
                        @endphp
                        <div class="col-md-12">
                            <div class="border shadow-sm card rounded-3 h-100">
                                <div class="bg-white card-header d-flex justify-content-between align-items-center">
                                    <strong style="font-size: 14px">{{ $section }}</strong>
                                    <div class="form-check form-switch">
                                        <input type="checkbox" id="select_all_{{ $sectionNameWithoutSpace }}"
                                            class="form-check-input select-all-checkbox"
                                            data-section="{{ $sectionNameWithoutSpace }}">
                                        <label class="form-check-label small fw-bold" style="font-size: 14px"
                                            for="select_all_{{ $sectionNameWithoutSpace }}">
                                            Select All
                                        </label>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="flex-wrap gap-3 px-1 d-flex">
                                        @foreach ($sectionPermissions as $permission)
                                        <div class="px-4 py-2 rounded shadow-sm ms-3 w-md-100 w-lg-50 max-w-lg-50 form-check form-switch d-flex align-items-center bg-light"
                                            style="height: auto">
                                            <input type="checkbox" name="permissions[]"
                                                id="permission_{{ $permission->id }}" value="{{ $permission->name }}"
                                                class="form-check-input me-2 permission-{{ $sectionNameWithoutSpace }}"
                                                @if (in_array($permission->id, $rolePermissionIds)) checked @endif>
                                            <label class="mb-0 form-check-label" for="permission_{{ $permission->id }}"
                                                style="font-size: 14px">
                                                {{ $permission->alias }}
                                            </label>
                                            <div class="invalid-feedback text-danger small ms-2"
                                                id="error-permission-{{ str_replace('.', '-', $permission->name) }}">
                                            </div>
                                            <button
                                                class="px-1 py-0 bg-white btn btn-primary text-dark d-none checking-btn"
                                                id="checking-btn-{{ $permission->id }}" type="button" disabled>
                                                <span class="spinner-grow spinner-grow-sm loader-color"
                                                    aria-hidden="true"></span>
                                                <span role="status">Checking...</span>
                                            </button>
                                        </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>

            <div class="gap-3 mt-3 d-flex">
                <a id="cancel" class="btn btn-danger" href="{{ route('admin.roles.index') }}">Cancel</a>
                <button id="submit" type="submit" class="btn btn-success d-flex align-items-center">Submit</button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {

             // Select all functionality
             document.querySelectorAll('.select-all-checkbox').forEach(function(selectAll) {
                 selectAll.addEventListener('click', function() {
                     const sectionId = this.getAttribute('data-section'); // use data-section
                     const checkboxes = document.querySelectorAll('.permission-' + sectionId);
                     const isChecked = this.checked;
                     checkboxes.forEach(cb => {
                         cb.checked = isChecked;
                         cb.dispatchEvent(new Event('change'));
                     });
                 });
             });

             // Keep "Select All" synced if individual checkboxes are toggled
             document.querySelectorAll('input[name="permissions[]"]').forEach(function(checkbox) {
                 checkbox.addEventListener('change', function() {
                     const sectionClass = Array.from(this.classList).find(cls => cls.startsWith(
                         'permission-'));
                     if (!sectionClass) return;

                     const sectionId = sectionClass.replace('permission-', '');
                     const all = document.querySelectorAll('.permission-' + sectionId).length;
                     const checked = document.querySelectorAll('.permission-' + sectionId +
                         ':checked').length;

                     document.getElementById('select_all_' + sectionId).checked = (all === checked);
                 });
             });

             // Initialize "Select All" on page load
             document.querySelectorAll('.select-all-checkbox').forEach(function(selectAll) {
                 const sectionId = selectAll.getAttribute('data-section');
                 const all = document.querySelectorAll('.permission-' + sectionId).length;
                 const checked = document.querySelectorAll('.permission-' + sectionId + ':checked').length;
                 selectAll.checked = (all === checked);
             });


             let isTrue = true;
             const submitBtn = $('#submit');
             const roleInput = $('#name');
             const nameError = $('#nameError');
             const originalRoleName = $('#currentRoleName').val()?.trim().toLowerCase() || roleInput.val().trim()
                 .toLowerCase();
             const restrictedNames = ['Admin', 'Super Admin', 'Tour Guide', 'Team Leader', 'super_admin', 'tour_guide'].map(name => name.toLowerCase());

             const form = $('#editRoleForm');
             const formAction = form.attr('action');
             const roleId = form.data('id');

             const disableSubmitBtn = () => submitBtn.prop('disabled', true);
             const enableSubmitBtn = () => submitBtn.prop('disabled', false);
             const clearRoleInputError = () => (roleInput.removeClass('is-invalid'), nameError.text(''));
             const pushRoleInputError = (error) => (roleInput.addClass('is-invalid'), nameError.text(error));
             const istrueAction = () => {
                 if (!isTrue) {
                     document.querySelectorAll('input[type="checkbox"]').forEach(input => {
                         input.setAttribute('disabled', 'disabled');
                     })
                     return true;
                 } else {
                     document.querySelectorAll('input[type="checkbox"]').forEach(input => {
                         input.removeAttribute('disabled');
                     })
                     return true;
                 }
             }

             if (roleInput.val() === 'Admin' || roleInput.val() === 'Super Admin' || roleInput.val() === 'Tour Guide' ||
                 roleInput.val() === 'Team Leader') {
                 roleInput.attr('readonly', 'readonly');
             }

             const roleIsInvalid = (message, type = 'warning') => {
                 swal.fire({
                     title: `<strong class="text-danger"><span style="text-transform: uppercase;">Invalid Role Name</span></strong>`,
                     icon: type,
                     html: `
                <p class='text-danger'><i class="fa fa-exclamation-triangle"></i> ${message}</p>
                <p>The following <span style="color:#d33; font-weight:bold;">role names</span> are <span style="color:#d33;">restricted</span> and cannot be redefined:</p>
                <p>
                    <span style="display:inline-block; background:#f5eded; border: 1px solid #e2bfbf; color:#721c24; padding:4px 8px; margin:2px; border-radius:4px;">Admin</span>
                    <span style="display:inline-block; background:#f5eded; border: 1px solid #e2bfbf; color:#721c24; padding:4px 8px; margin:2px; border-radius:4px;">Super Admin</span>
                    <span style="display:inline-block; background:#f5eded; border: 1px solid #e2bfbf; color:#721c24; padding:4px 8px; margin:2px; border-radius:4px;">Tour Guide</span>
                    <span style="display:inline-block; background:#f5eded; border: 1px solid #e2bfbf; color:#721c24; padding:4px 8px; margin:2px; border-radius:4px;">Team Leader</span>
                </p>
            `,
                     showCloseButton: true,
                     showCancelButton: false,
                     focusConfirm: false,
                     confirmButtonText: `<i class="fa fa-thumbs-up"></i> Change It`,
                     confirmButtonAriaLabel: "Thumbs up, Change It!",
                 });
             };

             //role name is required
             const roleNameRequired = () => {
                 const message = 'Role name is required.';
                 pushRoleInputError(message, 'error');
                 disableSubmitBtn();
                 roleInput.focus();
                 roleIsInvalid(message);
                 return false;
             }

             function checkRoleName() {
                 const roleName = roleInput.val().trim().toLowerCase();

                 // check empty
                 if (roleName === '') {
                     // roleNameRequired();
                     isTrue = false;
                     istrueAction();
                     return false;
                 }

                 if (roleName === originalRoleName) {
                     clearRoleInputError();
                     enableSubmitBtn();
                     isTrue = true;
                     istrueAction();
                     return true;
                 }

                 if (restrictedNames.includes(roleName)) {
                     const message = `"${roleInput.val().trim()}" is a restricted role and cannot be used.`;
                     pushRoleInputError(message);
                     disableSubmitBtn();
                     roleInput.focus();
                     roleIsInvalid(message, 'error');
                     isTrue = false;
                     istrueAction();
                     return false;
                 }

                 roleInput.removeClass('is-invalid');
                 nameError.text('');
                 enableSubmitBtn();
                 isTrue = true;
                 istrueAction();
                 return true;
             }

             roleInput.on('keyup change', function() {
                 checkRoleName();
                 const formData = new FormData();
                 formData.append('_token', $('input[name="_token"]').val());
                 formData.append('name', $('input[name="name"]').val());
                 //  checkRoleNameValidation(formData);

             });

             const toggleCheckingBtn = function(element, show = true) {
                 show ? $(element).removeClass('d-none') : $(element).addClass('d-none');
             };

             $('.select-all-checkbox').on('click', function() {
                 const sectionId = $(this).attr('id').replace('select_all_', '');
                 const checkboxes = $('.permission_' + sectionId);
                 const isChecked = $(this).prop('checked');

                 checkboxes.prop('checked', isChecked).trigger('change');

             });

             // Individual permission checkbox handler
             $('input[name="permissions[]"]').on('change', function() {
                 const checkbox = $(this);
                 const isChecked = checkbox.prop('checked');
                 const permissionName = checkbox.val();

                 const id = $(this).attr('id').split('_')[1];
                 const checkingBtn = $(`#checking-btn-${id}`);
                 // toggleCheckingBtn(checkingBtn, true);

                 const formData = new FormData();
                 formData.append('_token', $('input[name="_token"]').val());
                 formData.append('name', $('input[name="name"]').val());
                 formData.append('permissions[]', permissionName);

                 // checkbox.prop('disabled', true);

                 //    checkPermissionValidation(checkbox, formData, checkingBtn);

             });


             function checkPermissionValidation(checkbox, formData = null, checkingBtn = null) {

                 $.ajax({
                     url: `#`.replace('roleID',
                         roleId),
                     type: 'POST',
                     data: formData,
                     contentType: false,
                     processData: false,
                     success: function() {
                         toggleCheckingBtn(checkingBtn, false);
                         enableSubmitBtn();
                         clearPermissionError(checkbox);
                         checkbox.prop('disabled', false);
                     },
                     error: function(xhr) {
                         toggleCheckingBtn(checkingBtn, false);
                         enableSubmitBtn();
                         checkbox.prop('disabled', false);

                         if (xhr.status === 422) {
                             const errors = xhr.responseJSON.errors;

                             checkbox.prop('checked', false);
                             $message = errors.name == "Role name already exists." ? "This " + errors
                                 .name + " Please try another name and set permissions." : errors.name;

                             showPermissionError(checkbox, errors['permissions.0'] ? errors[
                                 'permissions.0'][0] : $message);
                             pushRoleInputError(errors.name[0]);
                         } else {
                             checkbox.prop('checked', false);
                             showPermissionError(checkbox, xhr.responseJSON.message);
                         }
                     }
                 });
             }


             form.on('submit', function(e) {
                 e.preventDefault();

                 $('input[type=checkbox]').removeClass('is-invalid');
                 $('.invalid-feedback').text('');


                 $.ajax({
                     url: formAction,
                     type: 'POST',
                     data: form.serialize(),
                     success: function(response) {
                         toastr.success(response.message);
                         window.location.href = "{{ route('admin.roles.index') }}";
                     },
                     error: function(xhr) {
                         disableSubmitBtn();
                         if (xhr.status === 422) {
                             const errors = xhr.responseJSON.errors;
                             toastr.error(xhr.responseJSON.message);

                             Object.keys(errors).forEach(function(field) {
                                 if (field.startsWith('permissions.')) {
                                     const index = parseInt(field.split('.')[1]);
                                     const checkbox = $('input[name="permissions[]"]')
                                         .eq(index);
                                     checkbox.addClass('is-invalid');
                                     checkbox.closest('.form-check').find(
                                         '.invalid-feedback').text(errors[field][0]);
                                 }
                             });
                         } else if (xhr.status === 403) {
                             toastr.error('Access Denied!');
                         } else {
                             toastr.error("Something went wrong!");
                         }
                     }
                 });
             });

             // Utility Functions
             function showPermissionError(checkbox, message) {
                 checkbox.addClass('is-invalid');
                 const permissionName = checkbox.val();
                 const errorDivId = `#error-permission-${permissionName.replace(/\./g, '-')}`;
                 $(errorDivId).text(message);
             }

             function clearPermissionError(checkbox) {
                 checkbox.removeClass('is-invalid');
                 const permissionName = checkbox.val();
                 const errorDivId = `#error-permission-${permissionName.replace(/\./g, '-')}`;
                 $(errorDivId).text('');
             }

             checkRoleName();
             istrueAction();
         });
</script>
@endpush