@extends('layouts.no')

@section('title', 'Inscription')

@section('content')



<div class="row g-0">
    <!-- left -->
    <div class="col-lg-7 vh-100 d-none d-lg-block">
        <!-- Slider START -->
        <div class="swiper h-100" data-swiper-options='{ 
					"pagination":{
						"el":".swiper-pagination",
						"clickable":"true"
					}}'>

            <!-- Slider items START -->
            <div class="swiper-wrapper">
                <!-- Item -->
                <div class="swiper-slide">
                    <div class="card rounded-0 h-100" data-bs-theme="dark" style="background-image:url({{asset('images/auth/01.jpg')}}); background-position: center left; background-size: cover;">
                        <!-- Bg overlay -->
                        <div class="bg-overlay bg-dark opacity-5"></div>

                        <!-- Card info -->
                        <div class="card-img-overlay z-index-2 p-7">
                            <div class="d-flex flex-column justify-content-end h-100">
                                <!-- Quote -->
                                <h4 class="fw-light">"With unwavering determination, they navigate the complexities of the industry, forging strategic partnerships and driving transformative change."</h4>
                                <!-- Info -->
                                <div class="d-flex justify-content-between mt-5">
                                    <div>
                                        <h5 class="mb-0">Emma Watson</h5>
                                        <span>Founder, catalog</span>
                                    </div>
                                    <!-- Rating star -->
                                    <ul class="list-inline mb-1">
                                        <li class="list-inline-item small me-0"><i class="fa-solid fa-star text-white"></i></li>
                                        <li class="list-inline-item small me-0"><i class="fa-solid fa-star text-white"></i></li>
                                        <li class="list-inline-item small me-0"><i class="fa-solid fa-star text-white"></i></li>
                                        <li class="list-inline-item small me-0"><i class="fa-solid fa-star text-white"></i></li>
                                        <li class="list-inline-item small"><i class="fa-solid fa-star-half-alt text-white"></i></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Item -->
                <div class="swiper-slide">
                    <div class="card rounded-0 h-100" data-bs-theme="dark" style="background-image:url({{asset('images/auth/02.jpg')}}); background-position: center left; background-size: cover;">
                        <!-- Bg overlay -->
                        <div class="bg-overlay bg-dark opacity-5"></div>

                        <!-- Card info -->
                        <div class="card-img-overlay z-index-2 p-7">
                            <div class="d-flex flex-column justify-content-end h-100">
                                <!-- Quote -->
                                <h4 class="fw-light">"An exceptional agency CEO is a visionary, constantly pushing the boundaries of creativity and pushing their team to new heights. They inspire with their passion and cultivate a culture of trust and respect."</h4>
                                <!-- Info -->
                                <div class="d-flex justify-content-between mt-5">
                                    <div>
                                        <h5 class="mb-0">Carolyn Ortiz</h5>
                                        <span>CEO, mizzle</span>
                                    </div>
                                    <!-- Rating star -->
                                    <ul class="list-inline mb-1">
                                        <li class="list-inline-item small me-0"><i class="fa-solid fa-star text-white"></i></li>
                                        <li class="list-inline-item small me-0"><i class="fa-solid fa-star text-white"></i></li>
                                        <li class="list-inline-item small me-0"><i class="fa-solid fa-star text-white"></i></li>
                                        <li class="list-inline-item small me-0"><i class="fa-solid fa-star text-white"></i></li>
                                        <li class="list-inline-item small"><i class="fa-solid fa-star-half-alt text-white"></i></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Item -->
                <div class="swiper-slide">
                    <div class="card rounded-0 h-100" data-bs-theme="dark" style="background-image:url({{asset('images/auth/03.jpg')}}); background-position: center left; background-size: cover;">
                        <!-- Bg overlay -->
                        <div class="bg-overlay bg-dark opacity-5"></div>

                        <!-- Card info -->
                        <div class="card-img-overlay z-index-2 p-7">
                            <div class="d-flex flex-column justify-content-end h-100">
                                <!-- Quote -->
                                <h4 class="fw-light">" Through collaboration and strategic direction, they steer the agency towards its goals, navigating the ever-evolving landscape with agility and grace."</h4>
                                <!-- Info -->
                                <div class="d-flex justify-content-between mt-5">
                                    <div>
                                        <h5 class="mb-0">Dennis Barrett</h5>
                                        <span>Founder, catalog</span>
                                    </div>
                                    <!-- Rating star -->
                                    <ul class="list-inline mb-1">
                                        <li class="list-inline-item small me-0"><i class="fa-solid fa-star text-white"></i></li>
                                        <li class="list-inline-item small me-0"><i class="fa-solid fa-star text-white"></i></li>
                                        <li class="list-inline-item small me-0"><i class="fa-solid fa-star text-white"></i></li>
                                        <li class="list-inline-item small me-0"><i class="fa-solid fa-star text-white"></i></li>
                                        <li class="list-inline-item small"><i class="fa-solid fa-star-half-alt text-white"></i></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Slider Pagination -->
            <div class="swiper-pagination swiper-pagination-line mb-3"></div>
        </div>
    </div>

    <!-- Right -->
    <div class="col-sm-10 col-lg-5 d-flex m-auto vh-100">
        <div class="row w-100 m-auto">
            <div class="col-lg-10 my-5 m-auto">

                <a href="index.html"><img src="{{asset('images/logo-icon.svg')}}" class="h-50px mb-4" alt="logo"></a>

                <h2 class="mb-0">Create your
                    <span class="position-relative">account
                        <!-- SVG START -->
                        <span class="position-absolute top-50 start-50 translate-middle z-index-n1 ms-n2 mt-2 d-none d-sm-block">
                            <svg width="150.1px" height="20.7px" viewBox="0 0 150.1 20.7" style="enable-background:new 0 0 150.1 20.7;" xml:space="preserve">
                                <path class="fill-primary" d="M10.7,12.2c-0.8,0.2-1.7,0.4-2.3,1.1C9.3,13,10.1,12.9,10.7,12.2 M63.6,1.9c3.3,0.3,6.7,0.1,10,0.2 c4.8,0.1,9.6,0.2,14.4,0.7c2.9,0.3,5.9,0.3,8.8,0.8c6.9,1,13.7,1.8,20.6,3.1c5.5,1.1,11,2.1,16.4,3.3c4.8,1.1,9.5,2.6,14.3,4 c0.7,0.2,1.3,0.5,1.7,1c-0.3,0.6-0.8-0.2-1.1,0.3c0.3,0.4,1.6,0.2,1.2,1c-0.3,0.6-1.2,1.1-2.2,1c-1.4-0.2-2.6-1-4-1.3 c-6.1-1.4-12.2-3-18.4-4c-3.8-0.6-7.6-1.4-11.5-1.7c-2.1-0.2-4.1-1-6.3-0.9c-0.5,0-1-0.3-1.6,0.2c-0.2,0.2-1,0.5-1.1-0.5 c0-0.2-0.4-0.1-0.6-0.2c-2.5-0.2-5-0.8-7.5-0.7c-2.4,0.1-4.8-0.3-7.2-0.3c-1.7,0-3.3-0.8-5.1-0.7c-0.7,0-1.5-0.1-2.2,0.2 c-0.3,0-0.5-0.1-0.8-0.1c-1.8-0.3-3.7-0.5-5.5-0.2c-1.9-0.4-3.9-0.4-5.8-0.1C68.1,7,66.1,6.8,64,7.4c-0.9,0.3-1.8,0.1-2.8,0.2 c-3.1,0.3-6.3,0.6-9.4,0.8c-0.6,0-1.2,0.3-1.8-0.2c-1.6-0.2-3.2,0-4.8,0.5c-1.6,0.5-3.2,0.4-4.8,0.5c-2.1,0.2-4.1,0.4-6,1.2 c-1.6,0.7-3.5,0.5-5.2,0.9c-3.8,0.9-7.7,1.6-11.2,3.2c-3.8,1.7-8,2.4-11.7,4.4c-0.9,0.5-1.7,1.3-2.8,1.6c-1.1,0.3-2.8-0.3-3.4-1.5 c-0.5-1-0.3-2.1,0.6-2.9c1.7-1.4,3.5-2.5,5.4-3.5c8.2-4.3,16.9-7,25.9-9c8.8-1.9,17.7-3,26.7-3.5C63.5-0.1,68.1,0,72.6,0 c4.7,0,9.4,0.1,14.1,0.5c4.2,0.4,8.3,0.9,12.5,1.4c4.9,0.6,9.7,1.3,14.5,2.1c11.6,2.1,23.1,4.4,34.2,8.4c0.7,0.3,1.7,0.1,2.2,1.1 c-0.9,0.4-1.7,0.1-2.4-0.1c-5.7-2-11.6-3.5-17.4-4.9c-8.7-2.1-17.5-3.3-26.3-4.7c-4.2-0.7-8.6-0.9-12.8-1.5 c-5.6-0.7-11.3-0.9-16.9-1.1c-3.4-0.1-6.8-0.1-10.1,0.3C63.9,1.6,63.7,1.7,63.6,1.9c-0.6-0.5-1.2-0.2-1.9-0.2 C56.9,1.9,52,2.3,47.1,2.8C44.1,3.1,41.1,3.7,38,4c-3.2,0.4-6.4,1.2-9.5,2.1c-0.9,0.2-2.1,0-2.7,1.1c-1.4-0.5-2.5,0.4-3.6,1 c1.2-0.2,2.5-0.4,3.6-1c0.3,0,0.7,0,1-0.1c9.1-2.3,18.4-3.7,27.7-4.4C57.6,2.4,60.6,2.2,63.6,1.9" />
                            </svg>
                        </span>
                        <!-- SVG END -->
                    </span>
                </h2>

                <hr class="my-5">

                <!-- Form START -->
                <form method="POST" action="{{ route('register') }}">
                    @csrf

                    <div class="input-floating-label form-floating mb-4">
                        <input type="name" class="form-control" name="name" value="{{ old('email') }}" id="floatingInput" placeholder="John Doe" required>
                        <label for="floatingInput">Name</label>
                        @if ($errors->has('name'))
                        <div class="text-danger mt-2">{{ $errors->first('name') }}</div>
                        @endif
                    </div>

                    <div class="input-floating-label form-floating mb-4">
                        <input type="email" class="form-control" name="email" value="{{ old('email') }}" id="floatingInput" placeholder="name@example.com" required>
                        <label for="floatingInput">Email address</label>
                        @if ($errors->has('email'))
                        <div class="text-danger mt-2">{{ $errors->first('email') }}</div>
                        @endif
                    </div>

                    <div class="input-floating-label form-floating mb-4">
                        <input type="password" class="form-control" name="password" id="floatingInput" placeholder="name@example.com" required autocomplete="new-password">
                        <label for="floatingInput">{{ __('Password') }}</label>
                        @if ($errors->has('password'))
                        <div class="text-danger mt-2">{{ $errors->first('password') }}</div>
                        @endif
                    </div>

                    <div class="input-floating-label form-floating mb-4">
                        <input type="password" id="password_confirmation" class="form-control" name="password_confirmation" id="floatingInput" placeholder="name@example.com" required autocomplete="new-password">
                        <label for="floatingInput">{{ __('Confirm Password') }}</label>
                        @if ($errors->has('password_confirmation'))
                        <div class="text-danger mt-2">{{ $errors->first('password_confirmation') }}</div>
                        @endif
                    </div>

                    <!-- Pswmeter -->
                    <div id="pswmeter" class="mt-3"></div>
                    <div class="d-flex mt-1 mb-4">
                        <div id="pswmeter-message" class="rounded"></div>
                        <!-- Password message notification -->
                        <div class="ms-auto">
                            <i class="bi bi-info-circle ps-1" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Include at least one uppercase, one lowercase, one special character, one number and 8 characters long." data-bs-original-title="" title=""></i>
                        </div>
                    </div>

                    <!-- Button -->
                    <div class="align-items-center mt-0">
                        <div class="d-grid">
                            <button class="btn btn-dark mb-0" type="submit">{{ __('Register') }}</button>
                        </div>
                    </div>
                </form>
                <!-- Form END -->

                <!-- Sign IN link -->
                <div class="mt-4 text-center">
                    <span>{{ __('Already registered?') }}<a href="{{ route('login') }}"> Sign in here</a></span>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection