@extends('auth.retailer.app')
@section('content')
<div class="page-wrapper">
    <div class="page-inner bg-brand-gradient">
        <div class="page-content-wrapper bg-transparent m-0">
            <div class="height-10 w-100 shadow-lg px-4 bg-brand-gradient">
                <div class="d-flex align-items-center container p-0">
                    <div class="page-logo width-mobile-auto m-0 align-items-center justify-content-center p-0 bg-transparent bg-img-none shadow-0 height-9">
                        <a href="javascript:void(0)" class="page-logo-link press-scale-down d-flex align-items-center">
                            <img src="{{asset('img/smart_admin_bootstrap4/logo.png')}}" alt="SmartAdmin WebApp" aria-roledescription="logo">
                            {{--<span class="page-logo-text mr-1"><strong>CDRL</strong></span>--}}
                        </a>
                    </div>
                </div>
            </div>
            <div class="flex-1" style="background: url('{{asset("img/smart_admin_bootstrap4/svg/pattern-1.svg") }}') no-repeat center bottom fixed; background-size: cover;">
                <div class="container py-4 py-lg-5 my-lg-5 px-4 px-sm-0">
                    <div class="row">
                        <div class="col col-md-6 col-lg-7 hidden-sm-down">
                            <h2 class="fs-xxl fw-500 mt-4 text-white">
                                Welcome to the CDRL online ADR portal for retail members
                                <small class="h3 fw-300 mt-3 mb-5 text-white opacity-60">
                                    Our aim is to make your experience as smooth and stress free as possible.
                                    If you have any issues logging in to the portal, please contact our
                                    support team by one of the methods below:<br>
                                    email: <a href="https://support.cdrl.org.uk" target="_blank">support@cdrl.org.uk</a><br>
                                    phone: 0203 540 8063
                                </small>
                            </h2>
                            <div class="d-sm-flex flex-column align-items-center justify-content-center d-md-block">
                                <div class="px-0 py-1 mt-5 text-white fs-nano opacity-50">
                                    Find us on social media
                                </div>
                                <div class="d-flex flex-row opacity-70">
                                    <a href="https://twitter.com/cdrluk" class="mr-2 fs-xxl text-white">
                                        <i class="fab fa-twitter-square"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-6 col-lg-5 col-xl-4 ml-auto">
                            <h1 class="text-white fw-300 mb-3 d-sm-block d-md-none">
                                Secure login
                            </h1>
                            <div class="card p-4 rounded-plus bg-faded">
                                <form id="js-login" method="POST" novalidate="" action="">
                                    @csrf
                                    <div class="form-group">
                                        <label class="form-label" for="email">Email</label>
                                        <input id="email"
                                               type="email"
                                               class="form-control @error('email')is-invalid @enderror"
                                               name="email"
                                               value="{{ old('email') }}"
                                               required autocomplete="email"
                                               >
                                        @error('email')
                                        <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                        @enderror
                                    </div>
                                    <div class="form-group">
                                        <label class="form-label" for="password">Password</label>
                                        <input id="password"
                                               type="password"
                                               class="form-control @error('password') is-invalid @enderror"
                                               name="password"
                                               required
                                               autocomplete="current-password">
                                        @error('password')
                                        <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                        @enderror
                                    </div>
                                    <div class="form-group text-left">
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input" id="rememberme">
                                            <label class="custom-control-label" for="rememberme"> Remember me for the next 30 days</label>
                                        </div>
                                    </div>
                                    <div class="row no-gutters">
                                        <div class="col-lg-6 pr-lg-1 my-2">
                                            <button type="submit" class="btn btn-info btn-block btn-lg">Login<i></i></button>
                                        </div>
                                        <a class="btn btn-link" href="{{ route('retailer.password.request') }}">
                                            {{ __('Forgot Your Password?') }}
                                        </a>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="position-absolute pos-bottom pos-left pos-right p-3 text-center text-white">
                         {{ now()->year }} © CDRL Retailer
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section ('scripts')
<script>
    /*$("#js-login-btn").click(function(event)
    {

        // Fetch form to apply custom Bootstrap validation
        var form = $("#js-login")

        if (form[0].checkValidity() === false)
        {
            event.preventDefault()
            event.stopPropagation()
        }

        form.addClass('was-validated');
        // Perform ajax submit here...
    });*/

</script>
@endsection