@extends('layouts.auth')

@section('title', 'Identificación de Usuario - SCAT')

@section('content')
<div class="bg-image" style="background-image: url('{{ asset('assets/media/photos/photo28@2x.jpg') }}');">
  <div class="row g-0 bg-primary-dark-op">
    
    {{-- Panel lateral izquierdo - Información SCAT --}}
    <div class="hero-static col-lg-4 d-none d-lg-flex flex-column justify-content-center">
      <div class="p-4 p-xl-5 flex-grow-1 d-flex align-items-center">
        <div class="w-100">
          <a class="link-fx fw-semibold fs-2 text-white" href="/">
            SCAT
          </a>
          <p class="text-white-75 mt-2">
            Sistema de Control y Administración de Lotes de Terreno. Accede a la gestión integral de lotes, control catastral y administración de terrenos.
          </p>
          <div class="mt-3">
            <span class="badge bg-white text-primary me-1 py-2 px-3">📊 Control de Lotes</span>
            <span class="badge bg-white text-primary py-2 px-3">🗺️ Gestión Territorial</span>
          </div>
        </div>
      </div>
      <div class="p-4 p-xl-5 d-xl-flex justify-content-between align-items-center fs-sm">
        <p class="fw-medium text-white-50 mb-0">
          <strong>SCAT v2.0</strong> &copy; {{ date('Y') }} | Sistema de Control y Administración de Lotes de Terreno
        </p>
      </div>
    </div>

    {{-- Panel derecho - Formulario de acceso --}}
    <div class="hero-static col-lg-8 d-flex flex-column align-items-center bg-body-extra-light">
      <div class="p-4 w-100 flex-grow-1 d-flex align-items-center">
        <div class="w-100">
          
          <div class="text-center mb-5">
            <p class="mb-3">
              <i class="fa fa-2x fa-map-marked-alt text-primary-light"></i>
            </p>
            <h1 class="fw-bold mb-2">Acceso al Sistema SCAT</h1>
            <p class="fw-medium text-muted">Ingresa tus credenciales para administrar lotes y terrenos</p>
          </div>

          <div class="row g-0 justify-content-center">
            <div class="col-sm-8 col-xl-4">
              
              {{-- Gestión de Errores --}}
              @if ($errors->any())
                <div class="alert alert-danger alert-dismissible" role="alert">
                  <p class="mb-0">{{ $errors->first() }}</p>
                  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
              @endif

              <form action="{{ route('login') }}" method="POST" class="js-validation-signin">
                @csrf

                {{-- Campo Usuario --}}
                <div class="mb-4">
                  <label class="form-label text-dark" for="login">Usuario</label>
                  <input type="text" 
                         name="login" 
                         id="login"
                         class="form-control form-control-lg form-control-alt py-3 @error('login') is-invalid @enderror" 
                         value="{{ old('login') }}" 
                         placeholder="Tu usuario"
                         required autofocus>
                </div>

                {{-- Campo Contraseña --}}
                <div class="mb-4">
                  <label class="form-label text-dark" for="password">Contraseña</label>
                  <input type="password" 
                         name="password" 
                         id="password"
                         class="form-control form-control-lg form-control-alt py-3" 
                         placeholder="********"
                         required>
                </div>

                {{-- Selector de Base de Datos --}}
                <div class="mb-4">
                  <label class="form-label text-dark" for="ubicacion">Base de Datos</label>
                  <select name="ubicacion" 
                          id="ubicacion" 
                          class="form-select form-select-lg form-control-alt" 
                          onchange="actualizarBadge(this.value)">
                    <option value="cosmos79">Cosmos 79</option>
                    <option value="tarapaca">Tarapacá</option>
                  </select>
                  <div class="mt-2 text-end">
                    <span class="badge bg-primary px-3 py-2" id="db-badge">BDcosmos79</span>
                  </div>
                </div>

                {{-- Botón de Ingreso --}}
                <div class="text-center">
                  <button type="submit" class="btn btn-lg btn-alt-primary w-100">
                    <i class="fa fa-fw fa-sign-in-alt me-1 opacity-50"></i> Ingresar
                  </button>
                </div>
              </form>

            </div>
          </div>
        </div>
      </div>
    </div>
    </div>
</div>
@endsection

@push('js')
<script>
  function actualizarBadge(val) {
    const badge = document.getElementById('db-badge');
    badge.textContent = val === 'cosmos79' ? 'BDcosmos79' : 'cosmos — Tarapacá';
  }
</script>
{{-- Scripts de OneUI para validación visual --}}
<script src="{{ asset('assets/js/plugins/jquery-validation/jquery.validate.min.js') }}"></script>
<script src="{{ asset('assets/js/pages/op_auth_signin.min.js') }}"></script>
@endpush