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

<div class="salesperson-all">
    <div class="d-flex">
        <div class="salesperson-content d-flex flex-column flex-grow-1  px-3 pt-4 pb-2 pb-xl-0">

            <div class="salesperson-heading pb-2">
                Salespersons
            </div>

            <div class="salesperson-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 Salesperson Name or Email: &nbsp;</label>
                    <div class="salesperson-search position-relative">
                        <input type="text" placeholder="Enter Salesperson Name or Email" class="salesperson-input rounded-1 ps-2" id="salesperson-search">
                        <button class="position-absolute top-0 end-0  border-0 bg-blue text-light h-100 rounded-1 px-3 cus-bg-dark-blue"
                            id="salesperson-search-bar-btn"><i class="fa-solid fa-magnifying-glass fa-lg"></i></button>
                    </div>
                </div>
                <div class=" py-md-0 pt-3 text-md-end salespersoncreate ">

                    <button class="addbtn btn-salespersoncreate border-0 text-light py-1 px-2 rounded-1 cus-bg-dark-blue"> Add Salesperson</button>
                </div>
            </div>


            <!-- Table for larger screens -->
            <div class="table-responsive salesperson-overall d-none d-xl-block ">
                <table class="table salesperson_table" id="salesperson_table">
                    <thead class="salesperson_table_head text-center ">
                        <tr>
                            <!-- <th class="border-end first"><input type="checkbox" id="checkAll"></th> -->
                            <th class="border-end first">#</th>
                            <th class="border-end second" style="width: 5px !important;">Salesperson First name</th>
                            <th class="border-end second">Salesperson Last name</th>
                            <th class="border-end second">Username</th>

                            <th class="border-end">Email</th>
                            <th class="border-end">State</th>
                            <th class="border-end">City</th>
                            <th class="border-end">Organization Count</th>
                            <th class="border-end">Status</th>
                            <th class="border-end second">Actions</th>

                    </thead>
                    <tbody class="bg-white text-center salesperson_table_body">
                        @if($salesPeople && $salesPeople->count() > 0)
                        @foreach($salesPeople->unique('sales_person_email') as $index => $salesPerson) <!-- Ensure unique by email -->
                        <tr class="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">{{ $salesPerson->sales_person_first_name }}</td>
                            <td width="15%" class="border-end">{{ $salesPerson->sales_person_last_name }}</td>
                            <td width="15%" class="border-end">{{ $salesPerson->sales_person_username }}</td>

                            <td width="20%" class="border-end">{{ $salesPerson->sales_person_email }}</td>
                            <td width="20%" class="border-end">{{ $salesPerson->sales_person_state }}</td>
                            <td width="20%" class="border-end">{{ $salesPerson->sales_person_city }}</td>
                            <td width="10%" class="border-end">{{ $salesPerson->total_organizations }}</td>
                            <td width="10%" class="border-end">
                                <button id="statusButton-mbl" class="btn btn-sm btn-success active active-button py-0 px-2 rounded text-nowrap" style="pointer-events: none; cursor: default;"
                                    data-id="{{ $salesPerson->id }}" data-status="{{ $salesPerson->sales_person_status }}">
                                    @if($salesPerson->sales_person_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 py-2" role="button"></i>
                                <div class="hidden-div py-3 px-4 text-start bg-light">
                                    <div id="deactivateOption-mbl" class="cursor-pointer deactivateOption-mbl user-inactive-btn py-2 bg-light"></div>
                                    <div class="py-2 edit cursor-pointer" id="editIcon" data-id="{{ $salesPerson->id }}">
                                        <i class="fa-regular fa-pen-to-square fa-lg pe-2 text-brown "></i>
                                        <span>Edit</span>
                                    </div>
                                    <div class="py-2">
                                        <a href="javascript:void(0)" class="view-btn" data-id="{{ $salesPerson->id }}">
                                            <i class="fa-solid fa-user fa-lg pe-2 text-brown"></i>
                                            <span class="text-brown">View</span>
                                        </a>
                                        <div class="py-2 d-none">
                                            <i class="fa-regular fa-trash-can fa-lg pe-2 text-brown deleteButton" data-id="{{ $salesPerson->id }}"></i>
                                            <span>Delete</span>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                        @else
                        <tr class="empty-table">
                            <td colspan="9" class="text-center">No Salesperson Are Available</td>
                        </tr>
                        @endif
                    </tbody>


                </table>

            </div>

            <!-- Stacked view for mobile and tablet -->
            <div class="user-mobile-view-container d-flex flex-column d-xl-none pb-4 " id="salesperson_mobile">
                @if($salesPeople && $salesPeople->count() > 0)
                @foreach($salesPeople->unique('sales_person_email') as $index => $salesPerson)
                <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 text-wrap text-break ">
                            <!-- <input type="checkbox" class=""> -->
                            <span>{{ $loop->iteration }}</span>
                            <span class="salesperson-name">{{$salesPerson->sales_person_first_name . ' ' . $salesPerson->sales_person_last_name}}</span>
                        </div>
                        <div class="d-flex align-items-center">
                            <button id="statusButton-mbl" class="btn btn-success btn-sm participant-active-btn me-3 ms-2 py-1 px-2 rounded" style="pointer-events: none; cursor: default;"
                                data-id="{{$salesPerson->id}}" data-status="{{ $salesPerson->sales_person_status }}">
                                @if($salesPerson->sales_person_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">


                        <!-- <div class=" mobile-body-content d-flex justify-content-between py-3 mx-3">
                            <span class="user-label">First Name:</span>
                            <span class="value status"></span>
                        </div>
                        <div class=" mobile-body-content d-flex justify-content-between py-3 mx-3">
                            <span class="org-email">Last Name:</span>
                            <span class="value email"></span>
                        </div> -->
                        <div class=" mobile-body-content d-flex justify-content-between py-3 mx-3 ">
                            <span class="user-label pe-2">Username:</span>
                            <span class="value status text-wrap text-break ">{{ $salesPerson->sales_person_username }}</span>
                        </div>
                        <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 status salesperson-email text-wrap text-break">{{$salesPerson->sales_person_email }}</span>
                        </div>
                        <div class=" mobile-body-content d-flex justify-content-between py-3 mx-3 ">
                            <span class="user-label pe-2">State:</span>
                            <span class="value status salesperson-email text-wrap text-break">{{ $salesPerson->sales_person_state }}</span>
                        </div>
                        <div class=" mobile-body-content d-flex justify-content-between py-3 mx-3 ">
                            <span class="user-label pe-2">City:</span>
                            <span class="value status salesperson-email text-wrap text-break">{{ $salesPerson->sales_person_city }}</span>
                        </div>
                        <div class=" mobile-body-content d-flex justify-content-between py-3 mx-3">
                            <span class="user-label pe-2">Organization Count:</span>
                            <span class="value status text-wrap text-break ">{{ $salesPerson->total_organizations }}</span>
                        </div>
                        <!-- <div class=" mobile-body-content d-flex justify-content-between py-3 mx-3">
                            <span class="user-label pe-2">Total Amount:</span>
                            <span class="value status text-wrap text-break ">${{ number_format($salesPerson->total_sponsor_total_amount, 2) }}</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  py-3" role="button"></i>

                                <div class="hidden-div bg-light py-3 px-4 text-start   ">
                                    <div id="deactivateOption-mbl" class="deactivateOption-mbl py-2 cursor-pointer">

                                    </div>
                                    <div class="py-2 edit cursor-pointer" id="editIcon" data-id="{{ $salesPerson->id }}">
                                        <i class="fa-regular fa-pen-to-square fa-lg pe-2 text-brown "></i>
                                        <span>Edit</span>
                                    </div>
                                    <div class="py-2">
                                        <a href="javascript:void(0)" class="view-btn" data-id="{{ $salesPerson->id }}">
                                            <i class="fa-solid fa-user fa-lg pe-2 text-brown"></i>
                                            <span class="text-brown">View</span>
                                        </a>
                                    </div>
                                    <div class="py-2 d-none">
                                        <i class="fa-regular fa-trash-can fa-lg pe-2 text-brown deleteButton" data-id="{{ $salesPerson->id }}"></i>
                                        <span>Delete</span>
                                    </div>

                                </div>
                            </span>
                            </td>
                        </div>
                        <!-- <div class="mobile-body-content d-flex justify-content-between py-3 mx-3">

                                <span class="user-label">Action:</span>
                                <span>
                                    <i class="fa-regular fa-pen-to-square edit-delete-icon"></i>
                                    <i class="fa-solid fa-trash-can edit-delete-icon"></i>
                                </span>


                            </div> -->
                    </div>
                </div>
                @endforeach
                @else
                <div class="text-center">No Salesperson available</div>
                @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($salesPeople && $salesPeople->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 Salesperson</div>
                <i class="fa-solid fa-xmark" id="add-cancel"></i>
            </div>

            <form action="">
                <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="">First Name<span class="text-danger">*</span>:</label>
                            <input type="text" name="first_name" id="add-fname-salespersonForm" placeholder="Enter First Name" class="form-control edit-input person-firstname">
                            <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="">Last Name<span class="text-danger">*</span>:</label>
                            <input type="text" name="last_name" id="add-lname-salespersonForm" placeholder="Enter Last Name" class="edit-input form-control person-lastname">
                            <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" name="last_name" id="add-uname-salespersonForm" placeholder="Enter Username" class="edit-input person-username form-control">
                            <div>
                                <small id="userNameError" 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="">Email<span class="text-danger">*</span>:</label>
                            <input type="email" name="email" id="add-email-salespersonForm" placeholder="Enter Email" class="edit-input person-email form-control">
                            <div>
                                <small id="emailError" class="text-danger"></small>
                            </div>

                        </div>
                        <div class="name-container edit-context d-flex flex-column">
                            <!-- State Dropdown -->
                            <label class="edit-label mb-2 mb-sm-0 pb-2" for="salesperson-select-state">State<span class="text-danger">*</span>:</label>
                            <select class="validate-select-box salesperson-select-state  salesperson-state rounded-2 py-1 ps-2 city form-select border border-dark"
                                name="state" id="salesperson-select-state">
                                <option value="" selected>Select State</option>
                                @foreach ($states as $state)
                                <option value="{{ $state->id }}">{{ $state->name }}</option>
                                @endforeach
                            </select>
                            <div>
                                <small id="stateError" class="text-danger"></small>
                            </div>
                        </div>

                        <div class="name-container edit-context d-flex flex-column">
                            <!-- City Dropdown -->
                            <label class="edit-label mb-2 mb-sm-0 pb-2" for="salesperson-city-id">City<span class="text-danger">*</span>:</label>
                            <select class="validate-select-box salesperson-select-city salesperson-city rounded-2 py-1 ps-2 city form-select"
                                name="city" id="salesperson-city-id">
                                <option value="" selected>Select City</option>
                            </select>
                            <div>
                                <small id="cityError" 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" type="button" id="add-cancelButton" value="Cancel">
                        <button class="btn-blue px-2 py-1 rounded btn-edit-save" type="button" id="saveButton">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>
            </form>

        </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 Salesperson</div>
                <i class="fa-solid fa-xmark " id="edit-cancel"></i>
            </div>

            <form action="">
                <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="">First Name<span class="text-danger">*</span>:</label>
                            <input id="first-name" type="text" name="first_name" class="edit-input form-control update-person-firstname">
                        </div>
                        <div class="name-container edit-context d-flex flex-column ">
                            <label class="edit-label mb-2 mb-sm-0 pb-2" for="">Last Name<span class="text-danger">*</span>:</label>
                            <input id="last-name" type="text" name="last_name" class="edit-input form-control update-person-lastname">
                        </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 id="user-name" type="text" name="user_name" class="edit-input form-control update-person-username">
                        </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 id="email" type="email" name="email" class="edit-input form-control update-person-email">
                        </div>
                        <div class="name-container edit-context d-flex flex-column ">
                            <label class="edit-label mb-2 mb-sm-0 pb-2" for="">State<span class="text-danger">*</span>:</label>
                            <select class="rounded-2 state form-select salesperson-edit-state" name="state_id" id="edit-state">
                                <option value="" selected>Select State</option>
                                @foreach ($states as $state)
                                <option value="{{ $state->id }}">
                                    {{ $state->name }}
                                </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="name-container edit-context d-flex flex-column ">
                            <label class="edit-label mb-2 mb-sm-0 pb-2" for="">City<span class="text-danger">*</span>:</label>
                            <select class="rounded-2 city form-select salesperson-edit-city" name="city_id" id="edit-city">
                                <option value="" selected>Select City</option>
                            </select>


                        </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" id="cancelButton" value="Cancel">
                        <button class="btn-blue px-2 py-1 rounded btn-edit-save" type="button" id="updateButton" data-id="1">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>
            </form>
        </div>
        <!---delete modal-->
        <div class="modal fade custom-delete-modal" id="confirmDeleteModal" tabindex="-1" role="dialog" aria-labelledby="confirmDeleteModalLabel" aria-hidden="true">
            <div class="modal-dialog " role="document">
                <div class="modal-content custom-delete-modal-content">
                    <div class="modal-header custom-delete-modal-header">
                        <h5 class="modal-title custom-delete-modal-title" id="confirmDeleteModalLabel">Delete Confirmation</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body custom-delete-modal-body">
                        <!-- The message will be inserted here dynamically -->
                    </div>
                    <div class="modal-footer custom-delete-modal-footer">
                        <button type="button" class="btn btn-secondary delete-cancel-btn" data-dismiss="modal">Cancel</button>
                        <button type="button" class="btn btn-danger delete-btn" id="confirmDeleteButton">Delete</button>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>


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


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

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



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

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