@extends('app')
@section('content')
    @include('layout.admin_sidebar')
    <div class="">
        <div class="d-flex">
            <div class="activityindividual-contanier d-flex flex-column flex-grow-1  px-3 pt-4">
                <div class="user-title text-brown pb-1" id="user-title">Activity Individuals</div>
                <!-- search container -->
                <div class="activityindividual-searchContainer d-flex justify-content-between flex-column flex-md-row">
                    <div class="d-flex flex-wrap align-items-center gap-3 gap-md-0">
                        <label for="">Search by Individual Name or Email: &nbsp;</label>

                        <div class="individual-search position-relative">
                            <input type="text" placeholder="Enter Individual Name or Email"
                                class="individual-input rounded-1 ps-2" id="individual-search-input">
                            <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="individual-search-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="actind-reset-btn"> Reset</button>
                        </div>
                    </div>
                    <!-- <div class="py-md-0 pt-3 text-md-end individualcreate">
                        <button class="edit btn-individualcreate border-0 text-light py-1 px-2 rounded-1">Create New</button>
                    </div> -->

                </div>
                <!-- laptop view -->
                <div class="table-responsive individualtable_container d-none d-xl-block pt-0" id="individual-overall">
                    <table class="table individual-table text-center w-100" id="individual_table">
                        <thead class="bg-brown text-light individual-thead">
                            <tr>
                                <!-- <th class="border-end "><input type="checkbox" class="bg-brown" id="checkAll"></th> -->
                                <th class="border-end ">#</th>
                                <th class="border-end ">Individual 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 ">Individual Code</th>
                                <th class="border-end ">Status</th>
                                <th class="border-end second">Action</th>
                            </tr>
                        </thead>
                        <tbody class="individual-tbody">
                            @if ($users && $users->count() > 0)
                                @foreach ($users as $index => $user)
                                    <tr class="individual-tr">
                                        <!-- <td class="border-end"><input type="checkbox" class="check"></td> -->

                                        <td width="5%" class="border-end">{{ $index + 1 }}</td>
                                        <td width="15%" class="border-end  text-wrap">
                                            {{ $user->first_name . ' ' . $user->last_name }}</td>
                                        <td width="20%" class="border-end  text-wrap">{{ $user->email }}</td>
                                        <td width="15%" class="border-end">{{ $user->name ?? '-' }}</td>

                                        {{-- <td width="15%" class="border-end  text-wrap">{{ $user->cause }}</td> --}}
                                        <td width="10%" class="border-end">{{ $user->sales_count }}</td>

                                        <td width="15%" class="border-end">{{ $user->code . ' - ' . $user->personal_code }}
                                        </td>
                                        <!-- <td class="border-end">
                                    <button class="btn btn-sm individual-active-btn py-0 text-light">Active</button>
                                </td> -->
                                        <td width="10%" class="border-end">
                                            <button id="statusButton-mbl"
                                                class="btn btn-sm user-active-btn py-0 text-light user-inactive-btn"
                                                style="pointer-events: none; cursor: default;" data-id="{{ $user->id }}"
                                                data-status="{{ $user->status }}">

                                                @if ($user->status == 0)
                                                    Activate
                                                @else
                                                    Inactivate
                                                @endif
                                            </button>
                                        </td>
                                        <td width="10%" class="position-relative border-end">
                                            <i class="fa-solid fa-ellipsis-vertical fa-xl text-green py-2"
                                                role="button"></i>
                                            <div class="hidden-div px-4 text-start bg-light py-2" style="display:none;">
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            @else
                                <tr class="empty-table">
                                    <td colspan="9" class="text-center">No Individuals Are Available.</td>
                                </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
                <!-- mobile view -->
                <div class="individual-mobile-view d-flex flex-column d-xl-none pb-3" id="individual_mobile">
                    @if ($users && $users->count() > 0)
                        @foreach ($users as $index => $user)
                            <div class="user-mobile-item mb-3 status-tag">
                                <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="inidividual-name  text-wrap">{{ $user->first_name . ' ' . $user->last_name }}</span>
                                    </div>
                                    <div>
                                        <button id="statusButton-mbl"
                                            class="btn btn-sm user-active-btn py-0 text-light user-inactive-btn"
                                            style="pointer-events: none; cursor: default;" data-id="{{ $user->id }}"
                                            data-status="{{ $user->status }}">

                                            @if ($user->status == 0)
                                                Activate
                                            @else
                                                Inactivate
                                            @endif
                                        </button>
                                        <!-- <button class="btn btn-success btn-sm user-btn me-3 ms-2">Active</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 pe-2">Email:</span>
                                        <span class="value inidividual-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 pe-2">Organization:</span>
                                        <span class="text-end  text-wrap">{{ $user->name ?? '-' }}</span>

                                    </div>
                                    {{-- <div class="mobile-body-content d-flex justify-content-between py-3 mx-3">
                            <span class="user-label pe-2">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 pe-2">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 pe-2">Individual Code:</span>
                                        <span
                                            class="value status text-wrap">{{ $user->code . ' - ' . $user->personal_code }}</span>
                                    </div>
                                    <div class="mobile-body-content d-flex justify-content-between py-3 mx-3">
                                        <span class="user-label pe-2">Action:</span>
                                        <span class="value status mobile-more">
                                            <i class="fa-solid fa-ellipsis-vertical fa-xl text-green"></i>
                                            <div class="hidden-div bg-light py-2 px-3 text-start">

                                            </div>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @else
                        <span class="text-center">No Individuals 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 Individual</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="">Individual 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="">Individual 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 class="modal fade" id="confirmToggleModal" tabindex="-1" aria-labelledby="confirmToggleModalLabel"
                aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header" style="background-color: rgb(91, 23, 31) !important;
    color: white !important;">
                            <h5 class="modal-title text-light" id="confirmToggleModalLabel">Confirm Action</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body" id="confirmToggleModalBody">

                        </div>
                        <div class="modal-footer">
                            <button type="button" id="confirmToggleBtn" class="btn btn-primary">Yes, Continue</button>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @vite(['resources/js/pages/admin_dashboard.js'])
    @vite(['resources/js/admin_panel/addform_sidepanel.js'])

    @vite(['resources/js/admin_panel/activity_individual.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'])

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

@endsection