@php
$configData = Helper::appClasses();
@endphp

@extends('layouts/layoutMaster')

@section('title', $mode === 'create' ? 'Crear Rol' : 'Editar Rol')

@section('content')
<h4 class="mb-4">{{ $mode === 'create' ? 'Crear Rol' : 'Editar Rol' }}</h4>

<form method="POST" action="{{ $mode === 'create' ? route('admin.roles.store') : route('admin.roles.update', $role) }}">
  @csrf
  @if($mode==='edit') @method('PUT') @endif

  <div class="card mb-6">
    <div class="card-body">
      <div class="row g-4">
        <div class="col-md-6">
          <label class="form-label">Nombre del rol</label>
          <input type="text" name="name" class="form-control" value="{{ old('name', $role->name) }}" required />
        </div>
        <div class="col-md-6 d-flex align-items-end">
          <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" id="is_admin" name="is_admin" value="1" {{ old('is_admin', $role->is_admin ?? false) ? 'checked' : '' }}>
            <label class="form-check-label" for="is_admin">Acceso de administrador (todos los permisos)</label>
          </div>
        </div>
        <div class="col-12 d-flex justify-content-end">
          <div class="form-check">
            <input class="form-check-input" type="checkbox" id="select_all">
            <label class="form-check-label" for="select_all">Seleccionar todo</label>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-body table-responsive">
      <table class="table table-bordered align-middle">
        <thead>
          <tr>
            <th>Módulo</th>
            @foreach($actions as $action)
              <th class="text-center text-capitalize">{{ str_replace('_',' ', $action) }}</th>
            @endforeach
          </tr>
        </thead>
        <tbody>
          @foreach($modules as $module)
            <tr>
              <td><strong>{{ ucwords(str_replace('_',' ', $module)) }}</strong></td>
              @foreach($actions as $action)
                @php $pid = $permissionsMap[$module][$action] ?? null; @endphp
                <td class="text-center">
                  @if($pid)
                    <input type="checkbox" class="perm-box form-check-input" name="permissions[]" value="{{ $pid }}"
                      {{ in_array($pid, old('permissions', $selected)) ? 'checked' : '' }} />
                  @else
                    <span class="text-muted">—</span>
                  @endif
                </td>
              @endforeach
            </tr>
          @endforeach
        </tbody>
      </table>
    </div>
  </div>

  <div class="mt-4 d-flex flex-wrap gap-2 align-items-center">
    <button class="btn btn-primary" type="submit">Guardar</button>
    @if($mode==='edit')
      <button class="btn btn-secondary" type="button" id="save_ajax_btn">Guardar sin salir</button>
    @endif
    <a href="{{ route('admin.roles.index') }}" class="btn btn-outline-secondary">Cancelar</a>
    @if($mode==='edit')
      <button class="btn btn-outline-danger" type="submit" form="role-delete-form" onclick="return confirm('¿Eliminar rol?');">Eliminar</button>
    @endif
    <div id="ajax_status" class="ms-2 small"></div>
  </div>
</form>
@if($mode==='edit')
  <form id="role-delete-form" method="POST" action="{{ route('admin.roles.destroy', $role) }}" class="d-none">
    @csrf @method('DELETE')
  </form>
@endif

@push('scripts')
<script>
  const selectAll = document.getElementById('select_all');
  if (selectAll) {
    selectAll.addEventListener('change', function(){
      document.querySelectorAll('.perm-box').forEach(cb => { cb.checked = selectAll.checked; });
    });
  }
  const isAdmin = document.getElementById('is_admin');
  if (isAdmin) {
    isAdmin.addEventListener('change', function(){
      const disabled = this.checked;
      document.querySelectorAll('.perm-box').forEach(cb => { cb.disabled = disabled; if(disabled) cb.checked=true; });
    });
    // Apply initial state
    if (isAdmin.checked) {
      document.querySelectorAll('.perm-box').forEach(cb => { cb.disabled = true; cb.checked = true; });
    }
  }
</script>
@if($mode==='edit')
<script>
  document.addEventListener('DOMContentLoaded', function(){
    const btn = document.getElementById('save_ajax_btn');
    if (!btn) return;
    const formEl = document.querySelector('form[action="{{ route('admin.roles.update', $role) }}"]');
    const statusEl = document.getElementById('ajax_status');
    const csrf = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
    const setStatus = (msg, ok=false) => { if(!statusEl) return; statusEl.textContent = msg; statusEl.className = 'ms-2 small ' + (ok ? 'text-success' : 'text-danger'); };
    btn.addEventListener('click', async function(){
      if (!formEl) return;
      setStatus('Guardando...');
      const payload = {
        name: formEl.querySelector('input[name="name"]').value,
        is_admin: formEl.querySelector('#is_admin').checked ? 1 : 0,
        permissions: Array.from(formEl.querySelectorAll('.perm-box:checked')).map(cb => parseInt(cb.value, 10))
      };
      try {
        const res = await fetch(`{{ url('/admin/api/roles') }}/{{ $role->id }}`, {
          method: 'PUT',
          headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' },
          body: JSON.stringify(payload)
        });
        if (!res.ok) {
          const j = await res.json().catch(()=>({ message: 'Error' }));
          setStatus(j.message || 'Error al guardar', false);
          return;
        }
        setStatus('Guardado ✔', true);
      } catch (e) {
        setStatus('Error de red', false);
      }
    });
  });
</script>
@endif
@endpush
@endsection