@extends("app")
@section('content')
<div class="signup-wrapper">
    <div class="p-3 px-lg-5 py-4">
        <div class="justify-content-between d-flex">
            <a  href="{{'/'}}" class="fms-logo logo-img"></a>
            <h4 class="text-blue fw-bold text-md-end">Fundraiser Sign Up <span class="text-brown fw-bold">Future of Fundraising</span></h4>
        </div>
        <p class="text-center admin-font text-blue fw-bold px-4 py-3 py-lg-0">
            Register as a Super Admin
        </p>
        <form action="" class="pt-5">
            <div class="d-flex 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">
                        <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-caret-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>Participant
                    </div>
                </div>
                <i class="fa-solid fa-caret-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>
            </div>

            {{-- Basic Details --}}
            <div class="row justify-content-center pt-5" id="superadmin-details-inputs">
                <div class="col-xl-8 row justify-content-center">

                    <div class="col-md-5 col-xl-6 signup-input-style">
                        <label class="col-form-label" for="organization_name">Organization Name <span class="text-danger">*</span></label>
                        <input type="text" name="organization name" id="organization_name" class="form-control organization_name validate-input-field" placeholder="Organization Name">
                    </div>
                    <div class="col-md-5 col-xl-6 signup-input-style">
                        <label class="col-form-label" for="contact_name">Contact Name <span class="text-danger">*</span></label>
                        <input type="text" name="contact name" id="contact_name" class="form-control contact_name validate-input-field" placeholder="Contact Name">
                    </div>
                    <div class="col-md-5 col-xl-6 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 superadmin_phone_number" id="superadmin_phone_number" placeholder="Phone Number">
                        <small class="superadmin-number-error text-danger"></small>
                    </div>
                    <div class="col-md-5 col-xl-6 signup-input-style">
                        <label class="col-form-label" for="title">Title <span class="text-danger">*</span></label>
                        <input type="text" name="title" id="title" class="form-control validate-input-field" placeholder="Administrator/Coach">
                    </div>
                    <div class="col-md-5 col-xl-6 signup-input-style">
                        <label class="col-form-label" for="email">Email Address <span class="text-danger">*</span></label>
                        <input type="text" name="email" id="superadmin-email" class="form-control email" placeholder="Email Address">
                        <small class="superadmin-email-error text-danger"></small>
                    </div>
                    <div class="col-md-5 col-xl-6 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="superadmin_confirm_mail" placeholder="Confirm Email">
                        <small class="superadmin-confirm-email-error text-danger"></small>
                    </div>
                    <div class="col-md-5 col-xl-6 signup-input-style">
                        <label class="col-form-label" for="user_name">Username <span class="text-danger">*</span></label>
                        <input type="text" name="username" class="form-control user_name" id="superadmin-user-name" placeholder="Username">
                        <small class="superadmin-user-name-error text-danger"></small>
                    </div>
                    <div class="col-md-5 col-xl-6 signup-input-style">
                        <label class="col-form-label" for="cause">Activity/Cause <span class="text-danger">*</span></label>
                        <input type="text" name="cause" id="cause" class="form-control cause validate-input-field" placeholder="Activity/Cause">
                    </div>

                    <div class="col-md-10 col-lg-11 ps-lg-5 ms-lg-5 ps-xl-0 ms-xl-0 pt-4">
                        <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="superadmin-details-next">Next</button>
                    </div>
                </div>
            </div>

            {{-- Participant --}}
            <div class="row justify-content-center pt-5 d-none" id="superadmin-participant-inputs">
                <div class="col-xl-8 row justify-content-center">

                    <div class="col-md-5 col-xl-6 gap- signup-input-style">
                        <label class="col-form-label" for="participant_count">How Many Participants <span class="text-danger">*</span></label>
                        <input type="text" maxlength="6" name="participant count" id="participant_count" class="form-control participant_count validate-input-field" placeholder="Number of Participants">
                    </div>
                    <div class="col-md-5 col-xl-6 signup-input-style">
                        <label class="col-form-label" for="app_per_participant">App Per Participant <span class="text-danger">*</span></label>
                        <input type="text" maxlength="6" name="app per participant" id="app_per" class="form-control app validate-input-field" placeholder="Min. of 10 apps">
                    </div>
                    <div class="col-md-5 col-xl-6 signup-input-style">
                        <label class="col-form-label" for="sales_goal">App Sales Goal <span class="text-danger">*</span></label>
                        <input type="text" disabled name="sales_goal" class="form-control sales_goal" placeholder="App Sales Goal" readonly>
                    </div>
                    <div class="col-md-5 col-xl-6 signup-input-style">
                        <label class="col-form-label" for="app_price">App Price <span class="text-danger">*</span></label>
                        <input type="text" disabled name="app_price" class="form-control app_price" placeholder="App Price" value="39.99" readonly>
                    </div>

                    <div class="col-md-10 col-lg-11 ps-lg-5 ms-lg-5 ps-xl-0 ms-xl-0 pt-4 py-2">
                        <button class="py-2 px-3 rounded-3 me-2 my-2 previous-btn-style" id="superadmin-participant-previous">Previous</button>
                        <button class="text-white border-0 py-2 px-3 rounded-3 ms-lg-2 my-2" id="superadmin-participant-next">Next</button>
                    </div>
                </div>
            </div>

            {{-- Address --}}
            <div class="row justify-content-center pt-5 d-none" id="superadmin-address-inputs">
                <div class="col-xl-8 row justify-content-center">

                    <div class="col-md-5 col-xl-6 signup-input-style">
                        <label class="col-form-label" for="state">State <span class="text-danger">*</span></label>
                        <select class="validate-select-box super-admin-select rounded-2 p-4 state form-controler"  name="state" id="super-admin-state_id"  >
                            <option value="" selected> Select Option</option>
                            @foreach ($states as $state)
                                <option value="{{ $state->code }}">{{ $state->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-5 col-xl-6 signup-input-style">
                        <label class="col-form-label" for="city">City <span class="text-danger">*</span></label>
                        <select class="validate-select-box super-admin-select rounded-2 p-4 city form-controler" name="city" id="super_admin_city_id">
                            <option value="" selected>Select City</option>
                        </select>
                    </div>
                    <div class="col-md-5 col-xl-6 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">
                    </div>
                    <div class="col-md-5 col-xl-6 signup-input-style">
                        <label class="col-form-label" for="image">Organization Image </label>
                        <div class="input-group">
                            <input type="file" class="form-control file" id="superadmin-organization-file" name="image" accept=".jpg, .jpeg, .png">
                        </div>
                    </div>
                    <div class="col-md-5 col-xl-6 signup-input-style">
                        <label class="col-form-label" for="link">Facebook/Website Link </label>
                        <input type="text" name="link" class="rounded-2 p-2 link" placeholder="https://example.com">
                    </div>
                    <div class="col-lg-10 col-md-10 col-xl-12">
                        <input type="checkbox" class="ms-lg-4 my-3 terms-check-box" 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" target="_blank" rel="noopener noreferrer">terms and conditions</a>.
                    </div>
                    <div class="col-md-10 col-lg-11 ps-lg-5 ms-lg-5 ps-xl-0 ms-xl-0 pt-4 py-2">
                        <button class="py-2 px-3 rounded-3 me-2 my-2 previous-btn-style" id="superadmin-address-previous">Previous</button>
                        <button type="submit" class="py-2 px-3 rounded-3 ms-lg-2 my-2" id="superadmin-submit">
                            Sign Up
                            <span id="superadmin-spinner" class="spinner-border spinner-border-sm d-none">
                        </button>
                    </div>
                </div>
            </div>

        </form>
    </div>
    {{-- ========image-crop-model================ --}}
    <div id="superadmin-cropperModal"  class="modal" 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 crop-close-btn" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-0">
                    <img id="superadmin-cropperImage" style="max-width: 100%;">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-blue" id="cropButton">Submit</button>
                    <button type="button" class="btn btn-secondary superadmin-crop-close-btn" data-bs-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
    </div>
</div>
@Vite(['resources/js/super_admin_signup.js'])
@Vite(['resources/js/validation.js'])
@endsection