@extends('layouts.master')

@section('title')
@lang('translation.account-verification')
@endsection

@section('content')
@component('components.breadcrumb')
@slot('title')
Account Verification
@endslot
@endcomponent

<div class="row">
    <div class="col-xl-12">
        <div class="card">
            <div class="card-body form-steps">
                <div id="verification-alert-container" class="mt-3"></div> <!-- Ensure this element exists -->
                <input type="hidden" id="is-email-verified" value="{{ auth()->user()->is_email_verified }}">
                <input type="hidden" id="is-phone-verified" value="{{ auth()->user()->is_phone_verified }}">
                <input type="hidden" id="is-personal-info-filled" value="{{ auth()->user()->is_personal_info_filled }}">
                <form class="vertical-navs-step" enctype="multipart/form-data">
                    <div class="row gy-5">
                        <div class="col-lg-3">
                            <div class="nav flex-column custom-nav nav-pills" role="tablist" aria-orientation="vertical">
                                @php
                                $user = Auth::user();
                                $status = $user->status ?? 'unapproved';
                                @endphp

                                @if ($status === 'unapproved' || $status === 'Rejected')
                                <button class="nav-link active" id="v-pills-finish-tab" data-bs-toggle="pill"
                                    data-bs-target="#v-pills-finish" type="button" role="tab"
                                    aria-controls="v-pills-finish" aria-selected="true">
                                    <span class="step-title me-2">
                                        <i class="ri-close-circle-fill step-icon me-2"></i> Step 4
                                    </span>
                                    Finish
                                </button>
                                @else

                                @php
                                $emailVerified = $user->is_email_verified;
                                $phoneVerified = $user->is_phone_verified;
                                $personalInfoFilled = $user->is_personal_info_filled;

                                // Determine active step
                                if (!$emailVerified) {
                                $activeTab = 'email';
                                } elseif (!$phoneVerified) {
                                $activeTab = 'phone';
                                } elseif (!$personalInfoFilled) {
                                $activeTab = 'personal';
                                } else {
                                $activeTab = 'finish';
                                }
                                @endphp

                                <!-- Email Verification Tab -->
                                @if(!auth()->user()->is_email_verified)
                                <button class="nav-link {{ $activeTab === 'email' ? 'active' : '' }}" id="v-pills-email-verification-tab"
                                    data-bs-toggle="pill"
                                    data-bs-target="#v-pills-email-verification"
                                    type="button"
                                    role="tab"
                                    aria-controls="v-pills-email-verification"
                                    aria-selected="{{ $activeTab === 'email' ? 'true' : 'false' }}">
                                    <span class="step-title me-2">
                                        <i class="ri-close-circle-fill step-icon me-2"
                                            style="color: {{ $activeTab === 'email' ? 'green' : '#f06548' }}"></i>
                                        Email Verification
                                    </span>
                                </button>

                                <!-- Phone Verification Tab -->
                                @endif
                                @if(!auth()->user()->is_phone_verified)
                                <button class="nav-link {{ $activeTab === 'phone' ? 'active' : '' }}" id="v-pills-phone-verification-tab"
                                    data-bs-toggle="pill"
                                    data-bs-target="#v-pills-phone-verification"
                                    type="button"
                                    role="tab"
                                    aria-controls="v-pills-phone-verification"
                                    aria-selected="{{ $activeTab === 'phone' ? 'true' : 'false' }}"
                                    {{ $emailVerified ? '' : 'disabled' }}>
                                    <span class="step-title me-2">
                                        <i class="ri-close-circle-fill step-icon me-2"
                                            style="color: {{ $activeTab === 'phone' ? 'green' : '#f06548' }}"></i>
                                        Phone Verification
                                    </span>
                                </button>
                                @endif
                                @if(!auth()->user()->is_personal_info_filled)
                                <!-- Personal Info Tab -->
                                <button class="nav-link {{ $activeTab === 'personal' ? 'active' : '' }}" id="v-pills-personal-information-tab"
                                    data-bs-toggle="pill"
                                    data-bs-target="#v-pills-personal-information"
                                    type="button"
                                    role="tab"
                                    aria-controls="v-pills-personal-information"
                                    aria-selected="{{ $activeTab === 'personal' ? 'true' : 'false' }}"
                                    {{ $emailVerified && $phoneVerified ? '' : 'disabled' }}>
                                    <span class="step-title me-2">
                                        <i class="ri-close-circle-fill step-icon me-2"
                                            style="color: {{ $activeTab === 'personal' ? 'green' : '#f06548' }}"></i>
                                        Personal Information
                                    </span>
                                </button>
                                @endif

                                <button class="nav-link" id="v-pills-finish-tab" data-bs-toggle="pill"
                                    data-bs-target="#v-pills-finish" type="button" role="tab"
                                    aria-controls="v-pills-finish" aria-selected="false" disabled>
                                    <span class="step-title me-2">
                                        <i class="ri-close-circle-fill step-icon me-2"></i> Step 4
                                    </span>
                                    Finish
                                </button>
                                @endif
                            </div>
                        </div>

                        <div class="col-lg-9">
                            <div class="px-lg-4">
                                <div class="tab-content">
                                    @if ($status === 'unapproved' || $status === 'Rejected')
                                    <div class="tab-pane fade show active" id="v-pills-finish" role="tabpanel"
                                        aria-labelledby="v-pills-finish-tab">
                                        <div class="text-center pt-4 pb-2">
                                            <div class="alert alert-info material-shadow d-flex align-items-center mb-3" role="alert">
                                                <i class="ri-notification-4-fill me-3 fs-4"></i>
                                                <strong>
                                                    We promise to prioritize the privacy and security of your personal information. We implement industry-standard security measures to protect your data from unauthorized access, loss, or misuse.
                                                </strong>
                                            </div>

                                            <div class="mb-4">
                                                <lord-icon src="https://cdn.lordicon.com/lupuorrc.json" trigger="loop"
                                                    colors="primary:#0ab39c,secondary:#405189"
                                                    style="width:120px;height:120px"></lord-icon>
                                            </div>
                                            <h3>Account Verification Pending</h3>
                                            <p class="text-muted">Our team will verify your account details and you will receive a confirmation email from us.</p>
                                            <div class="d-flex justify-content-center mt-4">
                                                <button type="button" class="btn btn-success" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                                                    Logout
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    @else
                                    <!-- Email Verification -->
                                    <div class="tab-pane fade {{ $activeTab === 'email' ? 'show active' : '' }}" id="v-pills-email-verification" role="tabpanel"
                                        aria-labelledby="v-pills-email-verification-tab">
                                        <div class="alert alert-light material-shadow d-flex align-items-center mb-4 text-black rounded-4" role="alert">
                                        <i class="ri-notification-4-line me-3 fs-4 text-black"></i>
                                        <strong>
                                            Collecting this information to ensure the security and verify your identity
                                        </strong>
                                    </div>

                                    <div class="d-flex align-items-center justify-content-center mb-4">
                                        <!-- Avatar 50% Size -->
                                        <div class="me-3 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                                            <div class="avatar-title bg-success text-white rounded-circle d-flex align-items-center justify-content-center" style="width: 100%; height: 100%;">
                                                <i class="ri-mail-line fs-5"></i>
                                            </div>
                                        </div>

                                        <!-- Text Content -->
                                        <div class="text-muted">
                                        <h4>Verify Your Email</h4>
                                        </div>
                                    </div>


                                    <div class="p-2 text-center text-muted mb-3 mx-lg-3">
                                        <p>We’ve sent a 6-digit verification code to your email address<span class="fw-semibold">{{ $user->email ?? '' }}</span><br> Please enter the code and click continue to verify your email address</p>
                                    </div>

                                        <div class="row" id="email-code-inputs">
                                            @for ($i = 1; $i <= 6; $i++)
                                                <div class="col-2">
                                                <div class="mb-3">
                                                    <input type="text"
                                                        class="form-control form-control-lg bg-light border-light text-center"
                                                        maxlength="1"
                                                        onkeyup="moveToNextInput({{ $i + 1 }}, event, 'email')"
                                                        id="email-digit{{ $i }}-input"
                                                        @if ($i===1) onpaste="handlePasteCode(event, 'email')" @endif
                                                        required>
                                                    <div class="invalid-feedback">Please enter a valid digit</div>
                                                </div>
                                        </div>
                                        @endfor
                                    </div>

                                    <div class="text-center mt-4">
                                        <p class="mb-0">Didn't receive a code? <a href="#" class="fw-semibold text-primary text-decoration-underline" onclick="resendVerificationCode('email')">Resend Code</a></p>
                                    </div>

                                    <div class="d-flex justify-content-center gap-3 mt-4">
                                        <button type="button"
                                            class="btn btn-success btn-label right nexttab"
                                            onclick="verifyCode('email')"
                                            data-nexttab="v-pills-phone-verification-tab">
                                            <i class="ri-arrow-right-line label-icon align-middle fs-16 ms-2"></i>continue
                                        </button>
                                    </div>
                                </div>

                                <!-- Phone Verification -->
                                <div class="tab-pane fade {{ $activeTab === 'phone' ? 'show active' : '' }}" id="v-pills-phone-verification" role="tabpanel"
                                    aria-labelledby="v-pills-phone-verification-tab">
                                    <div class="alert alert-light material-shadow d-flex align-items-center mb-4 text-black rounded-4" role="alert">
                                        <i class="ri-notification-4-line me-3 fs-4 text-black"></i>
                                        <strong>
                                            Collecting this information to ensure the security and verify your identity
                                        </strong>
                                    </div>

                                    <div class="d-flex align-items-center justify-content-center mb-4">
                                        <!-- Avatar 50% Size -->
                                        <div class="me-3 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                                            <div class="avatar-title bg-success text-white rounded-circle d-flex align-items-center justify-content-center" style="width: 100%; height: 100%;">
                                                <i class="ri-phone-line fs-5"></i>
                                            </div>
                                        </div>

                                        <!-- Text Content -->
                                        <div class="text-muted">
                                            <h5 class="mb-1">Phone Verification</h5>
                                        </div>
                                    </div>


                                    <div class="p-2 text-center text-muted mb-3 mx-lg-3">
                                        <p>We’ve sent a 6-digit verification code to your phone <span class="fw-semibold">{{ $user->phone_number ?? '' }}</span><br> Please enter the code and click continue to verify your phone number</p>
                                    </div>

                                    <div class="row" id="phone-code-inputs">
                                        @for ($i = 1; $i <= 6; $i++)
                                            <div class="col-2">
                                            <div class="mb-3">
                                                <input type="text"
                                                    class="form-control form-control-lg bg-light border-light text-center"
                                                    maxlength="1"
                                                    onkeyup="moveToNextInput({{ $i + 1 }}, event, 'phone')"
                                                    id="phone-digit{{ $i }}-input"
                                                    @if ($i===1) onpaste="handlePasteCode(event, 'phone')" @endif
                                                    required>
                                                <div class="invalid-feedback">Please enter a valid digit</div>
                                            </div>
                                    </div>
                                    @endfor
                                </div>

                                <div class="text-center mt-4">
                                    <p class="mb-0">Didn't receive a code? <a href="#" class="fw-semibold text-primary text-decoration-underline" onclick="resendVerificationCode('phone')">Resend Code</a></p>
                                </div>

                                <div class="d-flex justify-content-center gap-3 mt-4">
                                    <button type="button"
                                        class="btn btn-success right btn-label"
                                        onclick="verifyCode('phone')">
                                        <i class="ri-arrow-right-line label-icon align-middle fs-16 ms-2"></i>
                                        Continue
                                    </button>
                                </div>
                            </div>

                            <!-- Personal Information -->
                            <div class="tab-pane fade {{ $activeTab === 'personal' ? 'show active' : '' }}" id="v-pills-personal-information" role="tabpanel"
                                aria-labelledby="v-pills-personal-information-tab">
                                <div class="alert alert-light material-shadow d-flex align-items-center mb-4 text-black rounded-4" role="alert">
                                        <i class="ri-notification-4-line me-3 fs-4 text-black"></i>
                                        <strong>
                                            Collecting this information to ensure the security and verify your identity
                                        </strong>
                                    </div>

                                    <div class="d-flex align-items-center justify-content-center mb-4">
                                        <!-- Avatar 50% Size -->
                                        <div class="me-3 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                                            <div class="avatar-title bg-success text-white rounded-circle d-flex align-items-center justify-content-center" style="width: 100%; height: 100%;">
                                                <i class="ri-account-circle-fill fs-5"></i>
                                            </div>
                                        </div>

                                        <!-- Text Content -->
                                        <div class="text-muted">
                                        <h4>Personal Information</h4>
                                        </div>
                                    </div>

                                <div class="row">
                                <div class="col-lg-6 mb-4">
                                        <label class="form-label" for="steparrow-gen-info-full-name-input">Full Name</label>

                                        <input class="form-control" id="steparrow-gen-info-full-name-input"
                                            value="{{ $user->full_name ?? '' }}"readonly>
                                    </div>

                                    <div class="col-lg-6 mb-4">
                                        <label class="form-label" for="steparrow-gen-info-email-input">Email</label>

                                        <input class="form-control" id="steparrow-gen-info-email-input"
                                            value="{{ $user->email ?? '' }}" readonly>
                                    </div>

                                    <div class="col-lg-6 mb-4">
                                        <label class="form-label" for="steparrow-gen-identification-number-input">Identification or Passport Number</label>
                                        <input type="text" class="form-control" id="steparrow-gen-identification-number-input" placeholder="Identification Number" required>
                                        <div class="invalid-feedback">This field is required</div>
                                    </div>

                                    <div class="col-lg-6 mb-4">
                                        <label class="form-label" for="steparrow-gen-date-of-birth-input">Date of Birth</label>
                                        <input type="date" class="form-control" id="steparrow-gen-date-of-birth-input" required>
                                        <div class="invalid-feedback">This field is required</div>
                                    </div>


                                    <div class="col-lg-6 mb-4">
                                        <label class="form-label" for="steparrow-gen-id-image-front-input">ID Image (Front)</label>
                                        <input class="form-control" name="id_image_front" id="steparrow-gen-id-image-front-input" type="file" required>
                                        <div class="invalid-feedback">Please upload the front side of your ID</div>
                                    </div>

                                    <div class="col-lg-6 mb-4">
                                        <label class="form-label" for="steparrow-gen-id-image-back-input">ID Image (Back)</label>
                                        <input class="form-control" name="id_image_back" id="steparrow-gen-id-image-back-input" type="file" required>
                                        <div class="invalid-feedback">Please upload the back side of your ID</div>
                                    </div>

                                    <div class="col-lg-6 mb-4">
                                        <label class="form-label" for="nationality">Nationality</label>
                                        <select class="form-control" id="nationality" name="nationality" data-choices data-choices-search-false data-choices-removeItem required>
                                            <option disabled selected>Select Nationality</option>
                                            @foreach ($countries as $country)
                                            <option value="{{ $country->id }}">{{ $country->name }}</option>
                                            @endforeach
                                        </select>
                                        <div class="invalid-feedback">This field is required</div>
                                    </div>
                                </div>

                                <div class="d-flex justify-content-center gap-3 mt-4">
                                    <button type="button" class="btn btn-success right btn-label" onclick="submitPersonalInformation()">
                                        <i class="ri-arrow-right-line label-icon align-middle fs-16 ms-2"></i>
                                        Continue
                                    </button>
                                </div>
                            </div>

                            <div class="tab-pane fade" id="v-pills-finish" role="tabpanel"
                                aria-labelledby="v-pills-finish-tab">
                                <div class="text-center pt-4 pb-2">
                                    <div class="alert alert-info material-shadow d-flex align-items-center mb-3" role="alert">
                                        <i class="ri-notification-4-fill me-3 fs-4"></i>
                                        <strong>
                                            We promise to prioritize the privacy and security of your personal information. We implement industry-standard security measures to protect your data from unauthorized access, loss, or misuse.
                                        </strong>
                                    </div>

                                    <div class="mb-4">
                                        <lord-icon src="https://cdn.lordicon.com/lupuorrc.json" trigger="loop"
                                            colors="primary:#0ab39c,secondary:#405189"
                                            style="width:120px;height:120px"></lord-icon>
                                    </div>
                                    <h3>Account Verification Pending</h3>
                                    <p class="text-muted">Our team will verify your account details and you will receive a confirmation email from us.</p>
                                    <div class="d-flex justify-content-center mt-4">
                                        <button type="button" class="btn btn-success" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                                            Logout
                                        </button>
                                    </div>
                                </div>
                            </div>
                            @endif
                        </div>
                    </div>
            </div>
        </div>
        </form>
    </div>
</div>
</div>
</div>
@endsection