<?php $__env->startSection('heading', $role->exists ? 'Edit role' : 'New role'); ?>
<?php $__env->startSection('subheading', 'Name the role and tick what it can access.'); ?>

<?php $__env->startSection('content'); ?>

<div class="card p-6 max-w-4xl">
  <form method="POST" action="<?php echo e($role->exists ? route('shop.roles.update', $role) : route('shop.roles.store')); ?>">
    <?php echo csrf_field(); ?>
    <?php if($role->exists): ?> <?php echo method_field('PUT'); ?> <?php endif; ?>

    <?php if($errors->any()): ?>
      <div class="mb-4 text-sm rounded-lg px-4 py-3" style="background:#FCEBEB; color:#791F1F;">
        <?php echo e($errors->first()); ?>

      </div>
    <?php endif; ?>

    <div class="mb-6">
      <label class="block text-xs font-medium mb-1.5" style="color:#1A1625;">Role name *</label>
      <input type="text" name="name" value="<?php echo e(old('name', $role->name)); ?>" placeholder="e.g. Cutter, Cashier, Delivery Boy" required
        class="w-full px-4 py-2.5 rounded-lg border text-sm outline-none" style="border-color:#e6e1d8;">
    </div>

    <div class="flex items-center justify-between mb-3">
      <p class="text-xs font-medium" style="color:#1A1625;">Permissions</p>
      <label class="flex items-center gap-2 text-xs font-medium cursor-pointer" style="color:#5E35B1;">
        <input type="checkbox" id="select-all-global" style="accent-color:#C2185B;">
        Select all
      </label>
    </div>

    <div class="space-y-5 mb-6">
      <?php $__currentLoopData = $permissions; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $module => $items): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        <div>
          <div class="flex items-center justify-between mb-2">
            <p class="text-xs font-semibold" style="color:#5E35B1;"><?php echo e($module); ?></p>
            <label class="flex items-center gap-1.5 text-xs cursor-pointer" style="color:#a19a8f;">
              <input type="checkbox" class="module-select-all" data-module="<?php echo e(Str::slug($module)); ?>" style="accent-color:#C2185B;">
              Select all
            </label>
          </div>
          <div class="flex flex-wrap gap-2">
            <?php $__currentLoopData = $items; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $permission): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
              <label class="flex items-center gap-2 text-sm px-3 py-2 rounded-lg whitespace-nowrap" style="background:#FFF9F0;">
                <input type="checkbox" name="permissions[]" value="<?php echo e($permission->id); ?>"
                  class="permission-checkbox module-<?php echo e(Str::slug($module)); ?>"
                  <?php echo e(in_array($permission->id, old('permissions', $selected)) ? 'checked' : ''); ?>

                  style="accent-color:#C2185B;">
                <?php echo e($permission->label); ?>

              </label>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
          </div>
        </div>
      <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
    </div>

    <div class="flex items-center gap-3">
      <button type="submit" class="px-4 py-2 rounded-lg text-sm font-medium text-white" style="background:#C2185B;">
        <?php echo e($role->exists ? 'Update role' : 'Create role'); ?>

      </button>
      <a href="<?php echo e(route('shop.roles.index')); ?>" class="text-sm" style="color:#6b6470;">Cancel</a>
    </div>
  </form>
</div>

<?php $__env->stopSection(); ?>

<?php $__env->startPush('scripts'); ?>
<script>
  document.querySelectorAll('.module-select-all').forEach(moduleCheckbox => {
    const moduleClass = 'module-' + moduleCheckbox.dataset.module;
    const checkboxes = document.querySelectorAll('.' + moduleClass);

    moduleCheckbox.addEventListener('change', function () {
      checkboxes.forEach(cb => cb.checked = this.checked);
      updateGlobalSelectAll();
    });

    checkboxes.forEach(cb => {
      cb.addEventListener('change', function () {
        const allChecked = Array.from(checkboxes).every(c => c.checked);
        moduleCheckbox.checked = allChecked;
        updateGlobalSelectAll();
      });
    });
  });

  const globalSelectAll = document.getElementById('select-all-global');
  const allCheckboxes = document.querySelectorAll('.permission-checkbox');

  globalSelectAll.addEventListener('change', function () {
    allCheckboxes.forEach(cb => cb.checked = this.checked);
    document.querySelectorAll('.module-select-all').forEach(cb => cb.checked = this.checked);
  });

  function updateGlobalSelectAll() {
    globalSelectAll.checked = Array.from(allCheckboxes).every(cb => cb.checked);
  }

  document.querySelectorAll('.module-select-all').forEach(moduleCheckbox => {
    const moduleClass = 'module-' + moduleCheckbox.dataset.module;
    const checkboxes = document.querySelectorAll('.' + moduleClass);
    moduleCheckbox.checked = Array.from(checkboxes).every(cb => cb.checked);
  });
  updateGlobalSelectAll();
</script>
<?php $__env->stopPush(); ?>

<?php echo $__env->make('layouts.admin', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH F:\xampp\htdocs\etailorz-v2\resources\views/admin/roles/form.blade.php ENDPATH**/ ?>