@extends('layouts.app', [
    'class' => 'login-page',
    'page' => env('APP_NAME'),
    'contentClass' => 'login-page',
    'section' => 'auth'
])

<div class="container">
    <div class="row justify-content-center pt-5 pb-5">
        <img src="{!! asset('assets/img/sede-logo.png') !!}" width="300" height="auto"/>
    </div>

    <div class="row justify-content-center">
        <div class="col-md-12 centered">
            <span class="login-title">Actualizar Contraseña</span>
        </div>

        <div class="col-md-6 centered">
            <span class="login-subtitle">Introduce tu nueva contraseña y confírmala para completar el proceso.</span>
        </div>
    </div>

    <div class="row justify-content-center mt-5">
        <div class="col-md-6 centered">
            <form method="POST" action="{{ route('portal-customers.reset-password.update') }}" style="width: 66%;">
                @csrf

                <!-- Token oculto -->
                <input type="hidden" name="token" value="{{ $token }}">

                <!-- Nueva Contraseña -->
                <div class="form-group">
                    <span class="login-text">Nueva Contraseña</span>
                    <input id="password" type="password" class="form-control white @error('password') is-invalid @enderror" name="password" required placeholder="Nueva Contraseña" autocomplete="new-password">
                    @error('password')
                        <span class="invalid-feedback" role="alert">
                            {{ $message }}
                        </span>
                    @enderror
                </div>

                <!-- Confirmar Contraseña -->
                <div class="form-group mt-3">
                    <span class="login-text">Confirmar Contraseña</span>
                    <input id="password-confirm" type="password" class="form-control white" name="password_confirmation" required placeholder="Confirmar Contraseña" autocomplete="new-password">
                </div>

                <!-- Botón de Actualización -->
                <div class="row mt-3 justify-content-center centered">
                    <button type="submit" class="btn-sede btn-lg btn-block mb-3">
                        Actualizar Contraseña
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<style>
    .container {
        max-width: 100% !important;
        background-color: #f1ebe1 !important;
        height: 100vh !important;
    }

    .login-title {
        font-size: 42pt;
        font-weight: 400;
        color: black;
    }

    .login-subtitle {
        font-size: 18pt;
        font-weight: 400;
        color: black;
    }

    .login-text {
        font-size: 12pt;
        font-weight: 400;
        color: black;
    }

    .centered {
        text-align: center !important;
        display: flex !important;
        justify-content: center !important;
    }

    .card-login {
        width: 100%;
    }
    .card {
        background-color: #f1ebe1 !important;
        margin-top: 50px;
    }

    .white {
        background-color: white !important;
        height: 60px !important;
    }

    .btn-sede {
        width: 50% !important;
        background-color: #adadad !important;
        color: white !important;
        font-weight: 600 !important;
        border: none !important;
    }
</style>

<script>
    document.body.style.overflow = 'hidden';
</script>