@extends('app')
@section('content')
    @include('layout.header')
    @include('components.loader')
    <div class="mt-4 participant-detail-container">
        <div class="d-flex align-items-center justify-content-center">
            <div class="green-card-row rounded-4 bg-white p-3">
                <div class="row">
                    <div class="data-count">
                        <div class="d-sm-flex align-items-center py-2 text-center text-sm-start justify-content-between">
                            @php
                                $imagePath = 'organization_image/' . $participant->image;
                                $imageUrl = null;
                                if (Storage::exists('public/' . $imagePath) && $participant->image) {
                                    $imageUrl = asset('storage/' . $imagePath);
                                } else {
                                    $imageUrl = Vite::asset('resources/images/profile_img.webp');
                                }
                            @endphp

                            <div
                                class="organization-info d-sm-flex justify-content-center py-2 py-md-0 fs-5 align-items-center ps-2 text-center text-sm-start">
                                <img src="{{ $imageUrl }}" alt="Organization image" class="organization-image">
                                <span
                                    class="ms-2 fw-bold text-blue">{{ $participant->first_name . ' ' . $participant->last_name }}</span>
                                <span class="px-2 fw-bold text-blue">-</span>
                                <span
                                    class="cause fw-bold text-blue">{{ $participant->code . '-' . $participant->personal_code }}</span>
                            </div>
                            <div>
                                <a class="btn btn-brown switch-color p-lg-2 px-3" href="{{ '/admin-dashboard' }}">Go Back to
                                   Campaign Manager/Admin
                                    Dashboard</a>
                            </div>

                        </div>
                        <p class="fw-semibold welcome-text my-2 px-2 ">Welcome,
                            {{ $participant->first_name . ' ' . $participant->last_name }}!
                        </p>
                        <div class="row mx-auto my-3">
                            <div class="col-12 col-xl-8 rounded-5">
                                <div class="row">
                                    <div class="col-12 col-lg-4">
                                        <div class="icon-data-card">
                                            <div class="d-flex align-items-center sales-card activity-goal px-3 rounded-4">
                                                <img src="{{ Vite::asset('resources/images/participant_activity_goal.webp') }}"
                                                    alt="image" class="participant-dashboard-icons mb-3 mt-3">
                                                <div class="body ms-3">
                                                    <p class="fw-semibold mb-2 fs-6">{{ $authUser->apps_sales_goal ?? 0 }}</p>
                                                    <p class="mb-0 text-nowrap">Activity Goal</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="icon-data-card col-12 col-lg-8">
                                        <div class="rounded-5">
                                            <div class="head text-center" style="background-color: #675afa;">
                                                App Sales Amount - ${{ number_format((($yearlySubscription ?? 0) + ($monthlySubscription ?? 0)), 2, '.', ',') ?: '0.00' }}
                                            </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="participant-dashboard-icons">
                                                </div>
                                                <div class="p-2 text-center">
                                                    Yearly Subscription - <span class="fw-semibold">${{ number_format($yearlySubscription, 2, '.', ',') ?: '0.00' }}</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">${{ number_format($monthlySubscription, 2, '.', ',') ?: '0.00' }}</span>
                                                </div> -->
                                                <div class="text-center d-none d-sm-block">
                                                    <img src="{{ Vite::asset('resources/images/subscription.webp') }}" alt="image" class="participant-dashboard-icons">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-lg-4">
                                        <div class="icon-data-card">
                                            <div class="d-flex align-items-center sales-card sales-target px-3 rounded-4">
                                                <p class="pt-3">
                                                    <img src="{{ Vite::asset('resources/images/participant_sales_target.webp') }}"
                                                        alt="image" class="participant-dashboard-icons">
                                                </p>
                                                <div class="body ms-3">
                                                    <p class="fw-semibold mb-2 fs-6">
                                                        {{ $authUser->apps_per_participants ?? 0 }}
                                                    </p>
                                                    <p class="mb-0">Personal Goal</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="icon-data-card col-12 col-lg-8">
                                        <div class="rounded-5">
                                            <div class="head text-center" style="background-color: #ff947a;">
                                                Total Apps Sold - {{ ($sponsorPaymentCount ?? 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="participant-dashboard-icons">
                                                </div>
                                                <div class="p-2 text-center">
                                                    Apps Bought - <span class="fw-semibold">{{ $sponsorPaymentCount ?? 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="participant-dashboard-icons">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="icon-data-card 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="participant-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="participant-dashboard-icons">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-xl-4 rounded-5 d-flex justify-content-center align-items-center">
                                <div class="bg-progress mt-3 mt-xl-0 p-3 w-100">
                                    <div class="raised-by-activity p-3 mb-3 mb-xxl-0">
                                        <div class="d-flex justify-content-between my-2">
                                            <p class="fw-semibold mb-2">Progress Bar</p>
                                            <p class="fw-semibold mb-2">{{ $progressPercentage }}%</p>
                                        </div>

                                        <div class="progress">
                                            <div class="progress-bar rounded-5" role="progressbar"
                                                style="width: {{ $progressPercentage }}%"
                                                aria-valuenow="{{ $progressPercentage }}" aria-valuemin="0"
                                                aria-valuemax="100"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row mx-auto justify-content-between mt-5">
                            <div class="col-xl-3 col-md-6 mb-3">
                                <div class="card p-3 bg-participant-data d-flex justify-content-center align-items-center">
                                    <p>Personal Code</p>
                                    <p>{{ $participant->code . '-' . $participant->personal_code }}</p>
                                </div>
                            </div>
                            <div class="col-xl-3 col-md-6 mb-3">
                                <div class="card p-3 bg-participant-data d-flex justify-content-center align-items-center">
                                    <p>Personal Goal</p>
                                    <p id="personal-goal-text">{{ $participant->activity_description ?? "----" }}</p>
                                </div>
                            </div>
                            <div class="col-xl-3 col-md-6 mb-3">
                                <div class="card p-3 bg-participant-data d-flex justify-content-center align-items-center">
                                    <p>Organization</p>
                                    <p>{{ $participant->name }}</p>
                                </div>
                            </div>
                            {{-- <div class="col-xl-3 col-md-6 mb-3">
                                <div class="card p-3 bg-participant-data d-flex justify-content-center align-items-center">
                                    <p>Activity/Cause</p>
                                    <p>{{ $authUser->cause }}</p>
                                </div>
                            </div> --}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="d-flex align-items-center justify-content-center">
            <div class="green-card-row rounded-4 bg-white p-4 pt-sm-5 px-sm-5 my-4">
                <p class="fw-semibold text-green">{{ $participant->first_name ?? '' }}
                    {{ $participant->last_name ?? '' }} : You have sold {{ $sponsorPaymentCount ?? 0 }} {{ ($sponsorPaymentCount ?? 0) <= 1 ? 'app' : 'apps' }} and gifted  {{ $giftApp ?? 0 }} {{ ($giftApp ?? 0) <= 1 ? 'app' : 'apps' }} :</p>
                <div class="table-responsive table-responsive-coustom">
                    <table width="100%" class="table custom-table" id="participant-detail-app-sold">
                        <thead class="table-heading py-4">
                            <tr class="m-3 text-dark">
                                <th width="15%" class="p-2 text-dark rounded-start">#</th>
                                <th width="25%" class="p-2 text-dark">Name</th>
                                <th width="35%" class="p-2 text-dark">Email Address</th>
                                <th width="25%" class="p-2 text-dark">Subscriptions</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>
                        <tbody class="table-body-participant">
                            @php
                            // Group the sponsor payments by sponsor_id and calculate the sums
                            $groupedPayments = $sponserPayments
                                ->groupBy('sponsor_id')
                                ->map(function ($group) {
                                    return [
                                        'first_name' => $group->first()->first_name,
                                        'last_name' => $group->first()->last_name,
                                        'email' => $group->first()->email,
                                        'name' => $group->first()->name,
                                        'pay_it_forward' => $group->sum('pay_it_forward'),
                                        'kick_it_back' => $group->sum('kick_it_back'),
                                    ];
                                });
                        @endphp

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


                        </tbody>
                    </table>

                </div>
            </div>
        </div>
    </div>
    @vite(['resources/js/pagination.js'])
    @vite(['resources/js/pages/admin/participant_details.js'])
    @include('layout.footer')
@endsection