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

@extends('layouts/layoutMaster')

@section('title','Cuentas Glovo')

@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/sweetalert2/sweetalert2.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/datatables-responsive-bs5/responsive.bootstrap5.js',
  'resources/assets/vendor/libs/datatables-buttons-bs5/buttons.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',
  'resources/assets/vendor/libs/sweetalert2/sweetalert2.js'
])
@endsection

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

@section('content')
<style>
  .pill { display:inline-block; padding:2px 8px; border-radius:10px; font-weight:600; font-size:.75rem; letter-spacing:.3px; }
  .pill-city-default { background:#f1f3f5; color:#495057; }
  .pill-city-cal { background:#e6f4ff; color:#0b5ed7; }
  .pill-city-bcn { background:#efe4ff; color:#6f42c1; }
  .pill-city-gro { background:#e8f7ef; color:#2b8a3e; }
  .pill-city-fig { background:#dff6ff; color:#0aa2c0; }
  .pill-city-mat { background:#ffe8cc; color:#a15c00; }
  /* Nuevas ciudades */
  .pill-city-xry { background:#ffe3f1; color:#c2255c; }
  .pill-city-slc { background:#e7f5ff; color:#1864ab; }
  .pill-city-chf { background:#fff4e6; color:#d9480f; }
  .pill-city-rot { background:#ecf2ff; color:#364fc7; }
  .pill-city-fer { background:#e6fcf5; color:#087f5b; }
  .pill-city-elp { background:#f8f0fc; color:#7048e8; }
</style>
<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">Cuentas</span>
          <div class="d-flex align-items-center my-1">
            <h4 class="mb-0 me-2" id="kpi_total">0</h4>
            <p class="text-success mb-0" id="kpi_total_delta">(+0%)</p>
          </div>
          <small class="mb-0">Totales</small>
        </div>
        <div class="avatar"><span class="avatar-initial rounded bg-label-primary"><i class="icon-base ti tabler-key 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">Asignadas</span>
          <div class="d-flex align-items-center my-1">
            <h4 class="mb-0 me-2" id="kpi_asignadas">0</h4>
            <p class="text-success mb-0" id="kpi_asignadas_delta">(+0%)</p>
          </div>
          <small class="mb-0">Ú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">Activas</span>
          <div class="d-flex align-items-center my-1">
            <h4 class="mb-0 me-2" id="kpi_activas">0</h4>
            <p class="text-success mb-0" id="kpi_activas_delta">(+0%)</p>
          </div>
          <small class="mb-0">Última semana</small>
        </div>
        <div class="avatar"><span class="avatar-initial rounded bg-label-info"><i class="icon-base ti tabler-bolt 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">Bloqueadas</span>
          <div class="d-flex align-items-center my-1">
            <h4 class="mb-0 me-2" id="kpi_bloqueadas">0</h4>
            <p class="text-danger mb-0" id="kpi_bloqueadas_delta">(+0%)</p>
          </div>
          <small class="mb-0">Última semana</small>
        </div>
        <div class="avatar"><span class="avatar-initial rounded bg-label-danger"><i class="icon-base ti tabler-lock-exclamation icon-26px"></i></span></div>
      </div>
    </div></div>
  </div>
</div>

<div class="card shadow-sm">
  <div class="card-header border-bottom-0 pb-0">
    <div class="d-flex flex-column flex-lg-row align-items-lg-center justify-content-between gap-3">
      <div>
        <h5 class="mb-1">Cuentas operativas</h5>
        <p class="text-muted mb-0">Refina la vista filtrando por empresa, estado o ciudad para actuar de forma rápida.</p>
      </div>
      <div class="d-flex flex-wrap gap-2">
        <button class="btn btn-sm btn-label-secondary d-flex align-items-center gap-1" data-export-trigger="credentials">
          <i class="ti tabler-upload icon-16px"></i><span class="d-none d-sm-inline">Exportar</span>
        </button>
        <button class="btn btn-sm btn-danger d-flex align-items-center gap-1" data-bs-toggle="offcanvas" data-bs-target="#offcanvasCred">
          <i class="ti tabler-plus icon-16px"></i><span class="d-none d-sm-inline">Nueva cuenta</span>
        </button>
      </div>
    </div>
  </div>
  <div class="card-body border-bottom py-4">
    <div class="row row-cols-1 row-cols-md-3 g-3 align-items-center">
      <div class="col">
        <label class="form-label mb-1 text-muted text-uppercase small fw-semibold">Empresa</label>
        <div class="cred_company"></div>
      </div>
      <div class="col">
        <label class="form-label mb-1 text-muted text-uppercase small fw-semibold">Estado</label>
        <div class="cred_status"></div>
      </div>
      <div class="col">
        <label class="form-label mb-1 text-muted text-uppercase small fw-semibold">Ciudad</label>
        <div class="cred_city"></div>
      </div>
    </div>
  </div>
  <div class="card-datatable table-responsive">
    <table class="table table-hover table-striped align-middle w-100 datatables-credentials" data-ajax="{{ url('/admin/api/glovo-credentials') }}">
      <thead class="table-light">
        <tr>
          <th></th>
          <th></th>
          <th>Cuenta</th>
          <th>Acceso</th>
          <th>Empresa</th>
          <th>Rider</th>
          <th>Vehículo</th>
          <th>Ciudad</th>
          <th>Estado</th>
          <th>Recibida</th>
          <th>Acciones</th>
        </tr>
      </thead>
    </table>
  </div>

  <!-- Offcanvas para nueva/editar cuenta -->
  <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasCred" aria-labelledby="offcanvasCredLabel">
    <div class="offcanvas-header border-bottom">
      <h5 id="offcanvasCredLabel" class="offcanvas-title">Cuenta Glovo</h5>
      <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"></button>
    </div>
    <div class="offcanvas-body mx-0 flex-grow-0 p-6 h-100">
      <form id="credFormOffcanvas" onsubmit="return false">
        <input type="hidden" id="cred_id" />
        <div class="mb-6">
          <label class="form-label">Empresa</label>
          <select id="cred_company_id" class="form-select select2"></select>
        </div>
        <div class="row g-4">
          <div class="col-md-6">
            <label class="form-label">Rider ID</label>
            <div class="input-group">
              <input type="text" id="cred_rider_id" class="form-control" required>
              <button type="button" class="btn btn-icon btn-label-secondary d-none" id="cred_rider_lock" data-locked="0" title="Bloquear campo">
                <i class="icon-base ti tabler-lock-open"></i>
              </button>
            </div>
            <small class="text-body-secondary">Identificador interno del rider en Glovo.</small>
          </div>
          <div class="col-md-6">
            <label class="form-label">Courier ID (opcional)</label>
            <input type="text" id="cred_courier_id" class="form-control" />
          </div>
          <div class="col-md-6">
            <label class="form-label">Email</label>
            <input type="email" id="cred_login_email" class="form-control" required />
          </div>
          <div class="col-md-6">
            <label class="form-label">Contraseña</label>
            <input type="password" id="cred_password" class="form-control" placeholder="••••••" />
          </div>
          <div class="col-md-6">
            <label class="form-label">Teléfono</label>
            <input type="text" id="cred_phone" class="form-control" />
          </div>
          <div class="col-md-6">
            <label class="form-label">Vehículo</label>
            <select id="cred_vehicle_id" class="form-select select2 w-100"></select>
          </div>
          <div class="col-md-6">
            <label class="form-label">City Code</label>
            <input type="text" id="cred_city_code" class="form-control" />
          </div>
          <div class="col-md-6">
            <label class="form-label">Fecha recibida</label>
            <div class="input-group">
              <input type="date" id="cred_provided_at" class="form-control" />
              <button type="button" class="btn btn-icon btn-label-secondary d-none" id="cred_provided_at_lock" data-locked="0" title="Bloquear edición">
                <i class="icon-base ti tabler-lock-open"></i>
              </button>
            </div>
          </div>
          <div class="col-md-6">
            <label class="form-label">Fecha revocación</label>
            <input type="date" id="cred_revoked_at" class="form-control" />
            <small class="text-body-secondary">Si conoces la fecha en la que se retirará la cuenta, indícala aquí.</small>
          </div>
          <div class="col-md-6">
            <label class="form-label">Estado</label>
            <select id="cred_status" class="form-select">
              <option value="active">Activa</option>
              <option value="inactive">Inactiva</option>
              <option value="blocked">Bloqueada</option>
            </select>
          </div>
        </div>
        <div class="mt-6 d-flex justify-content-end gap-3">
          <button type="reset" class="btn btn-label-secondary" data-bs-dismiss="offcanvas">Cancelar</button>
          <button type="submit" class="btn btn-primary">Guardar</button>
        </div>
      </form>
    </div>
  </div>

  <!-- Offcanvas para asignar -->
  <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasAssign" aria-labelledby="offcanvasAssignLabel">
    <div class="offcanvas-header border-bottom">
      <h5 id="offcanvasAssignLabel" class="offcanvas-title">Asignar a Rider</h5>
      <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"></button>
    </div>
    <div class="offcanvas-body mx-0 flex-grow-0 p-6 h-100">
      <form id="assignFormOffcanvas" onsubmit="return false">
        <input type="hidden" id="assign_cred_id" />
        <div id="assign_current_info" class="alert alert-info d-none"></div>
        <div class="mb-6">
          <label class="form-label">Rider</label>
          <select id="assign_user_id" class="form-select select2"></select>
        </div>
        <div class="row g-4">
          <div class="col-md-6">
            <label class="form-label">Inicio de asignación</label>
            <div class="input-group">
              <input type="date" id="assign_start" class="form-control" />
              <button type="button" class="btn btn-icon btn-label-secondary d-none" id="assign_start_lock" data-locked="0" title="Bloquear edición">
                <i class="icon-base ti tabler-lock-open"></i>
              </button>
            </div>
          </div>
          <div class="col-md-6">
            <label class="form-label">Posible finalización</label>
            <input type="date" id="assign_end" class="form-control" />
          </div>
        </div>
        <div class="mb-6">
          <label class="form-label">Motivo (opcional)</label>
          <input type="text" id="assign_reason" class="form-control" />
        </div>
        <div class="mt-6 d-flex justify-content-end gap-3">
          <button type="reset" class="btn btn-label-secondary" data-bs-dismiss="offcanvas">Cancelar</button>
          <button type="submit" class="btn btn-primary" id="assign_submit">Guardar</button>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection