@extends('app')
@section('content')
@include('layout.admin_sidebar')
<div class="doners-usercard-contanier px-3 py-4">
    <div class="usercard-title text-brown pb-4">User Cards</div>
    <!-- tabs -->
    <div class="users-tab">
        <ul class="d-none d-md-flex list-unstyled flex-md-wrap mb-0">
            <li class=" py-2 text-center">
                <a href="{{ url('/donors-users') }}" class="text-decoration-none text-dark">Users</a>
            </li>
            <li class="active 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 d-md-none">
            <div class="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">
                <a class="px-3 py-2 my-1" href="{{ url('/donors-users') }}">Users</a>
                <a class="px-3 py-2 my-1" href="{{ url('/donors-usercard') }}">User Cards</a>
                <a class="px-3 py-2 my-1" href="{{ url('/donors-usertype') }}">User Type</a>
            </div>
        </div>
    </div>
    <!-- search container -->
    <div class="usercard-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="" name="" class="usercard-input usercard-dropdown me-2 px-1 pe-3">
                <option value="">Name</option>
                <option value="state1">Name 1</option>
                <option value="state2">Name 2</option>
                <option value="state3">Name 3</option>
                <!-- Add more city options as needed -->
            </select>
            <div class="usercard-search position-relative">
                <input type="text" class="usercard-input rounded-1">
                <button class="position-absolute top-0 end-0 px-3 border-0 text-light h-100 rounded-1 cus-bg-dark-blue"><i class="fa-solid fa-magnifying-glass fa-lg"></i></button>
            </div>
        </div>
        <div class=" py-md-0 pt-3">
            <label for="">List by User Type :&nbsp;</label>
            <select id="" name="" class="usercard-input userall-input usercard-dropdown rounded-1">
                <option value="">All</option>
                <option value="state1">example 1</option>
                <option value="state2">example 2</option>
                <option value="state3">example 3</option>
                <!-- Add more city options as needed -->
            </select>
        </div>
    </div>
    <div class="text-end usercard-list-type pb-3">
        <label class="pe-0 pe-sm-1" for="">List Type:</label>
        <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadio1" value="option1">
        <label class="form-check-label pe-1" for="exampleRadio1">
            Pending
        </label>
        <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadio1" value="option2">
        <label class="form-check-label pe-1" for="exampleRadio1">
            Dispactched
        </label>
        <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadio1" value="option3">
        <label class="form-check-label pe-1" for="exampleRadio1">
            Both
        </label>
    </div>
    <!-- laptop view -->
    <div class="table-responsive usercardtable_container d-none d-xl-block bg-light pt-0 ">
        <table class=" table bg-white donorusercard-table text-center">
            <thead class="bg-brown  text-light usercard-thead">
                <tr>
                    <th class="border-end "><input type="checkbox" id="checkAll"></th>
                    <th class="border-end ">#</th>
                    <th class="border-end ">Name</th>
                    <th class="border-end ">Email</th>
                    <th class="border-end ">User Type</th>
                    <th class="border-end ">Card Creation Date</th>
                    <th class="border-end ">Card Status</th>
                    <th class="border-end ">View Card</th>
                </tr>
            </thead>
            <tbody class="usercard-tbody">
                <tr class="usercard-tr">
                    <td class=" " class="border-end"><input type="checkbox" class="check"></td>
                    <td class=" ">1</td>
                    <td class=" ">Yash Mehta</td>
                    <td class=" ">janedoe@example.com</td>
                    <td class=" ">General</td>
                    <td class=" ">January-13-2014</td>
                    <td class=" ">
                        <button class="btn btn-sm usercard-active-btn py-0 text-light">Active</button>
                    </td>
                    <td class=" "><i class="fa-regular fa-credit-card fa-xl text-brown" data-target="modal1"></i></td>
                </tr>
                <tr class="usercard-tr">
                    <td class=" " class="border-end"><input type="checkbox" class="check"></td>
                    <td class=" ">1</td>
                    <td class=" ">Yash Mehta</td>
                    <td class=" ">janedoe@example.com</td>
                    <td class=" ">General</td>
                    <td class=" ">January-13-2014</td>
                    <td class=" ">
                        <button class="btn btn-sm usercard-active-btn py-0 text-light">Active</button>
                    </td>
                    <td class=" "><i class="fa-regular fa-credit-card fa-xl text-brown" data-target="modal1"></i></td>
                </tr>
                <tr class="usercard-tr">
                    <td class=" " class="border-end"><input type="checkbox" class="check"></td>
                    <td class=" ">1</td>
                    <td class=" ">Yash Mehta</td>
                    <td class=" ">janedoe@example.com</td>
                    <td class=" ">General</td>
                    <td class=" ">January-13-2014</td>
                    <td class=" ">
                        <button class="btn btn-sm usercard-active-btn py-0 text-light">Active</button>
                    </td>
                    <td class=" ">
                        <i class="fa-regular fa-credit-card fa-xl text-brown" data-target="modal1"></i>
                    </td>
                </tr>
                <tr class="usercard-tr">
                    <td class=" " class="border-end"><input type="checkbox" class="check"></td>
                    <td class=" ">1</td>
                    <td class=" ">Yash Mehta</td>
                    <td class=" ">janedoe@example.com</td>
                    <td class=" ">General</td>
                    <td class=" ">January-13-2014</td>
                    <td class=" ">
                        <button class="btn btn-sm usercard-active-btn py-0 text-light">Active</button>
                    </td>
                    <td class=" "><i class="fa-regular fa-credit-card fa-xl text-brown" data-target="modal1"></i></td>
                </tr>
                <tr class="usercard-tr">
                    <td class=" " class="border-end"><input type="checkbox" class="check"></td>
                    <td class=" ">1</td>
                    <td class=" ">Yash Mehta</td>
                    <td class=" ">janedoe@example.com</td>
                    <td class=" ">General</td>
                    <td class=" ">January-13-2014</td>
                    <td class=" ">
                        <button class="btn btn-sm usercard-active-btn py-0 text-light">Active</button>
                    </td>
                    <td class=" "><i class="fa-regular fa-credit-card fa-xl text-brown" data-target="modal1"></i></td>
                </tr>
                <!-- Add more rows as needed -->
            </tbody>
        </table>
    </div>

    <!-- mobile view  -->
    <div class="user-mobile-view d-flex flex-column d-xl-none pb-3" id="donor_usercard_mobile">
        <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>Yash Mehta </span>
                </div>
                <div>
                    <button class="btn btn-success btn-sm user-btn me-3 ms-2">Card Status</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">Email</span>
                    <span class="value status">janedoe@example.com</span>
                </div>
                <div class=" mobile-body-content d-flex justify-content-between py-3 mx-3">
                    <span class="user-label">User Type</span>
                    <span class="value status">General</span>
                </div>
                <div class=" mobile-body-content d-flex justify-content-between py-3 mx-3">
                    <span class="user-label">Card Creation Date</span>
                    <span class="value status">January-13-2014</span>
                </div>
                <div class=" mobile-body-content d-flex justify-content-between py-3 mx-3">
                    <span class="user-label">view Card</span>
                    <span class="value status"><i class="fa-solid fa-credit-card fa-xl text-brown" data-target="modal1"></i></span>
                </div>
            </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">
            <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'])
@vite(['resources/js/admin_panel/donor_usercard.js'])
@endsection