@extends('layout.maincontant')



@section('main-content-top-nav-btn')
    <div class="row pt-3 them-between">
        <div class="col">
            <button class="btn btn-info text-primary border-0">
                <i class="fa-solid fa-location-arrow"></i>
                Location
            </button>
            <button style='background-color:#fff9ea;color:#e1994d;' class="btn btn-info  border-0">
                <i class="fa-solid fa-user-gear"></i>
                Rools
            </button>
        </div>
        <div class="col ">
            <div class="d-flex align-items-center justify-content-end mx-2">
                <span class='fs-14'>9 Seats Left</span>
                <span class='px-4 fw-6 fs-15'>Add Seats</span>
                <button class="btn btn-sm px-3 them-bg-brown text-white fs-14 " data-bs-toggle="modal"
                    data-bs-target="#exampleModaladdmember">+ New Team Member</button>
            </div>
        </div>
    </div>
@endsection
@section('main-content')
    <div class="row ">

        <div class="col-md-12 bg-white mb-2">
            <div class="row">
                <div class="col-md-4 py-3">
                    <div class="input-group">
                        <span class="input-group-text">
                            <i class="fas fa-search"></i>
                        </span>
                        <input type="text" class="form-control" placeholder="Search...">
                    </div>
                </div>
                <div class="col-md-12">
                    <table class="table borderless-table">
                        <thead>
                            <tr>
                                <th>Name <i class="fa-solid fa-angle-down" style="float: right;"></i></th>
                                <th>Email <i class="fa-solid fa-angle-down" style="float: right;"></i></th>
                                <th>Last Active <i class="fa-solid fa-angle-down" style="float: right;"></i></th>
                                <th>Role <i class="fa-solid fa-angle-down" style="float: right;"></i></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>John Doe</td>
                                <td>john.doe@example.com</td>
                                <td>2024-06-05 14:32</td>
                                <td>
                                    <select class="form-control form-control-sm">
                                        <option value="admin">Admin</option>
                                        <option value="user">User</option>
                                        <option value="guest">Guest</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td>Jane Smith</td>
                                <td>jane.smith@example.com</td>
                                <td>2024-06-04 09:12</td>
                                <td>
                                    <select class="form-control form-control-sm">
                                        <option value="admin">Admin</option>
                                        <option value="user">User</option>
                                        <option value="guest">Guest</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td>Emily Johnson</td>
                                <td>emily.johnson@example.com</td>
                                <td>2024-06-03 17:45</td>
                                <td>
                                    <select class="form-control form-control-sm">
                                        <option value="admin">Admin</option>
                                        <option value="user">User</option>
                                        <option value="guest">Guest</option>
                                    </select>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="exampleModaladdmember" tabindex="-1" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-md">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5 fw-5" id="exampleModalLabel"> Invait Team Member</h1>
                    <button type="button" class="btn btn-close" data-bs-dismiss="modal" aria-label="Close"> </button>
                </div>
                <div class="modal-body">
                    <div class="row mb-3">
                        <div class="col-md-12 px-4 ">
                            <div class="row">
                                <div class="col-md-6 pb-2">
                                    <label for="exampleFormControlInput1" class="form-label">First Name</label>
                                    <input type="text" class="form-control form-control-sm " id="fname">
                                </div>
                                <div class="col-md-6 pb-2">
                                    <label for="exampleFormControlInput1" class="form-label">Last Name</label>
                                    <input type="text" class="form-control form-control-sm " id="lname">
                                </div>
                                <div class="col-md-12 pb-2">
                                    <label for="exampleFormControlInput1" class="form-label">Email</label>
                                    <input type="email" class="form-control form-control-sm " id="lname">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12 px-4 mt-2">
                            <h5 class="">Desk</h5>
                            <div class="form-check px-4">
                                <input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminate">
                                <label class="form-check-label" for="flexCheckIndeterminate">
                                    No Desk </label>
                                <p><span class="text-secondary">your are not using numbered or named desk</span></p>


                            </div>
                            <div class="form-check px-4">

                                <input class="form-check-input" type="checkbox" value="" id="numbered_check"
                                    name="numbered_check">
                                <label class="form-check-label" for="flexCheckIndeterminate">
                                    Numbered Desk </label>
                                <p><span class="text-secondary">your desk or worksation have numbers.Desk numbers<br>will
                                        apper on Tv screens for visitors for easier navigation</span></p>
                                <div class="numbered-check" style="display: none;">
                                    <label for="exampleFormControlInput1" class="form-label text-secondary">Number Of
                                        Desk</label>
                                    <input type="text" class="form-control" id="number_of_desk" name="number_of_desk">

                                    <div class="form-check mt-3 px-4">
                                        <input class="form-check-input" type="radio" name="flexRadioDefault"
                                            id="flexRadioDefault1">
                                        <label class="form-check-label" for="flexRadioDefault1">
                                            Selecting a desk is mandatory</label>
                                        <p> yours desks or rooms are named.Names will appear<br>
                                            clearks have to select a desk before the can serve any victors</p>

                                    </div>
                                </div>
                            </div>
                            <div class="form-check px-4 ">
                                <input class="form-check-input" type="checkbox" value="" id="named_desk"
                                    name="named_desk">
                                <label class="form-check-label" for="flexCheckIndeterminate">
                                    Named Desk </label>
                                <p><span class="text-secondary">your desk or romms are named.Name will appear on Tv screens
                                        for visitor for easier navigation</span></p>
                                <div class="add-desk" style="display: none;">
                                    <label for="exampleFormControlInput1" class="form-label text-secondary">Desk
                                        Name</label>
                                    <div class="mb-3 d-flex">

                                        <input type="text" class="form-control deskinput" id="desk_name">
                                        <button class="btn add-desk_name" style="background:#fff8f8"><i
                                                class="fa-solid fa-plus" style="color:#52050A;"></i></button>
                                    </div>
                                    <label for="exampleFormControlInput1" class="form-label text-secondary">Desk
                                        Name</label>
                                    <div class="mb-3 d-flex">

                                        <input type="text" class="form-control deskinput" id="desk_name">
                                        <button class="btn add-desk_name" style="background:#fff8f8"><i
                                                class="fa-solid fa-plus" style="color:#52050A;"></i></button>
                                    </div>


                                </div>
                            </div>
                            <div class="form-check px-5 mb-5 add-desk2" style="display: none;">
                                <input class="form-check-input" type="radio" name="flexRadioDefault"
                                    id="flexRadioDefault1">
                                <label class="form-check-label" for="flexRadioDefault1">
                                    Selecting a desk is mandatory</label>
                                <p> yours desks or rooms are named.Names will appear<br>
                                    clearks have to select a desk before the can serve any victors</p>
                            </div>
                        </div>

                    </div>
                </div>
                <!-- <div class="modal-footer">
                            <button type="button" class="btn "style="background:#52050A;color:#ffffff">Add Vistor</button>
                            <button type="button" class="btn " data-bs-dismiss="modal"style="background:#fff6f7;color:#af777e">Cancel</button>

                        </div>  -->
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function() {
            // aalert();
            $(".removeshow").removeClass("show");
            $(".removeshow").removeClass("active");
        });
    </script>
@endsection