@extends('layouts.guest')

@section('title', 'Login')

@section('content')

<!-- Franja superior naranja -->

<div class="top-bar">
    <span class="mr-2">TRACKING ORDEN DE SERVICIO:</span>
    <input type="text" placeholder="Número de seguimiento">
    <button class="btn_search"><i data-feather="search"></i></button>
</div>

<!-- Navbar blanca -->

<nav class="navbar">
    <div>
        <img src="{{ asset('images/logo newtrans.svg') }}" alt="Logo">
    </div>
    <ul>
        <li><a href="#">NUESTRA HISTORIA</a></li>
        <li><a href="#">POR QUÉ ELEGIRNOS</a></li>
        <li><a href="#">CÓMO TRABAJAMOS</a></li>
        <li><a href="#">CONTACTO</a></li>
        <li><a href="#">LO NUEVO</a></li>
    </ul>
</nav>

<!-- Main -->

<main>
    <div class="video-wrapper">
        <!-- Video ocupa todo el ancho -->
        <video autoplay loop muted class="video-bg">
            <source src="{{ asset('images/inicio.mp4') }}" type="video/mp4">
        </video>

```
    <!-- Caja login flotante al lado derecho -->
    <div class="login-container">
        <div class="login-box">
            <h2>INGRESAR A NEWTRANS CLIENTES</h2>
            <form method="POST" action="{{ route('login') }}">
                @csrf
                <label for="email">Correo</label>
                <input id="email" type="email" name="email" value="{{ old('email') }}" required autofocus
                    class="@error('email') border-red-500 @enderror">
                @error('email')
                    <p class="text-red-500 text-xs mb-2">{{ $message }}</p>
                @enderror

                <label for="password">Contraseña</label>
                <input id="password" type="password" name="password" required
                    class="@error('password') border-red-500 @enderror">
                @error('password')
                    <p class="text-red-500 text-xs mb-2">{{ $message }}</p>
                @enderror

                <div class="checkbox-group">
                    <input type="checkbox" name="remember">
                    <span>Recordar mi cuenta</span>
                </div>

                <button type="submit">INGRESAR</button>

                <a href="{{ route('password.request') }}">Olvidé mi contraseña</a>
            </form>
        </div>
    </div>
</div>
```

</main>

<!-- Footer -->

<footer>
    <div>
        <img src="{{ asset('images/logo blanco.svg') }}" alt="Logo 2">
    </div>
    <p>Newtrans Services ©2025 - Desarrollado por xxx</p>
</footer>

<script src="https://unpkg.com/feather-icons"></script>

<script> feather.replace(); </script>

<!-- Estilos específicos -->

<style>
    .video-wrapper {
        position: relative;
        width: 100%;
        height: 100vh;
        overflow: hidden;
    }
    .video-bg {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .login-container {
        position: absolute;
        top: 50%;
        right: 5%;
        transform: translateY(-50%);
        width: 350px;
        background: rgba(255, 255, 255, 0.9);
        padding: 10px;
        border-radius: 8px;
        box-shadow: 0px 4px 12px rgba(0,0,0,0.3);
    }
    .login-box h2 {
        margin-bottom: 15px;
        text-align: center;
    }
    .login-box label {
        display: block;
        margin-top: 10px;
        font-weight: bold;
    }
    .login-box input[type="email"],
    .login-box input[type="password"] {
        width: 100%;
        padding: 8px;
        margin-top: 5px;
        border: 1px solid #ddd;
        border-radius: 5px;
    }
    .checkbox-group {
        margin: 10px 0;
        display: flex;
        align-items: center;
        gap: 5px;
    }
    .login-box button {
        width: 100%;
        padding: 10px;
        background: #ff9800;
        border: none;
        border-radius: 5px;
        color: white;
        font-weight: bold;
        margin-top: 10px;
        cursor: pointer;
    }
    .login-box button:hover {
        background: #e68900;
    }
    .login-box a {
        display: block;
        text-align: center;
        margin-top: 10px;
        font-size: 0.9em;
        color: #555;
    }
</style>

@endsection