@extends('app')
@section('content')
@include('layout.admin_sidebar')
<!--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>Edit Withdrawal</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 pb-2" for="">Participant Name<span class="text-danger">*</span>:</label>
                <input type="text" class="edit-input py-1 ps-2" id="participant_name" disabled>
            </div>
            <div class="name-container edit-context   d-flex flex-column  ">
                <label class="edit-label mb-2 mb-sm-0 pb-2" for="">Amount<span class="text-danger">*</span>:</label>
                <input type="text" class="edit-input py-1 ps-2 " id="amount" disabled>
            </div>
            <div class="name-container edit-context   d-flex flex-column  ">
                <label class="edit-label mb-2 mb-sm-0 pb-2" for="">Charge(4%)<span class="text-danger">*</span>:</label>
                <input type="text" class="edit-input py-1 ps-2 " id="charge" disabled>
            </div>
            <div class="name-container edit-context   d-flex flex-column  ">
                <label class="edit-label mb-2 mb-sm-0 pb-2" for="">Payable Amount<span class="text-danger">*</span>:</label>
                <input type="text" class="edit-input py-1 ps-2" id="payable_amount" disabled>
            </div>
            <div class="name-container edit-context   d-flex flex-column  ">
                <label class="edit-label mb-2 mb-sm-0 pb-2" for="">Status<span class="text-danger">*</span>:</label>
                <select id="status" class="edit-input edit-dropdown py-1 ps-2 w-100" style="width:220px">
                    <option value="" disabled selected>----Select Status----</option>
                    <option value="Pending">Pending</option>
                    <option value="Processing">Processing</option>
                    <option value="Under Review">Under Review</option>
                    <option value="Completed">Completed</option>
                    <option value="Rejected">Rejected</option>
                </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="">Remark <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" id="edit-cancel-btn">
            <button type="button" class="btn-blue px-2 py-1 rounded btn-edit-save" id="update-btn" data-bs-dismiss="modal">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>
            <span id="login-spinner" class="spinner-border spinner-border-sm d-none salesperson-spinner" role="status"
                aria-hidden="true" style="margin-left: 10px;"></span>
        </div>
    </div>

    <!-- end -->
</div>
<div class="withdrawal-container  d-flex flex-column flex-grow-1  px-3 pb-2 pb-xl-0 pt-4 ">
    <div class="user-title text-brown pb-1" id="user-title">Withdrawal Requests</div>
    <!-- search container -->

    <div class="withdrawal-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 Organization Name or Email: &nbsp;</label>

            <div class="withdrawal-search position-relative">
                <input type="text" placeholder="Enter Organization or Email" class="withdrawal-input rounded-1 ps-2" id="withdrawl-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="withdrawl-search-btn"><i class="fa-solid fa-magnifying-glass fa-lg"></i></button>
            </div>
        </div>
        <div class="text-md-end filter-container">
            <label for="position-filter" class="mt-md-0 mt-3">Search by Transaction Status: </label>
            <select id="position-filter" class="ps-2 py-1 rounded-1 mt-md-0 mt-3">
                <option value="">All Statuses</option>
                <option value="Pending">Pending</option>
                <option value="Processing">Processing</option>
                <option value="Under Review">Under Review</option>
                <option value="Completed">Completed</option>
                <option value="Rejected">Rejected</option>
            </select>
        </div>
        <!-- <div class="py-md-0 pt-3 text-md-end withdrawalcreate">
            <button class="btn-withdrawalcreate border-0 text-light py-1 px-2 rounded-1">Create New</button>
        </div> -->
    </div>
    <!-- laptop view -->
    <div class="table-responsive withdrawal-table-container d-none d-xl-block pt-0">
        <table class="table bg-white withdrawal-table text-center" id="withdrawal_table">
            <thead class="bg-brown text-light withdrawal-thead">
                <tr>
                    <th class="border-end">#</th>
                    <th class="border-end">Organization Name</th>
                    <th class="border-end">Participant Name</th>
                    <th class="border-end">Email</th>
                    <th class="border-end">Amount</th>
                    <th class="border-end">Request Date</th>
                    <th class="border-end">Updated Date</th>
                    <th class="border-end">Transaction Status</th>
                    <th class="border-end withdrawal-head-right">Action</th>
                </tr>
            </thead>
            <tbody class="withdrawal-tbody">
                @if($withdrawFunds && $withdrawFunds->count() > 0)
                    @foreach($withdrawFunds as $fund)
                    <tr>
                        <td width="5%" class="border-end border-bottom">{{  $loop->iteration }}</td>
                        <td width="15%" class="border-end border-bottom width-org-name">{{ $fund->organization_name }}</td>
                        <td width="15%" class="border-end border-bottom">{{ $fund->name }}</td>
                        <td width="20%" class="border-end border-bottom width-email">{{ $fund->email }}</td>
                        <td width="10%" class="border-end border-bottom">${{ $fund->amount }}</td>
                        <td width="10%" class="border-end border-bottom">{{ \Carbon\Carbon::parse($fund->created_at)->format('m/d/Y') }}</td>
                        <td width="11%" class="border-end border-bottom trans-status">{{ \Carbon\Carbon::parse($fund->updated_at)->format('m/d/Y') }}</td>
                        <td width="15%" class="border-end border-bottom">{{ $fund->status }}</td>
                    @if($fund->status == 'Completed' ||$fund->status == 'Rejected')
                    <td width="15%" class="border-bottom">
                        <a style="pointer-events: none; opacity: 0.5;">
                            <i class="edit fa-regular fa-pen-to-square edit-delete-icon disabled" data-id="{{ $fund->id }}"></i>
                        </a>

                    </td>
                    @else
                    <td width="15%" class="border-bottom">
                        <a><i class="edit fa-regular fa-pen-to-square edit-delete-icon"
                                data-id="{{ $fund->id }}"></i></a>
                    </td>
                    @endif
                    </tr>
                    @endforeach
                @endif

            </tbody>
        </table>
    </div>
    <!-- mobile view -->
    <div class="withdrawal-mobile-view d-flex flex-column d-xl-none pb-3" id="withdrawl_mobile">
        @if($withdrawFunds && $withdrawFunds->count() > 0)
        @foreach($withdrawFunds as $fund)
        <div class="user-mobile-item mb-3" data-status="{{ $fund->status }}">
            <div class="user-mobile-header d-flex justify-content-between align-items-center">
                <div class="user-label gap-3 d-flex align-items-center">
                    <span class="text-wrap">{{ $loop->iteration  }}</span>
                    <span class="text-wrap withdrawl-name">{{ $fund->name }}</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">Organization:</span>
                    <span class="text-end text-wrap">{{ $fund->organization_name }}</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 withdrawl-email text-wrap">{{ $fund->email }}</span>
                </div>
                <div class="mobile-body-content d-flex justify-content-between py-3 mx-3">
                    <span class="user-label pe-2">Amount:</span>
                    <span class="value amount text-wrap">${{ $fund->amount }}</span>
                </div>
                <div class="mobile-body-content d-flex justify-content-between py-3 mx-3">
                    <span class="user-label">Request Date:</span>
                    <span class="value reqdate">{{ \Carbon\Carbon::parse($fund->created_at)->format('m/d/Y') }}</span>
                </div>
                <div class="mobile-body-content d-flex justify-content-between py-3 mx-3">
                    <span class="user-label">Updated Date:</span>
                    <span class="value update">{{ \Carbon\Carbon::parse($fund->updated_at)->format('m/d/Y') }}</span>
                </div>
                <div class="mobile-body-content d-flex justify-content-between py-3 mx-3">
                    <span class="user-label pe-2 ">Transaction Status:</span>
                    <span class="value status  trans-status text-wrap">{{ $fund->status }}</span>
                </div>
                <div class="mobile-body-content d-flex justify-content-between py-3 mx-3">
                    <span class="user-label">Action:</span>
                    <span class="value cursor-pointer">
                        <i class=" fa-regular fa-pen-to-square fa-xl text-brown edit-delete-icon edit" data-id="{{ $fund->id }}"></i>
                    </span>
                </div>
            </div>
        </div>
        @endforeach
        @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($withdrawFunds && $withdrawFunds->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>
        @else
        @endif
    </div>

</div>

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