@extends('template.main-template')

@section('content')
<div class="container margin_30">
    <div class="page_header">
        {{-- <div class="breadcrumbs">
            <ul>
                <li><a href="{{ URL::to('/') }}">Home</a></li>
                <li><a href="{{ route('cart.index') }}">Cart</a></li>
                <li>Account Data</li>
            </ul>
        </div> --}}

        <h1>Login Or Create Account</h1>

    </div>
</div>

    {{-- <section class="sub-bnr"
        style="background: url({{ asset('template/images/banners/cart-hero.png') }}); background-position: fixed !important;"
        data-stellar-background-ratio="0.5">
        <div class="position-center-center">
            <div class="container">
                <h4>Finish Order</h4>
                <p style="color: #fff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus maximus
                    vehicula.
                    Sed feugiat, tellus vel tristique posuere, diam</p>
                <ol class="breadcrumb">
                    <li><a href="{{ URL::to('/') }}">Home</a></li>
                    <li><a href="{{ route('cart.index') }}">Cart</a></li>
                    <li class="active">FINISH ORDER</li>
                </ol>
            </div>
        </div>
    </section> --}}


    <div class="content">
        <section class="padding-top-100 padding-bottom-50 pages-in chart-page">
            <div class="container">

                <div class="main">
                    {{-- <h4 class="title-area">Client Data</h4> --}}

                    <section class="form-area">
                        <h3 class="title-section mt-5">To proceed, enter your email!</h3>

                        @if ($errors->any())
                            <div class="alert alert-danger">
                                @foreach ($errors->all() as $error)
                                    <p>{{ $error }}</p>
                                @endforeach
                            </div>
                        @endif

                        <form class="form-login" id="form-fields" method="POST">
                            @csrf
                            <div class="form-item">
                                <label for="email">Email <span class="form-label danger">*</span></label>
                                <input type="email" name="email" id="userEmail" class="form-control">
                            </div>
                            <div id="newFields">

                            </div>
                            {{-- <a href="{{ route('confirm-shipping') }}">Prosseguir</a> --}}
                            <div class="form-item">
                                <button disabled id="finish-button" style="background-color: #3fa9c9; color: #fff;" class="btn">Proceed</button>
                            </div>
                        </form>
                        <div class="question-area mb-5">
                            <h4 >Why provide email?</h4>
                            <p class="text-center">
                                To check if you are already registered in our store! <br>
                                And speed up filling out your information!
                            </p>
                            <div class=" text-end">
                                <a href="#sign-in-dialog" id="sign-in" class="access_link">Lost Password?</a>
                            </div>
                        </div>
                    </section>
                </div>

            </div>
        </section>
    </div>

    <div class="models" style="display:none;">
        <div id="has-account">
            <div class="form-item">
                <label for="email">Password <span class="danger">*</span></label>
                <input type="password" name="password" id="userPassH" class="form-control">
            </div>
            <input type="hidden" value="1">
        </div>

        <div id="no-account">
            <div class="form-item">
                <label for="name">Full Name<span class="danger">*</span></label>
                <input type="text" name="customer_name" id="" class="form-control">
            </div>
            <div class="form-item">
                <label for="email">Password <span class="danger">*</span></label>
                <input type="password" name="password" id="userPassN" class="form-control">
            </div>
            <input type="hidden" value="0">
        </div>
    </div>
    @csrf

    <div id="sign-in-dialog" class="zoom-anim-dialog mfp-hide">
		<div class="modal_header">
			<h3>Recovery Password</h3>
		</div>
		<form>
			<div class="sign-in-wrapper">
				<div class="form-group">
                    <label>Please confirm login email below</label>
                    <input type="email" class="form-control" name="email_forgot" id="email_forgot">
                    <i class="ti-email"></i>
                </div>
                <p id="text-send">You will receive an email containing a link allowing you to reset your password to a new preferred one.</p>
                <div class="text-center">
                    <button onClick="handleChangePassword(); return false;" class="btn_1">
                        Send email to reset password
                    </button>
                </div>
			</div>
		</form>
		<!--form -->
	</div>

@endsection

@push('css')
    <link rel="stylesheet" href="{{ asset('shop/css/shop-main.css') }}">
    <link rel="stylesheet" href="{{ asset('shop/css/finish-order.css') }}">
@endpush
@push('javascript')

<script>
    async function handleChangePassword() {
        // Enviar requisição para alterar senha
        let email = document.querySelector('#email_forgot').value

        if (email.length > 0) {

            let req = await fetch("{{route('customer.recovery')}}", {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value,
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                },
                body: JSON.stringify({
                    email
                })
            });
        }

        document.querySelector('#text-send').innerHTML = 'An email with instructions to change your password has been sent!'
        return false;
    }
</script>

    <script src="{{ asset('shop/js/finish-order.js') }}"></script>
    <script>
        finish_order.init()
    </script>
@endpush