@extends('layouts.login')
@section('content')
<style>
.login-card {
    background: rgba(255, 255, 255, 0.98);
    border: 2px solid #00416A;
    border-radius: 1.5rem;
    transition: all 0.3s ease;
}

.form-control-lg {
    font-size: 1rem;
    height: 50px;
    transition: border-color 0.3s ease;
}

.form-control-lg:focus {
    border-color: #00CBB8 !important;
    box-shadow: 0 0 0 0.25rem rgba(0, 203, 184, 0.25);
}

.btn-4245A4 {
    transition: all 0.3s ease;
    letter-spacing: 0.05rem;
}

.btn-4245A4:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(66, 69, 164, 0.4);
}

.login-logo {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

#passwordIcon {
    font-size: 1.2rem;
    transition: all 0.2s ease;
}

#togglePassword:hover #passwordIcon {
    color: #00416A !important;
    transform: scale(1.1);
}

@media (max-width: 768px) {
    .btn-lg {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
    
    .form-check-label {
        font-size: 0.85rem;
    }
    
    .login-card {
        margin: 0.5rem;
        border-radius: 1rem;
    }
    
    .card-body {
        padding: 1.5rem !important;
    }
    
    .btn-4245A4 {
        width: 100% !important;
        order: 2;
    }
    
    .form-check {
        width: 100%;
        text-align: center;
        margin-top: 1rem;
        order: 1;
    }
}
</style>


<div class="container-fluid h-100">
    <div class="row h-100 justify-content-center align-items-center">
        <div class="col-12 col-md-8 col-lg-5 col-xl-4">
            <div class="card login-card shadow-lg border-0">
                <div class="card-body p-5">
                    <!-- Logo -->
                    <div class="text-center mb-5">
                        <img src="/img/logo.png" alt="Logo" class="login-logo" style="height: 60px;">
                    </div>

                    <form method="POST" action="/admin/login" name="LoginForm" id="LoginForm">
                        @csrf
                        
                        <!-- Errores generales -->
                        @error("invalid")
                            <div class="alert bg-red-600 text-color-EEFDF6 mb-4 py-2">
                                {{__("auth.failed")}}
                            </div>
                        @enderror
                         <!-- Errores generales -->
                         @error("inactive")
                            <div class="alert bg-red-600 text-color-EEFDF6 mb-4 py-2">
                                {{__("auth.inactive")}}
                            </div>
                        @enderror

                        <!-- Email -->
                        <div class="mb-4">
                            <label class="form-label text-color-00416A mb-2">{{__('Email')}}</label>
                            <input type="text" 
                                   class="form-control form-control-lg border-2 rounded-pill px-4 @error('email') is-invalid @enderror" 
                                   name="email" 
                                   placeholder="ejemplo@clinica.com"
                                   style="border-color: #00416A;">
                            @error("email")
                                <div class="invalid-feedback ps-3 text-color-00416A">
                                    {{__("auth.email")}}
                                </div>
                            @enderror
                        </div>

                        <!-- Contraseña -->
                        <div class="mb-4">
                            <label class="form-label text-color-00416A mb-2">{{__('Password')}}</label>
                            <div class="input-group">
                                <input id="password" 
                                       type="password" 
                                       class="form-control form-control-lg border-2 rounded-pill px-4 @error('password') is-invalid @enderror" 
                                       name="password" 
                                       placeholder="••••••••"
                                       style="border-color: #00416A;">
                                <button id="changePassword" 
                                        type="button" 
                                        class="btn btn-link text-color-00CBB8 position-absolute end-0 top-50 translate-middle-y pe-4">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16">
                                            <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"></path>
                                            <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"></path>
                                        </svg>
                                </button>
                            </div>
                            @error("password")
                                <div class="invalid-feedback ps-3 text-color-00416A">
                                    {{__("auth.password")}}
                                </div>
                            @enderror
                        </div>

                        <div class="d-flex flex-column flex-md-row justify-content-between align-items-center mb-4 gap-2">
                            <div class="form-check order-md-1">
                                <input class="form-check-input" type="checkbox" name="remember" id="remember" style="border-color: #00416A;">
                                <label class="form-check-label text-color-00416A" for="remember">
                                    {{ __('Remember Me') }}
                                </label>
                            </div>
                            <button type="submit" 
                                    class="btn btn-4245A4 btn-lg rounded-pill px-4 shadow-sm w-100 order-md-2">
                                {{__('Log in')}} <i class="bi bi-arrow-right-short ms-2"></i>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection