@extends('layouts.auth.base')

@section('content')
    <div class="container-fluid bg">
        <div class="row min-vh-100">
            <div class="col-md-8 col-lg-8 col-xl-9 mobile-hidden my-auto ps-5 ps-md-5 ps-sm-3">
                <div><img class="img-fluid" src="{{ asset('assets/img/logoW.png') }}" width="17%">
                    <h1 class="text-white mt-5">Investment <span class="underline"><span
                                style="color: rgba(var(--bs-white-rgb),var(--bs-text-opacity)) ;">Excellence</span></span>
                    </h1>
                </div>
                {{-- <img class="mt-2 rounded shadow-sm mobile-hidden" style="max-width: 100%; max-height: 700px;" src="{{ asset('assets/img/100/merry-xmas.webp') }}" alt=""> --}}
            </div>
            <div class="col-md-4 col-lg-4 col-xl-3 d-xxl-flex px-sm-5 my-sm-auto my-auto px-4 px-md-4 px-lg-3">
                <div class="desktop-hidden mb-4 text-center"><img class="img-fluid" src="{{ asset('assets/img/logoW.png') }}"
                        width="20%"></div>
                <div class="w-100 auth-card px-4 py-5">
                    <form method="POST" action="{{ route('login') }}">{{ csrf_field() }}
                        <div class="mb-3">
                            <label class="form-label" for="email">Email Address</label>
                            <input name="email" value="{{ old('email') }}" class="form-control py-2 px-3 @error('email') is-invalid @enderror" type="email" id="email" autofocus="" autocomplete="email" inputmode="email" required="">

                            @error('email')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                        <div class="mb-3" x-data="{ show: true }">
                            <label class="form-label" for="password">Password</label>
                            <input name="password" class="form-control py-2 px-3 @error('password') is-invalid @enderror" type="password" autocomplete="current-password" id="password" :type="show ? 'password' : 'text'" minlength="6" required="" maxlength="20">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -32 576 576" width="1em" height="1em" fill="currentColor" class="showpwd" x-on:click="show = !show" :class="{ ' d-none': !show, 'd-block': show }">
                            <!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
                            <path d="M279.6 160.4C282.4 160.1 285.2 160 288 160C341 160 384 202.1 384 256C384 309 341 352 288 352C234.1 352 192 309 192 256C192 253.2 192.1 250.4 192.4 247.6C201.7 252.1 212.5 256 224 256C259.3 256 288 227.3 288 192C288 180.5 284.1 169.7 279.6 160.4zM480.6 112.6C527.4 156 558.7 207.1 573.5 243.7C576.8 251.6 576.8 260.4 573.5 268.3C558.7 304 527.4 355.1 480.6 399.4C433.5 443.2 368.8 480 288 480C207.2 480 142.5 443.2 95.42 399.4C48.62 355.1 17.34 304 2.461 268.3C-.8205 260.4-.8205 251.6 2.461 243.7C17.34 207.1 48.62 156 95.42 112.6C142.5 68.84 207.2 32 288 32C368.8 32 433.5 68.84 480.6 112.6V112.6zM288 112C208.5 112 144 176.5 144 256C144 335.5 208.5 400 288 400C367.5 400 432 335.5 432 256C432 176.5 367.5 112 288 112z"></path>
                            </svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -64 640 640" width="1em" height="1em" fill="currentColor" class="showpwd" x-on:click="show = !show" :class="{ ' d-none': show, 'd-block': !show }">
                            <!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
                            <path d="M150.7 92.77C195 58.27 251.8 32 320 32C400.8 32 465.5 68.84 512.6 112.6C559.4 156 590.7 207.1 605.5 243.7C608.8 251.6 608.8 260.4 605.5 268.3C592.1 300.6 565.2 346.1 525.6 386.7L630.8 469.1C641.2 477.3 643.1 492.4 634.9 502.8C626.7 513.2 611.6 515.1 601.2 506.9L9.196 42.89C-1.236 34.71-3.065 19.63 5.112 9.196C13.29-1.236 28.37-3.065 38.81 5.112L150.7 92.77zM223.1 149.5L313.4 220.3C317.6 211.8 320 202.2 320 191.1C320 180.5 316.1 169.7 311.6 160.4C314.4 160.1 317.2 159.1 320 159.1C373 159.1 416 202.1 416 255.1C416 269.7 413.1 282.7 407.1 294.5L446.6 324.7C457.7 304.3 464 280.9 464 255.1C464 176.5 399.5 111.1 320 111.1C282.7 111.1 248.6 126.2 223.1 149.5zM320 480C239.2 480 174.5 443.2 127.4 399.4C80.62 355.1 49.34 304 34.46 268.3C31.18 260.4 31.18 251.6 34.46 243.7C44 220.8 60.29 191.2 83.09 161.5L177.4 235.8C176.5 242.4 176 249.1 176 255.1C176 335.5 240.5 400 320 400C338.7 400 356.6 396.4 373 389.9L446.2 447.5C409.9 467.1 367.8 480 320 480H320z"></path>
                            </svg>
                            @error('password')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                        <div class="mb-3"><small>By logging in you agree to our&nbsp;<a href="https://prplife.com/terms-of-service/" target="_blank">Terms &amp; Conditions</a><br></small></div>
                        <div class="mb-3">
                            <small class="float-end"><a href="{{ route('password.request') }}">Forgot Password?</a></small>
                            <button class="btn btn-primary py-2 px-3" role="button" type="submit">Login</button>
                        </div>
                    </form>
                    <hr><small>Don't have an account?&nbsp;&nbsp;<a href="{{ route('register') }}">Create Account</a><br></small>
                </div>
                {{-- <img class="mt-2 rounded shadow-sm desktop-hidden" style="width: 100%;" src="{{ asset('assets/img/100/merry-xmas.webp') }}" alt=""> --}}
            </div>
        </div>
    </div>
@endsection