@extends('layouts/layout')

@section('title', "Login")
@section('page-description', '')
@section('page-keywords', '')

@section('vendor-style')
<link rel="stylesheet" href="{{asset('assets/vendor/select2/select2.css')}}" />
@endsection

@section('page-style')
@endsection

@section('vendor-script')
<script src="{{asset('assets/vendor/select2/select2.js')}}"></script>
@endsection

@section('page-script')
<script src="{{asset('assets/js/login.js')}}"></script>
@endsection

@section('content')
    <div class="auth-page">
        <div class="container">
            <form id="login_form">
                <div class="card">
                    <div class="card-body">
                        <h4 class="mb-4 mb-md-5 text-center">LOG IN</h4>
                        <div class="error-msg mb-4 text-center text-danger d-none">Sorry, your login doesn’t exist. Try again with name and email.</div>
                    
                        <div class="mb-4 mb-md-5" id="phone_num_wrapper">
                            <div class="input-group phone-input-group">
                                <select class="select2 w-100" id="country_code" placeholder="Country/Region">
                                    @foreach(config('variables.country_codes') as $country)
                                        <option value="{{ $country['code'] }}" {{ $country['name']=='United States' ? 'selected' : '' }}>
                                        {{ $country['code'] }}({{ $country['short_name'] }})
                                        </option>
                                    @endforeach
                                </select>
                                <input type="text" class="form-control form-control-outline" id="phone_num" placeholder="Phone number*" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">
                            </div>
                        </div>

                        <div class="mb-4 mb-md-5 d-none" id="email_wrapper">
                            <input type="email" class="form-control form-control-outline" id="email" placeholder="Email*">
                        </div>
                        <div class="d-flex gap-4 mb-3">
                            <button type="button" class="btn btn-lg btn-outline-primary-custom text-nowrap" id="login_mode_btn" data-mode="phone">Use Email</button>
                            <button type="button" class="btn btn-primary btn-lg w-100 text-nowrap" id="login_btn">Next<i class="fas fa-spinner fa-spin ms-2 d-none"></i></button>
                        </div>
                        
                        <div class="fs-14 phone-consent" style="color: rgb(255, 255, 255, 0.8)">
                            By continuing,  I consent to receive verification codes and message via text. Message and data rates may apply. Reply STOP to opt-out. <br>
                            I agree to the <a href="{{route('agrement-page')}}">Quintessence Biologics Terms</a> and  <a href="{{route('agrement-page')}}">Conditions</a> and <a href="{{route('agrement-page')}}">Privacy Notice</a>.
                        </div>
                        <div class="fs-14 email-consent d-none" style="color: rgb(255, 255, 255, 0.8)">
                            By continuing, I agree to the <a href="{{route('agrement-page')}}">Quintessence Biologics Terms</a> and  <a href="{{route('agrement-page')}}">Conditions</a> and <a href="{{route('agrement-page')}}">Privacy Notice</a>.
                        </div>
                    </div>
                </div>
            </form>

            <form id="verify_code_form" class="d-none">
                <div class="card">
                    <div class="card-body">
                        <h4 class="mb-4 mb-md-5 text-center" id="confirm_title">Confirm your Number</h4>
                        <div class="mb-4 text-center">Enter the code sent to <span id="login_info_span"></span></div>
                        <div class="verify-error-msg mb-4 text-danger text-center d-none"></div>

                        <input type="number" class="form-control form-control-outline mb-4" id="verify_code" placeholder="------" required>
                        <input type="hidden" id="phone_country_code">
                        <input type="hidden" id="login_info">
                        <input type="hidden" id="login_mode">

                        <div class="d-flex gap-4 mb-3">
                            <button type="button" class="btn btn-lg btn-outline-primary-custom text-nowrap" id="edit_login_btn">Edit Login</button>
                            <button type="submit" class="btn btn-primary btn-lg w-100 text-nowrap" id="verify_btn">Next<i class="fas fa-spinner fa-spin ms-2 d-none"></i></button>
                        </div>

                        <div class="fs-14" style="color: rgb(255, 255, 255, 0.8)">
                            By continuing, I agree to the <a href="{{route('agrement-page')}}">Quintessence Biologics Terms</a> and  <a href="{{route('agrement-page')}}">Conditions</a> and <a href="{{route('agrement-page')}}">Privacy Notice</a>.
                        </div>
                    </div>
                </div>
            </form>

           
        </div>
        <img src="{{asset('assets/imgs/bubble-sm.png')}}" class="bubble-img bubble-first">
        <img src="{{asset('assets/imgs/bubble-sm.png')}}" class="bubble-img bubble-second">
        <img src="{{asset('assets/imgs/bubble-lg.png')}}" class="bubble-img bubble-third">
    </div>
@endsection