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

<div class="doners-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">Donors</div>
    <!-- tab -->
    <div class="users-tab d-none">
        <ul class="d-none d-md-flex list-unstyled flex-md-wrap mb-0">
            <li class="active py-2 text-center">
                <a href="{{ url('/donors-users') }}" class="text-decoration-none text-dark">Users</a>
            </li>
            <li class=" py-2 text-center">
                <a href="{{ url('/donors-usercard') }}" class="text-decoration-none text-dark">UserCards</a>
            </li>
            <li class="py-2 text-center">
                <a href="{{ url('/donors-usertype') }}" class="text-decoration-none text-dark">UserType</a>
            </li>
        </ul>
        <div class="custom-donors-dropdown position-relative ">
            <div class="dropdown-div w-100 d-flex justify-content-between bg-light align-items-center px-3 py-2 rounded-1" id="dropdown-toggle">
                <label id="dropdown-label">Select</label>
                <i class="fa-solid fa-chevron-down"></i>
            </div>
            <div class="donors-dropdown-menu bg-light position-absolute rounded-1 flex-column w-100 py-2">
                <a class="px-3 py-2 mx-2 " href="{{ url('admin-panel/donors-users') }}">Users</a>
                <a class="px-3 py-2 mx-2" href="{{ url('admin-panel/donors-usercard') }}">User Cards</a>
                <a class="px-3 py-2 mx-2 " href="{{ url('admin-panel/donors-usertype') }}">User Type</a>
            </div>
        </div>
    </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: &nbsp;</label>
            <select id="searchCriteria" class="user-input user-dropdown me-2 px-1 pe-3">
                <option value="1">Donor Name</option>
                <option value="3">Participant Name</option>
                <option value="4">Organization Name</option>
            </select>
            <div class="user-search position-relative">
                <input type="text" id="donorNameSearch" class="user-input rounded-1 ps-2" placeholder="Search">
                <button id="searchDonorNameButton" class="position-absolute top-0 end-0 px-3 border-0 bg-blue text-light h-100 rounded-1 cus-bg-dark-blue">
                    <i class="fa-solid fa-magnifying-glass fa-lg"></i>
                </button>
            </div>
            <div class=" py-md-0 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 class="user-search position-relative">
                <input type="text" id="searchInput" class="user-input rounded-1 ps-2" placeholder="Search...">
                <button id="searchButton" class="position-absolute top-0 end-0 px-3 border-0 bg-blue text-light h-100 rounded-1">
                    <i class="fa-solid fa-magnifying-glass fa-lg"></i>
                </button>
            </div> -->
        </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 w-100 m-0" id="donorUserTable">
            <thead class="bg-brown  text-light user-thead">
                <tr>
                    <th class="border-end ">#</th>
                    <th class="border-end ">Donor Name</th>
                    <th class="border-end ">Email</th>
                    <th class="border-end ">Participant Name</th>
                    <th class="border-end ">Organization Name</th>
                    <th class="border-end">Subscription</th>
                    <th class="border-end ">Transaction Fee</th>
                    <th class="border-end">Subscription Status</th>
                    <th class="border-end ">Payments</th>
                    <th class="border-end d-none">Actions</th>
                </tr>
            </thead>
            <tbody class="user-tbody">
                @if($users && $users->count() > 0)
                @foreach($users as $user)
                <tr class="user-tr">
                    <!-- <td class="border-end " class="border-end"><input type="checkbox" class="check"></td> -->
                    <td width="0%" class="border-end ">{{$loop->iteration }}</td>
                    <td width="15%" class="border-end text-wrap">{{$user -> sponsor_first_name . ' ' . $user -> sponsor_last_name }}</td>
                    <td width="20%" class="border-end text-wrap">{{$user -> sponsor_email}}</td>
                    <td width="15%" class="border-end text-wrap">{{$user -> user_first_name . ' ' . $user -> user_last_name}}</td>
                    <td width="15%" class="border-end text-wrap">{{$user -> name ?? '-' }}</td>
                    <td width="15%" class="border-end text-wrap"> {{$user -> sponsor_plan_amount??'-'}}</td>
                    <td width="15%" class="border-end text-wrap">{{ !empty($user->sponsor_platform_fees) ? '$' . $user->sponsor_platform_fees : '-' }}
                    </td>
                    <td width="15%" class="border-end text-wrap">
                        @if ($user->subscription_status === 'active')
                            Account Active
                        @else
                            Account Inactive
                        @endif
                    </td>
                    <!-- <td class="border-end ">
                        <button class="btn btn-sm user-active-btn py-0 text-light">Active</button>
                    </td> -->
                    <td class="border-end">
                        <a href="javascript:void(0)" class="payment-btn" data-user-id="{{ $user->sponsor_id }}"
                            data-sponsor-plan-amount="{{ $user-> sponsor_plan_amount }}">
                            <i class="fa-solid fa-credit-card fa-xl text-brown" data-target="modal1"></i>
                        </a>
                    </td>
                    <td class="position-relative border-end d-none">
                        <i class="fa-solid fa-ellipsis-vertical fa-xl text-brown"></i>
                        <div class="hidden-div bg-white py-3 px-4 text-start ">
                            <div class="py-2 cursor-pointer">
                                <i class="fa-regular fa-pen-to-square fa-lg pe-2 text-brown"></i>
                                <span>Edit</span>
                            </div>
                            <!-- <div class="py-2">
                                <i class="fa-solid fa-toggle-on fa-lg pe-2 text-brown"></i>
                                Activate
                            </div>
                            <div class="py-2">
                                <i class="fa-solid fa-toggle-off fa-lg pe-2 text-brown"></i>
                                <span>Deactivate</span>
                            </div> -->
                            <div class="py-2 cursor-pointer">
                                <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="9" class="text-center">No Donors available</td>
                </tr>
                @endif

            </tbody>
        </table>
    </div>

    <!-- mobile view  -->
    <div class="user-mobile-view d-flex flex-column d-xl-none pb-3 donorusers_mobile" id="donorusers_mobile">
        @if($users && $users->count() > 0)
        @foreach($users as $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>{{$loop->iteration }}</span>
                    <span class="donor-names  text-wrap">{{ $user->sponsor_first_name . ' ' . $user->sponsor_last_name }}</span>
                </div>
                <div class="d-flex align-items-center">
                    <!-- <button class="btn btn-success btn-sm user-btn me-3 ms-2">Active</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">Organization Name:</span>
                    <span class="value status user-value organization-names  text-wrap">{{ $user->name ?? '-' }}</span>
                </div>
                <div class="mobile-body-content d-flex justify-content-between py-3 mx-3">
                    <span class="user-label">Email:</span>
                    <span class="value status user-value  text-wrap">{{ $user->sponsor_email }}</span>
                </div>
                <div class="mobile-body-content d-flex justify-content-between py-3 mx-3">
                    <span class="user-label">Participant Name:</span>
                    <span class="value status user-value participant-names  text-wrap">{{ $user->user_first_name . ' ' . $user->user_last_name }}</span>
                </div>
                <div class="mobile-body-content d-flex justify-content-between py-3 mx-3">
                    <span class="user-label">Subscription:</span>
                    <span class="value status user-value participant-names  text-wrap">{{$user->sponsor_plan_amount}}</span>
                </div>
                <div class="mobile-body-content d-flex justify-content-between py-3 mx-3">
                    <span class="user-label">Transaction Fee:</span>
                    <span class="value status user-value participant-names  text-wrap">{{ !empty($user->sponsor_platform_fees) ? '$' . $user->sponsor_platform_fees : '-' }}</span>
                </div>
                <div class="mobile-body-content d-flex justify-content-between py-3 mx-3">
                    <span class="user-label">Subscription Status:</span>
                    <span class="value status user-value participant-names  text-wrap">
                        @if ($user->subscription_status === 'active')
                            Account Active
                        @else
                            Account Inactive
                        @endif
                    </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 user-value">
                        <a href="javascript:void(0)" class="payment-btn" data-user-id="{{ $user->sponsor_id }}"
                            data-sponsor-plan-amount="{{ $user-> sponsor_plan_amount }}">
                            <i class="fa-solid fa-credit-card fa-xl text-brown" data-target="modal1"></i>
                        </a>
                    </span>
                </div>
            </div>
        </div>
        @endforeach
        @else
        <div class="text-center">No Donors Are 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($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>
<!-- modal -->

<!-- Custom Modal -->
<div id="modal1" class="modal-overlay justify-content-center align-items-center h-100 w-100 top-0 start-0">
    <!-- 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">
            <span>Payments</span>
            <i class="fa-solid fa-xmark fa-xl"></i>
        </div>

        <div class=" d-flex flex-column py-4 px-sm-5 px-4 text-center">
            <div>
                <span class="text-center">Transaction ID</span>
                <input type="text" value="pi_PRC4iJ8Dsr67161ZtBid" class="user-payment-modal mb-2 border-0 py-2 py-sm-1 px-1 ms-1 rounded-1">
            </div>
            <div>
                <span class="text-center">Amount</span>
                <input type="text" value="$41.22" class="user-payment-modal mb-2 border-0 py-2 py-sm-1 px-1 ms-1 rounded-1">
            </div>
            <div>
                <span class="text-center">Donation</span>
                <input type="text" value="$0.00" class="user-payment-modal mb-2 border-0 py-2 py-sm-1 px-1 ms-1 rounded-1">
            </div>
            <div>
                <span class="text-center">Transaction Status</span>
                <button class="btn-completed text-light btn-success mb-2 border-0 py-2 py-sm-1 px-1 ms-1 rounded-1">Completed</button>
            </div>
            <div>
                <span class="text-center">Start Date</span>
                <input type="text" class="user-payment-modaldate user-payment-modal bg-light mb-2 py-2 py-sm-1 px-1 ms-1 rounded-1">
            </div>
            <div>
                <button class="btn-modal-cancel text-light py-1 px-3 rounded-1 border-0 float-end">Cancel</button>
            </div>
        </div>
    </div>

</div>

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

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