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

<div class="">
    <div class="d-flex">
        <div class="users-contanier px-3 pt-4 pb-2 pb-lg-0 d-flex flex-column flex-grow-1">
            <div class="user-title text-brown pb-2">Users</div>
            <!-- search container -->
            <div class="user-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 Name or Email: &nbsp;</label>
                    <div class="user-search position-relative">
                        <input type="text" class="user-input rounded-1 ps-2" placeholder="Enter Name or Email" id="user-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="user-search-btn">
                            <i class="fa-solid fa-magnifying-glass fa-lg"></i>
                        </button>
                    </div>
                    <div class=" py-md-0 pt-3 text-md-end organizationcreate ps-md-2">
                        <!-- add user -->
                        <button class="btn-organizationcreate border-0 text-light py-1 px-2 rounded-1 cus-bg-dark-blue" id="actadmin-reset-btn">
                            Reset</button>
                    </div>
                </div>
                <!-- add user -->
                <div class=" py-md-0 pt-3 text-md-end organizationcreate ">
                    <button class="edit btn-organizationcreate border-0 text-light py-1 px-2 rounded-1 addbtn cus-bg-dark-blue"> Add User</button>
                </div>
            </div>
            <!-- laptop view -->
            <div class="table-responsive usertable_container d-none d-xl-block pt-0 ">
                <table class=" table bg-white donoruser-table text-center" id="userTable">
                    <thead class="bg-brown text-light user-thead">
                        <tr>
                            <!-- <th class="border-end"><input type="checkbox" id="checkAll"></th> -->
                            <th class="border-end">#</th>
                            <th class="border-end">Campaign Manager / Admin First name</th>
                            <th class="border-end">Campaign Manager / Admin Last name</th>
                            <th class="border-end">Username</th> <!-- New Username column -->
                            <th class="border-end">Email</th>
                            <th class="border-end">Status</th>
                            <th class="border-end">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="user-tbody">
                        @if($adminUsers && $adminUsers->count() > 0)
                        @foreach($adminUsers as $adminUser)
                        <tr class="user-tr status-tag">
                            <!-- <td class="border-end"><input type="checkbox" class="check"></td> -->
                            <td width="5%" class="border-end">{{ $loop->iteration }}</td>
                            <td width="15%" class="border-end ">{{ $adminUser->first_name }}</td>
                            <td width="15%" class="border-end">{{ $adminUser->last_name }}</td>
                            <td width="15%" class="border-end">{{ $adminUser->username }}</td> <!-- Display Username -->
                            <td width="20%" class="border-end">{{ $adminUser->email }}</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="{{ $adminUser->id }}" data-status="{{ $adminUser->status }}">
                                    @if($adminUser->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-brown"></i>
                                <div class="hidden-div py-3 px-2 text-sta   rt bg-light">
                                    <div id="deactivateOption-mbl" class="cursor-pointer deactivateOption-mbl ps-2 text-start user-inactive-btn py-2 bg-light active"></div>
                                    <div class="cursor-pointer py-2 ps-2 text-start userEdit" id="editIcon" data-id="{{ $adminUser->id }}">
                                        <i class="fa-regular fa-pen-to-square fa-lg pe-2 text-brown"></i>
                                        <span>Edit</span>
                                    </div>
                                    <div class="cursor-pointer py-2 ps-2 text-start userMailResend" id="" data-id="{{ $adminUser->id }}">
                                        <i class="fa-regular fa-envelope fa-lg pe-2 text-brown"></i>
                                        <span>Resend</span>
                                    </div>
                                    <div class="cursor-pointer py-2 ps-2 text-start delete-user" data-id="{{$adminUser->id}}">
                                        <i class="fa-regular fa-trash-can fa-lg pe-2 text-brown"></i>
                                        <span>Delete</span>
                                    </div>
                                </div>
                            </td>

                        </tr>
                        @endforeach
                        @else
                        <tr class="empty-table">
                            <td colspan="8" class="text-center">No User Are Available</td>
                        </tr>
                        @endif
                    </tbody>
                </table>
            </div>


            <!-- mobile view  -->
            <div class="user-mobile-view d-flex flex-column d-xl-none pb-3" id="user_mobile">
                @if($adminUsers && $adminUsers->count() > 0)
                @foreach($adminUsers as $adminUser)
                <div class="user-mobile-item status-tag 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 class="text-wrap">{{$loop->iteration }}</span>
                            <span class="users-name  text-wrap">{{$adminUser -> first_name.' '.$adminUser -> last_name}}</span>
                        </div>
                        <div class="d-flex align-items-center">
                            <button id="statusButton-mbl" class="statusButton-mbl btn btn-success btn-sm user-btn me-3 ms-2"  style="pointer-events: none; cursor: default;" data-id="{{$adminUser->id}}" data-status="{{$adminUser->status}}">
                                @if($adminUser->status == 0)
                                Activate
                                @else
                                Inactivate
                                @endif
                            </button>
                            <i class="fa-solid fa-angle-down"></i>
                        </div>
                    </div>
                    <div class="user-mobile-body bg-light pb-3">

                        <!-- Added Username Section -->
                        <div class="mobile-body-content d-flex justify-content-between py-3 mx-3">
                            <span class="user-label">Username:</span>
                            <span class="value user-value  text-wrap">{{$adminUser->username}}</span>
                        </div>

                        <!-- Email Section -->
                        <div class="mobile-body-content d-flex justify-content-between py-3 mx-3">
                            <span class="user-label">Email:</span>
                            <span class="value user-value users-email  text-wrap">{{$adminUser->email}}</span>
                        </div>

                        <div class="mobile-body-content d-flex justify-content-between py-3 mx-3">
                            <span class="user-label">Actions:</span>
                            <span class="value status mobile-more">
                                <i class="fa-solid fa-ellipsis-vertical fa-xl text-brown"></i>
                                <div class="hidden-div bg-light py-3 px-4 text-start">
                                    <div id="deactivateOption-mbl" class="cursor-pointer deactivateOption-mbl py-2">
                                    </div>
                                    <div class="cursor-pointer py-2 userEdit" id="editIcon" data-id="{{ $adminUser->id }}">
                                        <i class="fa-regular fa-pen-to-square fa-lg pe-2 text-brown "></i>
                                        <span>Edit</span>
                                    </div>
                                    <div class="cursor-pointer py-2 text-start userMailResend" id="" data-id="{{ $adminUser->id }}">
                                        <i class="fa-regular fa-envelope fa-lg pe-2 text-brown"></i>
                                        <span>Resend</span>
                                    </div>
                                    <div class="cursor-pointer py-2 delete-user" data-id="{{$adminUser->id}}">
                                        <i class="fa-regular fa-trash-can fa-lg pe-2 text-brown"></i>
                                        <span>Delete</span>
                                    </div>

                                </div>
                            </span>
                        </div>
                    </div>
                </div>
                @endforeach
                @else
                <span class="text-center">No User 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($adminUsers && $adminUsers->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 User</div>
                <i class="fa-solid fa-xmark" id="edit-cancel"></i>
            </div>

            <div class=" edit-container pb-3 d-flex flex-column justify-content-between">
                <div class="px-4 mb-3 panel-size-sm">
                    <!-- <div class="name-container edit-context   d-flex flex-column  ">
                        <label class="edit-label mb-2 mb-sm-0" for="">UserType<span class="text-danger">*</span>:</label>
                        <select id=" organization" name="organization" class="edit-input edit-dropdown py-1">
                            <option value="">-Select UserType-</option>
                            <option value="organization1">General</option>
                            <option value="organization2">Fireman</option>
                            <option value="organization3">Soldier</option>
                            <option value="organization3">Teacher</option>
                            <option value="organization3">Ambassador</option>
                            <option value="organization3">Church</option>
                            <option value="organization3">Printed Card</option>


                        </select>

                    </div> -->

                    <div class="name-container edit-context d-flex flex-column ">
                        <label class="edit-label mb-2 mb-sm-0 pb-2" for="user_firstname">Campaign Manager / Admin First name<span class="text-danger">*</span>:</label>
                        <input maxlength="25" type="text" name="user_firstname" id="user_firstname" class="user_firstname edit-input py-1 px-2" placeholder="Enter your First name">
                        <div>
                            <small id="firstnameError" class="text-danger"></small> <!-- Error message for Firstname -->
                        </div>
                    </div>

                    <div class="name-container edit-context d-flex flex-column ">
                        <label class="edit-label mb-2 mb-sm-0 pb-2" for="user_lastname">Campaign Manager / Admin Last name<span class="text-danger">*</span>: </label>
                        <input maxlength="25" type="text" name="user_lastname" id="user_lastname" class="user_lastname edit-input py-1 px-2" placeholder="Enter your Last name">
                        <div>
                            <small id="lastnameError" class="text-danger"></small> <!-- Error message for Lastname -->
                        </div>
                    </div>

                    <div class="name-container edit-context d-flex flex-column ">
                        <label class="edit-label mb-2 mb-sm-0 pb-2" for="">Username<span class="text-danger">*</span>: </label>
                        <input type="text" maxlength="25" name="user_username" id="user_username" class="user_username edit-input py-1 px-2" placeholder="Enter your User name">
                        <div>
                            <small id="usernameError" class="text-danger"></small>
                        </div>
                    </div>

                    <div class="name-container edit-context d-flex flex-column ">
                        <label class="edit-label mb-2 mb-sm-0 pb-2" for="">Email<span class="text-danger">*</span>: </label>
                        <input type="email" name="user_email" id="user_email" class="user_email edit-input py-1 px-2" placeholder="Enter your email">
                        <div>
                            <small id="emailError" class="text-danger"></small>
                        </div>
                    </div>


                    <!-- <div class="name-container userpassword edit-context d-flex flex-column ">
                        <label class="edit-label mb-2 mb-sm-0 pb-2" for="user_password">
                            Password<span class="text-danger">*</span>:
                        </label>
                        <span class="user-passwordContainer">
                            <input type="password" name="user_password" id="user_password" class="w-100 user_password edit-input py-1 px-2" placeholder="Enter password" autocomplete="new-password">
                            <i class="fa-regular fa-eye-slash closed-eye-icon3 eye-icon usereyeIcon bg-white px-2" id="togglePassword"></i>
                        </span>
                        <div>
                            <small id="userpasswordError" class="userpasswordError text-danger"></small>
                        </div>


                    </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" id="btnCancel" type="button" value="Cancel">
                    <button class="btn-blue px-2 py-1 rounded btn-edit-save" type="button" id="adduserBtn">Save
                        <span id="login-spinner" class="spinner-border spinner-border-sm d-none salesperson-spinner" role="status"
                            aria-hidden="true" style="margin-left: 10px;"></span>
                    </button>
                </div>

            </div>
        </div>
        <!--edit form-side panel -->
        <div class="admin-sidebar-edit 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>Edit User</div>
                <i class="fa-solid fa-xmark " id="edit-cancelIcon"></i>
            </div>

            <div class="edit-container pb-3 d-flex flex-column justify-content-between">
                <div class="px-4 mb-3 panel-size-sm">
                    <div class="name-container edit-context d-flex flex-column ">
                        <label class="edit-label mb-2 mb-sm-0 pb-2" for="user_firstname">Campaign Manager / Admin First name<span class="text-danger">*</span>:</label>
                        <input maxlength="25" type="text" name="useredit_firstname" id="useredit_firstname" class="user_firstname edit-input py-1 px-2" placeholder="Enter your First name">
                        <div>
                            <small id="firstnameError" class="text-danger"></small> <!-- Error message for Firstname -->
                        </div>
                    </div>

                    <div class="name-container edit-context d-flex flex-column ">
                        <label class="edit-label mb-2 mb-sm-0 pb-2" for="useredit_lastname">Campaign Manager / Admin Last name<span class="text-danger">*</span>: </label>
                        <input maxlength="25" type="text" name="user_lastname" id="useredit_lastname" class="user_lastname edit-input py-1 px-2" placeholder="Enter your Last name">
                        <div>
                            <small id="lastnameError" class="text-danger"></small> <!-- Error message for Lastname -->
                        </div>
                    </div>

                    <div class="name-container edit-context d-flex flex-column ">
                        <label class="edit-label mb-2 mb-sm-0 pb-2" for="">Username<span class="text-danger">*</span>: </label>
                        <input type="text" maxlength="25" name="user_username" id="useredit_username" class="user_username edit-input py-1 px-2" placeholder="Enter your User name">
                        <div>
                            <small id="usernameeditError" class="text-danger"></small>
                        </div>
                    </div>

                    <div class="name-container edit-context d-flex flex-column ">
                        <label class="edit-label mb-2 mb-sm-0 pb-2" for="">Email<span class="text-danger">*</span>: </label>
                        <input type="email" name="user_email" id="useredit_email" class="useredit_email edit-input py-1 px-2" placeholder="Enter your email">
                        <div>
                            <small id="emaileditError" class="text-danger"></small>
                        </div>
                    </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" id="edit-cancelButton" type="button" value="Cancel">
                    <button class="btn-blue px-2 py-1 rounded btn-edit-save" type="button" id="updateButton">Update
                        <span id="login-spinner" class="spinner-border spinner-border-sm d-none salesperson-spinner" role="status"
                            aria-hidden="true" style="margin-left: 10px;"></span>
                    </button>
                </div>

            </div>
        </div>
        <!---Delete modal-->
        <div id="modal1" class="modal-overlay justify-content-center align-items-center h-100 w-100 top-0 start-0 px-3 d-none">
            <div class="bg-light modal-container">
                <div class="bg-brown text-light d-flex justify-content-between align-items-center px-2 py-2" role="button">
                    <span>Delete</span>
                    <i class="fa-solid fa-xmark fa-xl close-modal"></i> <!-- Added class 'close-modal' for easy close -->
                </div>

                <div class="d-flex flex-column py-3 px-sm-3 px-2 text-center">
                    <div class="d-flex align-items-center">
                        <span class="text-center delete-message">Are you sure you want to delete this user?</span> <!-- Placeholder for dynamic message -->
                    </div>
                    <div class="d-flex justify-content-end mt-3">
                        <button id="ambBtnCancel" class="btn-modal-cancel me-2 py-1 px-3 rounded-1 border-0" style="background-color: #cecece;">Cancel</button>
                        <button type="button" id="confirmDeleteBtn" class="org-reports-sendbtn bg-danger text-light py-1 px-3 rounded-1 border-0" data-id="">Delete</button>
                    </div>
                </div>
            </div>
        </div>



    </div>
</div>


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

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

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

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