@extends('app')
@section('content')
    @include('layout.admin_sidebar')

    <div class="">
        <div class="d-flex">
            <div class="activityparticipant-contanier d-flex flex-column flex-grow-1 px-3 pt-4 pb-2 pb-xl-0">
                <div class="user-title text-brown pb-2" id="user-title">Activity Influencers/Participants</div>
                <!-- search container -->
                <div class="activityparticipant-searchContainer d-flex  justify-content-between  flex-column flex-md-row ">
                    <div class="d-flex flex-wrap align-items-center gap-1 gap-md-0">
                        <label for="">Search by Influencer/Participant Name or Email: &nbsp;</label>
                        <div class="participant-search position-relative">
                            <input type="text" placeholder="Enter Influencer/Participant Name or Email"
                                class="participant-input rounded-1 ps-2" id="activityparticipant-search">
                            <button class="position-absolute top-0 end-0 px-3 border-0 bg-blue text-light h-100 rounded-1 cus-bg-dark-blue"
                                id="activityparticipant-search-bar-btn"><i
                                    class="fa-solid fa-magnifying-glass fa-lg"></i></button>
                        </div>
                        <div class=" py-md-0 pt-0 text-md-end organizationcreate ps-md-2">
                            <button class="btn-organizationcreate border-0 text-light py-1 px-2 rounded-1 cus-bg-dark-blue"
                                id="actpart-reset-btn"> Reset</button>
                        </div>
                    </div>
                    <!-- <div class=" py-md-0 pt-3 text-md-end participantcreate  ">

                        <button class="edit btn-participantcreate border-0 text-light py-1 px-2 rounded-1">Create New</button>
                    </div> -->
                </div>
                <!-- laptop view -->
                <div class="table-responsive participanttable_container d-none d-xl-block pt-0 ">
                    <table class=" table bg-white participant-table text-center w-100" id="activityparticipant_table">
                        <thead class="bg-brown  text-light participant-thead">
                            <tr>
                                <!-- <th class="border-end "><input type="checkbox" class="bg-brown" id="checkAll"></th> -->
                                <th class="border-end ">#</th>
                                <th class="border-end ">Influencer/Participant Name</th>
                                <th class="border-end ">Email</th>
                                <th class="border-end ">Organization</th>
                                {{-- <th class="border-end ">Activity/Cause</th> --}}
                                <th class="border-end ">Sales</th>
                                <th class="border-end ">Influencer/Participant Code</th>
                                <th class="border-end ">Status</th>
                                <th class="border-end d-none">Edit</th>
                            </tr>
                        </thead>
                        <tbody class="participant-tbody">
                            @if ($users && $users->count() > 0)
                                @foreach ($users as $index => $user)
                                    <tr class="participant-tr">
                                        <!-- <td class=" " class="border-end"><input type="checkbox" class="check"></td> -->
                                        <td width="5%" class=" ">{{ $index + 1 }}</td>
                                        <td width="15%" class=" ">{{ $user->first_name . ' ' . $user->last_name }}
                                        </td>
                                        <td width="20%" class="text-wrap">{{ $user->email }}</td>
                                        <td width="15%" class="text-wrap ">{{ $user->organization_name ?? '-' }}</td>
                                        {{-- <td width="15%" class=" ">{{ $user->cause}}</td> --}}
                                        <td width="10%" class=" ">{{ $user->sales_count }}</td>
                                        <td width="15%" class=" ">
                                            {{ $user->organization_code . ' - ' . $user->personal_code }}</td>
                                        <td>
                                            <button id="activityParticipantStatus"
                                                class="btn btn-sm py-0 text-light {{ $user->status == 0 ? 'admin-active-btn' : 'admin-inactive-btn' }}"
                                                style="pointer-events: none; cursor: default;">
                                                {{ $user->status == 0 ? 'Activate' : 'Inactivate' }}
                                            </button>
                                        </td>
                                        <td width="10%" class="d-none">
                                            <i class=" fa-regular fa-pen-to-square fa-xl text-brown"></i>
                                            <i class="fa-solid fa-trash-can fa-xl text-brown"></i>
                                        </td>
                                    </tr>
                                @endforeach
                            @else
                                <tr class="empty-table">
                                    <td colspan="9" class="text-center">No Participants Are Available. </td>
                                </tr>
                            @endif
                        </tbody>
                    </table>
                </div>

                <!-- mobile view  -->
                <div class="participant-mobile-view d-flex flex-column d-xl-none pb-3" id="activityparticipant_mobile">
                    @if ($users && $users->count() > 0)
                        @foreach ($users as $index => $user)
                            <div class="user-mobile-item mb-3 ">
                                <div class="user-mobile-header d-flex justify-content-between align-items-center ">
                                    <div class="user-label gap-3 d-flex align-items-center">
                                        <!-- <input type="checkbox" class=""> -->
                                        <span>{{ $index + 1 }}</span>
                                        <span
                                            class="participant-name  text-wrap">{{ $user->first_name . ' ' . $user->last_name }}</span>
                                    </div>
                                    <div class="d-flex align-items-center">
                                        <button
                                            class="btn btn-sm px-3 py-1 {{ $user->status == 0 ? 'admin-active-btn' : 'admin-inactive-btn' }}"  style="pointer-events: none; cursor: default;">
                                            {{ $user->status == 0 ? 'Activate' : 'Inactivate' }}
                                        </button>
                                        <i class="fa-solid fa-angle-down ms-2"></i>
                                    </div>
                                </div>
                                <div class="user-mobile-body bg-light  pb-3">
                                    <div class=" mobile-body-content d-flex justify-content-between py-3 mx-3">
                                        <span class="user-label">Email:</span>
                                        <span class="value participant-email  text-wrap">{{ $user->email }}</span>
                                    </div>
                                    <div class=" mobile-body-content d-flex justify-content-between py-3 mx-3">
                                        <span class="user-label">Organization:</span>
                                        <span class="text-end  text-wrap">{{ $user->organization_name ?? '-' }}</span>
                                    </div>
                                    {{-- <div class=" mobile-body-content d-flex justify-content-between py-3 mx-3">
                            <span class="user-label">Activity/Cause:</span>
                            <span class="value status  text-wrap">{{ $user->cause}}</span>
                        </div> --}}
                                    <div class=" mobile-body-content d-flex justify-content-between py-3 mx-3">
                                        <span class="user-label">Sales:</span>
                                        <span class="value status  text-wrap">{{ $user->sales_count }}</span>
                                    </div>

                                    <div class=" mobile-body-content d-flex justify-content-between py-3 mx-3">
                                        <span class="user-label">Influencer/Participant Code:</span>
                                        <span
                                            class="value status  text-wrap">{{ $user->organization_code . ' - ' . $user->personal_code }}</span>
                                    </div>
                                    <!-- <div class=" mobile-body-content d-flex justify-content-between py-3 mx-3">
                        <span class="user-label">Payments</span>
                        <span class="value status">
                            <i class="fa-regular fa-pen-to-square fa-xl text-brown" data-target="modal1"></i>
                            <i class="fa-solid fa-trash-can fa-xl text-brown" data-target="modal1"></i>
                        </span>
                        </div> -->

                                </div>
                            </div>
                        @endforeach
                    @else
                        <span class="text-center">No Participants Are Available.</span>
                    @endif

                </div>
                <div class="mobile-pagination-container bg-white align-items-center d-flex flex-column justify-content-between d-xl-none py-3 px-3"
                    style="box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 4px -2px, rgba(0, 0, 0, 0.1) 4px 0px 4px -2px, rgba(0, 0, 0, 0.1) -4px 0px 4px -2px"
                    id="user-pagination">
                    @if ($users && $users->count() > 0)
                       <div class="items-per-page-mobile text-center d-flex justify-content-center">
            <div>
                 <label for="items-per-page-dropdown" class="me-1 pt-1">Show</label>
            </div>

            <div>
                 <select id="items-per-page-dropdown" class="items-per-page-dropdown">
                <option value="10">10</option>
                <option value="15">15</option>
                <option value="20">20</option>
                <option value="25">25</option>
                <option value="-1">All</option>
            </select>
            </div>
            <div>
                 <label for="items-per-page-dropdown" class="entries-label ms-1 pt-1">entries</label>
            </div>

        </div>

                        <div id="pagination" class="text-center d-flex mt-3">
                            <!-- Previous Button -->
                            <a id="prev-button" class="p-1 me-2 rounded pre border-0 "
                                style="cursor: pointer; user-select: none; color: #333; padding: 5px 10px; border: 1px solid #ccc; border-radius: 5px; text-decoration: none;"
                                onmouseover="this.style.backgroundColor='#881e25'; this.style.color='white';"
                                onmouseout="this.style.backgroundColor='white'; this.style.color='#333';">
                                Previous
                            </a>

                            <!-- Pagination Numbers will be dynamically added here -->
                            <div id="pagination-numbers" class="d-flex"></div>

                            <!-- Next Button -->
                            <a id="next-button" class="p-1 ms-2 rounded next border-0"
                                style="cursor: pointer; user-select: none; color: #333; padding: 5px 10px; border: 1px solid #ccc; border-radius: 5px; text-decoration: none"
                                onmouseover="this.style.backgroundColor='#881e25'; this.style.color='white';"
                                onmouseout="this.style.backgroundColor='white'; this.style.color='#333';">
                                Next
                            </a>
                        </div>
                    @endif
                </div>

            </div>
            <!--add form-side panel -->
            <div class="admin-sidebar-add position-absolute end-0 bg-light  ">
                <div class=" edit-title  bg-brown text-light p-3 d-flex justify-content-between align-items-center">
                    <div>Add participant</div>
                    <i class="fa-solid fa-xmark " id="edit-cancel"></i>
                </div>

                <div class="text-sm-end edit-container pb-3 d-flex flex-column justify-content-between">
                    <div class="px-4 mb-3 ">
                        <div class="name-container edit-context   d-flex flex-column  d-sm-block">
                            <label class="edit-label mb-2 mb-sm-0" for="">Name<span
                                    class="text-danger">*</span>:</label>
                            <input type="text" class="edit-input py-1 ">
                        </div>
                        <div class="edit-context   d-flex flex-column  d-sm-block">
                            <label class="edit-label mb-2 mb-sm-0" for="">Organization<span
                                    class="text-danger">*</span>:</label>
                            <select id=" organization" name="organization" class="edit-input edit-dropdown py-1">
                                <option value="">-Select Organization-</option>
                                <option value="organization1">organization 1</option>
                                <option value="organization2">organization 2</option>
                                <option value="organization3">organization 3</option>
                                <!-- Add more city options as needed -->
                            </select>
                        </div>
                        <div class="edit-context  d-flex flex-column flex-sm-row justify-content-end flex-wrap">
                            <label class="edit-label mb-2 mb-sm-0" for="">Activities<span
                                    class="text-danger">*</span>:</label>
                            <textarea name="" id="" class=" edit-input edit-textarea "></textarea>
                        </div>
                        <div class="edit-context  d-flex flex-column  d-sm-block ">
                            <label class="edit-label mb-2 mb-sm-0" for="">Participant Username<span
                                    class="text-danger">*</span>:</label>
                            <input type=" file" class="edit-input py-1">
                        </div>
                        <div class="edit-context   d-flex flex-column  d-sm-block">
                            <label class="edit-label mb-2 mb-sm-0" for=" state">State<span
                                    class="text-danger">*</span>:</label>
                            <select id="state" name="state" class="edit-input edit-dropdown py-1">
                                <option value="">-Select a state-</option>
                                <option value="state1">state 1</option>
                                <option value="state2">state 2</option>
                                <option value="state3">state 3</option>
                                <!-- Add more city options as needed -->
                            </select>
                        </div>
                        <div class="edit-context  d-flex flex-column  d-sm-block">
                            <label class="edit-label mb-2 mb-sm-0" for="">City<span
                                    class="text-danger">*</span>:</label>
                            <input type=" text" class="edit-input  py-1">
                        </div>
                        <div class="edit-context  d-flex flex-column flex-sm-row justify-content-end flex-wrap">
                            <label class="edit-label mb-2 mb-sm-0" for="">Participant Goal<span
                                    class="text-danger">*</span>:</label>
                            <textarea name="" id="" class=" edit-input edit-textarea"></textarea>
                        </div>
                    </div>
                    <div class="text-end py-3 pe-4 edit-action-btn  bg-light">
                        <input class="btn-transparent-blue btn-edit-cancle  px-2 py-1 rounded me-1" type="button"
                            value="cancel">
                        <input class="btn-blue px-2 py-1 rounded btn-edit-save" type="button" value="save">
                    </div>
                </div>


            </div>

        </div>

    </div>
    @vite(['resources/js/pages/admin_dashboard.js'])

    @vite(['resources/js/admin_panel/activity_participant.js'])
    @vite(['resources/js/admin_panel/addform_sidepanel.js'])

    <!--search functionality for table-->
    @vite(['resources/js/admin_panel/search.js'])

    <!--search functionality for mobile-->
    @vite(['resources/js/admin_panel/mobile_search.js'])

    <!--pagination for table-->
    @vite(['resources/js/admin_panel/pagination.js'])

    <!--pagination for mobile-->
    @vite(['resources/js/admin_panel/paginationmobile.js'])

@endsection