@extends('app')
@section('content')
    @include('layout.home_link_header')
    <div class="home-container mb-5 mt-5 mt-lg-0 px-2 px-lg-5 whatis-participant">
        <div class="container-fluid">
            <div class="participant-dashboard what_participant-dashboard mt-3">
                <div class="mb-3">
                    <p class="tab-heading head-right mt-2">Welcome to the Influencer's/Participant's Dashboard</p>
                </div>
                <div class="row pt-3">
                     <div class="col-xl-8">
                        <div class="what-participant-video">
                            <video class="video-tag w-100" controls>
                                <source type="video/mp4" src="{{ Vite::asset('resources/videos/fms_training_video_participant_dashboard.mp4') }}">
                                Your browser does not support the video tag.
                            </video>
                        </div>
                     </div>
                    <div class="col-xl-4">
                        <div class="admin-dashboard-img-div mt-3 mt-xl-0 what-participant-img admin-dashboard-img-home">
                            <img loading="lazy" src="{{ Vite::asset('resources/images/participant_dashboard.webp') }}"
                                alt="admin_dashboard" class="w-100 object-fit-cover img-border">
                        </div>
                    </div>
                    <!-- parastarts -->
            <div class="mt-4">
                <div class="col-12">
                    <div class="uniform-line-height mbl-margin text-center">
                        <a class="px-3 py-3 mb-3 btn btn-blue " href="{{ '/register' }}">
                            Start Your Fundraising Campaign Now – It Only Takes 5 Minutes!
                        </a>
                    </div>
                </div>
            </div>
        <!-- tabs -->
        <div class="col-12 col-xl-12 mt-4">
                <div class="bg-light d-xxl-flex participant-card participant-card-page participant-card-sm pb-3 mb-3 px-2">
                <div class="row-flex-sm w-100">
                    <p class="head ps-xl-1 mb-0  px-3">Training Tools-</p>
                    <table width="100%" class="ms-3  mt-3">
                        <tbody>
                            <tr>
                                <td width="16%"><span class="d-xxl-none me-2">&bull;</span> Quick Start Guide to Fundraising Success Tools</td>
                                <td width="13%"><span class="d-xxl-none me-2">&bull;</span> Learn About the App through Video</td>
                                <td width="8%"><span class="d-xxl-none me-2">&bull;</span> Sales Training Video</td>
                                <td width="5%"><span class="d-xxl-none me-2">&bull;</span> Sales Tips</td>
                                <td width="8%"><span class="d-xxl-none me-2">&bull;</span> Print Leave Behind</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

                <!-- Sales Tools -->
            <div class="bg-light d-xxl-flex participant-card participant-card-page participant-card-sm pb-3 mb-3 px-2">
                <div class="row-flex-sm w-100">
                    <p class="head ps-xl-1 mb-0  px-5">Sales Tools-</p>
                    <table width="100%" class="ms-3  mt-3">
                        <tbody>
                            <tr>
                                <td width="15%" class="broder-right"><span class="d-xxl-none me-2">&bull;</span> Pre-Written Fundraiser specific letter</td>
                                <td width="10%"><span class="d-xxl-none me-2">&bull;</span> Notification to Supporters</td>
                                <td width="5%"><span class="d-xxl-none me-2">&bull;</span> Action Photo</td>
                                <td width="8%"><span class="d-xxl-none me-2">&bull;</span> Send App, Share App</td>
                                <td width="8%"><span class="d-xxl-none me-2">&bull;</span> Email Followups</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Real Time Sales Section -->
            <div class="bg-light d-xxl-flex participant-card participant-card-page participant-card-sm pb-3 mb-3 px-2">
            <div class="row-flex-sm w-100">
                <p class="head ps-xl-1 mb-0 mt-3">
                Real Time Sales<br>Section-
                </p>
                <table width="100%" class="ms-3 mt-3">
                <tbody>
                    <tr>
                    <td width="25%" style="white-space: normal; word-wrap: break-word;">
                        <span class="d-xxl-none me-2">&bull;</span>
                        Activity Goal, Personal Goal, Apps Sold, Apps Donated, Extra Donations, Total Sales
                    </td>
                    <td width="25%" style="white-space: normal; word-wrap: break-word;">
                        <span class="d-xxl-none me-2">&bull;</span>
                        Code, Influencer/Participant Goal, Activity  Campaign Manager / Administrator, Activity
                    </td>
                    <td width="25%" style="white-space: normal; word-wrap: break-word;">
                        <span class="d-xxl-none me-2">&bull;</span>
                        Name of supporter, email, donations
                    </td>
                    <td width="25%" style="white-space: normal; word-wrap: break-word;">
                        <span class="d-xxl-none me-2">&bull;</span>
                        Group totals, Gold, Silver and Bronze Medal Goals
                    </td>
                    </tr>
                </tbody>
                </table>
            </div>
         </div>
        <div class="d-md-flex my-3">
            <div class="bg-light small-card small-card-change d-flex align-items-center justify-content-center text-center w-100 p-3 me-3 mb-3" style="min-height: 100px;">
                Identifies Influencer/Participant
            </div>
            <div class="bg-light small-card small-card-change d-flex align-items-center justify-content-center text-center w-100 p-3 mb-3" style="min-height: 100px;">
                Influencer/Participant Code and Activity
            </div>
        </div>
       </div>
        </div>
      </div>
    </div>
</div>
    @include('layout.home_footer')
    @Vite(['resources/js/home.js'])
@endsection