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


    <div class="">
        <div class="d-flex">
            <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">Payment Plans</div>
                @include('pages.adminPanel.stripeTabs.stripeMenu')
                <!-- 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 Title: &nbsp;</label>
                        <div class="user-search position-relative">
                            <input type="text" class="user-input rounded-1 ps-2" placeholder="Search..." id="user-search-input">
                            <button class="position-absolute top-0 end-0 px-3 border-0 bg-blue text-light h-100 rounded-1" id="user-search-btn">
                                <i class="fa-solid fa-magnifying-glass fa-lg"></i>
                            </button>
                        </div> -->
                    </div>
                    <!-- add user -->
                    <div class=" py-md-0 text-md-end organizationcreate ">
                        <button class="edit btn-organizationcreate border-0 text-light py-1 px-2 rounded-1 cus-bg-dark-blue">Add
                            Plan</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 w-100 m-0" id="donorUserTable">
                        <thead class="bg-brown text-light user-thead">
                            <tr>
                                <th class="border-end">#</th>
                                <th class="border-end">Plan Name</th>
                                <th class="border-end">Monthly Price</th>
                                <th class="border-end">Monthly Price Split -Retained by FMS
                                    /Pay out for Fundraiser </th>
                                <th class="border-end">Annual Price</th>
                                <th class="border-end">Annual Price Split -Retained by FMS
                                    / Pay out for Fundraiser </th>
                                <th class="border-end">Platform Fee</th>
                                <th class="border-end">Status</th>
                                <th class="border-end">Actions</th>
                            </tr>
                        </thead>
                        <tbody class="user-tbody">
                            @if ($data && (is_array($data) ? count($data) : $data->count()) > 0)
                                @foreach ($data as $item)
                                    <tr class="user-tr status-tag">
                                        <td width="5%" class="border-end">{{ $loop->iteration }}</td>
                                        <td width="15%" class="border-end">{{ $item['name'] }}</td>
                                        <td width="12%" class="border-end">
                                            {{ '$' . number_format(floatval(str_replace(['$', ','], '', $item['monthly_amount'])), 2) }}
                                        </td>
                                        <td width="20%" class="border-end">
                                            @php
                                                $monthlyTaken = !empty($item['monthly_taken'])
                                                    ? floatval(str_replace(['$', ','], '', $item['monthly_taken']))
                                                    : 0;
                                                $monthlyAmount = !empty($item['monthly_amount'])
                                                    ? floatval(str_replace(['$', ','], '', $item['monthly_amount']))
                                                    : 0;
                                                $difference = $monthlyAmount - $monthlyTaken;
                                            @endphp
                                            {{ '$' . number_format($monthlyTaken, 2) }} /
                                            ${{ number_format($difference, 2) }}
                                        </td>

                                        <td width="12%" class="border-end">
                                            {{ '$' . number_format(floatval(str_replace(['$', ','], '', $item['yearly_amount'])), 2) }}
                                        </td>
                                        <td width="20%" class="border-end">
                                            {{ '$' . number_format(floatval(str_replace(['$', ','], '', $item['yearly_taken'])), 2) }}
                                            /
                                            @php
                                                $annuallyAmount = floatval(
                                                    str_replace(['$', ','], '', $item['yearly_amount']),
                                                );
                                                $annuallyTaken = floatval(
                                                    str_replace(['$', ','], '', $item['yearly_taken']),
                                                );
                                                $difference = $annuallyAmount - $annuallyTaken;
                                            @endphp
                                            ${{ number_format($difference, 2) }}
                                        </td>
                                        <td width="10%" class="border-end">
                                            {{ '$' . number_format(floatval(str_replace(['$', ','], '', $item['platformfee'])), 2) }}
                                        </td>
                                        <td width="20%" class="border-end">
                                            <button id="statusButton-mbl"
                                                class="btn btn-sm btn-success active active-button py-0 px-2 rounded"
                                                style="pointer-events: none; cursor: default;" data-id="{{ $item['id'] }}"
                                                data-status="{{ $item['status'] }}">
                                                {{ $item['status'] == 1 ? 'Inactivate' : 'Activate' }}
                                            </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 bg-light py-3 px-4 text-start">
                                                <div id="deactivateOption-mbl"
                                                    class="cursor-pointer deactivateOption-mbl user-inactive-btn py-2 bg-light">
                                                </div>
                                                <div class="py-2 editplan cursor-pointer" data-id="{{ $item['id'] }}">
                                                    <i id="edit-button"
                                                        class="fa-regular fa-pen-to-square fa-lg pe-2 text-brown "></i>
                                                    <span>Edit</span>
                                                </div>
                                                <!-- <div class="py-2 delete-plan" data-id="{{ $item['id'] }}" data-plan-name="{{ $item['name'] }}">
                                            <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 Payment Plans Are Available.</td>
                                </tr>
                            @endif
                        </tbody>
                    </table>
                </div>



                <!-- mobile view  -->
                <div class="user-mobile-view d-flex flex-column d-xl-none pb-3 payment-plan" id="donorusers_mobile">
                    @if ($data && (is_array($data) ? count($data) : $data->count()) > 0)
                        @foreach ($data as $key => $item)
                            <div class="user-mobile-item mb-3 status-tag">
                                <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="donor-names text-wrap">{{ $item['name'] }}</span>
                                    </div>
                                    <div class="d-flex align-items-center">
                                        <button id="statusButton-mbl"
                                            class="btn btn-success btn-sm user-btn me-3 ms-2 active active-button "
                                            style="pointer-events: none; cursor: default;" data-id="{{ $item['id'] }}"
                                            data-status="{{ $item['status'] }}">
                                            {{ $item['status'] == 1 ? 'Inactivate' : 'Activate' }}
                                        </button>
                                        <i class="fa-solid fa-angle-down"></i>
                                    </div>
                                </div>
                                <div class="user-mobile-body bg-light pb-3">
                                    <!-- Monthly price -->
                                    <div class="mobile-body-content d-flex justify-content-between py-3 mx-3">
                                        <span class="user-label">Monthly Price:</span>
                                        <span
                                            class="value status user-value organization-names text-wrap">${{ number_format(floatval(str_replace(['$', ','], '', $item['monthly_amount'])), 2) }}</span>
                                    </div>
                                    <!-- Monthly Taken -->
                                    <div class="mobile-body-content d-flex justify-content-between py-3 mx-3">
                                        <span class="user-label">Monthly Price Split -
                                            Retained by FMS / Pay out for Fundraiser</span>
                                        <span class="value status user-value text-wrap">
                                            @php
                                                $monthlyTaken = !empty($item['monthly_taken'])
                                                    ? floatval(str_replace(['$', ','], '', $item['monthly_taken']))
                                                    : 0;
                                                $monthlyAmount = !empty($item['monthly_amount'])
                                                    ? floatval(str_replace(['$', ','], '', $item['monthly_amount']))
                                                    : 0;
                                                $difference = $monthlyAmount - $monthlyTaken;
                                            @endphp
                                            ${{ number_format($monthlyTaken, 2) }} / ${{ number_format($difference, 2) }}
                                        </span>
                                    </div>
                                    <!-- Annual price -->
                                    <div class="mobile-body-content d-flex justify-content-between py-3 mx-3">
                                        <span class="user-label">Annual Price:</span>
                                        <span
                                            class="value status user-value participant-names text-wrap">${{ number_format(floatval(str_replace(['$', ','], '', $item['yearly_amount'])), 2) }}</span>
                                    </div>
                                    <!-- Annual Taken -->
                                    <div class="mobile-body-content d-flex justify-content-between py-3 mx-3">
                                        <span class="user-label">Annual Price Split -
                                            Retained by FMS /Pay out for Fundraiser </span>
                                        <span
                                            class="value status user-value text-wrap">${{ number_format(floatval(str_replace(['$', ','], '', $item['yearly_taken'])), 2) }}
                                            /$
                                            @php
                                                $annuallyAmount = floatval(
                                                    str_replace(['$', ','], '', $item['yearly_amount']),
                                                );
                                                $annuallyTaken = floatval(
                                                    str_replace(['$', ','], '', $item['yearly_taken']),
                                                );
                                                $difference = $annuallyAmount - $annuallyTaken;
                                            @endphp
                                            {{ number_format($difference, 2) }}
                                        </span>
                                    </div>
                                    <!-- Platform Fee -->
                                    <div class="mobile-body-content d-flex justify-content-between py-3 mx-3">
                                        <span class="user-label">Platform Fee:</span>
                                        <span
                                            class="value status user-value participant-names text-wrap">${{ number_format(floatval(str_replace(['$', ','], '', $item['platformfee'])), 2) }}</span>
                                    </div>
                                    <!-- Status -->
                                    <!-- <div class="mobile-body-content d-flex justify-content-between py-3 mx-3">
                                <span class="value status user-value participant-names">
                                    <button id="statusButton-mbl" class="btn btn-sm btn-success active active-button py-0 px-2 rounded"
                                        data-id="{{ $item['id'] }}"
                                        data-status="{{ $item['status'] }}">
                                        {{ $item['status'] == 1 ? 'Inactive' : 'Active' }}
                                    </button>
                                </span>
                            </div> -->
                                    <!-- Actions -->
                                    <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-white py-3 px-4 text-start">
                                                <div id="deactivateOption-mbl"
                                                    class="deactivateOption-mbl py-2 cursor-pointer"></div>
                                                <div class="py-2 editplan cursor-pointer" data-id="{{ $item['id'] }}">
                                                    <i id="edit-button"
                                                        class="fa-regular fa-pen-to-square fa-lg pe-2 text-brown "></i>
                                                    <span>Edit</span>
                                                </div>
                                                <!-- <div class="py-2 delete-plan" data-id="{{ $item['id'] }}" data-plan-name="{{ $item['name'] }}">
                                            <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 Payment Plans 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 ($data && (is_array($data) ? count($data) : $data->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 Plan</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="plan_name">Plan Name<span
                                    class="text-danger">*</span>:</label>
                            <input maxlength="25" type="text" name="plan_name" id="plan_name"
                                class="plan_name edit-input py-1 px-2" placeholder="Enter your plan name">
                            <div>
                                <small id="planNameError" class="text-danger"></small>
                                <!-- Error message for Plan Name -->
                            </div>
                        </div>

                        <div class="name-container edit-context d-flex flex-column">
                            <label class="edit-label mb-2 mb-sm-0" for="monthly_amount">Monthly Price : </label>
                            <input maxlength="25" type="text" name="monthly_amount" id="monthly_amount"
                                class="monthly_amount edit-input py-1 px-2" placeholder="Enter monthly price">
                            <div>
                                <small id="monthlyAmountError" class="text-danger"></small>
                                <!-- Error message for Monthly Amount -->
                            </div>
                        </div>

                        <div class="name-container edit-context d-flex flex-column">
                            <label class="edit-label mb-2 mb-sm-0" for="monthly_amount_taken">Monthly Price Retained by
                                FMS : </label>
                            <input type="text" maxlength="25" name="monthly_amount_taken" id="monthly_amount_taken"
                                class="monthly_amount_taken edit-input py-1 px-2"
                                placeholder="Enter Monthly Price Retained by FMS">
                            <div>
                                <small id="monthlyAmountTakenError" class="text-danger"></small>
                                <!-- Error message for Monthly Amount Taken -->
                            </div>
                        </div>

                        <div class="name-container edit-context d-flex flex-column">
                            <label class="edit-label mb-2 mb-sm-0" for="annualy_amount">Annual Price<span
                                    class="text-danger">*</span>: </label>
                            <input type="text" name="annualy_amount" id="annualy_amount"
                                class="annualy_amount edit-input py-1 px-2" placeholder="Enter annual price">
                            <div>
                                <small id="annuallyAmountError" class="text-danger"></small>
                                <!-- Error message for Annually Amount -->
                            </div>
                        </div>

                        <div class="name-container edit-context d-flex flex-column">
                            <label class="edit-label mb-2 mb-sm-0" for="annualy_amount_taken">Annual Price Retained by
                                FMS<span class="text-danger">*</span>: </label>
                            <input type="text" name="annualy_amount_taken" id="annualy_amount_taken"
                                class="annualy_amount_taken edit-input py-1 px-2"
                                placeholder="Enter Annual Price Retained by FMS">
                            <div>
                                <small id="annuallyAmountTakenError" class="text-danger"></small>
                                <!-- Error message for Annually Amount Taken -->
                            </div>
                        </div>

                        <div class="name-container edit-context d-flex flex-column">
                            <label class="edit-label mb-2 mb-sm-0" for="platform_fee">Platform Fee<span
                                    class="text-danger">*</span>: </label>
                            <input type="text" name="platform_fee" id="platform_fee"
                                class="platform_fee edit-input py-1 px-2" placeholder="Enter platform fee">
                            <div>
                                <small id="platformFeeError" class="text-danger"></small>
                                <!-- Error message for Platform Fee -->
                            </div>
                        </div>
                    </div>

                    <div class="text-end py-3 pe-4 edit-action-btn bg-light">
                        <input class="btn-transparent-blue btn-edit-cancel 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="addplanBtn">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 id="admin-sidebar-edit" 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 Plan</div>
                    <i class="fa-solid fa-xmark " id="plan-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  d-sm-block">
                            <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" for="plan_name">Plan Name<span
                                    class="text-danger">*</span>:</label>
                            <input maxlength="25" type="text" name="plan_name" id="editplan_name"
                                class="plan_name edit-input py-1 px-2 " disabled placeholder="Enter your plan name">
                            <div>
                                <small id="planNameError-edit" 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" for="monthly_amount">Monthly Price : </label>
                            <input maxlength="25" type="text" name="monthly_amount" id="editmonthly_amount" disabled
                                class="monthly_amount edit-input py-1 px-2" placeholder="Enter monthly price">
                            <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" for="">Monthly Price Retained by FMS: </label>
                            <input type="text" maxlength="25" name="monthly_amount_taken"
                                id="editmonthly_amount_taken" disabled class="monthly_amount_taken edit-input py-1 px-2"
                                placeholder="Enter Monthly Price Retained by FMS">
                            <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" for="">Annual Price<span
                                    class="text-danger">*</span>: </label>
                            <input type="email" name="annualy_amount" id="editannualy_amount" disabled
                                class="annualy_amount edit-input py-1 px-2" placeholder="Enter annual price">
                            <div>
                                <small id="emailError" 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" for="">Annual Price Retained by FMS<span
                                    class="text-danger">*</span>: </label>
                            <input type="email" name="annualy_amount_taken" id="editannualy_amount_taken" disabled
                                class="annualy_amount_taken edit-input py-1 px-2"
                                placeholder="Enter Annual Price Retained by FMS">
                            <div>
                                <small id="emailError" 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" for="">Platform Fee<span
                                    class="text-danger">*</span>: </label>
                            <input type="email" name="platform_fee" id="editplatform_fee"
                                class="platform_fee edit-input py-1 px-2" placeholder="Enter platform fee">
                            <div>
                                <small id="editError-platformfee" 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="cancelButtonPlan"
                            type="button" value="Cancel">
                        <button class="btn-blue px-2 py-1 rounded btn-edit-update" type="button" id="updateplanBtn">
                            Update
                            <span id="login-spinner" class="spinner-border spinner-border-sm d-none paymentPlan-spinner"
                                role="status" aria-hidden="true" style="margin-left: 10px;"></span>
                        </button>

                    </div>

                </div>


            </div>
            <!-----Delete--------------------------->
            <div id="deletePlanModal"
                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">
                    <!-- Modal Header with Close Button -->
                    <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> <!-- Close button with class 'close-modal' -->
                    </div>

                    <!-- Modal Body -->
                    <div class="d-flex flex-column py-3 px-sm-3 px-2 text-center">
                        <!-- Dynamic Delete Message -->
                        <div class="d-flex align-items-center">
                            <span class="text-center delete-message">Are you sure you want to delete this plan?</span>
                            <!-- Message will update dynamically -->
                        </div>
                        <!-- Modal Action Buttons -->
                        <div class="d-flex justify-content-end mt-3">
                            <!-- Cancel button to close modal -->
                            <button id="ambBtnCancel" class="btn-modal-cancel me-2 py-1 px-3 rounded-1 border-0"
                                style="background-color: #cecece;">Cancel</button>
                            <!-- Confirm Delete button with data-id attribute for AJAX -->
                            <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>



            <!-- 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"
                        role="button">
                        <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'])
            <!-- side bar -->
            @vite(['resources/js/admin_panel/addform_sidepanel.js'])
            <!--pagination for table-->
            @vite(['resources/js/admin_panel/pagination.js'])
            <!--pagination for mobile-->
            @vite(['resources/js/admin_panel/paginationmobile.js'])
            @vite(['resources/js/admin_panel/stripe/payment_plan.js'])

        @endsection