@extends('app')
@section('content')
    @include('layout.header')
    @include('components.loader')
    <div class="admin-dashboard-container page-container p-0">
        <div class="mx-lg-5 px-lg-3 mx-4 inner-main">
            <div class="admin-group-btn d-md-flex justify-content-md-end py-3">
                <button type="button" class="btn btn-blue p-lg-2 px-3 my-2 px-lg-4 me-2 w-auto "
                    id="admin-contact-supporters" data-monetary-goal="{{ $authUser->apps_per_participants }}"
                    data-main-goal="{{ $authUser->apps_sales_goal }}"
                    data-org-id="{{ $organization->code }}-{{ $authUser->personal_code }}"
                    data-user-name="{{ $authUser->username }}"><i class="fa-solid fa-plus me-2"></i>Invite
                    Influencers/Participants</button>
                <!-- Modal for choosing email service -->
                <div class="modal fade invite-participant-modal" 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; transition: transform 0.1s ease-out;border-radius: 0 !important;">
                        <div class="modal-content" style="border-radius: 0 !important; border: none !important;">
                            <div class="modal-header invite-participant-modal-header"
                                style="background-color: rgb(91, 23, 31) !important; color: white !important; 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 !important;"></button>
                            </div>
                            <div class="modal-body d-flex flex-column px-lg-5"
                                style="padding: 30px;border-radius: 0 !important;">
                                <!-- 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="Gmail 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>

                <button type="button" class="btn btn-blue p-lg-2 px-3 my-2 px-lg-4 me-2 w-auto " data-bs-toggle="modal"
                    data-bs-target="#admin-send-notification"><i class="fa-solid fa-envelope me-2"></i>
                    Notify Influencers/Participants
                </button>

                <button type="button" class="btn btn-blue p-lg-2 px-3 my-2 px-lg-4 me-2 w-auto" data-bs-toggle="modal"
                    data-bs-target="#admin-send-notification-supporters"><i class="fa-solid fa-bell me-2"></i> Notify
                    Supporters</button>

                    <a href="{{ '/withdraw-fund' }}" class="btn btn-blue  p-lg-2 px-3 my-2 px-lg-4  w-auto "><img
                        src="{{ Vite::asset('resources/images/withdraw_fund.webp') }}" alt="image" class="me-2">Withdraw
                    Funds</a>
            </div>
            <div class="row">
                <div class="data-count bg-white">
                    <div class="row">

                        <div class="col-xl-8 col-12 ps-lg-0">
                            <div class="d-sm-flex align-items-center py-2 text-center text-sm-start">
                                @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">
                                <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">{{ $organization->name }}</span>
                                    {{-- <span class="px-2 fw-bold text-blue">-</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-1">Welcome,
                                {{ $authUser->first_name }}@if($authUser->last_name) {{ ' ' . $authUser->last_name }}@endif!
                            </p>
                            <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 app-sales-goal px-3 rounded-4">
                                        <p class="pe-3 pt-3">
                                            <img src="{{ Vite::asset('resources/images/app_sales_goals.webp') }}"
                                                alt="image" class="dashboard-icons">
                                        </p>
                                        <div class="body">
                                            <p class="fw-semibold text-wrap text-break mb-2 fs-6">
                                                {{ $authUser->apps_sales_goal ?? 0 }}</p>
                                            <p class="mb-0">App Sales Goal</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) + ($giftApp ?? 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">{{ $giftApp ?? 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 total-donation px-3 rounded-4">
                                        <div class="">
                                            <p class="pe-3 pt-3">
                                                <img src="{{ Vite::asset('resources/images/wallet_balance.webp') }}"
                                                    alt="image" class="dashboard-icons">
                                            </p>
                                        </div>
                                        <div class="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 rounded-3 d-flex flex-column-reverse flex-sm-row justify-content-evenly align-items-center ms-lg-3 mt-3 py-2">
                                        <div>Progress Bar</div>
                                        <div class="admin-progress-bar">
                                            <div class="admin-outer"
                                                data-progress="{{ ($appsSold ?? 0) + ($giftApp ?? 0) }}"
                                                data-sales-target=' {{ $authUser->apps_sales_goal ?? 0 }}'>
                                                <div class="inner d-flex justify-content-evenly align-items-center">
                                                    {{ $appsSold ?? 0 }} %
                                                </div>
                                            </div>
                                        </div>
                                    </div>


                                </div>
                                <div class="col-12 col-md-7">
                                    <div class="rounded-3 border border-2 mt-3 pb-3 pt-4 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 && $giftApp == 0)
                                                <div class="chart-labels ps-4">
                                                    <span style="color: hsl(0, 0%, 50%);"
                                                        class="mt-4 fs-2 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(15deg 100% 67.84%);"
                                                        class="mt-4 fs-2 total-app-dot d-flex align-items-center cursor-pointer"
                                                        data-index="0">● <span class="text-dark ms-2 mt-1">Monthly Subscriptions</span></span>
                                                    <span style="color: hsl(251.54deg 74.29% 58.82%);"
                                                        class="mt-4 fs-2 total-app-dot d-flex align-items-center cursor-pointer"
                                                        data-index="1">● <span class="text-dark ms-1 mt-1">Yearly Subscriptions</span></span>
                                                </div> -->
                                                <div class="chart-labels ps-4">
                                                    <span style="color: hsl(251.54deg 74.29% 58.82%);"
                                                        class="fs-2 total-app-dot d-flex align-items-center cursor-pointer"
                                                        data-index="0">● <span class="text-dark ms-1 mt-1">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="myChart"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-4">
                            <div class="rounded-3 border border-2 mt-3 total-earning-progress">
                                <h4 class="text-center pt-3 pb-2">Total Earnings</h4>
                                <div class="d-flex justify-content-center ">
                                    <canvas id="earningsChart"></canvas>
                                </div>
                                <div class="px-3 my-2">
                                    @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">
                                            ● <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">
                                                ● <span class="text-dark fs-6 ms-2 mt-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">
                                                ● <span class="text-dark fs-6 ms-2 mt-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">
                                                ● <span class="text-dark me-sm-3 pe-sm-2 fs-6 ms-2 mt-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">
                                                ● <span class="text-dark fs-6 ms-2 mt-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">
                                                ● <span class="text-dark fs-6 ms-2 mt-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">
                                                ● <span class="text-dark fs-6 ms-2 mt-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">
                                                ● <span class="text-dark me-sm-3 pe-sm-2 fs-6 ms-2 mt-1">Kick It Back</span>
                                            </div>
                                        </div> -->
                                    @endif
                                </div>
                            </div>
                            <div class="row mx-2 mt-5">
                                <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>
                                pdf
                                <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-center">
                                        <a href="/admin-pdf" target="_blank"
                                            class="d-flex align-items-center text-decoration-none">
                                            <i
                                                class="fa-solid fa-download rounded-circle particiapnt-training-video-print p-2 text-white me-2"></i>
                                            <p class="mb-0" style="color: #6e6e6e">Campaign Sales Resources</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>
                                    {{-- print word document --}}
                                    <div class="col-md-12 bg-white rounded-4 participant-training-video fw-semibold d-flex align-items-center justify-content-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="#" class="text-decoration-none">
                                            <p class="mb-0 print-word" style="color: #6e6e6e">Dashboard Tutorial Video</p>
                                        </a>
                                    </div>

                                    <!-- Modal Structure -->
                                    <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_administrative_dashboard.mp4') }}"
                                                            type="video/mp4">
                                                        Your browser does not support the video tag.
                                                    </video>
                                                </div>
                                            </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>
            </div>
            {{-- profile details --}}
            <div class="row mt-3">
                <div class="data-count bg-white">
                    <div class="row">
                        <div class="col-12">
                            <div class="d-lg-flex justify-content-lg-between align-items-center">
                                <div class="admin-profile-header lh-lg">Profile Details</div>
                                <div class="d-sm-flex">
                                    <button type="button" class="btn btn-blue p-lg-2 px-3 my-2 px-lg-4 me-2 w-auto"
                                        data-bs-toggle="modal" data-bs-target="#editProfile">
                                        <i class="fa-solid fa-pen-to-square me-2"></i>Edit
                                    </button>

                                    <button type="button" class="btn btn-blue p-lg-2 px-3 my-2 px-lg-4 me-2 w-auto"
                                        data-bs-toggle="modal" data-bs-target="#admin-change-password">
                                        <i class="fa-solid fa-pen-to-square me-2"></i>Change Password
                                    </button>
                                </div>
                            </div>
                            <div class="card admin-details ps-xl-5 py-2 mt-2">
                                <div class="row">
                                    <div class="col-lg-2 col-xl-3 col-md-6 col-12">
                                        <div class="d-flex ps-lg-0">
                                            <img src="{{ Vite::asset('resources/images/profile_title.webp') }}"
                                                alt="image" class="m-4 admin-profile-title-icon">
                                            <div class="mt-2">
                                                <div class="admin-profile-title">Title:</div>
                                                <div class="admin-profile-text pt-2">{{ $authUser->title ?? '' }}</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-md-6 col-12">
                                        <div class="d-flex  ps-lg-0 ">
                                            <img src="{{ Vite::asset('resources/images/email_icon.webp') }}"
                                                alt="image" class="m-4 admin-profile-icon">
                                            <div class="mt-2">
                                                <div class="admin-profile-title"> Email :</div>
                                                <div class="admin-profile-text pt-2 email-text text-wrap">
                                                    {{ $authUser->email ?? '' }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-md-6 col-12">
                                        <div class="d-flex  ps-lg-0">
                                            <img src="{{ Vite::asset('resources/images/phone_icon.webp') }}"
                                                alt="image" class="m-4 admin-profile-icon">
                                            <div class="mt-2">
                                                <div class="admin-profile-title"> Phone Number :</div>
                                                <div class="admin-profile-text pt-2">{{ $authUser->phone_number ?? '' }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-xl-3 col-md-6 col-12 ">
                                        <div class="d-flex  ps-lg-0">
                                            <img src="{{ Vite::asset('resources/images/goal_icon.webp') }}"
                                                alt="image" class="m-4 admin-profile-icon">
                                            <div class="mt-2">
                                                <div class="admin-profile-title"> App Sales Goal :</div>
                                                <div class="admin-profile-text pt-2">{{ $authUser->apps_sales_goal ?? 0 }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {{-- edit model --}}
                <div class="admin-edit-modal">

                    <div class="modal fade" id="editProfile" tabindex="-1" aria-labelledby="editProfileLabel"
                        aria-hidden="true">
                        <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-lg admin-edit-model">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="editProfileLabel">Edit Organization</h5>
                                    <button type="button" class="btn-close admin-edit-close-btn" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <form class="p-2 p-md-4">
                                        <div class="form-row d-flex row">
                                            <div class="form-group col-md-6 col-12 mb-3">
                                                <label class="name pb-1 edit-input" for="">Organization Name <span
                                                        class="text-danger"> *</span></label>
                                                <input type="text" maxlength="40" class="form-control"
                                                    placeholder="Organization" value="{{ $organization->name }}"
                                                    id="edit-admin-organization">
                                            </div>
                                            <div class="form-group col-md-6 col-12 mb-3">
                                                <label class="name pb-1 edit-input" for="">Contact Name <span
                                                        class="text-danger"> *</span></label>
                                                <input type="text" maxlength="30" class="form-control"
                                                    placeholder="Name" id="edit_admin_name"
                                                    value="{{ $authUser->first_name . ' ' . $authUser->last_name }}">
                                            </div>
                                        </div>
                                        <div class="form-row d-flex row">
                                            <div class="form-group col-md-6 col-12 mb-3">
                                                <label class="name pb-1 edit-input" for="">Phone Number <span
                                                        class="text-danger"> *</span></label>
                                                <input type="text" class="form-control edit_admin_phone_number"
                                                    placeholder="Phone Number" value="{{ $authUser->phone_number }}"
                                                    id="edit-admin-phone-number">
                                            </div>
                                            <div class="form-group col-md-6 col-12 mb-3">
                                                <label class="name pb-1 edit-input" for="">Title <span
                                                        class="text-danger"> *</span></label>
                                                <input type="text" maxlength="30" class="form-control"
                                                    placeholder="Administrator/Coach" value="{{ $authUser->title }}"
                                                    id="edit-admin-title">
                                            </div>
                                        </div>
                                        <div class="form-row d-flex row">
                                            <div class="form-group col-md-6 col-12 mb-3">
                                                <label class="name pb-1 edit-input" for="">Email Address<span
                                                        class="text-danger"> *</span></label>
                                                <input type="text" disabled class="form-control edit-email"
                                                    placeholder="Email" value="{{ $authUser->email }}"
                                                    id="edit-admin-email" readonly>
                                            </div>
                                            <div class="form-group col-md-6 col-12 mb-3">
                                                <label class="name pb-1" for="">Username <span
                                                        class="text-danger"> *</span></label>
                                                <input type="text" maxlength="30" disabled
                                                    class="form-control admin-edit-username edit-user"
                                                    placeholder="Username" value="{{ $authUser->username }}" readonly>
                                            </div>
                                        </div>
                                        {{-- <div class="d-flex row">
                                            <div class="form-groupcol-12 mb-3">
                                                <label class="name pb-1 edit-input" for="">Activity/Cause <span
                                                        class="text-danger"> *</span></label>
                                                <input type="text" disabled
                                                    class="form-control edit-admin-cause edit-causer"
                                                    placeholder="Activity/Cause" value="{{ $authUser->cause }}"
                                                    id="edit-admin-activity" readonly>
                                            </div>
                                        </div> --}}
                                        <div class="form-row d-flex row">
                                            <div class="form-group col-md-6 col-12 mb-3">
                                                <label class="name pb-1 edit-input" for="">How Many Influencers/Participants
                                                    <span class="text-danger"> *</span></label>
                                                <input type="text" maxlength="6"
                                                    class="form-control edit-admin-participant"
                                                    placeholder="Number of Influencers/Participants"
                                                    value="{{ $authUser->total_participants }}"
                                                    id="edit-admin-Participants">
                                            </div>
                                            <div class="form-group col-md-6 col-12 mb-3">
                                                <label class="name pb-1" for="">App Per Influencer/Participant <span
                                                        class="text-danger"> *</span></label>
                                                <input type="text" maxlength="6"
                                                    class="form-control edit-per-participant"
                                                    placeholder="Min. of 10 apps"
                                                    value="{{ $authUser->apps_per_participants }}"
                                                    id="edit-admin-per-participant">
                                            </div>
                                        </div>
                                        <div class="form-row d-flex row">
                                            <div class="form-group col-md-6 col-12 mb-3">
                                                <label class="name pb-1 edit-input" for="">App Sales Goal <span
                                                        class="text-danger"> *</span></label>
                                                <input type="text" class="form-control  edit-sales-goal"
                                                    placeholder="" value="{{ $authUser->apps_sales_goal }}"
                                                    id="edit-admin-app-sales" disabled>
                                            </div>
                                            <div class="form-group col-md-6 col-12 mb-3">
                                                <label class="name pb-1" 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
                                                <!-- @php
                                                    // Group prices by plan_id
                                                    $groupedPrices = $appPrices->groupBy('plan_id');
                                                @endphp

                                                    @foreach ($groupedPrices as $planId => $prices)
    @if ($planId == $organization->plan_id)
    @php
        $annualPrice = $prices->firstWhere('name', 'Annually')?->amount;
        $monthlyPrice = $prices->firstWhere('name', 'Monthly')?->amount;
    @endphp

                                                            @if ($annualPrice && $monthlyPrice)
    <input type="text" disabled
                                                                    class="form-control edit-per-participant-username edit-app-price"
                                                                    placeholder=""
                                                                    value="{{ str_replace('$', '', $annualPrice) }} - {{ str_replace('$', '', $monthlyPrice) }}">
@elseif ($annualPrice)
    <input type="text" disabled
                                                                    class="form-control edit-per-participant-username edit-app-price"
                                                                    placeholder=""
                                                                    value="{{ str_replace('$', '', $annualPrice) }} (Annually)">
@elseif ($monthlyPrice)
    <input type="text" disabled
                                                                    class="form-control edit-per-participant-username edit-app-price"
                                                                    placeholder=""
                                                                    value="{{ str_replace('$', '', $monthlyPrice) }} (Monthly)">
    @endif
    @endif
    @endforeach -->
                                            </div>
                                        </div>
                                        <div class="form-row d-flex row">
                                            <div class="form-group col-md-6 col-12 mb-3">
                                                <label class="name pb-1 edit-input" for="">State<span
                                                        class="text-danger"> *</span></label>
                                                <select class="rounded-2 p-4 state form-select" name="state_id"
                                                    id="edit-admin-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="form-group col-md-6 col-12 mb-3">
                                                <label class="name pb-1" for="">City <span class="text-danger">
                                                        *</span></label>
                                                <select class="rounded-2 p-4 city form-controler" name="city_id"
                                                    id="edit-admin-city" data-zip-code="{{ $authUser->zip_code }}" data-city-name="{{ $authUser->city }}">
                                                    <option value="" selected>Select City</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-row d-flex row">
                                            <div class="form-group col-12 mb-3">
                                                <label class="name pb-1 edit-input" for="">Address <span
                                                        class="text-danger"> *</span></label>
                                                <input type="text" class="form-control"
                                                    placeholder="Enter Your Address" value="{{ $authUser->address }}"
                                                    id="edit-admin-address">
                                                <small class="text-danger individual-adress-error my-0 py-0"></small>
                                            </div>
                                            <div class="form-group col-12 col-lg-6 mb-3">
                                                <label for="edit-admin-formFile" class="name edit-input pb-1">Choose
                                                    organization Image</label>
                                                <div class="file-input-wrapper form-group">
                                                    <button type="button" class="btn btn-blue"
                                                        id="admin-choose-file">Choose File</button>
                                                    <input type="text" id="admin-file-name"
                                                        class="form-control file-input-text border-start-0" readonly
                                                        placeholder="No file chosen" value="{{ $organization->image }}">
                                                    <input type="file" id="admin-file-input" style="display: none;"
                                                        accept=".jpg, .jpeg, .png">
                                                    <input type="hidden" id="key-admin" name="key">
                                                    <input type="hidden" id="adminRemoveImage" name="removeImage"
                                                        value="N">
                                                    <button type="button" class="btn border-start-0"
                                                        id="admin-image-cancel-button">
                                                        <i class="fas fa-times text-danger"></i>
                                                    </button>
                                                </div>
                                                <div class="text-grey mt-2">
                                                    <small>(Only jpeg, jpg & png are allowed) This photo is not mandatory
                                                        but can be sent with share app feature.</small>
                                                </div>
                                            </div>
                                            <div class="form-group col-12 col-lg-6 mb-3">
                                                <label class="name pb-1" for="">Facebook/Website Link</label>
                                                <input type="text" class="form-control edit-per-participant-username"
                                                    placeholder="https://example.com" value="{{ $organization->link }}"
                                                    id="edit-admin-website">
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn admin-edit-submit btn-blue px-5"
                                        data-admin-id="{{ $authUser->id }}" id="update-admin">Submit</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- change password model --}}
                    <div class="modal fade " id="admin-change-password" data-bs-backdrop="static"
                        data-bs-keyboard="false" tabindex="-1" aria-labelledby="changePasswordLabel"
                        aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered">
                            <div class="modal-content rounded-4">
                                <div class="d-flex justify-content-between px-5 py-4 admin-modal-header"
                                    style="border-top-left-radius: 20px; border-top-right-radius: 20px; border-bottom: 1px solid grey;">
                                    <h6 class="modal-title fw-semibold">Change Password</h6>
                                    <button type="button" class="btn-close admin-edit-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 text-dark">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 text-dark">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 text-dark">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-start mt-4">
                                            <button type="button" data-param="pageLoad" class="btn btn-blue px-5"
                                                id="create_password">Submit</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {{-- participant list table --}}
            <div class="row p-0">
                <div class="col-12 p-0 mb-4">
                    <div class="participant-table mt-3 rounded-4 bg-white p-3 px-md-4">
                        <div class="d-md-flex justify-content-between align-items-center mb-3">
                            <p class="fw-bold mb-0 part-head">Influencer's / Participant's list</p>
                            <div class="pe-0 my-lg-3 d-sm-flex justify-content-center align-items-center">
                                <div class="order-sm-2 my-3 my-md-0 text-end">
                                    <a href="" class="border export-btn px-4 py-1 rounded-2 text-white text-nowrap"
                                        id="exportBtn" target="_self">
                                        <i class="fa-solid fa-arrow-up-from-bracket me-2"></i>Export Influencer's / Participant's list
                                    </a>
                                </div>
                                <div class="search-container me-2" id="admin-search-container">
                                    <div class="search-input">
                                        {{-- <span class="search-icon">
                                            <i class="fa fa-search"></i>
                                        </span> --}}
                                        <input type="search" id="search-participant" placeholder="Search by Name" />
                                    </div>
                                    <button id="button-addon5" type="submit" class="search-button">
                                        <i class="fa fa-search"></i>
                                    </button>
                                </div>

                                <!-- <div class="order-sm-1 text-end search-container m-1" id="admin-search-container">
                                                        <div class="input-group d-flex">
                                                            <input class="icon-search border rounded-2 py-0 ps-5" type="search" placeholder="Search by Name" id="search-participant">
                                                            <div class="input-group-append">
                                                                <button id="button-addon5" type="submit" class="btn btn-blue px-lg-4 py-1"><i class="fa fa-search"></i></button>
                                                            </div>
                                                        </div>
                                                    </div> -->
                            </div>
                        </div>

                        <div class="table-responsive table-responsive-coustom">
                            <table class="table custom-table" id="admin-participants-list-table">
                                <thead class="table-heading">
                                    <tr class="">
                                        <th class="p-2 rounded-start">S.No</th>
                                        <th class="p-2">Name</th>
                                        <th class="p-2">Email</th>
                                        <th class="p-2">Username</th>
                                        <th class="p-2">Code</th>
                                        <th class="p-2">Apps Sold</th>
                                        <th class="p-2">Pay It Forward™</th>
                                        <th class="p-2 rounded-end"> Kick It Back™</th>

                                    </tr>
                                </thead>
                                <tbody id="admin-participants-list-table-body">
                                    @foreach ($participantsList as $participantList)
                                        <tr class="table-data">
                                            <td data-label="S.No" class="p-2">{{ $loop->iteration }}</td>
                                            <td data-label="Name" class="p-2">
                                                <a class="text-decoration-none cursor-pointer text-brown participant-data-list"
                                                    data-user-id="{{ $participantList->user_id }}"
                                                    data-organization-id="{{ $organization->id }}">
                                                    {{ $participantList->first_name . ' ' . $participantList->last_name }}
                                                </a>
                                            </td>
                                            <td data-label="Email" class="p-2">{{ $participantList->email }}</td>
                                            <td data-label="Username" class="p-2">{{ $participantList->username }}
                                            </td>
                                            <td data-label="Code" class="p-2 text-pink">
                                                {{ $participantList->code . ' - ' . $participantList->personal_code }}
                                            </td>
                                            <td data-label="Apps Sold" class="p-2">
                                                {{ $participantList->sponsor_payment_count }}
                                            </td>
                                            <td data-label="Pay It Forward™" class="p-2">
                                                ${{ number_format($participantList->total_pay_it_forward ?? 0, 2) }}
                                            </td>
                                            <td data-label="Kick It Back™" class="p-2">
                                                ${{ number_format($participantList->total_kick_it_back ?? 0, 2) }}
                                            </td>

                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            {{-- invite participant  --}}
            {{-- <div class="modal fade admin-contact-supporters" id="admin-contact-supporters" data-bs-backdrop="static"
                data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-lg">
                    <div class="modal-content">
                        <div class="modal-header contact-supporters-header">
                            <h1 class="modal-title" id="staticBackdropLabel">Invite Participants</h1>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body px-lg-5">
                            <div class="d-flex flex-column">
                                <label for="">To Email: <span class="text-danger">*</span></label>
                                <input type="text" id="to-email" name="to email" class="form-control to-email mt-2"
                                    placeholder="To Email">
                            </div>
                            <div class="d-flex flex-column">
                                <label for="" class="mb-2 mt-3">Subject: <span
                                        class="text-danger">*</span></label>
                                <input type="text" class="form-control subject" disabled
                                    value="Join Our Fundraiser on FundMeSmart - A Great Opportunity to Give Back!">
                            </div>
                            <div class="d-flex flex-column">
                                <label for="" class="my-3">Message: <span class="text-danger">*</span></label>

                                <div class="border border-1 rounded-3  invite-participant-message">

                                    <div class="p-3" id="editor">
                                        Dear Participants,
                                       I am thrilled to share with you our upcoming fundraiser, where we will be
                                            utilizing the innovative platform called FundMeSmart. This fundraiser is a vital
                                            initiative to raise funds for our program and the valuable benefits it offers to
                                            our community.
                                        At the heart of our fundraiser is the opportunity to give back to our generous
                                            donors by offering them a mobile traveling and dining coupon book packed with
                                            incredible savings. With this coupon book, our donors can enjoy exclusive deals
                                            and savings throughout the year, potentially saving thousands of dollars, all
                                            while supporting our cause with a small donation.
                                       To get started, simply click on the link below to access your participant
                                            dashboard. From there, you can easily promote and share this user-friendly
                                            mobile coupon app with amazing deals available in every corner of the United
                                            States. Your efforts in spreading the word will not only help us reach our group
                                            and individual fundraising goals but also make a significant impact on our
                                            program's success.
                                       Once you sign in as a Participant of our fundraiser, I will be able to see you in
                                            my administrative dashboard and watch you progress throughout the life of our
                                            fundraiser. Not only do we get Off the Top income from the fundraiser we also
                                            receive ongoing gifts as your donors give and save.
                                       Together, we can make a difference! Thank you for your participation and
                                            dedication to our cause. Wishing you the best of luck as you engage with our
                                            fundraiser and share the gift of savings with your friends and family
                                            nationwide.
                                        <p><a href="{{ env('APP_URL') }}participant?r=3&steps=participant&code={{ $organization->code }}-{{ $authUser->personal_code }}"
        class="">Click here</a> to access your participant dashboard and get
        started today!</p><br>
        <p>Warm regards,</p>
        <p>{{ $authUser->username }}</p>

    </div>
</div>
</div>
<div class="my-4">
    <button type="button" class="btn btn-blue px-5 admin-invite-participants">Submit</button>
</div>
</div>
</div>
</div>
</div> --}}

            {{-- notify to participant --}}
            <div class="modal fade admin-send-notification-modal" id="admin-send-notification" data-bs-backdrop="static"
                data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-lg">
                    <div class="modal-content">
                        <div class="modal-header send-notification-header" style="background-color: rgb(91, 23, 31) !important; color: white !important;">
                            <h1 class="modal-title" id="staticBackdropLabel">Send Notification to Your Influencers/Participants</h1>
                            <button type="button" class="btn-close admin-edit-close-btn" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body px-lg-5">
                            <div class="d-flex flex-column">
                                <label for="">From<span class="text-danger">*</span></label>
                                <input type="text" class="form-control my-2" placeholder="johndoe@gamil.com"
                                    id="from-mail" value="{{ $authUser->email }}" disabled>
                            </div>
                            <div class="d-flex flex-column">
                                <label for="select-email-to" class="my-2">To<span class="text-danger">*</span></label>
                                <div class="custom-select-wrapper"
                                    style="position: relative; display: inline-block; width: 100%;">
                                    <select class="example-basic-multiple" name="states[]" multiple="multiple"
                                        id="select-email-to" style="width: 100%; padding-right: 30px; padding: 10px;">
                                        <option value="select_all">Select All</option>
                                        @foreach ($participantMailList as $MailList)
                                            <option>{{ $MailList->email }}</option>
                                        @endforeach
                                    </select>
                                    <span class="custom-dropdown-icon-d"
                                        style=" z-index: 1055 !important;position: absolute; top: 50%; right: 10px; transform: translateY(-50%); font-size: 14px;cursor:pointer;">
                                        <i class="fa fa-chevron-down"></i>
                                    </span>
                                </div>
                            </div>


                            <div class="d-flex flex-column">
                                <label for="" class="my-3">Message<span class="text-danger">*</span></label>
                                <textarea name="" id="message-mail" cols="30" rows="8" class="rounded-3 p-2"></textarea>
                                <small id="mail-char-count" class="form-text text-muted">Characters used: <span
                                        id="mail-count">0</span> /255</small>
                            </div>
                            <div class="my-4">
                                <button type="button" class="btn btn-blue send-participant-mail px-5">Submit <span
                                        id="login-spinner" class="spinner-border spinner-border-sm d-none" role="status"
                                        aria-hidden="true"></span></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- notify to supporters --}}

            <div class="modal fade admin-send-notification-modal" id="admin-send-notification-supporters"
                data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel"
                aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-lg">
                    <div class="modal-content">
                        <div class="modal-header send-notification-header" style="background-color: rgb(91, 23, 31) !important; color: white !important;">
                            <h1 class="modal-title" id="staticBackdropLabel">Send Notification to Your Supporters</h1>
                            <button type="button" class="btn-close admin-edit-close-btn" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body px-lg-5 supporter-notify pt-4">
                            <div class="d-flex flex-column">
                                <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>
                            <div class="d-flex flex-column">
                                <label for="" class="my-3">Message<span class="text-danger">*</span></label>
                                <textarea name="" id="notify-supporter-content" cols="30" rows="8"
                                    class="rounded-3 p-2 notify-supporter-content"></textarea>
                                <small id="supporter-char-count" class="form-text text-muted">Characters used: <span
                                        id="supporter-count">0</span> /255</small>

                            </div>
                            <div class="my-4">
                                <button type="button" class="btn btn-blue px-5" id="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"></span>
                                </button>
                            </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="cropButton">Submit</button>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>




    @include('layout.footer')
    @Vite(['resources/js/validation.js'])
    @vite(['resources/js/admin_signup.js'])
    @vite(['resources/js/pages/admin.js'])
    @vite(['resources/js/city.js'])
    @vite(['resources/js/changepassword.js'])
    @vite(['resources/js/pagination.js'])
    @vite(['resources/js/progress_bar/admin_progress.js'])
    @vite(['resources/js/supporter_notification.js'])
@endsection