@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="individual-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="individual-img-disabled" class="active-image">
                    <img src="{{ Vite::asset('resources/images/participant_enabled.webp') }}" alt="img" id="individual-img-enabled" class="active-image d-none">
                    <p class="head mb-1">Individual</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 to Raise Funds Individually</span></h4>
            </div>
            <!-- <p class="text-center admin-font text-blue fw-bold p-2 p-lg-4">
                Register to Raise Funds Individually
            </p> -->
            <form action="" class="sign-up-form mt-3 mt-xl-5">
                <div class="d-none d-md-flex justify-content-center flex-wrap 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="individual-org-btn">
                            <i class="fa-solid fa-users mx-2 me-md-2 fs-md-5"></i>Individual
                        </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="individual-details-inputs">
                    <div class="d-flex d-md-none justify-content-center flex-wrap 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 my-0" id="individual-email" placeholder="Email Address">
                            <small class="text-danger individual-email-error my-0 py-0"></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="individual_confirm_mail" placeholder="Confirm Email">
                            <small class="text-danger individual-confirm-email-error my-0 py-0"></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="individual-user-name" placeholder="Username">
                            <small class="text-danger individual-user-name-error"></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" class="form-control phone_number" id="individual-number" placeholder="Phone Number">
                            <small class="individual-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-6 col-xl-4 signup-input-style">
                            <label class="col-form-label" for="organization_name">Organization Name</label>
                            <input type="text" maxlength="40" id="organization_name" name="organization name" class="form-control organization_name" placeholder="Organization Name">
                        </div>
                        {{-- <div class="col-md-6 col-xl-4 signup-input-style">
                            <label class="col-form-label" for="cause">Activity/Cause <span class="text-danger">*</span></label>
                            <input type="text" maxlength="30" 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">
                                <label class="col-form-label">Are you registered as a non-profit 501 (C)(3)?
                                    <span class="text-danger">*</span></label>
                                <div class="mb-2">
                                    <input type="radio" name="select_501" id="registerYes" value="yes"
                                        class="form-check-input">
                                    <label class="form-check-label" for="registerYes">Yes</label>

                                    <input type="radio" name="select_501" id="registerNo" value="no"
                                        class="form-check-input ms-3">
                                    <label class="form-check-label" for="registerNo">No</label>
                                </div>
                            </div>
                            <div class="col-md-6 col-xl-4 signup-input-style" id="registerFormNumber"
                                style="display: none;">
                                <label class="col-form-label">EIN No <span class="text-danger">*</span></label>
                                <input type="text"maxlength="30" id="form_number" name="Number"
                                    class="validate-input-field form-control formNumber" placeholder="00-0000000">
                            </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="individual-details-next">Next</button>
                        </div>
                    </div>
                </div>

                {{-- Individual --}}
                <div class="row justify-content-center pt-2 d-none" id="individual-org-inputs">
                    <div class="d-flex d-md-none justify-content-center flex-wrap align-items-center gap-3 head-btn">
                        <div>
                            <h6 class="headBtn-style py-2 px-2 px-md-2" id="individual-org-btn">
                                <i class="fa-solid fa-users mx-2 me-md-2"></i>Individual
                            </h6>
                        </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 col-xl-4 signup-input-style">
                            <label class="col-form-label" for="sales-target">App Sales Target <span class="text-danger">*</span></label>
                            <input type="text" maxlength="6" name="app sales target" class="validate-input-field form-control sales-target" placeholder="App Sales Target">
                        </div>
                        <div class="col-md-6 col-xl-4 signup-input-style">
                            <label class="col-form-label" for="app_price">App Price (Yearly) <span
                                    class="text-danger">*</span></label>
                            <select class="select-app-price app_price rounded-2 p-4 form-controler"
                                id="sponsorPlanId" name="app price" style="padding:9rem 0 9rem 0">
                                <option value="" selected>Select Price</option>
                                @foreach ($appPrices as $price)
                                    @if ($price->name == 'Annually')
                                        @php
                                            $amount = (float) str_replace('$', '', $price->amount);
                                            $fundraiseTakenAmount = (float) str_replace('$', '', $price->fundraise_taken_amount ?? '0');
                                        @endphp
                                        <option value="{{ $price->plan_id }}">
                                            ${{ number_format($amount, 2) }} (you will get ${{ number_format($amount - $fundraiseTakenAmount, 2) }})
                                        </option>
                                    @endif
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6 col-xl-4 signup-input-style">
                            <label class="col-form-label" for="title">Title </label>
                            <input type="text" maxlength="30" id="title" name="title" class="form-control" placeholder=" Campaign Manager/Administrator/Coach">
                        </div>
                        <div class="col-md-6 col-xl-4 signup-input-style">
                            <label class="col-form-label" for="state">State <span class="text-danger">*</span></label>
                            <select class="validate-select-box individual-select-state rounded-2 p-4 state form-controler" name="state" id="individual-state-id" style="padding:9rem 0 9rem 0">
                                <option value="" selected> Select State</option>
                                @foreach ($state as $state)
                                <option value="{{ $state->id }}">{{ $state->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6 col-xl-4 signup-input-style">
                            <label class="col-form-label" for="city">City <span class="text-danger">*</span></label>
                            <select class="validate-select-box individual-select-city rounded-2 p-4 city form-controler" name="city" id="individual-city-id" style="padding:9rem 0 9rem 0">
                                <option value="" selected>Select City</option>
                            </select>
                        </div>
                        <div class="col-md-6 col-xl-4 signup-input-style">
                            <label class="col-form-label" for="address">Address <span class="text-danger">*</span></label>
                            <input type="text" id="address" name="address" class="validate-input-field form-control address" placeholder="Enter your address">
                            <small class="text-danger individual-adress-error my-0 py-0"></small>
                        </div>
                        {{-- <div class="col-md-6 col-xl-4 signup-input-style">
                            <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 col-xl-4 signup-input-style">
                            <label class="col-form-label" for="link">Facebook/Website Link</label>
                            <input type="url" name="link" class="rounded-2 p-2 link"
                                placeholder="https://example.com">

                            <span class="text-grey my-2">A Facebook or website link is placed under your image on the
                                profile so people can stay connected with it while using the app.</span>
                        </div>
                        <div class="col-md-6 col-xl-4 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" accept=".jpg, .jpeg, .png">
                                <button type="button" 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-2 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" target="_blank" class="text-danger fw-semibold" 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="individual-previous-btn">Previous</button>
                            <button type="submit" class="py-2 px-0 px-lg-3 rounded-3 ms-lg-2 my-2"
                                id="individual-submit">
                                Sign Up & Verify Code
                                <span id="individual-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-flex d-md-none justify-content-center flex-wrap 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="individualOtp-1">
                                            <input type="text" maxlength="1" class="otp-input" id="individualOtp-2">
                                            <input type="text" maxlength="1" class="otp-input" id="individualOtp-3">
                                            <input type="text" maxlength="1" class="otp-input" id="individualOtp-4">
                                        </div>
                                    </div>
                                    <div class="text-center">
                                        <button class="bg-blue border p-2 px-5 rounded-3 text-white fw-bold" id="individualsignupVerifyButton">
                                            <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">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="individual-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="individual-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="individual-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/individual.js'])
@vite(['resources/js/validation.js'])
@Vite(['resources/js/otp_verification.js'])
@endsection