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

@extends('layouts/layoutMaster')

@section('title', 'Roles - Apps')

@section('vendor-style')
@vite([
  'resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss',
  'resources/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.scss',
  'resources/assets/vendor/libs/@form-validation/form-validation.scss'
])
@endsection

@section('vendor-script')
@vite([
  'resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js',
  'resources/assets/vendor/libs/@form-validation/popular.js',
  'resources/assets/vendor/libs/@form-validation/bootstrap5.js',
  'resources/assets/vendor/libs/@form-validation/auto-focus.js'
])
@endsection

@section('page-script')
<script>
document.addEventListener('DOMContentLoaded', function(){
  const el = document.querySelector('.datatables-users');
  if (!el) return;
  const dt = new DataTable(el, {
    ajax: '{{ url('/admin/api/users') }}',
    columns: [
      { data: 'id' },
      { data: 'id', orderable:false, render: DataTable.render.select() },
      { data: 'full_name' },
      { data: 'role' },
      { data: 'companies' },
      { data: 'cities' },
      { data: 'zones' },
      { data: 'status' },
      { data: 'id' }
    ],
    columnDefs: [
      { className: 'control', orderable:false, searchable:false, targets:0, render: () => '' },
      { targets:1, orderable:false, searchable:false, checkboxes:true, render: () => '<input type="checkbox" class="dt-checkboxes form-check-input">' },
      { targets:2, render: (data, type, full) => `<div class=\"d-flex align-items-center\"><div class=\"avatar avatar-sm me-3\"></div><div><span class=\"fw-medium\">${full.full_name}</span><br><small>${full.email}</small></div></div>` },
      { targets:3, render: (data, type, full) => {
          const role = full.role || ''; const slug = (full.role_slug||'').toLowerCase(); const isAdmin = !!full.is_admin;
          let icon = '<i class="icon-base ti tabler-user-circle text-secondary me-2"></i>';
          if (isAdmin || slug.includes('admin')) icon = '<i class="icon-base ti tabler-device-desktop text-danger me-2"></i>';
          else if (slug.includes('rider')||slug.includes('courier')||slug.includes('repart')) icon = '<i class="icon-base ti tabler-bike text-success me-2"></i>';
          return `<span class='d-flex align-items-center text-heading'>${icon}${role}</span>`;
      } },
      { targets:4, orderable:false, render: (d, t, f) => (f.companies||[]).map(n=>`<span class=\"badge bg-label-secondary me-1\">${n}</span>`).join('') || '<span class="text-muted">—</span>' },
      { targets:5, orderable:false, render: (d, t, f) => (f.cities||[]).map(n=>`<span class=\"badge bg-label-secondary me-1\">${n}</span>`).join('') || '<span class="text-muted">—</span>' },
      { targets:6, orderable:false, render: (d, t, f) => (f.zones||[]).map(n=>`<span class=\"badge bg-label-secondary me-1\">${n}</span>`).join('') || '<span class="text-muted">—</span>' },
      { targets:7, render: (data)=> data == 2 ? '<span class="badge bg-label-success">Activo</span>' : '<span class="badge bg-label-secondary">Inactivo</span>' },
      { targets:8, orderable:false, searchable:false, render: (d,t,f)=>{
          const id = f.id;
          const viewUrl = `{{ url('/admin/usuarios') }}/${id}`;
          return `<div class=\"d-flex align-items-center\">`
            + `<a href=\"${viewUrl}\" class=\"btn btn-text-secondary rounded-pill btn-icon\" title=\"Ver\"><i class=\"icon-base ti tabler-eye icon-22px\"></i></a>`
            + `</div>`;
      }}
    ],
    // Activo primero (2) y luego Inactivo (3)
    order: [[7,'asc'],[2,'asc']],
    layout: {
      topStart: { rowClass: 'row m-3 my-0 justify-content-between', features: [{ pageLength: { menu: [10,25,50,100], text: '_MENU_' } }] },
      topEnd: { features: [ { search: { placeholder: 'Buscar usuario', text: '_INPUT_' } }, { buttons: [ { extend:'collection', className:'btn btn-label-secondary dropdown-toggle', text:'<span class="d-flex align-items-center gap-2"><i class="icon-base ti tabler-upload icon-xs"></i> <span class="d-none d-sm-inline-block">Exportar</span></span>', buttons:[ {extend:'print',text:'<span class="d-flex align-items-center"><i class="icon-base ti tabler-printer me-1"></i>Imprimir</span>',className:'dropdown-item',exportOptions:{columns:[2,3,4,5,6,7]}}, {extend:'csv',text:'<span class="d-flex align-items-center"><i class="icon-base ti tabler-file-text me-1"></i>CSV</span>',className:'dropdown-item',exportOptions:{columns:[2,3,4,5,6,7]}}, {extend:'excel',text:'<span class="d-flex align-items-center"><i class="icon-base ti tabler-file-spreadsheet me-1"></i>Excel</span>',className:'dropdown-item',exportOptions:{columns:[2,3,4,5,6,7]}}, {extend:'pdf',text:'<span class="d-flex align-items-center"><i class="icon-base ti tabler-file-description me-1"></i>PDF</span>',className:'dropdown-item',exportOptions:{columns:[2,3,4,5,6,7]}}, {extend:'copy',text:'<i class="icon-base ti tabler-copy me-1"></i>Copiar',className:'dropdown-item',exportOptions:{columns:[2,3,4,5,6,7]}} ] } ] } ] },
      bottomStart: { rowClass: 'row mx-3 justify-content-between', features: ['info'] },
      bottomEnd: 'paging'
    },
    language: { sLengthMenu: '_MENU_', search:'', searchPlaceholder:'Buscar usuario', paginate: { next:'<i class="icon-base ti tabler-chevron-right scaleX-n1-rtl icon-18px"></i>', previous:'<i class="icon-base ti tabler-chevron-left scaleX-n1-rtl icon-18px"></i>', first:'<i class="icon-base ti tabler-chevrons-left scaleX-n1-rtl icon-18px"></i>', last:'<i class="icon-base ti tabler-chevrons-right scaleX-n1-rtl icon-18px"></i>' } }
  });
  window.usersDT = dt;
});
</script>
@endsection

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
  <h4 class="mb-0">Roles</h4>
  <button data-bs-target="#addRoleModal" data-bs-toggle="modal" class="btn btn-primary">Añadir rol</button>
  </div>

<p class="mb-6">Gestiona los perfiles de acceso y los permisos asignados a cada rol.</p>

<!-- Role cards -->
<div class="row g-6 mb-6">
 @foreach($roles as $r)
  <div class="col-xl-4 col-lg-6 col-md-6">
    <div class="card h-100">
      <div class="card-body d-flex flex-column">
        <div class="d-flex align-items-center justify-content-between mb-4">
          <div class="d-flex align-items-center gap-3">
            @php $isAdmin = (bool)$r->is_admin; $slug = strtolower($r->slug); @endphp
            <span class="avatar-initial rounded bg-label-{{ $isAdmin ? 'danger' : (str_contains($slug,'rider') ? 'success' : 'primary') }} p-3">
              <i class="icon-base ti {{ $isAdmin ? 'tabler-device-desktop' : (str_contains($slug,'rider') ? 'tabler-bike' : 'tabler-user') }} icon-24px"></i>
            </span>
            <div>
              <h5 class="mb-0">{{ $r->name }}</h5>
              <small class="text-body-secondary">Usuarios: {{ $r->users_count }}</small>
            </div>
          </div>
          <div class="d-flex align-items-center gap-2">
            <a class="btn btn-sm btn-text-secondary rounded-pill" href="{{ route('admin.roles.edit', $r) }}" title="Editar"><i class="icon-base ti tabler-pencil"></i></a>
            <form action="{{ route('admin.roles.destroy', $r) }}" method="POST" class="d-inline" onsubmit="return confirm('¿Eliminar rol?');">
              @csrf @method('DELETE')
              <button class="btn btn-sm btn-text-secondary rounded-pill" type="submit" title="Eliminar"><i class="icon-base ti tabler-trash"></i></button>
            </form>
          </div>
        </div>
        <div class="mt-auto">
          <a href="{{ route('admin.roles.edit',$r) }}" class="role-edit-modal"><span>Configurar permisos</span></a>
        </div>
      </div>
    </div>
  </div>
 @endforeach
  <!-- Add role card -->
  <div class="col-xl-4 col-lg-6 col-md-6">
    <div class="card h-100">
      <div class="row h-100">
        <div class="col-sm-5 d-flex align-items-center justify-content-center">
          <div class="my-4 my-sm-0">
            <span class="avatar-initial rounded bg-label-primary p-4">
              <i class="icon-base ti tabler-shield-plus icon-36px"></i>
            </span>
          </div>
        </div>
        <div class="col-sm-7">
          <div class="card-body text-sm-end text-center ps-sm-0">
            <button data-bs-target="#addRoleModal" data-bs-toggle="modal" class="btn btn-sm btn-primary mb-4 text-nowrap add-new-role">Añadir rol</button>
            <p class="mb-0">Crea un nuevo rol si aún no existe.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Tabla de usuarios con sus roles -->
<div class="card">
  <div class="card-datatable">
    <table class="datatables-users table border-top">
      <thead>
        <tr>
          <th></th>
          <th></th>
          <th>Usuario</th>
          <th>Rol</th>
          <th>Empresas</th>
          <th>Ciudades</th>
          <th>Zonas</th>
          <th>Estado</th>
          <th>Acciones</th>
        </tr>
      </thead>
    </table>
  </div>
</div>
@include('_partials._modals.modal-add-role')

<!-- Edit User Modal -->
<div class="modal fade" id="editUserModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Editar usuario</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form id="editUserForm">
        <div class="modal-body">
          <input type="hidden" id="eu_id">
          <div class="mb-3">
            <label class="form-label">Nombre</label>
            <input type="text" class="form-control" id="eu_name" required>
          </div>
          <div class="mb-3">
            <label class="form-label">Email</label>
            <input type="email" class="form-control" id="eu_email" required>
          </div>
          <div class="mb-3">
            <label class="form-label">Contraseña (opcional)</label>
            <input type="password" class="form-control" id="eu_password" placeholder="********">
          </div>
          <div id="eu_error" class="alert alert-danger d-none"></div>
          <div id="eu_success" class="alert alert-success d-none"></div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancelar</button>
          <button type="submit" class="btn btn-primary">Guardar</button>
        </div>
      </form>
    </div>
  </div>
  </div>
  
  <script>
  document.addEventListener('DOMContentLoaded', function(){
    const table = document.querySelector('.datatables-users');
    if (!table) return;
    const csrf = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
    const modalEl = document.getElementById('editUserModal');
    const bsModal = new bootstrap.Modal(modalEl);
    const form = document.getElementById('editUserForm');
    const errBox = document.getElementById('eu_error');
    const okBox = document.getElementById('eu_success');
    const showError = (msg) => { errBox.textContent = msg; errBox.classList.remove('d-none'); };
    const hideError = () => errBox.classList.add('d-none');

    table.addEventListener('click', async (ev) => {
    const btnDel = ev.target.closest('.btn-delete');
      if (btnDel) {
        if (!confirm('¿Eliminar usuario?')) return;
        const id = btnDel.getAttribute('data-id');
        const res = await fetch(`{{ url('/admin/api/users') }}/${id}`, { method:'DELETE', headers: { 'X-CSRF-TOKEN': csrf, 'Accept':'application/json' } });
        if (!res.ok) { alert('Error al eliminar'); return; }
        if (window.usersDT) window.usersDT.ajax.reload(null, false);
        return;
      }
      const btnEdit = ev.target.closest('.btn-edit');
      if (btnEdit) {
        const id = btnEdit.getAttribute('data-id');
        const res = await fetch(`{{ url('/admin/api/users') }}/${id}`, { headers: { 'Accept':'application/json' } });
        if (!res.ok) { alert('No se pudo cargar el usuario'); return; }
        const data = await res.json();
        document.getElementById('eu_id').value = data.id;
        document.getElementById('eu_name').value = data.name;
        document.getElementById('eu_email').value = data.email;
        document.getElementById('eu_password').value = '';
        hideError();
        okBox.classList.add('d-none');
        bsModal.show();
      }
    });

    form.addEventListener('submit', async (ev) => {
      ev.preventDefault();
      hideError();
      const id = document.getElementById('eu_id').value;
      const payload = {
        name: document.getElementById('eu_name').value,
        email: document.getElementById('eu_email').value,
        password: document.getElementById('eu_password').value
      };
      const res = await fetch(`{{ url('/admin/api/users') }}/${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'})); showError(j.message || 'Error al guardar'); return; }
      bsModal.hide();
      if (window.usersDT) window.usersDT.ajax.reload(null, false);
    });
  });
  </script>
@endsection