@extends('layouts.admin')

@section('heading', $role->exists ? 'Edit role' : 'New role')
@section('subheading', 'Name the role and tick what it can access.')

@section('content')

<div class="card p-6 max-w-4xl">
  <form method="POST" action="{{ $role->exists ? route('shop.roles.update', $role) : route('shop.roles.store') }}">
    @csrf
    @if($role->exists) @method('PUT') @endif

    @if ($errors->any())
      <div class="mb-4 text-sm rounded-lg px-4 py-3" style="background:#FCEBEB; color:#791F1F;">
        {{ $errors->first() }}
      </div>
    @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="{{ 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">
      @foreach($permissions as $module => $items)
        <div>
          <div class="flex items-center justify-between mb-2">
            <p class="text-xs font-semibold" style="color:#5E35B1;">{{ $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="{{ Str::slug($module) }}" style="accent-color:#C2185B;">
              Select all
            </label>
          </div>
          <div class="flex flex-wrap gap-2">
            @foreach($items as $permission)
              <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="{{ $permission->id }}"
                  class="permission-checkbox module-{{ Str::slug($module) }}"
                  {{ in_array($permission->id, old('permissions', $selected)) ? 'checked' : '' }}
                  style="accent-color:#C2185B;">
                {{ $permission->label }}
              </label>
            @endforeach
          </div>
        </div>
      @endforeach
    </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;">
        {{ $role->exists ? 'Update role' : 'Create role' }}
      </button>
      <a href="{{ route('shop.roles.index') }}" class="text-sm" style="color:#6b6470;">Cancel</a>
    </div>
  </form>
</div>

@endsection

@push('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>
@endpush