@extends('layouts.app')
@section('title', 'Bangladesh Unbound -Create Roles')
@section('page-title', 'Roles')
@section('breadcrumb')
<style>
    .max-w-lg-50 {
        width: 43% !important;
    }

    @media (min-width: 992px) {

        /* Large screens and up */
        .max-w-lg-50 {
            width: 22% !important;
        }
    }

    @media (min-width: 1800px) {

        /* Extra large screens and up */
        .max-w-lg-50 {
            width: 16% !important;
        }
    }
</style>
<!-- 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">
            Create Roles
        </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">
            Create 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="px-0 border-0 shadow-sm card">
    <div class="mx-0 border-0 shadow-sm card-body">
        <form action="{{ route('admin.roles.store') }}" id="roleForm" method="POST">
            @csrf
            <div class="row">
                <div class="col-md-12">
                    <div class="mb-3">
                        <label for="name" class="form-label">Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('name') is-invalid @enderror" id="name"
                            name="name" placeholder="Name" value="{{ old('name') }}" required>

                        @error('name')
                        <span class="text-sm text-danger" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                    </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>
                                            </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </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);
             });


             const restrictedNames = [
                'super_admin',
                'admin',
                'team_leader',
                'tour_guide',
                'Super Admin',
                'Admin',
                'Team Leader',
                'Tour Guide',
                'team leader',
                'tour guide'
            ];

             function checkRoleName() {
                 const roleName = document.getElementById('name').value.trim();
                 if (restrictedNames.includes(roleName)) {
                    swal.fire({
                        icon: 'error',
                        title: 'Alert',
                        text: `"${roleName}" is a restricted role and cannot be created. Please contact administrators or use a different role name.`,
                    });
                     document.getElementById('name').value = '';
                     document.getElementById('name').focus();
                     return false;
                 }
                 return true;
             }

             document.getElementById('name').addEventListener('blur', checkRoleName);

             const form = document.getElementById('roleForm');
             const formAction = form.getAttribute('action');

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

             form.addEventListener('submit', function(e) {
                 e.preventDefault();
                 const submitBtn = document.getElementById('submit');

                 document.querySelectorAll('input[type=checkbox]').forEach(cb => cb.classList.remove(
                     'is-invalid'));
                 document.querySelectorAll('.invalid-feedback').forEach(el => el.textContent = '');
                 submitBtn.disabled = true;

                 const formData = new FormData(form);

                 const originalText = submitBtn.innerHTML;
                 submitBtn.innerHTML =
                     '<span class="spinner-border spinner-border-sm me-2"></span>Processing...';
                 submitBtn.disabled = true;


                 axios.post(formAction, formData)
                     .then(function(response) {
                         toastr.success(response.data.message);
                         window.location.href = "{{ route('admin.roles.index') }}";
                     })
                     .catch(function(error) {
                         submitBtn.disabled = false;

                         if (error.response && error.response.status === 422) {
                             const errors = error.response.data.errors;
                             toastr.error(error.response.data.message);

                             Object.keys(errors).forEach(function(field) {
                                 if (field.startsWith('permissions.')) {
                                     const index = parseInt(field.split('.')[1]);
                                     const checkbox = document.querySelectorAll(
                                         'input[name="permissions[]"]')[index];
                                     if (checkbox) {
                                         checkbox.classList.add('is-invalid');
                                         const feedback = checkbox.closest('.form-check')
                                             .querySelector('.invalid-feedback');
                                         if (feedback) feedback.textContent = errors[field][0];
                                     }
                                 }
                             });
                         } else if (error.response && error.response.status === 403) {
                             toastr.error('Access Denied!');
                         } else if (error.response && error.response.status === 500) {
                             toastr.error(error.response.data.message);
                         } else {
                             toastr.error("Something went wrong! " + (error.response ? error.response
                                 .status : ''));
                         }
                     })
                     .finally(function() {
                         submitBtn.innerHTML = originalText;
                         submitBtn.disabled = false;
                     })
             });
         });
</script>
@endpush