@extends('app')
@section('content')

@include('layout.admin_sidebar')

<div class="">
    <div class="d-flex">
        <div class=" ambassador-content d-flex flex-column flex-grow-1 px-3 pt-4 pb-2 pb-xl-0">
            <div class="search-create-container justify-content-between  ">
                <div class="">
                    <p class="ambassador-heading">Ambassador Codes</p>
                </div>
                <!-- Create New button -->
                <!-- 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 cus-bg-dark-blue"> Add Ambassador</button>
                </div>
            </div>
            <!-- Table for larger screens -->
            <div class="table-responsive ambassador-overall d-none d-xl-block">
                <table class="table ambassador_table" id="ambassador_table">
                    <thead class="ambassador_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">Code</th>
                            <!-- <th class="border-end second">User Type</th> -->
                            <th class="border-end second">Description</th>
                            <th class="border-end">Total Count</th>
                            <!-- <th>Email</th> -->
                            <th class="border-end">Redeemed Count</th>
                            <th class="border-end">Date</th>
                            <th class="border-end">Action</th>
                            <!-- <th class="border-end org-head-right">Date</th> -->
                        </tr>
                    </thead>
                    @if($ambassadorCodes && $ambassadorCodes->count() > 0)
                    <tbody class="bg-white text-center ambassador_table_body" id="tableBody">
                        @foreach ($ambassadorCodes as $index => $code)
                        <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">{{ $code->ambassador_code }}</td>
                            <td width="15%" class="border-end  text-wrap">{{ $code->description }}</td>
                            <td width="15%" class="border-end">{{ $code->total_count }}</td>
                            <td width="15%" class="border-end">{{ $code->redeemed_count }}</td>
                            <td width="15%" class="border-end">{{ \Carbon\Carbon::parse($code->created_at)->format('m-d-Y') }}</td>
                            <td width="10%" class="amb-delete" id="amb-delete" data-id="{{ $code->id }}">
                                <i class="fa-regular fa-trash-can fa-lg pe-2 text-brown" role="button"></i>
                            </td>
                        </tr>
                        @endforeach
                        @else
                        <tr class="empty-table">
                            <td colspan="9" class="text-center">No ambassador codes have been generated yet.</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-2" id="ambassadorcode_mobile">
                @if($ambassadorCodes && $ambassadorCodes->count() > 0)
                @foreach ($ambassadorCodes as $code)
                <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 class="text-wrap">{{ $loop->iteration }}</span>
                            <span class="text-wrap pe-2">Code: {{ $code->ambassador_code }}</span>
                        </div>
                        <div>
                            <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 pe-2">Code:</span>
                            <span class="value status  text-wrap">{{ $code->ambassador_code }}</span>
                        </div>
                        <div class="mobile-body-content d-flex justify-content-between py-3 mx-3">
                            <span class="user-label pe-2">Description:</span>
                            <span class="value status  text-wrap">{{ $code->description }}</span>
                        </div>
                        <div class="mobile-body-content d-flex justify-content-between py-3 mx-3">
                            <span class="user-label pe-2">Total Count:</span>
                            <span class="value status text-wrap">{{ $code->total_count }}</span>
                        </div>
                        <div class="mobile-body-content d-flex justify-content-between py-3 mx-3">
                            <span class="user-label pe-2">Redeemed Count:</span>
                            <span class="text-end text-wrap">{{ $code->redeemed_count }}</span>
                        </div>
                        <div class="mobile-body-content d-flex justify-content-between py-3 mx-3">
                            <span class="user-label ">Date:</span>
                            <span class="text-end ">{{ $code->created_at->format('m-d-Y') }}</span> <!-- Format the date as needed -->
                        </div>
                        <div class="mobile-body-content d-flex justify-content-between py-3 mx-3">
                            <span class="user-label">Action:</span>
                            <span class="text-end amb-delete cursor-pointer" id="amb-delete" data-id="{{ $code->id }}">
                                <i class="fa-regular fa-trash-can fa-lg pe-2 text-brown" role="button"></i>
                            </span> <!-- Format the date as needed -->
                        </div>
                        <!-- Uncomment the action section if needed -->
                        <!-- <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
                <span class="text-center">No ambassador codes have been generated yet.</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($ambassadorCodes && $ambassadorCodes->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 Ambassador</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="">Total Count<span class="text-danger">*</span>:</label>
                        <input type="text" name="total_count" id="total_count" class="total_count edit-input py-1 px-2" placeholder="Enter Count">
                    </div>
                    <div class="name-container edit-context   d-flex flex-column  ">
                        <label class="edit-label mb-2 mb-sm-0  pb-2" for="">Description:</label>
                        <textarea name="description" id="description" class="description edit-input py-1 px-2" placeholder="Add Description" maxlength="50"></textarea>
                        <small id="char-count" class="form-text text-muted">Characters used: <span id="count">0</span> / 50</small>

                        </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="generateBtn">Generate
                        <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>

    </div>
</div>

<!-- Custom Modal -->
<div id="modal1" class="modal-overlay justify-content-center align-items-center h-100 w-100 top-0 start-0 px-3">
    <!-- Modal Structure -->
    <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"></i>
        </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">Are you sure you want to delete this Ambassador Code?</span>
            </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 float-end" 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>
                <!-- <button type="button" class="org-reports-sendbtn  text-light py-1 px-3 rounded-1 border-0 " id="confirmDeleteBtn" data-id="" data-bs-dismiss="modal">Delete</button> -->
            </div>
        </div>
    </div>

</div>




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

@Vite(['resources/js/admin_panel/ambassadorcodes.js'])

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

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

@endsection