@extends('front.layouts.master')

@section('content')
    <div class="loading_bar"></div>

    <!-- banner section start -->
    <section id="inner-header">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="inner-breadcrumb">
                        <h2>Account Setup</h2>
                        <ul>
                            <li><a href="{{ route('front.home') }}">Home</a></li>
                            <li>
                                <p>Account Setup</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
<section class="py-5 cotact-form-section">
    <div class="container">
        <div class="row">
            <input type="hidden" id="is_phone_verified" value="{{ $result->is_phone_verified }}">

            @if($result->is_phone_verified == 1)
                <div class="col-lg-8 mx-auto">
                    <div id="contact_us_success" class="alert alert-success text-center">
                        Your phone number has been verified and your password has been set.
                        You can now sign in using your new credentials.
                    </div>
                </div>
            @endif

            @if($result->is_phone_verified == 0)

                @if(session('success'))
                    <div class="col-lg-8 mx-auto">
                        <div class="alert alert-success">
                            {{ session('success') }}
                        </div>
                    </div>
                @endif

                <!-- FORM -->
                <div class="col-lg-6 col-md-8 col-sm-10 mx-auto">
                    <div class="contact-card">

                        <h4 class="mb-1 text-center">Complete Your Account Setup</h4>

                        <p class="text-muted text-center mb-4">
                            Verify your phone number and create a password to access your account.
                        </p>

                        <div id="contact_us_error"
                             class="alert alert-danger"
                             style="display:none">
                        </div>

                        <div id="contact_us_success"
                             class="alert alert-success"
                             style="display:none">
                        </div>

                        {!! Form::open([
                            'route' => ['verify-patient', $result->id],
                            'method' => 'POST',
                            'id' => 'ajax-submit',
                        ]) !!}

                        @csrf

                        <div class="row">

                            <div class="row g-3">

                            {{-- Name --}}
                            <div class="col-md-6">
                                <label class="form-label">Name</label>
                                <input type="text"
                                    class="form-control"
                                    maxlength="50"
                                    value="{{ $result->first_name . ' ' . $result->last_name }}"
                                    disabled>
                            </div>

                            {{-- Email --}}
                            <div class="col-md-6">
                                <label class="form-label">Email</label>
                                <input type="email"
                                    class="form-control"
                                    value="{{ $result->email }}"
                                    disabled>
                            </div>

                            {{-- Phone --}}
                            <div class="col-12">
                                <label class="form-label">Mobile Number</label>
                                <input type="text"
                                    class="form-control"
                                    value="{{ $result->dial_code . ' ' . $result->phone }}"
                                    disabled>
                            </div>

                        </div>

                            <div>
                                <p class="text-muted mb-3 mt-4">
                                    <b>Enter the 6-digit verification code sent to your phone number via WhatsApp.</b>
                                </p>

                                <div class="d-flex gap-2 mb-4">
                                    @for($i = 0; $i < 6; $i++)
                                        <div class="col">
                                            <input type="text"
                                                   maxlength="1"
                                                   name="otp[]"
                                                   class="form-control otp-box text-center"
                                                   autocomplete="off"
                                                   required>
                                        </div>
                                    @endfor
                                </div>

                                <div class="text-center mb-4">
                                    Didn't receive the code?
                                    <a href="#"
                                       class="auth-link fw-semibold"
                                       id="resendRegisterOtpBtn"
                                       data-url="{{ route('front.patient.resend-register-otp') }}">
                                        Resend
                                    </a>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">New Password</label>

                                <div class="input-group">
                                    <input type="password"
                                           class="form-control"
                                           name="password">

                                    <button class="btn btn-outline-greyed toggle-password"
                                            type="button">
                                        <i class="fa-regular fa-eye"></i>
                                    </button>
                                </div>

                                <span class="text-danger error-text"
                                      data-error-for="password"></span>
                            </div>

                            <div class="mb-4">
                                <label class="form-label">Confirm Password</label>

                                <div class="input-group">
                                    <input type="password"
                                           class="form-control"
                                           name="password_confirmation">

                                    <button class="btn btn-outline-greyed toggle-password"
                                            type="button">
                                        <i class="fa-regular fa-eye"></i>
                                    </button>
                                </div>

                                <span class="text-danger error-text"
                                      data-error-for="password_confirmation"></span>
                            </div>

                            <div class="mb-3">
                                <div class="cf-turnstile"
                                     data-sitekey="{{ config('services.turnstile.site_key') }}"
                                     data-theme="auto">
                                </div>
                            </div>

                            <button type="submit" class="btn btn-auth w-100">
                                Complete Account Setup
                            </button>

                        </div>

                        {!! Form::close() !!}

                    </div>
                </div>

            @endif
        </div>
    </div>
</section>

@endsection

@section('frontend_bottom_script') 
{{-- //account used for captcha is projects.intellisense@gmail.com --}}

<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
    <script src="{{asset('front/assets/js/contact.js')}}"></script>
<script>
$(document).ready(function () {
    if ($('#is_phone_verified').val() == 1) {
        var authModal = new bootstrap.Modal(
            document.getElementById('authModal')
        );

        authModal.show();
    }
});
</script>
@endsection