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

@extends('layouts/layoutMaster')

@section('title', 'Usuarios')

@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/datatables-buttons-bs5/buttons.bootstrap5.scss',
  'resources/assets/vendor/libs/select2/select2.scss',
  'resources/assets/vendor/libs/@form-validation/form-validation.scss'
])
@endsection

@section('vendor-script')
@vite([
  'resources/assets/vendor/libs/moment/moment.js',
  'resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js',
  'resources/assets/vendor/libs/select2/select2.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',
  'resources/assets/vendor/libs/cleave-zen/cleave-zen.js'
])
@endsection

@section('page-script')
@vite('resources/assets/js/app-user-list.js')
@endsection

@section('content')
<div class="row g-6 mb-6">
  <div class="col-sm-6 col-xl-3">
    <div class="card">
      <div class="card-body">
        <div class="d-flex align-items-start justify-content-between">
          <div class="content-left">
            <span class="text-heading">Usuarios</span>
            <div class="d-flex align-items-center my-1">
              <h4 class="mb-0 me-2">{{ number_format($kpis['total']['count'] ?? 0, 0, ',', '.') }}</h4>
              @php $delta = (int)($kpis['total']['delta'] ?? 0); $cls = $delta >= 0 ? 'text-success' : 'text-danger'; @endphp
              <p class="mb-0 {{ $cls }}">({{ $delta >= 0 ? '+' : '' }}{{ $delta }}%)</p>
            </div>
            <small class="mb-0">Usuarios totales</small>
          </div>
          <div class="avatar">
            <span class="avatar-initial rounded bg-label-primary">
              <i class="icon-base ti tabler-users icon-26px"></i>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-xl-3">
    <div class="card">
      <div class="card-body">
        <div class="d-flex align-items-start justify-content-between">
          <div class="content-left">
            <span class="text-heading">Riders</span>
            <div class="d-flex align-items-center my-1">
              <h4 class="mb-0 me-2">{{ number_format($kpis['riders']['count'] ?? 0, 0, ',', '.') }}</h4>
              @php $delta = (int)($kpis['riders']['delta'] ?? 0); $cls = $delta >= 0 ? 'text-success' : 'text-danger'; @endphp
              <p class="mb-0 {{ $cls }}">({{ $delta >= 0 ? '+' : '' }}{{ $delta }}%)</p>
            </div>
            <small class="mb-0">Comparativa última semana </small>
          </div>
          <div class="avatar">
            <span class="avatar-initial rounded bg-label-danger">
              <i class="menu-icon icon-base ti tabler-bike icon-26px"></i>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-xl-3">
    <div class="card">
      <div class="card-body">
        <div class="d-flex align-items-start justify-content-between">
          <div class="content-left">
            <span class="text-heading">Usuarios activos</span>
            <div class="d-flex align-items-center my-1">
              <h4 class="mb-0 me-2">{{ number_format($kpis['active']['count'] ?? 0, 0, ',', '.') }}</h4>
              @php $delta = (int)($kpis['active']['delta'] ?? 0); $cls = $delta >= 0 ? 'text-success' : 'text-danger'; @endphp
              <p class="mb-0 {{ $cls }}">({{ $delta >= 0 ? '+' : '' }}{{ $delta }}%)</p>
            </div>
            <small class="mb-0">Comparativa última semana</small>
          </div>
          <div class="avatar">
            <span class="avatar-initial rounded bg-label-success">
              <i class="icon-base ti tabler-user-check icon-26px"></i>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-xl-3">
    <div class="card">
      <div class="card-body">
        <div class="d-flex align-items-start justify-content-between">
          <div class="content-left">
            <span class="text-heading">Usuarios inactivos</span>
            <div class="d-flex align-items-center my-1">
              <h4 class="mb-0 me-2">{{ number_format($kpis['pending']['count'] ?? 0, 0, ',', '.') }}</h4>
              @php $delta = (int)($kpis['pending']['delta'] ?? 0); $cls = $delta >= 0 ? 'text-success' : 'text-danger'; @endphp
              <p class="mb-0 {{ $cls }}">({{ $delta >= 0 ? '+' : '' }}{{ $delta }}%)</p>
            </div>
            <small class="mb-0">Comparativa última semana</small>
          </div>
          <div class="avatar">
            <span class="avatar-initial rounded bg-label-warning">
              <i class="icon-base ti tabler-user-search icon-26px"></i>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Users List Table -->
<div class="card">
  <div class="card-header border-bottom">
    <h5 class="card-title mb-0">Filtros</h5>
    <div class="d-flex justify-content-between align-items-center row pt-4 gap-4 gap-md-0">
      <div class="col-md-3 user_dni"></div>
      <div class="col-md-3 user_role"></div>
      <div class="col-md-3 user_company"></div>
      <div class="col-md-3 user_status"></div>
    </div>
  </div>
  <div class="card-datatable">
    <table class="datatables-users table" data-ajax="{{ url('/admin/api/users') }}">
      <thead class="border-top">
        <tr>
          <th></th>
          <th></th>
          <th>Usuario</th>
          <th>DNI / NIE</th>
          <th>Rol</th>
          <th>Empresas</th>
          <th>Ciudades</th>
          <th>Zonas</th>
          <th>Estado</th>
          <th>Acciones</th>
        </tr>
      </thead>
    </table>
  </div>
  <!-- Offcanvas to add new user -->
  <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasAddUser" aria-labelledby="offcanvasAddUserLabel">
    <div class="offcanvas-header border-bottom">
      <h5 id="offcanvasAddUserLabel" class="offcanvas-title">Añadir usuario</h5>
      <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body mx-0 flex-grow-0 p-6 h-100">
      <form class="add-new-user pt-0" id="addNewUserForm" onsubmit="return false">
        <div class="mb-6 form-control-validation">
          <label class="form-label" for="add-user-fullname">Nombre completo</label>
          <input type="text" class="form-control" id="add-user-fullname" placeholder="Juan Pérez" name="name" aria-label="Juan Pérez" />
        </div>
        <div class="mb-6 form-control-validation">
          <label class="form-label" for="add-user-email">Correo electrónico</label>
          <input type="email" id="add-user-email" class="form-control" placeholder="juan.perez@ejemplo.com" aria-label="juan.perez@ejemplo.com" name="email" />
        </div>
        <div class="mb-6 form-control-validation">
          <label class="form-label" for="add-user-dni">DNI / NIE</label>
          <input type="text" id="add-user-dni" class="form-control" placeholder="Ej: 12345678Z o X1234567L" name="dni" />
          <small class="text-body-secondary">Requerido si el usuario tiene rol Rider.</small>
        </div>
        <div class="mb-6 form-control-validation">
          <label class="form-label" for="add-user-password">Contraseña</label>
          <input type="password" id="add-user-password" class="form-control" placeholder="********" name="password" />
        </div>
        <div class="mb-6">
          <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" id="add-user-active" name="active" checked>
            <label class="form-check-label" for="add-user-active">Activo</label>
          </div>
        </div>
        <div class="mb-6">
          <label class="form-label" for="add-user-roles">Roles</label>
          <select id="add-user-roles" name="roles[]" class="form-select select2" multiple></select>
          <small class="text-body-secondary">Selecciona uno o varios roles</small>
        </div>
        <button type="submit" class="btn btn-primary me-3 data-submit">Guardar</button>
        <button type="reset" class="btn btn-label-danger" data-bs-dismiss="offcanvas">Cancelar</button>
      </form>
    </div>
  </div>
</div>

@endsection