@extends('layouts.front')
@section('content')
@section('css')
<style type="text/css">
    .form-control {
        border-radius: 0px !important;
    }

    .account-section {
        padding: 40px 0;
    }

    .account-text {
        font-size: 18px;
        color: #000;
        margin-bottom: 30px;
    }

    .form-container {
        background-color: #ccdded;
        padding: 30px 25px;
        border-radius: 15px;
        width: 100%;
    }

    .form-container .form-group label {
        font-weight: bold;
        font-size: 14px;
    }

    .form-container .form-control {
        width: 100%;
        border-radius: 6px;
        box-shadow: none;
        border: 1px solid #ccc;
    }

    .form-links {
        font-size: 12px;
        margin-bottom: 15px;
        color: #fff;
    }

    .form-links a {
        color: #ffffff;
        text-decoration: underline;
    }

    .btn-block {
        border-radius: 6px;
    }

    .login-header {
        background-color: #ccdded;
        text-align: center;
        padding: 15px;
        border-radius: 10px;
        font-weight: bold;
        margin-bottom: 20px;
    }

    .right-section {
        background-color: #d3e5f4;
        border-radius: 20px;
        height: 400px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-size: 28px;
        color: white;
        padding: 20px;
    }

    .small-link {
        font-size: 12px;
        display: block;
        margin-top: 5px;
        color: white;
    }
</style>
@endsection

<!-- Inner Page Banner Area Start Here -->
@php $home = \App\HomePage::findorFail(1); @endphp
<div class="inner-page-banner-area"
    style="background: url({{asset('/laravel_code/public/banner/' . $home->inner_banner)}}); background-repeat: no-repeat; background-size: cover;">
    <div class="container">
        <div class="pagination-area">
            <h2>Login</h2>
            <ul>
                <li><a href="{{route('home')}}">Home</a> - </li>
                <li>Login</li>
            </ul>
        </div>
    </div>
</div>



<div class="container account-section">
    <div class="row">
        <!-- Left Image -->
        <div class="col-md-6">
            <p class="account-text">
                Se parte de nuestros clientes fieles y recibe información sobre nuestros productos, eventos y
                promociones;
                accede a nuestros bonos de regalo y atenciones.
            </p>

            <div class="login-header">
                ACCEDE A OLIVA PANADERÍA Y PASTELERÍA
            </div>

            <div class="form-container">
                <form method="post" action="{{ route('authenticate') }}">

                    {{ csrf_field() }}
                    <input type="hidden" name="from" value="{{Request::input('from')}}">
                    <div class="alert-signin">
                        @include('validation.success')
                        @include('validation.error')
                    </div>

                    <div class="form-group">
                        <label for="email">EMAIL:</label>
                        <input type="email" name="email" class="form-control" id="email" placeholder="Ingresa tu email">
                    </div>

                    <div class="form-group">
                        <label for="password">CONTRASEÑA:</label>
                        <input type="password" name="password" class="form-control" id="password" placeholder="Ingresa tu contraseña">
                    </div>

                    <div class="form-links">
                        <a href="{{route('forgotPasswordPage')}}">¿OLVIDÓ SU CONTRASEÑA?</a><br>
                        <p>Not Member yet? <a class="red" href="{{route('signupPage')}}">
                                Inscríbete Acá!</a></p>
                    </div>

                    <button type="submit" class="ghost-on-hover-btn btn-block"
                        style="border-color: #fff;">Ingresar</button>
                </form>
            </div>

        </div>

        <!-- Right Section -->
        <div class="col-md-6 text-center">
            <img src="assets/front/img/mission.png" alt="Oliva Panadería" class="img-responsive center-block"
                style="max-height: 450px; border-radius: 20px;">
        </div>

    </div>
</div>

@section('js')
@endsection
@endsection