@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 loading="auto|eager|lazy" 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 loading="auto|eager|lazy" src="{{ Vite::asset('resources/images/participant_disabled.webp') }}" alt="img" id="participant-img-disabled" class="active-image">
                    <img loading="auto|eager|lazy" 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="address-tab">
                    <div class="text-center mb-2">
                        <div class="step-line"></div>
                    </div>
                    <img loading="auto|eager|lazy" src="{{ Vite::asset('resources/images/address_disabled.webp') }}" alt="img" class="active-image" id="address-img-disabled">
                    <img loading="auto|eager|lazy" src="{{ Vite::asset('resources/images/address_enabled.webp') }}" alt="img" class="active-image d-none" id="address-img-enabled">
                    <p class="head mb-1">Address</p>
                </div>
                <div class="text-center" id="verify-tab">
                    <div class="text-center mb-2">
                        <div class="step-line"></div>
                    </div>
                    <img loading="auto|eager|lazy" src="{{ Vite::asset('resources/images/verify_disabled.webp') }}" alt="img" class="active-image" id="verify-img-disabled">
                    <img loading="auto|eager|lazy" 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 4 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">Fundraiser Sign Up <span class="text-brown fw-bold">Future of Fundraising</span></h4> -->
                <h4 class="text-blue fw-bold text-md-end my-3 my-md-0">Register as a Campaign Manager / Admin</h4>
            </div>
            <!-- <p class="text-center admin-font text-blue fw-bold p-2 p-md-4 ">
                Register as an Admin
            </p> -->

            <form action="" class="sign-up-form pt-md-4 pt-xl-5">
                <div class="d-md-flex d-none flex-wrap justify-content-center align-items-center gap-3 head-btn">
                    <div id="basicDetails-btn">
                        <div class="headBtn-style py-2 px-2 px-md-2 rounded-3">
                            <i class="fa-solid fa-magnifying-glass fa-rotate-90 mx-2 me-md-2 fs-md-5"></i><span class="">Basic Details</span>
                        </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-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="address-btn">
                            <i class="bi bi-geo-alt-fill mx-2 me-md-2 fs-md-5"></i>Address
                        </div>
                    </div>
                    <i class="fa-solid fa-arrow-right text-clr arrow-3"></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="basicDetails-inputs">
                    <div class="d-md-none d-flex flex-wrap justify-content-center align-items-center gap-3 head-btn">
                        <div id="basicDetails-btn">
                            <div class="py-2 px-2 px-md-2">
                                <h6 class="headBtn-style"><i class="fa-solid fa-magnifying-glass fa-rotate-90 mx-2 me-md-2"></i>Basic Details</h6>
                            </div>
                        </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="organization_name">Organization Name <span
                                    class="text-danger">*</span></label>
                            <input type="text" maxlength="40" id="organization_name" name="organization name"
                                class="validate-input-field 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="contact_name">Contact Name <span
                                    class="text-danger">*</span></label>
                            <input type="text" maxlength="30" id="contact_name" name="contact name"
                                class="validate-input-field form-control contact_name" placeholder="Contact Name">
                        </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="admin_phone_number" placeholder="Phone Number">
                            <small class="admin-number-error text-danger pt-1"></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="title">Title <span class="text-danger">*</span></label>
                            <input type="text" maxlength="30" id="title" name="title"
                                class="validate-input-field form-control" id="title" placeholder=" Campaign Manager/Administrator/Coach">
                        </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="admin-email"
                                placeholder="Email Address">
                            <small class="admin-email-error text-danger pt-1"></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="admin_confirm_mail" placeholder="Confirm Email">
                            <small class="admin-confirm-email-error text-danger pt-1"></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="admin-user-name" placeholder="Username">
                            <small class="admin-user-name-error text-danger pt-1"></small>
                        </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">Were you contacted by a salesperson ?
                                <span class="text-danger">*</span></label>
                            <div class="mb-2">
                                <input type="radio" name="select_salesperson" id="selectYes" value="yes" class="form-check-input">
                                <label class="form-check-label" for="selectYes">Yes</label>

                                <input type="radio" name="select_salesperson" id="selectNo" value="no" class="form-check-input ms-3">
                                <label class="form-check-label" for="selectNo">No</label>
                            </div>
                        </div>
                        <div class="col-md-6 col-xl-4 signup-input-style" id="salespersonInput" style="display: none;">
                            <label class="col-form-label">Please select the salesperson <span class="text-danger">*</span></label>
                            <select class="validate-select-box admin-select-salesperson rounded-2 p-4 salesperson form-controler"
                                name="salesperson" id="salesperson_id">
                                <option value="" selected> Select Salesperson</option>
                                @foreach ($salespersons as $salesperson)
                                <option value="{{ $salesperson->id }}">{{ $salesperson->username}}</option>
                                @endforeach
                            </select>
                        </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 pt-4 py-2 mb-2 mt-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="basicDetails-next-btn">Next</button>
                        </div>
                    </div>
                </div>

                {{-- Participant --}}
                <div class="row justify-content-center pt-2 d-none" id="participant-inputs">
                    <div class="d-md-none d-flex flex-wrap justify-content-center align-items-center gap-3 head-btn">
                        <div>
                            <div class="py-2 px-2 px-md-2" >
                                <h6 class="headBtn-style" id="participant-btn">
                                    <i class="fa-solid fa-users mx-2 me-md-2 fs-md-5"></i> Influencer/Participant
                                </h6>
                            </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 col-xl-4 signup-input-style">
                            <label class="col-form-label" for="participant count">How Many  Influencer/Participant  <span
                                    class="text-danger">*</span></label>
                            <input type="text" maxlength="6" id="participant_count" name="Influencer/Participant count"
                                class="validate-input-field form-control participant_count"
                                placeholder="Number of Influencers/Participants">
                        </div>
                        <div class="col-md-6 col-xl-4 signup-input-style">
                            <label class="col-form-label" for="app">App Per  Influencer/Participant  <span
                                    class="text-danger">*</span></label>
                            <input type="text" maxlength="6" id="app_per" name="app per Influencer/Participant"
                                class="validate-input-field form-control app" placeholder="Min. of 10 apps">
                        </div>
                        <div class="col-md-6 col-xl-4 signup-input-style">
                            <label class="col-form-label" for="sales_goal">App Sales Goal <span
                                    class="text-danger">*</span></label>
                            <input type="text" name="sales goal" class="form-control sales_goal" disabled
                                placeholder="App Sales Goal" readonly>
                        </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="admin-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-12 ms-2 pt-4 py-2">
                            <button class="py-2 px-3 rounded-3 my-2 previous-btn-style"
                                id="participant-previous-btn">Previous</button>
                            <button class="text-white border-0 py-2 px-3 rounded-3 ms-lg-2 my-2"
                                id="participant-next-btn">Next</button>
                        </div>
                    </div>
                </div>

                {{-- Address --}}
                <div class="row justify-content-center pt-2 d-none" id="address-inputs">
                    <div class="d-md-none d-flex flex-wrap justify-content-center align-items-center gap-3 head-btn">
                        <div>
                            <div class="py-2 px-2 px-md-2" >
                                <h6 class="headBtn-style" id="address-btn">
                                    <i class="bi bi-geo-alt-fill mx-2 me-md-2"></i>Address
                                </h6>
                            </div>
                        </div>
                        <i class="fa-solid fa-caret-right text-clr arrow-3"></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="state">State <span class="text-danger">*</span></label>
                            <select class="validate-select-box admin-select-state rounded-2 p-4 state form-controler"
                                name="state" id="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 admin-select-city rounded-2 p-4 city form-controler"
                                name="city" id="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 signup-input-style">
                            <label class="col-form-label" for="image">Organization Logo/Image</label>
                            <div class="input-group">
                                <input type="file" class="form-control file" id="admin-organization-file"
                                    name="image" 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>
                            <!-- <span class="text-grey my-2">The organization’s image goes on the sidebar to brand your program within the app.</span> -->
                        </div>
                        <div class="col-md-6 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"></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-12 pt-4 py-2 mb-5">
                            <button class="py-2 px-3 rounded-3 me-2 my-2 previous-btn-style"
                                id="address-previous-btn">Previous</button>
                            <button type="submit" class="py-2 px-0 px-lg-1 rounded-3 ms-lg-2 my-2"
                                id="admin-submit">Sign Up & Verify Code
                            <span class="spinner-border spinner-border-sm d-none admin-signup-spinner"></span></button>
                        </div>
                    </div>
                </div>

                {{-- Verification --}}
                <div class="row justify-content-center align-items-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 class="py-2 px-2 px-md-2" >
                            <h6 class="headBtn-style" id="code-verification-btn">
                            <i class="fa-solid fa-circle-check mx-2 me-md-2"></i>Verification
                            </h6>
                        </div>
                    </div> -->
                    <div class="col-xl-11 row mx-auto">
                        <div class="col-12">
                            <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="otp-1">
                                            <input type="text" maxlength="1" class="otp-input" id="otp-2">
                                            <input type="text" maxlength="1" class="otp-input" id="otp-3">
                                            <input type="text" maxlength="1" class="otp-input" id="otp-4">
                                        </div>
                                    </div>
                                    <div class="text-center">
                                        <button class="bg-blue border p-2 px-5 rounded-3 text-white fw-bold" id="adminsignupVerifyButton">
                                            <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 resendLink">Resend
                                            Code</span> in 00:00</p>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
{{-- ==============  image crop model ================ --}}

<div id="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" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-0" style="max-height: 400px;">
                <img id="cropperImage" style="max-width: 100%; max-height: 400px;">
            </div>
            <div class="modal-footer">
                <button id="zoomInButton" type="button  " class="btn btn-primary btn-brown">Zoom In(+)</button>
                <button id="zoomOutButton" type="button  " class="btn btn-primary btn-brown">Zoom out(-)</button>
                <button type="button" class="btn btn-blue" id="cropButton">Submit</button>
                <button type="button" class="btn btn-secondary clearImageBtn" 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>
@Vite(['resources/js/admin_signup.js'])
@Vite(['resources/js/validation.js'])
@Vite(['resources/js/otp_verification.js'])
@endsection