@extends('app')
@section('content')
@include('layout.admin_sidebar')
<div class="doners-usertype-contanier px-3 py-4">
    <div class="usertype-title text-brown pb-4">User Types</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=" py-2 text-center">
                <a href="{{ url('/donors-usercard') }}" class="text-decoration-none text-dark">UserCards</a>
            </li>
            <li class="active 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('admin-panel/donors-users') }}">Users</a>
                <a class="px-3 py-2 my-1" href="{{ url('admin-panel/donors-usercard') }}">User Cards</a>
                <a class="px-3 py-2 my-1" href="{{ url('admin-panel/donors-usertype') }}">User Type</a>
            </div>
        </div>
    </div>
    <!-- add user -->
    <div class="text-end usercreate">
        <button class="btn-usercreate border-0 text-light py-1 px-2 rounded-1">Create New</button>
    </div>

    <!-- laptop view -->
    <div class="table-responsive usertypetable_container d-none d-xl-block bg-light pt-0 ">
        <table class=" table bg-white donorusertype-table text-center">
            <thead class="bg-brown  text-light usertype-thead">
                <tr>
                    <th class="border-end ">#</th>
                    <th class="border-end ">User Type</th>
                    <th class="border-end ">Template</th>
                    <th class="border-end ">Edit</th>
                </tr>
            </thead>
            <tbody class="usertype-tbody">
                <tr class="usertype-tr">
                    <td class=" " class="border-end"><input type="checkbox" class="check"></td>
                    <td class=" ">General</td>
                    <td class=" ">
                        <img src="" alt="no-img">
                    </td>
                    <td class=" "><i class="fa-regular fa-pen-to-square fa-2xl text-brown" data-target="modal1"></i></td>
                </tr>


            </tbody>
        </table>
    </div>
   
    <!-- mobile view  -->
    <div class="usertype-mobile-view d-flex flex-column d-xl-none pb-3" id="donor_usertype_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">
                    <span>General</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">Template</span>
                    <span class="value status">
                        <img src="" alt="no-img">
                    </span>
                </div>
                <div class=" mobile-body-content d-flex justify-content-between py-3 mx-3">
                    <span class="user-label">Edit</span>
                    <span class="value status"><i class="fa-regular fa-pen-to-square fa-xl text-brown" data-target="modal1"></i></span>
                </div>
            </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_usertype.js'])
@endsection