@extends('app')
@section('content')
<div class="sign-up-cover my-0 py-0 d-flex">
    <div class="left-content d-flex align-items-center px-0">
        <div class="active-tabs w-100 my-3">
            <div class="">
                <div class="text-center tab-active">
                    <img src="{{ Vite::asset('resources/images/basic_details.webp') }}" alt="img" class="active-image">
                    <p class="head mb-1">Basic Details</p>
                </div>
                <div class="text-center" id="participant-tab">
                    <div class="text-center mb-2">
                        <div class="step-line"></div>
                    </div>
                    <img src="{{ Vite::asset('resources/images/participant_disabled.webp') }}" alt="img" id="participant-img-disabled" class="active-image">
                    <img src="{{ Vite::asset('resources/images/participant_enabled.webp') }}" alt="img" id="participant-img-enabled" class="active-image d-none">
                    <p class="head mb-1">Influencer/Participant</p>
                </div>
                <div class="text-center" id="verify-tab">
                    <div class="text-center mb-2">
                        <div class="step-line"></div>
                    </div>
                    <img src="{{ Vite::asset('resources/images/verify_disabled.webp') }}" alt="img" class="active-image" id="verify-img-disabled">
                    <img src="{{ Vite::asset('resources/images/verify_enabled.webp') }}" alt="img" class="active-image d-none" id="verify-img-enabled">
                    <p class="head mb-1">Verification</p>
                </div>
            </div>
            <div class="w-75">
                <div>
                    <p class="mb-2 tab-step"><span id="tab-step">1</span> of 3 Steps</p>
                    <p class="text-white progress-head">Progress</p>
                </div>
                <div class="progress" style="height: 18px; border-radius: 10px">
                    <div class="progress-bar rounded-5" id="tab-progressbar" role="progressbar"
                        style="width: 0%; height: 100%; background-color: #3B56A7;"
                        aria-valuenow="0"
                        aria-valuemin="0" aria-valuemax="100">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="signup-wrapper right-content">
        <div class="p-3 px-lg-5 py-4">
            <div class="justify-content-between d-md-flex d-block align-items-center text-center text-md-start">
                <a href="{{'/'}}" class="fms-logo logo-img"></a>
                <h4 class="text-blue fw-bold text-md-end my-3 my-md-0">Register as a Influencer/Participant</h4>
            </div>
            <!-- <p class="text-center admin-font text-blue fw-bold p-4">
                Register as a Participant
            </p> -->
            <form action="" class="sign-up-form mt-3 mt-xl-5">
                @csrf
                <div class="d-none d-md-flex flex-wrap justify-content-center align-items-center gap-3 head-btn">
                    <div>
                        <div class="headBtn-style py-2 px-2 px-md-2">
                            <i class="fa-solid fa-magnifying-glass fa-rotate-90 mx-2 me-md-2 fs-md-5"></i>Basic Details
                        </div>
                    </div>
                    <i class="fa-solid fa-arrow-right text-clr arrow-1"></i>
                    <div>
                        <div class="py-2 px-2 px-md-2 text-clr" id="participant-org-btn">
                            <i class="fa-solid fa-users mx-2 me-md-2 fs-md-5"></i>Influencer/Participant
                        </div>
                    </div>
                    <i class="fa-solid fa-arrow-right text-clr arrow-2"></i>
                    <div>
                        <div class="py-2 px-2 px-md-2 text-clr" id="code-verification-btn">
                            <i class="fa-solid fa-circle-check mx-2 me-md-2 fs-md-5"></i>Verification
                        </div>
                    </div>
                </div>

                {{-- Basic Details --}}
                <div class="row justify-content-center pt-2" id="participant-details-inputs">
                    <div class="d-md-none d-flex flex-wrap justify-content-center align-items-center gap-3 head-btn">
                        <div>
                            <h6 class="headBtn-style py-2 px-2 px-md-2">
                                <i class="fa-solid fa-magnifying-glass fa-rotate-90 mx-2 me-md-2"></i>Basic Details
                            </h6>
                        </div>
                        <i class="fa-solid fa-caret-right text-clr arrow-1"></i>
                    </div>
                    <div class="col-md-11 col-lg-12 row mx-auto">
                        <div class="col-md-6 col-xl-4 signup-input-style">
                            <label class="col-form-label" for="First_name">First Name <span class="text-danger">*</span></label>
                            <input type="text" maxlength="30" id="first_name" name="first name" class="validate-input-field form-control First_name" placeholder="First Name">
                        </div>
                        <div class="col-md-6 col-xl-4 signup-input-style">
                            <label class="col-form-label" for="Last_name">Last Name</label>
                            <input type="text" maxlength="30" name="Last_name" class="form-control Last_name" placeholder="Last Name">
                        </div>
                        <div class="col-md-6 col-xl-4 signup-input-style">
                            <label class="col-form-label" for="email">Email Address <span class="text-danger">*</span></label>
                            <input type="text" name="email" class="form-control email" id="participant-email" placeholder="Email Address">
                            <small class="participant-email-error text-danger"></small>
                        </div>
                        <div class="col-md-6 col-xl-4 signup-input-style">
                            <label class="col-form-label" for="confirm_email">Confirm Email <span class="text-danger">*</span></label>
                            <input type="text" name="confirm_email" class="form-control confirm_email" id="participant_confirm_mail" placeholder="Confirm Email">
                            <small class="participant-confirm-email-error text-danger"></small>
                        </div>
                        <div class="col-md-6 col-xl-4 signup-input-style password-container m-0">
                            <label for="password" class="password col-form-label">Password<span class="text-danger">*</span></label>
                            <div class="position-relative">
                                <input type="password" placeholder="Password" class="form-control signin-password" id="password" autocomplete="off">
                                <span id="eye-icon" class="eye eyeIcon position-absolute">
                                    <i class="fa-regular fa-eye-slash closed-eye-icon3 eye-icon"></i>
                                </span>
                                <small id="passwordError" class="text-danger"></small>
                            </div>
                        </div>

                        <div class="col-md-6 col-xl-4 signup-input-style password-container m-0">
                            <label for="confirm-password" class="password col-form-label">Confirm Password<span class="text-danger">*</span></label>
                            <div class="position-relative">
                                <input type="password" placeholder="Confirm Password" class="form-control signin-password" id="confirm-password" autocomplete="off">
                                <span id="eye-icon" class="eye eyeIcon position-absolute">
                                    <i class="fa-regular fa-eye-slash closed-eye-icon3 eye-icon"></i>
                                </span>
                                <small id="confirmPasswordError" class="text-danger"></small>
                            </div>
                        </div>
                        <div class="col-md-6 col-xl-4 signup-input-style">
                            <label class="col-form-label" for="user_name">Username <span class="text-danger">*</span></label>
                            <input type="text" maxlength="30" name="username" class="form-control user_name" id="participant-user-name" placeholder="Username">
                            <small class="participant-user-name-error text-danger"></small>
                        </div>
                        <div class="col-md-6 col-xl-4 signup-input-style">
                            <label class="col-form-label" for="phone_number">Phone Number <span class="text-danger">*</span></label>
                            <input type="text" name="phone_number" id="phone_number" class="form-control phone_number participant-phone-number" placeholder="Phone Number">
                            <small class="participant-phone-number-error text-danger"></small>
                            <div class="d-flex mt-2">
                                <div>
                                    <input type="checkbox" class="ms-lg-2 recive-msg-check-box text-grey" name="recive-msg-check-box"
                                    id="recive-msg-check-box" checked>
                                </div>
                                <div class="text-grey ms-2">I agree to receive SMS/MMS to this phone number from FundMeSmart.</div>
                            </div>
                        </div>
                        <div class="col-md-10 col-lg-12 ms-1 pt-4 py-2 mb-2">
                            <a href="/register" class="btn px-3 rounded-3 me-2 previous-btn-style">Back</a>
                            <button class="btn text-white px-3 rounded-3 ms-lg-2"
                                id="participant-details-next">Next</button>
                        </div>
                    </div>
                </div>

                {{-- Participant --}}
                <div class="row justify-content-center pt-2 d-none " id="participant-org-inputs">
                    <div class="d-md-none d-flex flex-wrap justify-content-center align-items-center gap-3 head-btn">
                        <div>
                            <div class="headBtn-style py-2 px-2 px-md-2" id="participant-org-btn">
                                <i class="fa-solid fa-users mx-2 me-md-2 fs-md-5"></i>Influencer/Participant
                            </div>
                        </div>
                        <i class="fa-solid fa-caret-right text-clr arrow-2"></i>
                    </div>
                    <div class="col-md-11 col-lg-12 row mx-auto">
                        <div class="col-md-6 signup-input-style">
                            <label class="col-form-label" for="org_name">Organization Name <span class="text-danger">*</span></label>
                            <select name="organization_name" class="validate-select-box p-2 rounded-2 org_name border" id="participant_orgname">
                                <option value="">Select Organization</option>
                                @foreach($organizations as $organization)
                                        <option value="{{ $organization->organization_id }}">
                                            {{ $organization->organization_name . '-' . $organization->code . (isset($organization->personal_code) ? '-' . $organization->personal_code : '') }}
                                        </option>

                                @endforeach
                            </select>
                        </div>
                        <!-- <div class="col-md-6 col-xl-4 col-xl-4 signup-input-style">
                            <label class="col-form-label" for="cause">Activity/Cause <span class="text-danger">*</span></label>
                            <input type="text" id="cause" name="cause" class="validate-input-field form-control cause" placeholder="Activity/Cause">
                        </div> -->
                        <div class="col-md-6 col-xl-4 signup-input-style d-none">
                            <label class="col-form-label" for="zip-code">Zip code <span class="text-danger">*</span></label>
                            <input type="text" id="zip-code" name="zip code" class="validate-input-field form-control zip-code" maxlength="5" placeholder="Zip code">
                        </div>
                        <div class="col-md-6 signup-input-style">
                            <label class="col-form-label" for="profile-image">Profile Image </label>
                            <div class="input-group">
                                <input type="file" class="form-control file profile-image" name="profile-image"
                                    id="participant-profileImg" accept=".jpg, .jpeg, .png">
                                <button type="button" id="" class="clearImageBtn btn btn-img-clear">
                                    <i class="fa-solid fa-xmark"></i>
                                </button>
                            </div>
                            <div class="text-grey mt-2">
                                <small>(Only jpeg, jpg & png are allowed) This photo is not mandatory but can be sent with share app feature.</small>
                            </div>
                        </div>
                        <div class="col-lg-10 col-md-10 col-xl-12">
                            <input type="checkbox" class="ms-lg-3 my-3 terms-check-box text-grey" name="terms-check-box" id="terms-check-box"> <span class="text-grey fs-6">By continuing, you agree with the</span> <a href="/termsofuse" class="text-danger fw-semibold" target="_blank" rel="noopener noreferrer">terms and conditions</a>.
                        </div>
                        <div class="col-md-10 col-lg-12 ms-1 pt-4 py-2 mb-2">
                            <button class="py-2 px-3 rounded-3 me-2 my-2 previous-btn-style"
                                id="participant-previous-btn">Previous</button>
                            <button type="submit" class="py-2 px-0 px-lg-3 rounded-3 ms-lg-2 my-2" id="participant-submit">
                                Sign Up & Verify Code
                                <span id="participant-spinner" class="spinner-border spinner-border-sm d-none"
                                    role="status" aria-hidden="true"></span>
                            </button>
                        </div>
                    </div>
                </div>

                {{-- Verification --}}
                <div class="row justify-content-center pt-2 d-none" id="code-verification">
                    <!-- <div class="d-md-none d-flex flex-wrap justify-content-center align-items-center gap-3 head-btn">
                        <div>
                            <div class="bg-blue text-white py-2 px-2 px-md-2 rounded-3" id="code-verification-btn">
                                <i class="fa-solid fa-circle-check mx-2 me-md-2 fs-md-5"></i>Verification
                            </div>
                        </div>
                    </div> -->
                    <div class="col-xl-11 row mx-auto">
                        <div class="">
                            <div class="text-blue text-center pt-xl-3">
                                <h4 class="fw-bold pb-1 pt-3">Verification</h4>
                            </div>
                            <div class="p-2 p-lg-4 px-3 px-xl-5">
                                <p class="text-center px-3 px-xl-5">A verification code has been sent to the provided email address and phone number. Please use the code to verify your account.
                                </p>
                                <form action="" class="text-center">
                                    <div class="my-4">
                                        <div id="otp-inputs">
                                            <input type="text" maxlength="1" class="otp-input" id="participantOtp-1">
                                            <input type="text" maxlength="1" class="otp-input" id="participantOtp-2">
                                            <input type="text" maxlength="1" class="otp-input" id="participantOtp-3">
                                            <input type="text" maxlength="1" class="otp-input" id="participantOtp-4">
                                        </div>
                                    </div>

                                    <div class="text-center">
                                        <button class="bg-blue border p-2 px-5 rounded-3 text-white fw-bold" id="participantsignupVerifyButton">
                                            <span id="verify-text">Verify</span>
                                            <span id="verify-otp-spinner" class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
                                        </button>
                                    </div>

                                    <p class="text-center mt-4 otp-verify-countdown" id="">Didn't get the code? <span class="text-blue">Resend Code</span> in 00:00</p>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>


{{-- ======================= Image crop modal ===================== --}}
<div id="participant-cropperModal" class="modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="cropperModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="cropperModalLabel">Crop Image</h5>
                <button type="button" class="btn-close clearImageBtn crop-close-btn" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body p-0" style="max-height: 400px;">
                <img id="participant-cropperImage" style="max-width: 100%; max-height: 400px;">
            </div>
            <div class="modal-footer">
                <button id="zoomInButtonSignUp" type="button  " class="btn btn-primary btn-brown">Zoom In(+)</button>
                <button id="zoomOutButtonSignUp" type="button  " class="btn btn-primary btn-brown">Zoom out(-)</button>
                <button type="button" class="btn btn-blue" id="participant-cropButton">Submit</button>
                <button type="button" class="btn btn-secondary clearImageBtn crop-close-btn" data-bs-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="otpModal" tabindex="-1" aria-labelledby="otpModalLabel" aria-hidden="true">
    <div class="modal-dialog  modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header py-3">
                <h5 class="modal-title" id="otpModalLabel"> Verification Required</h5>
                {{-- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> --}}
            </div>
            <div class="modal-body">
                You haven't completed the verification. Do you want to verify now?
            </div>
            <div class="modal-footer py-1">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="otpModalConfirm">Yes</button>
            </div>
        </div>
    </div>
</div>
</div>
</div>
@vite(['resources/js/participant_signup.js'])
@Vite(['resources/js/validation.js'])
@Vite(['resources/js/otp_verification.js'])
@endsection