@extends('app')
@section('content')
    @include('layout.header')
    @include('components.loader')
    <div class="container-fluid individual-container page-container p-0">
        {{-- =================================== main content =================================== --}}
        <main class="inner-main container-fluid">
            <div class="pb-4 px-lg-5 pt-2 pt-lg-4 mx-2 mx-lg-3">
                <div class="d-flex flex-column flex-sm-row justify-content-end justify-content-lg-end gap-2 mb-3">
                    <div class="d-flex flex-column flex-lg-row justify-content-center justify-content-lg-end gap-2">

                        <button type="button" class="btn btn-blue px-4 mb-2 mb-lg-0" data-bs-toggle="modal"
                            data-bs-target="#individual-profile">
                            <i class="fa-regular fa-user me-2"></i> Profile
                        </button>
                         <button type="button" class="btn btn-blue px-4 mb-2 mb-lg-0" data-bs-toggle="modal"
                            data-bs-target="#sharePop-up">
                            <i class="fa-solid fa-square-share-nodes me-2"></i> Share App
                        </button>
                    </div>
                    <div class="d-flex flex-column flex-lg-row justify-content-center justify-content-lg-end gap-2">

                        <button type="button" class="btn btn-blue px-4 mb-2 mb-lg-0" data-bs-toggle="modal"
                            data-bs-target="#contact-your-registered-Popup">
                            <i class="fa-regular fa-address-book me-2"></i> Contact Your Registered Supporters
                        </button>
                          <a href="{{ '/individual-withdraw-fund' }}" class="btn btn-blue px-4 mb-2 mb-lg-0">
                            <img src="{{ Vite::asset('resources/images/withdraw_fund.webp') }}" alt="image" class="me-2">
                            Withdraw
                            Funds
                        </a>
                    </div>
                </div>
                <div class="">
                    <div class="data-count bg-white">
                        <div class="d-sm-flex align-items-center py-2 text-center text-sm-start">
                            @if ($authUser->role_id == 1 || $authUser->role_id == 2)
                                @php
                                    $imagePath = 'organization_image/' . $organization->image;
                                    $imageUrl = null;
                                    if (Storage::exists('public/' . $imagePath) && $organization->image) {
                                        $imageUrl = asset('storage/' . $imagePath);
                                    } else {
                                        $imageUrl = Vite::asset('resources/images/profile_img.webp');
                                    }
                                @endphp
                                <img src="{{ $imageUrl }}" alt="Organization image"
                                    class="organization-image img-fluid">
                            @elseif ($authUser->role_id == 3 || $authUser->role_id == 4)
                                @php
                                    $imagePath = 'profile_image/' . $authUser->profile_image;
                                    $imageUrl = null;
                                    if (Storage::exists('public/' . $imagePath) && $authUser->profile_image) {
                                        $imageUrl = asset('storage/' . $imagePath);
                                    } else {
                                        $imageUrl = Vite::asset('resources/images/profile_img.webp');
                                    }
                                @endphp
                                <img src="{{ $imageUrl }}" alt="Profile image" class="organization-image img-fluid">
                            @endif
                            <div
                                class="organization-info d-sm-flex justify-content-center py-2 py-md-0 fs-5 align-items-center ps-3 text-center text-sm-start">
                                <span class="organization-name fw-bold text-blue text-wrap">
                                {{ $organization->name ? $organization->name . '-' : $authUser->first_name . ' ' . $authUser->last_name.'-' }}
                                </span>
                                {{-- <span class="cause fw-bold text-blue">{{ $authUser->cause }}</span>
                                <span class="px-2 fw-bold text-blue">-</span> --}}
                                <span
                                    class="cause fw-bold text-brown">{{ $organization->code . '-' . $authUser->personal_code }}</span>
                            </div>
                        </div>
                        <p class="fw-semibold welcome-text mb-2 pt-2">Welcome,
                            {{ $authUser->first_name }}@if($authUser->last_name) {{ ' ' . $authUser->last_name }}@endif!</p>
                        <div class="row">
                            <div class="col-xxl-8 col-12 ps-lg-0">
                                <div class="row mx-lg-2">
                                    <div class="icon-data-card ps-lg-1 col-12 col-lg-4">
                                        <div class="d-flex align-items-center admin-card sales-target px-3 rounded-4">
                                            <p class="pt-3">
                                                <img src="{{ Vite::asset('resources/images/app_sales_goals.webp') }}"
                                                    alt="image" class="dashboard-icons img-fluid">
                                            </p>
                                            <div class="ms-3 body">
                                                <p class="fw-semibold mb-2 fs-6">
                                                    {{ $authUser->app_sales_target ?? 0 }}</p>
                                                <p class="mb-0">Sales Target</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="icon-data-card ps-lg-1 col-12 col-lg-8">
                                        <div class="rounded-5">
                                            <div class="head text-center" style="background-color: #ff947a;">
                                                Total Apps Sold - {{ ($appsSold ?? 0) + ($giftedApp ?? 0) }}
                                            </div>
                                            <div class="body d-sm-flex justify-content-between align-items-center"
                                                style="background-color: #fff4de;">
                                                <div class="text-center d-none d-sm-block">
                                                    <img src="{{ Vite::asset('resources/images/app_sold.webp') }}"
                                                        alt="image" class="dashboard-icons">
                                                </div>
                                                <div class="p-2 text-center">
                                                    Apps Bought - <span class="fw-semibold">{{ $appsSold ?? 0 }}</span>
                                                </div>
                                                <div class="divider text-center d-none d-sm-block"></div>
                                                <div class="p-2 text-center">
                                                    Apps Gifted - <span class="fw-semibold">{{ $giftedApp ?? 0 }}</span>
                                                </div>
                                                <div class="text-center d-none d-sm-block">
                                                    <img src="{{ Vite::asset('resources/images/app_sold.webp') }}"
                                                        alt="image" class="dashboard-icons">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="icon-data-card ps-lg-1 col-12">
                                        <div class="rounded-5">
                                            <div class="head text-center" style="background-color: #7ab9bc;">
                                                Total Sales -
                                                ${{ number_format(($payItForward ?? 0) + ($kickItBack ?? 0) + ($totalSales ?? 0), 2, '.', ',') ?: '0.00' }}
                                            </div>
                                            <div class="body d-sm-flex justify-content-between align-items-center"
                                                style="background-color: #d7f7f9;">
                                                <div class="text-center d-none d-sm-block">
                                                    <img src="{{ Vite::asset('resources/images/total_sales_amount.webp') }}"
                                                        alt="image" class="dashboard-icons">
                                                </div>
                                                <div class="p-2 text-center">
                                                    App Sales Amount - <span
                                                        class="fw-semibold">${{ number_format($totalSales, 2, '.', ',') }}</span>
                                                </div>
                                                <div class="divider text-center d-none d-sm-block"></div>
                                                <div class="p-2 text-center">
                                                    Pay it Forward™ - <span
                                                        class="fw-semibold">${{ number_format($payItForward ?? 0, 2, '.', ',') }}</span>
                                                </div>
                                                <div class="divider text-center d-none d-sm-block"></div>
                                                <div class="p-2 text-center">
                                                    Kick it Back™ - <span
                                                        class="fw-semibold">${{ number_format($kickItBack ?? 0, 2, '.', ',') }}</span>
                                                </div>
                                                <div class="text-center d-none d-sm-block">
                                                    <img src="{{ Vite::asset('resources/images/total_sales_amount.webp') }}"
                                                        alt="image" class="dashboard-icons">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="icon-data-card ps-lg-1 col-12 col-lg-8">
                                        <div class="rounded-5">
                                            <div class="head text-center" style="background-color: #675afa;">
                                                App Sales Amount - <span id="total-subscription"></span>
                                            </div>
                                            <div class="body d-sm-flex justify-content-between align-items-center"
                                                style="background-color: #e6e2ff;">
                                                <div class="text-center d-none d-sm-block">
                                                    <img src="{{ Vite::asset('resources/images/subscription.webp') }}"
                                                        alt="image" class="dashboard-icons">
                                                </div>
                                                <div class="p-2 text-center">
                                                    Yearly Subscription - <span class="fw-semibold"
                                                        id="yearly-subscription"></span>
                                                </div>
                                                <!-- <div class="divider text-center d-none d-sm-block"></div>
                                                    <div class="p-2 text-center">
                                                        Monthly Subscription - <span class="fw-semibold"
                                                            id="monthly-subscription"></span>
                                                    </div> -->
                                                <div class="text-center d-none d-sm-block">
                                                    <img src="{{ Vite::asset('resources/images/subscription.webp') }}"
                                                        alt="image" class="dashboard-icons">
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="icon-data-card col-12 col-lg-4">
                                        <div class="d-flex align-items-center admin-card available-balance px-3 rounded-4">
                                            <p class="pt-3">
                                                <img src="{{ Vite::asset('resources/images/wallet_balance.webp') }}"
                                                    alt="image" class="dashboard-icons img-fluid">
                                            </p>
                                            <div class="ms-3 body">
                                                <p class="fw-semibold mb-2 fs-6 text-wrap text-break">
                                                    ${{ number_format($availableWalletBalance ?? 0, 2, '.', ',') ?: '0.00' }}
                                                </p>
                                                <p class="mb-0">Available Wallet Balance</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12 col-md-5">
                                        <div
                                            class="progress-graph btn-blue flex-sm-row flex-column rounded-3 d-flex justify-content-evenly align-items-center ms-lg-3 mt-3 py-2">
                                            <!-- <div class="col-12">
                                                        <div class="row pt-4">
                                                            <div class="col-12 col-md-6 btn-blue rounded-3 d-flex justify-content-evenly align-items-center"> -->
                                            <div class="">Progress Bar</div>
                                            <div
                                                class="participant-progress-bar d-flex justify-content-evenly align-items-center">
                                                <div class="outer"
                                                    data-progress="{{ ($appsSold ?? 0) + ($giftedApp ?? 0) }}"
                                                    data-sales-target='{{ $authUser->app_sales_target ?? 0 }}'>
                                                    <div class="inner d-flex justify-content-evenly align-items-center">
                                                        {{ $progressBar ?? 0 }}%</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-7">
                                        <div class="rounded-3 border border-2 mt-3 pb-4 pt-2 me-lg-2">
                                            <h4 class="text-center ps-md-4">Total Apps Sold & Gifted
                                            </h4>
                                            <div class="d-sm-flex justify-content-lg-between align-items-center">
                                                @if ($appsSold == 0 && $giftedApp == 0)
                                                    <div class="chart-labels ps-4 ">
                                                        <span style="color: hsl(0, 0%, 50%);"
                                                            class="mt-4 fs-2 individual-total-app-dot d-flex align-items-center text-uppercase cursor-pointer"
                                                            data-index="0">● <span class="text-dark ms-2 mt-1">No
                                                                Subscription</span></span>
                                                    </div>
                                                @else
                                                    <div class="chart-labels ps-4">
                                                        <span style="color: hsl(251.54deg 74.29% 58.82%);"
                                                            class="fs-2 individual-total-app-dot d-flex align-items-center cursor-pointer"
                                                            data-index="0">● <span class="text-dark">Yearly
                                                                Subscriptions</span></span>
                                                    </div>
                                                    <!-- <div class="chart-labels ps-4">
                                                            <span style="color: hsl(15deg 100% 67.84%);"
                                                                class="mt-4 fs-2 individual-total-app-dot d-flex align-items-center cursor-pointer"
                                                                data-index="0">● <span class="text-dark">Monthly
                                                                    Subscriptions</span></span>
                                                            <span style="color: hsl(251.54deg 74.29% 58.82%);"
                                                                class="mt-4 fs-2 individual-total-app-dot d-flex align-items-center cursor-pointer"
                                                                data-index="1">● <span class="text-dark">Yearly
                                                                    Subscriptions</span></span>
                                                        </div> -->
                                                @endif

                                                <div class="d-flex justify-content-center align-items-center me-xl-3 me-xxl-0"
                                                    id="chart-container">
                                                    <canvas id="individualMyChart"></canvas>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xxl-4">
                                <div class="rounded-3 border border-2 mt-2  total-earning-progress">
                                    <h4 class="text-center pt-4 pt-xl-5 pb-4">Total Earnings</h4>
                                    <div class="d-flex justify-content-center ">
                                        <canvas id="individual-earningsChart"></canvas>
                                    </div>
                                    <div class="px-3 my-5">
                                        @if ($payItForward + $kickItBack + $totalSales == 0)
                                            <div class="d-flex align-items-center justify-content-center my-4 pt-3 pb-5 fs-2 dot cursor-pointer"
                                                style="color: #808080;" data-index="0" id="individual_dot">
                                                ● <span class="text-dark fs-6 ms-1 mt-1 text-uppercase">No
                                                    Earnings</span>
                                            </div>
                                        @else
                                            <div
                                                class="d-sm-flex justify-content-sm-between justify-content-center align-items-center  mt-3">
                                                <div class="d-flex align-items-center mt-2 fs-2 dot cursor-pointer"
                                                    style="color: #EA6F0C;" data-index="0" id="individual_dot">
                                                    ● <span class="text-dark fs-6 ms-1">Yearly Subscriptions</span>
                                                </div>
                                            </div>
                                            <div class="d-sm-flex justify-content-sm-between justify-content-center ">
                                                <div class="d-flex align-items-center mt-2 fs-2 dot cursor-pointer"
                                                    style="color: #FDCA40;" data-index="1" id="individual_dot">
                                                    ● <span class="text-dark fs-6 ms-1">Pay It Forward™</span>
                                                </div>
                                                <div class="d-flex align-items-center mt-2 fs-2 dot cursor-pointer"
                                                    style="color: #2868B3;" data-index="2" id="individual_dot">
                                                    ● <span class="text-dark me-md-3 pe-md-1 fs-6 ms-1">Kick It
                                                        Back™</span>
                                                </div>
                                            </div>

                                            <!-- <div
                                                    class="d-sm-flex justify-content-sm-between justify-content-center align-items-center mt-3 ">
                                                    <div class="d-flex align-items-center mt-2 fs-2 dot cursor-pointer"
                                                        style="color: #20B2AA;" data-index="0" id="individual_dot">
                                                        ● <span class="text-dark fs-6 ms-1">Monthly
                                                            Subscriptions</span>
                                                    </div>
                                                    <div class="d-flex align-items-center mt-2 fs-2 dot cursor-pointer"
                                                        style="color: #FDCA40;" data-index="2" id="individual_dot">
                                                        ● <span class="text-dark fs-6 ms-1">Pay It Forward</span>
                                                    </div>
                                                </div>
                                                <div
                                                    class="d-sm-flex justify-content-sm-between justify-content-center">
                                                    <div class="d-flex align-items-center mt-2 fs-2 dot cursor-pointer"
                                                        style="color: #EA6F0C;" data-index="1" id="individual_dot">
                                                        ● <span class="text-dark fs-6 ms-1">Yearly Subscriptions</span>
                                                    </div>
                                                    <div class="d-flex align-items-center mt-2 fs-2 dot cursor-pointer"
                                                        style="color: #2868B3;" data-index="3" id="individual_dot">
                                                        ● <span class="text-dark me-md-3 pe-md-1 fs-6 ms-1">Kick It
                                                            Back</span>
                                                    </div>
                                                </div> -->
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <!-- <div class="col-md-6 my-4 my-md-0">
                                    <div class="btn-value">
                                        <p class="text-white text-center mb-0 pt-2">Personal Code</p>
                                        <p class="text-white text-center mb-0">{{ $organization->code . '-' . $authUser->personal_code }}</p>
                                    </div>
                                    <div class="btn-value mt-4">
                                        <p class="text-white text-center mb-0 pt-2">Organization</p>
                                        <p class="text-white text-center mb-0">{{ $organization->name }}</p>
                                    </div>
                                    <div class="btn-value mt-4">
                                        <p class="text-white text-center mb-0 pt-2">Activity/Cause</p>
                                        <p class="text-white text-center mb-0">{{ $authUser->cause }}</p>
                                    </div>
                                </div> -->
                        </div>
                    </div>
                </div>
                <!-- ************** -->
                <div class="row mx-auto bg-white mt-3 rounded-3">
                    <div class="col-12 col-lg-6">
                        <div class="sponsers-table mt-3 px-3 rounded-4 py-3">
                            <div class="col-md-6 my-4 my-md-0 w-100">
                                <div class="btn-value">
                                    <p class="text-white text-center mb-0 pt-2">Personal Code</p>
                                    <p class="text-white text-center mb-0">
                                        {{ $organization->code . '-' . $authUser->personal_code }}</p>
                                </div>
                                <div class="btn-value mt-4">
                                    <p class="text-white text-center mb-0 pt-2">Organization</p>
                                    <p class="text-white text-center mb-0">{{ $organization->name ?? '---' }}</p>
                                </div>
                                {{-- <div class="btn-value mt-4">
                                    <p class="text-white text-center mb-0 pt-2">Activity/Cause</p>
                                    <p class="text-white text-center mb-0">{{ $authUser->cause }}</p>
                                </div> --}}
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-lg-6">
                        <div class="row mx-2 my-4">
                            <div class="sales-bg text-white py-2 rounded-3 text-start mt-4 mt-lg-0">
                                Sales Training Area</div>
                            {{-- <div class="col-md-6 d-flex flex-column align-items-lg-center">
                                <div class="col-1 d-flex justify-content-center align-items-center m-auto">
                                    <div class="participant-border-style"></div>
                                </div>
                                <div class="col-md-11 bg-white rounded-4 participant-training-video d-flex align-items-center justify-content-md-center justify-content-lg-start"
                                    id="print-pdf">
                                    <i
                                        class="fa-regular fa-file-lines rounded-circle participant-training-video-start p-2 text-white me-2"></i>
                                    <a href="{{ Vite::asset('resources/images/quick_start.pdf') }}"
                                        class="fw-bold preview-link text-decoration-none" target="_blank">
                                        <p class="mb-0 print-pdf fw-semibold text-start" style="color: #6e6e6e">Quick
                                            Start to Fundraising Success
                                        </p>
                                    </a>
                                </div>
                            </div> --}}

                            <div class="col-md-12 d-flex flex-column align-items-lg-center">
                                <div class="col-1 d-flex justify-content-center align-items-center m-auto">
                                    <div class="participant-border-style"></div>
                                </div>
                                <div
                                    class="col-md-12 bg-white rounded-4 participant-training-video fw-semibold d-flex align-items-center justify-content-md-center ">
                                    <i class="fa-solid fa-download rounded-circle particiapnt-training-video-print p-2 text-white me-2"></i>
                                    <p class="mb-0">Campaign Sales Resources</p>
                                </div>
                            </div>

                            <div class="col-md-12 d-flex flex-column align-items-lg-center">
                                <div class="col-1 d-flex justify-content-center align-items-center m-auto">
                                    <div class="participant-border-style"></div>
                                </div>
                                {{-- print word document --}}
                                <div class="col-md-12 bg-white rounded-4 participant-training-video fw-semibold d-flex align-items-center justify-content-md-center"
                                    id="print-document" data-bs-toggle="modal" data-bs-target="#videoModal">
                                    <i class="fa-solid fa-play rounded-circle participant-training-video-sales p-2 text-white me-2"></i>
                                    <a href="#" id="download-link" class="text-decoration-none">
                                        <p class="mb-0 print-word" style="color: #6e6e6e">Dashboard Tutorial Video</p>
                                    </a>
                                </div>
                            </div>

                              <div class="modal fade" id="videoModal" tabindex="-1"
                                        aria-labelledby="videoModalLabel" aria-hidden="true">
                                        <div class="modal-dialog modal-lg">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title" id="videoModalLabel">Dashboard Tutorial Video
                                                    </h5>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                        aria-label="Close"></button>
                                                </div>
                                                <div class="modal-body">
                                                    <!-- Local Video -->
                                                    <video class="w-100"id="videoPlayer" controls>
                                                        <source
                                                            src="{{ Vite::asset('resources/videos/fms_training_video_individual_dashboard.mp4') }}"
                                                            type="video/mp4">
                                                        Your browser does not support the video tag.
                                                    </video>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                            {{-- <div class="col-md-6 d-flex flex-column align-items-lg-center">
                                <div class="col-1 d-flex justify-content-center align-items-center m-auto">
                                    <div class="participant-border-style"></div>
                                </div>
                                <div
                                    class="col-md-11 bg-white rounded-4 participant-training-video fw-semibold d-flex align-items-center justify-content-md-center justify-content-lg-start">
                                    <i
                                        class="fa-solid fa-play rounded-circle participant-training-video-learn p-2 text-white me-2"></i>
                                    <p class="mb-0">Print Leave Behind Here</p>
                                </div>
                            </div> --}}
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-12 col-lg-8">
                        <div class="sponsers-table mt-3 px-4 rounded-4 bg-white py-3">
                            <div class="d-md-flex justify-content-between align-items-center pb-3">
                                 <p class="header-name text-green mb-0 mt-2">YOU HAVE SOLD {{ $appsSold ?? 0 }}  {{ ($appsSold ?? 0) <= 1 ? 'APP' : 'APPS' }} AND
                                    GIFTED {{ $giftedApp }}  {{ ($giftedApp ?? 0) <= 1 ? 'APP' : 'APPS' }} SO FAR</p>
                            </div>
                            {{-- table --}}
                            <div class="table-responsive table-responsive-coustom">
                                <table width="100%" class="table custom-table" id="individual-app-sold-list">
                                    <thead class="table-heading-with-draw py-4">
                                        <tr class="m-3">
                                            <th width="15%" class="p-2 text-dark rounded-start">#</th>
                                            <th width="20%" class="p-2 text-dark">Name</th>
                                            <th width="30%" class="p-2 text-dark">Email Address</th>
                                            <th width="25%" class="p-2 text-dark rounded-end">Pay It Forward™</th>
                                            <th width="25%" class="p-2 text-dark rounded-end">Kick It Back™</th>
                                        </tr>
                                    </thead>
                                    @php
                                        // Group the sponsor payments by sponsor_id
                                        $groupedPayments = $soldApps->groupBy('sponsor_id')->map(function ($group) {
                                            return [
                                                'sponsor_id' => $group->first()->sponsor_id,
                                                'full_name' => $group->first()->full_name,
                                                'email' => $group->first()->email,
                                                'pay_it_forward' => $group->sum('pay_it_forward'),
                                                'kick_it_back' => $group->sum('kick_it_back'),
                                            ];
                                        });
                                    @endphp

                                    <tbody class="table-body-transaction">
                                        @foreach ($groupedPayments as $app)
                                            <tr style="background-color: #efe8e8;" class="">
                                                <td data-label="#" class="p-2">
                                                    {{ $loop->iteration }}
                                                </td>
                                                <td data-label="Name" class="p-2">
                                                    {{ $app['full_name'] ?? '' }}
                                                </td>
                                                <td data-label="Email Address" class="p-2">
                                                    {{ $app['email'] }}
                                                </td>
                                                <td data-label="Pay It Forward™" class="p-2">
                                                    ${{ number_format($app['pay_it_forward'], 2) }}
                                                </td>
                                                <td data-label="Kick It Back™" class="p-2">
                                                    ${{ number_format($app['kick_it_back'], 2) }}
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>

                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-lg-4">
                        <div class="bg-white rounded-4 mt-3 px-2 px-sm-4 py-3 mb-3">
                            <div class="medal-box">
                                <p class="text-blue text-center fw-bold fs-5 mt-2">Increase Your Sales To Win</p>
                                <div class="d-flex justify-content-around">
                                    <div class="gold-medal">
                                        @php
                                            $salesCount = ($appsSold ?? 0) + ($giftedApp ?? 0);
                                            $imageUrl = null;
                                            $isEnabled = false;
                                            if ($salesCount >= 15) {
                                                $imageUrl = Vite::asset('resources/images/gold_enabled.webp');
                                                $isEnabled = true;
                                            } else {
                                                $imageUrl = Vite::asset('resources/images/gold_disabled.webp');
                                                $isEnabled = false;
                                            }
                                        @endphp
                                        <img src="{{ $imageUrl }}" alt="image" class="img img-fluid">
                                    </div>
                                    <div class="content-width pt-5 {{ $isEnabled ? '' : 'text-secondary' }}">
                                        <p>Gold Medal</p>
                                        <p class="fw-bold">15 sales</p>
                                    </div>
                                </div>
                                <div class="d-flex justify-content-around">
                                    <div class="silver-medal">
                                        @php
                                            $salesCount = ($appsSold ?? 0) + ($giftedApp ?? 0);
                                            $imageUrl = null;
                                            $isEnabled = false;
                                            if ($salesCount >= 13 && $salesCount <= 14) {
                                                $isEnabled = true;
                                                $imageUrl = Vite::asset('resources/images/silver_enabled.webp');
                                            } else {
                                                $isEnabled = false;
                                                $imageUrl = Vite::asset('resources/images/silver_disabled.webp');
                                            }
                                        @endphp
                                        <img src="{{ $imageUrl }}" alt="image" class="img img-fluid">
                                    </div>
                                    <div class="content-width pt-5 {{ $isEnabled ? '' : 'text-secondary' }}">
                                        <p>Silver Medal</p>
                                        <p class="fw-bold">13 sales</p>
                                    </div>
                                </div>
                                <div class="d-flex justify-content-around">
                                    <div class="bronze-medal">
                                        @php
                                            $salesCount = ($appsSold ?? 0) + ($giftedApp ?? 0);
                                            $imageUrl = null;
                                            $isEnabled = false;
                                            if ($salesCount >= 10 && $salesCount <= 12) {
                                                $isEnabled = true;
                                                $imageUrl = Vite::asset('resources/images/bronze_enabled.webp');
                                            } else {
                                                $isEnabled = false;
                                                $imageUrl = Vite::asset('resources/images/bronze_disabled.webp');
                                            }
                                        @endphp
                                        <img src="{{ $imageUrl }}" alt="image" class="img img-fluid">
                                    </div>
                                    <div class="content-width pt-5 {{ $isEnabled ? '' : 'text-secondary' }}">
                                        <p>Bronze Medal</p>
                                        <p class="fw-bold">10 sales</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        {{-- =================================== main content Ends =================================== --}}

        {{-- =================================== Edit pop Up cart =================================== --}}

        <!-- <div class="edit-pop">
                <div class="modal fade" id="editProfileIndividual" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="editProfileIndividualLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Edit Profile</h5>
                                <button type="button" class="btn-close individual-edit-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <form class="py-4 px-4 px-lg-5">
                                    <div class="form-row d-flex justify-content-between pb-4 row">
                                        <div class="form-group col-md-6 col-12">
                                            <label class="name edit-input text-secondary col-form-label" for="">Name <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" placeholder="Name" id="edit-individual-name" value="{{ $authUser->first_name . ' ' . $authUser->last_name }}">
                                        </div>
                                        <div class="form-group col-md-6 col-12">
                                            <label class="name edit-input text-secondary col-form-label" for="">Organization <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" placeholder="Organization" id="edit-individual-organization" value="{{ $organization->name }}">
                                        </div>
                                    </div>
                                    <div class="form-row d-flex justify-content-between pb-4 row">
                                        <div class="form-group col-md-6 col-12">
                                            <label class="name edit-input text-secondary col-form-label" for="">Email <span class="text-danger">*</span></label>
                                            <input type="text" value="{{ $authUser->email }}" class="form-control" placeholder="Email" id="edit-individual-email">
                                        </div>
                                        <div class="form-group col-md-6 col-12">
                                            <label class="name pb-1 text-secondary col-form-label" for="">Username</label>
                                            <input type="text" class="form-control" id="edit-individual-organization" placeholder="Username" value="{{ $authUser->username }}" disabled>
                                        </div>
                                    </div>
                                    <div class="d-flex justify-content-between pb-4 row">
                                        <div class="form-group col-md-6 col-12">
                                            <label for="edit-individual-formFile" class="name edit-input text-secondary col-form-label">Choose
                                                Profile Image</label>
                                            <div class="file-input-wrapper form-group">
                                                <button type="button" class="btn btn-primary file-input-button border-end-0" id="chooseFileButton">Choose File</button>
                                                <input type="text" id="fileName" class="form-control file-input-text border-start-0 border-end-0" readonly placeholder="No file chosen" value="{{ $authUser->profile_image }}">
                                                <input type="file" id="fileInput" style="display: none;" accept=".jpg, .jpeg, .png">
                                                <input type="hidden" id="key" name="key" value="N">
                                                <input type="hidden" id="removeImage" name="removeImage" value="N">
                                                <button type="button" class="btn border-start-0" id="image-cancel-button">
                                                    <i class="fas fa-times text-danger"></i>
                                                </button>
                                            </div>

                                        </div>
                                        <div class="form-group col-md-6 col-12">
                                            <label class="name edit-input text-secondary col-form-label" for="">Activity <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" placeholder="Activity" value="{{ $authUser->cause }}" id="edit-individual-activity">

                                        </div>
                                    </div>
                                    <div class="form-group pb-4">
                                        <label class="name edit-input text-secondary col-form-label" for="">Phone Number <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control edit_individual_phone_number" id="edit-individual-phone-number" value=" {{ $authUser->phone_number }}">
                                    </div>

                                    <div class=" d-flex justify-content-end align-items-center gap-3">
                                        <button type="button" class="btn btn-outline-primary" data-auth-id="{{ $authUser->id }}" id="update-individual">Update</button>
                                    </div>

                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div> -->

        {{-- =================================== Share pop Up cart =================================== --}}

        <div class="share-app-pop">
            <div class="modal fade" id="sharePop-up" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
                aria-labelledby="staticBackdropLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered share-dialog-box">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Share App with your Friends and Family</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body p-0">
                            <form class="py-2 px-4 px-lg-5">
                                <span class="body-para text-secondary">
                                    Send the App through these methods that have a pre-written script about the great
                                    benefits of your product. You can also edit the script. Use ALL the Share Features to
                                    get the
                                    best results. Watch your participant portal grow with FundMeSmart™ bucks and App sales
                                    and see
                                    who is supporting you. Always follow up and resend as you want your friends and family
                                    to
                                    save hundred$ per year while supporting you.
                                </span>
                                <br><br> <br>
                                <div class="social-media justify-content-center text-center">
                                    <div class="share-btn">
                                        <button type="button" class="btn btn-primary social-btn social-btn-color w-75"
                                            id="individual_share_app" data-cause="{{ $authUser->cause }}"
                                            data-user-name="{{ $authUser->first_name . ($authUser->last_name ? ' ' . $authUser->last_name : '')}}"
                                            data-personal-code="{{ $organization->code . '-' . $authUser->personal_code }}"
                                            data-organization-plan-id="{{ $organization->plan_id }}"
                                            data-app-prices="{{ $appPrices }}"  data-part-id="{{$authUser->id}}" data-org-id="{{$organization->id}}" data-org-name="{{ $organization->name }}">
                                            <i class="fa-solid fa-envelope me-2 text-white"></i> Share an Email
                                        </button>

                                        <p></p>
                                        <button type="button"
                                            class="btn btn-primary mb-3 social-btn social-btn-color w-75"
                                            data-bs-toggle="modal" data-bs-target="#example-text-Modal">
                                            <i class="fa-solid fa-comments me-2"></i> Send a Text Message
                                        </button>
                                     <a href="{{$twitterUrl}}" class="social-button :class" id=":id" title="twitter"
                                                rel=":rel" target="_blank">
                                                <button type="button"
                                                    class="btn btn-primary mb-3 social-btn social-btn-twitter w-75">
                                                    <i class="fa-brands fa-x-twitter btn-icon me-1"></i> Share on X
                                                </button>
                                            </a>
                                    </div>
                                    <div class="share-btn">
                                        {!! $shareComponent !!}
                                    </div>
                                            <button type="button"
                                                class="btn participant-social-btn participant-social-share-text-btn text-white w-75"
                                                data-bs-toggle="modal" data-bs-target="#individual-social-Modal">
                                                <i class="fa fa-share-alt me-2" aria-hidden="true"></i>Share on Facebook,
                                                Instagram, TikTok
                                            </button>

                                </div> <br> <br> <br>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

              <div class="modal fade" id="individual-social-Modal" tabindex="-1" aria-labelledby="participantTextModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content">

                    <div class="modal-header">
                        <h5 class="modal-title" id="participantTextModalLabel">Share App with your Friends and Family</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    @php
                           $partName = trim($authUser->first_name . $authUser->last_name);
                           $partName = str_replace(' ', '', $partName);
                         $referenceSecond = round(microtime(true) * 1000);
                         $encodedPartId = base64_encode((string) $authUser->id);
                         $encodedOrgId = base64_encode((string) $organization->id);
                         $shareName = $authUser->first_name . ($authUser->last_name ? ' ' . $authUser->last_name : '');
                         $orgName = $organization->name == '' ? $shareName : $organization->name;
                         $baseUrl = env('APP_URL');
                         $shareUrl = $baseUrl . 'share/' . $partName.'/'.$encodedPartId;
                    @endphp

                    <div class="modal-body">
                        <p class="mb-1 pb-3">
                            Share this app with your friends and family using the options below. You can copy the message and use it
                            anywhere for the best results!
                        </p>
                        <div class="border rounded p-3 pt-5  position-relative mb-3">
                            <div id="shareText" class="share-box">Save money, support a cause, join our fundraiser!

Dear friends and family: I’m excited to share that I’m raising funds and awareness for the
“{{$orgName}}” campaign through the FundMeSmart (FMS) app. By joining as a
member, you can start saving immediately on travel, dining, entertainment, and everyday
purchases—potentially hundreds or even thousands of dollars each year.

Why this matters:
- Exclusive, member-only discounts across millions of opportunities in the U.S.
- A simple, cost-effective way to support a cause I care deeply about.
- 100% of the Pay it Forward™ and Kick it Back™ donations support our fundraiser, and
you’ll be recognized on the With Gratitude Wall™ inside the app.

How to join:
1) Download the FundMeSmart app from the Apple App Store or Google Play Store.
2) Join our fundraiser for just {{$annualAmount}} per year.
3) Start saving and support the cause at the same time.

Your support means the world to me. If you’re looking for a tangible way to save and give
back, this is it. Thank you in advance for considering this opportunity to make a
difference.

App Link: {{ $shareUrl }}

#SupportThemAll #FMS #Fundraiser #SaveAndSupport
                            </div>



                            <button class="btn-copy position-absolute top-0 end-0 m-2" id="copyBtn">  <i class="fa-regular fa-copy me-1"></i> Copy Message</button>
                        </div>
                        <div class="d-grid gap-2">
                            <button class="btn btn-insta p-2 " id="instaLogin"><i class="fab fa-instagram pe-1"></i> Login with Instagram</button>
                            <button class="btn btn-primary p-2 mt-2" id="fbLogin"><i class="fab fa-facebook pe-1"></i> Login with Facebook</button>
                            <button class="btn btn-dark p-2 mt-2" id="tiktokLogin"><i class="fab fa-tiktok pe-1"></i> Login with TikTok</button>
                        </div>
                    </div>

                </div>
            </div>
        </div>
            {{-- --------------------- send mail options modal ------------------ --}}
            <div class="modal fade" id="email-choice-modal" data-bs-backdrop="static" data-bs-keyboard="false"
                tabindex="-1" aria-labelledby="emailChoiceModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-lg" style="margin: 0 auto; max-width: 600px;">
                    <div class="modal-content" style="border-radius: 0 !important; border: none !important;">
                        <div class="modal-header"
                            style="background-color: rgb(91, 23, 31) !important; color: white; padding: 20px 24px; border-radius: 0 !important;">
                            <h1 class="modal-title" id="emailChoiceModalLabel"
                                style="font-size: 24px; font-weight: 600;">Choose a Sending Method</h1>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
                                style="border: none;"></button>
                        </div>
                        <div class="modal-body d-flex flex-column px-lg-5" style="padding: 30px;">
                            <!-- Gmail Button -->
                            <button type="button"
                                class="btn btn-outline-primary d-flex align-items-center justify-content-center my-2"
                                id="send-gmail" style="flex: 1; width: 100%; padding: 12px; font-size: 18px;">
                                <img src="{{ Vite::asset('resources/images/sendmail.webp') }}" alt="Gmail Logo"
                                    style="width: 25px; height: 25px; margin-right: 10px;">
                                Send via Gmail
                            </button>
                            <!-- Yahoo Button -->
                            <button type="button"
                                class="btn btn-outline-info d-flex align-items-center justify-content-center my-2"
                                id="send-yahoo" style="flex: 1; width: 100%; padding: 12px; font-size: 18px;">
                                <img src="{{ Vite::asset('resources/images/yahoo.webp') }}" alt="Yahoo Logo"
                                    style="width: 25px; height: 25px; margin-right: 10px;">
                                Send via Yahoo
                            </button>
                            <!-- Outlook Button -->
                             <button type="button"
                            class="btn btn-outline-success d-flex align-items-center justify-content-center my-2"
                            id="send-outlook-personal" style="flex: 1; width: 100%; padding: 12px; font-size: 18px;">
                            <img src="{{ Vite::asset('resources/images/outlook.webp') }}" alt="Outlook Logo"
                                style="width: 25px; height: 25px; margin-right: 10px;">Send via Outlook(Personal)
                        </button>

                        <button type="button"
                            class="btn btn-outline-success d-flex align-items-center justify-content-center my-2"
                            id="send-outlook-business" style="flex: 1; width: 100%; padding: 12px; font-size: 18px;">
                            <img src="{{ Vite::asset('resources/images/outlook.webp') }}" alt="Outlook Logo"
                                style="width: 25px; height: 25px; margin-right: 10px;">Send via Outlook(Business)
                        </button>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        {{-- --------------------- Email supporters Pop-Up --------------------- --}}

        <div class="contact-popup-card">
            <div class="modal fade" id="Contact-Popup" tabindex="-1" data-bs-backdrop="static"
                aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered contact-pop-up-div">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title" id="exampleModalLabel">Email your Registered
                                Supporters here
                            </h1>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body pt-2 pb-4 px-lg-5">
                            <form class="p-3">
                                <div class="mb-3">
                                    <label for="recipient-name" class="col-form-label">To</label>
                                    <input type="text" class="form-control bg-color" id="recipient-name"
                                        placeholder="All Supporters">
                                </div>
                                <div class="mb-3">
                                    <label for="message-text" class="col-form-label">Message</label>
                                    <textarea class="form-control text-area-scroll bg-color" id="message-text"></textarea>
                                </div>
                            </form>
                            <div class="submit-contact mb-3">
                                <button type="button"
                                    class="btn btn-primary contact-submit-btn rounded-3">Submit</button>
                            </div>

                        </div>

                    </div>
                </div>
            </div>
        </div>


        {{-- ----------------------------------------------------------------------------------------- --}}


        {{-- modal for send email --}}
        <div class="send-email-pop">
            <div class="modal fade" id="share-mail" data-bs-backdrop="static" tabindex="-1"
                aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered send-email-dialog">
                    <div class="modal-content rounded-5">
                        <div class="modal-header"
                            style="border-top-left-radius: 20px; border-top-right-radius: 20px; border-bottom: 1px solid grey;">
                            <P class="modal-title" id="exampleModalLabel">TELL A FRIEND ABOUT FUNDMESMART™</P>
                            <button type="button" class="btn-close share-mail-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body px-3 px-lg-5">
                            <p class="my-2 fw-bold">General Informations</p>
                            <p class="m-0">
                                <label for="Email" class="col-form-label">Friends Email Address <sup
                                        class="text-danger">*</sup> :</label>
                                <input type="text" class="form-control mb-1 friend-email" autocomplete="off">
                            <p class="email-note">Your friend will receive a message/link on your behalf. Their email
                                address is not collected by FUNDMESMART™, or used for any other purpose.</p>
                            </p>
                            <p class="mt-lg-3">
                                <label for="Subject" class="col-form-label">Subject Line (155 character limit) <sup
                                        class="text-danger">*</sup> :</label>
                                <textarea class="form-control textarea-fixed" maxlength="155" id="individual-mail-subject">{{ $authUser->first_name . ' ' . $authUser->last_name }} invites you to join and start saving today</textarea>
                                <small class="text-danger mail-subject-error"></small>
                            </p>
                            <p class="mt-lg-3">
                                <label for="Subject" class="col-form-label">Personal Note (1500 character limit) <sup
                                        class="text-danger">*</sup> :</label>
                            <div class="border border-1 rounded-3 individual-mail-personal-note">
                                <div class="p-3" id="individual-mail-personal-note">
                                    <p>Dear Friend,</p><br>
                                    <p>FundMeSmart - {{ $authUser->cause }} and I are participating in a revolutionary
                                        fundraising program that saves you hundreds on every day activities and raises much
                                        needed funds and awareness for our programs. It's called fundmesmart.com.</p><br>
                                    <p>Our branded mobile app is a traveling coupon book with over 3000 local merchants and
                                        71,000 nationally, sponsoring our efforts. So, you can access these “one of kind”
                                        contracted deals anywhere in the USA, any time. The donation is only $39.99 for a
                                        years' worth of savings. This cost will be immediately defrayed after just a few
                                        redeems or one "Golden Egg" coupon offer.</p><br>
                                    <p>Please help our program, and in doing so, you can save hundred$ a year. Simply follow
                                        this link to purchase, and get the app sent to your phone, and start saving.</p><br>
                                    <p>Please download FundMeSmart Mobile Passport to Savings and use Fundraiser Code
                                        {{ $organization->code . '-' . $authUser->personal_code }} .</p><br>
                                    <p>Thank you,</p><br>
                                    <p>{{ $authUser->first_name . ' ' . $authUser->last_name }}.</p><br>
                                </div>
                            </div>
                            </p>
                        </div>
                        <div class="border-0 m-4 mt-0 text-end me-5">
                            <button type="submit" class="btn bg-darkblue individual-share-mail-submit px-4">Send to
                                friend <span
                                    class="spinner-border spinner-border-sm d-none individual-mail-spinner"></span></button>
                            <button type="submit" class="btn bg-primary px-4 text-white individual-share-mail-close me-4"
                                data-bs-dismiss="modal" aria-label="Close">Cancel</button>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{-- ---------------------------------------------------------------------------------------------------------- --}}

        {{-- modal for send text-message --}}
        <div class="send-text-pop">
            <div class="modal fade" id="example-text-Modal" data-bs-backdrop="static" tabindex="-1"
                aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered text-modal-dialog">
                    <div class="modal-content rounded-5">
                        <div class="modal-header"
                            style="border-top-left-radius: 20px; border-top-right-radius: 20px; border-bottom: 1px solid grey;">
                            <p class="modal-title" id="exampleModalLabel"></p>
                            <button type="button" class="btn-close send-text-pop-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <p class="text-center px-2 py-4 text-justify text-secondary">
                                Please fill in one of the following fields to send the Fundmesmart™ App Download link to your
                                Family and friends.
                                The more you refer, the more FundMeSmart™ Bucks you will get.
                            </p>
                            <div id="phoneFieldsContainer">
                                <div class="phone-container">
                                    <div class="input-group mb-3">
                                        <div class="input-group-prepend">
                                            <div
                                                class="form-control border border-end-0 bg-color text-secondary countryCodeSelect"
                                                id="countryCodeSelect">
                                                {{-- <option value="+91">(+91)India</option> --}}
                                                <div value="+1">(+1)United States</div>
                                        </div>
                                        </div>
                                        <input type="text" name="phone_number[]"
                                            class=" form-control bg-color  border py-1  send-sms-number"
                                            placeholder="(000)000-0000" autocomplete="off" aria-label="Username"
                                            aria-describedby="basic-addon1" maxlength="14">
                                    </div>
                                </div>
                            </div>

                            <div class="text-end">
                                Add/remove
                                <p class="p-2">
                                    <button class="border-0 p-2 add-btn rounded-2"><i
                                            class="fa-solid fa-plus text-white"></i></button>
                                    <button class="border-0 p-2 sub-btn rounded-2"><i
                                            class="fa-solid fa-minus text-white"></i></button>
                                </p>
                            </div>

                            <template id="phoneFieldTemplate">
                                <div class="phone-container">
                                    <div class="input-group mb-3">
                                        <div class="input-group-prepend">
                                            <div
                                                class="form-control border border-end-0 bg-color text-secondary countryCodeSelect"
                                                id="countryCodeSelect">
                                                {{-- <option value="+91">(+91)India</option> --}}
                                                <div value="+1">(+1)United States</div>
                                        </div>
                                        </div>
                                        <input type="text" name="phone_number[]"
                                            class=" form-control bg-color border py-1  send-sms-number"
                                            placeholder="(000)000-0000" autocomplete="off" aria-label="Username"
                                            aria-describedby="basic-addon1">
                                    </div>
                                </div>
                            </template>
                        </div>
                        <div class=" mt-3 mb-5 text-center border-0">
                            <button type="submit" class="btn bg-darkblue send-email-submit send-sms px-5">Submit</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- =========================== profile detail modal ======================== --}}
        <div class="modal fade" id="individual-profile" data-bs-backdrop="static" data-bs-keyboard="false"
            tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-body m-2">
                        <div class="row mt-3">
                            <div class="data-count bg-white">
                                <div class="row">
                                    <div class="col-12">
                                        <div class="d-flex justify-content-between align-items-center mb-2">
                                            <div class="admin-profile-header lh-lg">Profile Information</div>
                                            <div class="d-sm-flex">
                                                <!-- <button type="button" class="btn btn-blue" data-bs-toggle="modal" data-bs-target="#edit-profile-Popup">
                                                        <i class="fa-solid fa-pen-to-square me-2"></i>Edit
                                                    </button> -->
                                                <button type="button" class="btn btn-blue" data-bs-toggle="modal"
                                                    data-bs-target="#editProfile">
                                                    <i class="fa-solid fa-pen-to-square me-2"></i>Edit
                                                </button>
                                            </div>
                                        </div>
                                        <div class="individual-profile-card border rounded-3 pt-2">
                                            <div class="d-lg-flex border-bottom">
                                                <div class="">
                                                    <div class="d-flex">
                                                        <img src="{{ Vite::asset('resources/images/profile_title.webp') }}"
                                                            alt="image" class="m-4 individual-profile-title-icon">
                                                        <div class="mt-2">
                                                            <div class="individual-profile-title text-nowrap">Title :</div>
                                                            <div class="individual-profile-text pt-2 pb-3 text-wrap">
                                                                {{ $authUser->title ?? "NA" }}
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="">
                                                    <div class="d-flex">
                                                        <img src="{{ Vite::asset('resources/images/email_icon.webp') }}"
                                                            alt="image" class="m-4 individual-profile-icon">
                                                        <div class="mt-2">
                                                            <div class="individual-profile-title text-nowrap"> Email Address :
                                                            </div>
                                                            <div class="individual-profile-text pt-2">
                                                                {{ $authUser->email }}</div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="">
                                                    <div class="d-flex">
                                                        <img src="{{ Vite::asset('resources/images/phone_icon.webp') }}"
                                                            alt="image" class="m-4 individual-profile-icon">
                                                        <div class="mt-2">
                                                            <div class="individual-profile-title text-nowrap"> Phone Number
                                                                :</div>
                                                            <div class="individual-profile-text pt-2 text-nowrap">
                                                                {{ $authUser->phone_number }}</div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class=" ">
                                                    <div class="d-flex me-2">
                                                        <img src="{{ Vite::asset('resources/images/goal_icon.webp') }}"
                                                            alt="image" class="m-4 individual-profile-icon">
                                                        <div class="mt-2">
                                                            <div class="individual-profile-title text-nowrap"> App Sales
                                                                Target :</div>
                                                            <div class="individual-profile-text pt-2">
                                                                {{ $authUser->app_sales_target }}</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="text-end me-2">
                                                <button type="button" class="btn btn-blue m-3" data-bs-toggle="modal"
                                                    data-bs-target="#individual-change-password"><i
                                                        class="fa-solid fa-pen-to-square me-2"></i>Change Password</button>
                                                <button type="button" class="btn btn-blue"
                                                    data-bs-dismiss="modal">Close</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {{-- <div class="text-center mb-3">
                    <button type="button" class="btn btn-blue" data-bs-dismiss="modal">Close</button>
                </div> --}}
                </div>
            </div>
        </div>

        {{-- Modal Profile --}}

        <div class="modal fade" id="editProfile" tabindex="-1" data-bs-backdrop="static"
            aria-labelledby="editProfileLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="editProfileLabel">Edit Your Profile</h5>
                        <button type="button" id="modal-close" class="btn-close send-text-pop-close"
                            data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form class="p-3">
                            <div class="row">
                                <div class="col-lg-6 mb-3">
                                    <label for="recipient-name" class="col-form-label"> First Name <span
                                            class="text-danger">*</span></label>
                                    <input type="text" maxlength="30" class="form-control bg-color"
                                        placeholder="First Name" id="edit-individual-first-name"
                                        value="{{ $authUser->first_name }}">
                                </div>
                                <div class="col-lg-6 mb-3">
                                    <label for="recipient-name" class="col-form-label"> Last Name</label>
                                    <input type="text" maxlength="30" class="form-control bg-color"
                                        placeholder=" Last Name" id="edit-individual-last-name"
                                        value="{{ $authUser->last_name }}">
                                </div>
                                <div class="col-lg-6 mb-3">
                                    <label for="recipient-state" class="col-form-label">Organization Name </label>
                                    <input type="text" maxlength="40" class="form-control bg-color"
                                        placeholder="Organization Name" id="edit-individual-organization"
                                        value="{{ $organization->name }}">
                                </div>
                                {{-- <div class="col-lg-6 mb-3">
                                    <label for="recipient-city" class="col-form-label">Activity/Cause <span
                                            class="text-danger">*</span></label>
                                    <input type="text" maxlength="30" class="form-control"
                                        placeholder="Activity/Cause" value="{{ $authUser->cause }}"
                                        id="edit-individual-activity">
                                </div> --}}
                                <div class="col-lg-6 mb-3">
                                    <label for="recipient-street" class="col-form-label">Username <span
                                            class="text-danger">*</span></label>
                                    <input type="text" maxlength="30" class="form-control bg-color input-color"
                                        value="{{ $authUser->username }}" disabled>
                                </div>
                                <div class="col-lg-6 mb-3">
                                    <label for="recipient-phone" class="col-form-label">Email Address <span
                                            class="text-danger">*</span></label>
                                    <input type="text" class="form-control bg-color input-color"
                                        id="edit-individual-email" value="{{ $authUser->email }}" disabled>
                                </div>
                                <div class="col-lg-6 mb-3">
                                    <label class="col-form-label" for="">Phone Number <span class="text-danger">
                                            *</span></label>
                                    <input type="text" class="form-control phone_number" placeholder="Phone Number"
                                        value=" {{ $authUser->phone_number }}" id="edit-phone-number">
                                </div>
                                <div class="col-lg-6 mb-3">
                                    <label class="col-form-label" for="">App Sales Target <span
                                            class="text-danger"> *</span></label>
                                    <input type="text" maxlength="6" class="form-control edit-app-sales-traget"
                                        placeholder="App Sales Target" value="{{ $authUser->app_sales_target }}"
                                        id="edit-app-sales-traget">
                                </div>
                                <div class="form-group col-lg-6 mb-3">
                                    <label class="name col-form-label" for="">App Price (Yearly) <span
                                            class="text-danger"> *</span></label>
                                    @foreach ($appPrices as $price)
                                        @if ($price->plan_id == $organization->plan_id && $price->name == 'Annually')
                                            @php
                                                $amount = (float) str_replace('$', '', $price->amount);
                                                $fundraiseTakenAmount = (float) str_replace(
                                                    '$',
                                                    '',
                                                    $price->fundraise_taken_amount ?? '0',
                                                );
                                            @endphp
                                            <input type="text" disabled
                                                class="form-control edit-per-participant-username edit-app-price"
                                                placeholder=""
                                                value="${{ number_format($amount, 2) }} (you will get ${{ number_format($amount - $fundraiseTakenAmount, 2) }})">
                                        @endif
                                    @endforeach
                                </div>
                                <div class="col-lg-6 mb-3">
                                    <label class="col-form-label" for="">State<span class="text-danger">
                                            *</span></label>
                                    <select class="rounded-2 p-4 state form-select" name="state_id" id="edit-state">
                                        <option value="" selected>Select State</option>
                                        @foreach ($states as $state)
                                            <option value="{{ $state->id }}"
                                                {{ $state->name == $authUser->states ? 'selected' : '' }}>
                                                {{ $state->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-lg-6 mb-3">
                                    <label class="col-form-label" for="">City <span class="text-danger">
                                            *</span></label>
                                    <select class="rounded-2 p-4 city form-select" name="city_id" id="edit-city"
                                       data-zip-code="{{ $authUser->zip_code }}" data-city-name="{{ $authUser->city }}">
                                        <option value="" selected>Select City</option>
                                    </select>
                                </div>
                                <div class="col-lg-6 mb-3">
                                    <label class="col-form-label" for="">Address <span
                                            class="text-danger">*</span></label>
                                    <input type="text" class="form-control" placeholder="Enter Your Address"
                                        value="{{ $authUser->address }}" id="edit-address">
                                    <small class="text-danger individual-adress-error my-0 py-0"></small>
                                </div>
                                {{-- <div class="col-lg-6 mb-3">
                                    <label class="col-form-label" for="">Zip Code <span
                                            class="text-danger">*</span></label>
                                    <input type="text" class="form-control zip-code" placeholder="Zip Code"
                                        maxlength="5" value="{{ $authUser->zip_code }}" id="edit-zip-code">
                                </div> --}}
                                {{-- <div class="col-lg-6 mb-3">
                            <label class="col-form-label" for="edit_link">Facebook/Website Link</label>
                            <input type="url" name="link" class="rounded-2 p-2 edit_link"
                                placeholder="https://example.com">
                        </div> --}}
                                <div class="col-lg-6 mb-3">
                                    <label class="col-form-label" for="">Facebook/Website Link</label>
                                    <input type="url" name="link" class="form-control edit_link"
                                        value="{{ $organization->link }}" placeholder="https://example.com">
                                </div>
                            </div>
                            <div class="col-lg-12 mb-3">
                                <label for="recipient-phone" class="col-form-label highlighted-label">Personal
                                    Goal</label>
                                <textarea class="form-control bg-color custom-textarea" rows="4" id="personal-goal"
                                    placeholder="ex: To raise funds for my program">{{ $authUser->activity_description }}</textarea>
                                <div class="text-grey mt-2">
                                    <small><span id="personal-goal-char-count">0</span>/155 Characters used</small>
                                </div>
                                <div class="text-danger mt-2" id="error-message" style="display: none; font-size: 12px;">
                                </div>
                            </div>
                            <div class="col-12 mb-3">
                                <label class="col-form-label highlighted-label">Action Image</label>
                                <div class="d-flex">
                                    <div>
                                        <div class="d-lg-flex">
                                            <div>
                                                <button id="editProfileImageBtn"
                                                    class="btn text-blue pb-1 edit-profile-btn">EDIT PROFILE IMAGE</button>
                                                <input type="file" id="profileImageInput" accept=".jpg, .jpeg, .png"
                                                    style="display: none;" />
                                            </div>
                                            <span id="fileNameDisplayWrapper"
                                                class="{{ $authUser->profile_image ? '' : 'd-none' }}">
                                                <span class="d-flex my-3 my-lg-0 ms-lg-2">
                                                    <input type="text" disabled id="fileNameDisplay"
                                                        value="{{ $authUser->profile_image }}"
                                                        class="border-1-blue rounded-1 py-1 px-2">
                                                    <span id="removeImageBtn" class="btn btn-blue"><i
                                                            class="fa-solid fa-xmark px-2"></i></span>
                                                </span>
                                            </span>
                                        </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>

                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <div class="px-4">
                            <button type="button" data-auth-id="{{ $authUser->id }}" id="update-individual"
                                class="btn px-5 edit-submit text-white rounded-3">Submit<span
                                    class="spinner-border spinner-border-sm d-none ms-2 individual-edit-spinner"></span></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{-- Modal Contact your Registered Supporters here --}}
        <div class="contact-your-registered">
            <div class="modal fade" id="contact-your-registered-Popup" tabindex="-1" data-bs-backdrop="static"
                aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered individual-contact-supporter">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title" id="exampleModalLabel">Contact your Registered Supporters here</h1>
                            <button type="button" class="btn-close send-text-pop-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body pt-2 pb-4 px-lg-5">
                            <form class="p-3">
                                <p class="text-start">
                                    This tool will send your written email (and an alert to the App) to all of the
                                    Supporters
                                    who bought on behalf of your fundraiser. Tell them "Thank you!" and let them know how
                                    much you raised to date.</p>

                                <p class="text-start"> You can also inform them of upcoming events or even make sure they
                                    see special coupons
                                    you found for them to save $. This will help to make them feel included and cared about.

                                </p>
                                <div class="mb-3">
                                    <label for="message-text" class="col-form-label contact-name">Message<span
                                            class="text-danger">*</span></label>
                                    <textarea class="form-control text-area-scroll bg-color individual-notify-supporter-content" cols="30"rows="8" id="message-text"></textarea>
                                <small id="supporter-char-count" class="form-text text-muted">Characters used: <span id="supporter-count">0</span> /255</small>

                                </div>
                            </form>
                            <div class="submit-contact mb-3 ms-3">
                                <button type="button" class="btn btn-blue px-5" id="individual-notify-supporter-btn"
                                    data-admin-id="{{ $authUser->id }}"
                                    data-organization-id="{{ $organization->id }}">Submit <span
                                    id="supporter-spinner" class="spinner-border spinner-border-sm d-none" role="status"
                                    aria-hidden="true">
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- ================== change password modal================= --}}
        <div class="change-password-modal">
            <div class="modal fade " id="individual-change-password" data-bs-backdrop="static" data-bs-keyboard="false"
                tabindex="-1" aria-labelledby="individual-editProfileLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content rounded-4">
                        <div class="modal-header">
                            <h5 class="modal-title">Change Password</h5>
                            <button type="button" class="btn-close individual-password-close-btn"
                                data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <form class="row px-5 pb-4">
                                <div class="my-1">
                                    <label for="current-password" class="col-form-label">Current Password <span
                                            class="text-danger"> *</span></label>
                                    <div class="position-relative current-password-div ">
                                        <input type="password" placeholder="Current Password"
                                            class="form-control password-position" id="current-password"
                                            autocomplete="off">
                                        <span class="eye dashboard-eyeIcon position-absolute"><i
                                                class="fa-regular fa-eye-slash closed-eye-icon3 eye-icon"></i></span>
                                    </div>
                                </div>
                                <div class="my-1">
                                    <label for="new-password" class="col-form-label">New Password <span
                                            class="text-danger"> *</span></label>
                                    <div class="position-relative new-password-div">
                                        <input type="password" placeholder="New Password"
                                            class="form-control password-position" id="new-password" autocomplete="off">
                                        <span class="eye dashboard-eyeIcon position-absolute"><i
                                                class="fa-regular fa-eye-slash closed-eye-icon3 eye-icon"></i></span>
                                    </div>
                                </div>
                                <div class="my-1">
                                    <label for="confirm-password" class="col-form-label">Confirm Password <span
                                            class="text-danger"> *</span></label>
                                    <div class="position-relative confirm-password-div">
                                        <input type="password" placeholder="Confirm Password"
                                            class="form-control password-position" id="confirm-password"
                                            autocomplete="off">
                                        <span class="eye dashboard-eyeIcon position-absolute"><i
                                                class="fa-regular fa-eye-slash closed-eye-icon3 eye-icon"></i></span>
                                    </div>
                                </div>
                                <div class="text-center mt-4">
                                    <button type="button" data-param="pageLoad" class="btn text-white px-5 btn-blue"
                                        id="create_password">Change Password</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="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" 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="editParticipantCropButton">Submit</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @include('layout.footer')
    @vite(['resources/js/city.js'])
    @vite(['resources/js/individual.js'])
    @vite(['resources/js/progress_bar/individual_progress.js'])
    @vite(['resources/js/changepassword.js'])
    @vite(['resources/js/pagination.js'])
    @vite(['resources/js/supporter_notification.js'])
@endsection