@extends('layouts.members')

@section('content')
    <div class="content">
        <!-- start: page header -->
        <header class="px-xl-5 px-lg-4 px-3 sticky-top" data-bs-theme="none">
            <div class="d-flex justify-content-between align-items-center py-2 w-100">
                <div class="d-flex align-items-center pe-4">
                    <button class="btn d-inline-flex d-xl-none border-0 p-0 pe-2" type="button"
                            data-bs-toggle="offcanvas" data-bs-target="#offcanvas_Navbar">
                        <svg xmlns="http://www.w3.org/2000/svg" class="svg-stroke" width="24" height="24"
                             viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-linecap="round"
                             stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                            <path d="M6 21a3 3 0 0 1 -3 -3v-12a3 3 0 0 1 3 -3"/>
                            <path d="M21 6v12a3 3 0 0 1 -6 0v-12a3 3 0 0 1 6 0z" fill="var(--accent-color)"/>
                            <path d="M15 12h-8"/>
                            <path d="M10 9l-3 3l3 3"/>
                        </svg>
                    </button>
                    <button class="btn d-xl-inline-flex d-none border-0 p-0 pe-2 sidebar-toggle-btn" type="button">
                        <svg xmlns="http://www.w3.org/2000/svg" class="svg-stroke" width="24" height="24"
                             viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-linecap="round"
                             stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                            <path d="M6 21a3 3 0 0 1 -3 -3v-12a3 3 0 0 1 3 -3"/>
                            <path d="M21 6v12a3 3 0 0 1 -6 0v-12a3 3 0 0 1 6 0z" fill="var(--accent-color)"/>
                            <path d="M15 12h-8"/>
                            <path d="M10 9l-3 3l3 3"/>
                        </svg>
                    </button>
                    <!--[ Start:: Brand Logo icon ]-->
                    <a href="{{route('home')}}" class="brand-icon text-decoration-none d-flex align-items-center"
                       title="Deniche Admin Template">
                        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"
                             stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                            <path d="M3 3m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z"/>
                            <path d="M9 8l0 8"/>
                            <path d="M9 12l6 0"/>
                            <path d="M15 8l0 8"/>
                        </svg>
                        <span class="fw-bold ps-2 fs-5 d-none d-xl-inline-flex text-gradient">Deniche</span>
                    </a>
                </div>
                <form class="dropdown main-search me-md-4 w-100 d-none d-md-inline-flex">
                    <div class="w-100" data-bs-toggle="dropdown" data-bs-auto-close="outside">
                        <svg class="svg-stroke search-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18"
                             viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-linecap="round"
                             stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                            <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path>
                            <path d="M21 21l-6 -6"></path>
                        </svg>
                        <input type="text" class="form-control" placeholder="Search..." aria-label="Search...">
                    </div>
                    <div class="dropdown-menu shadow rounded-4 p-3 p-xl-4 w-100">
                        <h6 class="fl-title" style="--dynamic-color: var(--theme-color1)">Recent Search</h6>
                        <div class="tagcloud mb-4">
                            <a href="hotels.html" class="tag-link rounded-pill border px-3"
                               style="--hover-color: var(--theme-color1)">Hotel</a>
                            <a href="room-booking.html" class="tag-link rounded-pill border px-3"
                               style="--hover-color: var(--theme-color2)">Room Booking</a>
                            <a href="cab-booking.html" class="tag-link rounded-pill border px-3"
                               style="--hover-color: var(--theme-color1)">Cab Booking</a>
                        </div>
                        <h6 class="fl-title" style="--dynamic-color: var(--theme-color2)">Help</h6>
                        <div class="d-flex flex-column mb-4">
                            <a class="mb-1" href="signup.html">
                                <svg class="svg-stroke" xmlns="http://www.w3.org/2000/svg" width="18" height="18"
                                     viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-linecap="round"
                                     stroke-linejoin="round">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                    <path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path>
                                    <path d="M11 13l9 -9"></path>
                                    <path d="M15 4h5v5"></path>
                                </svg>
                                <span>New around here? Sign up</span>
                            </a>
                            <a class="mb-1" href="docs/{{route('home')}}">
                                <svg class="svg-stroke" xmlns="http://www.w3.org/2000/svg" width="18" height="18"
                                     viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-linecap="round"
                                     stroke-linejoin="round">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                    <path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path>
                                    <path d="M11 13l9 -9"></path>
                                    <path d="M15 4h5v5"></path>
                                </svg>
                                <span>How to setup theme?</span>
                            </a>
                            <a class="mb-1" href="docs/{{route('home')}}">
                                <svg class="svg-stroke" xmlns="http://www.w3.org/2000/svg" width="18" height="18"
                                     viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-linecap="round"
                                     stroke-linejoin="round">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                    <path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path>
                                    <path d="M11 13l9 -9"></path>
                                    <path d="M15 4h5v5"></path>
                                </svg>
                                <span>View detail documentation</span>
                            </a>
                        </div>
                        <h6 class="fl-title" style="--dynamic-color: var(--theme-color3)">New users</h6>
                        <div class="d-flex flex-column">
                            <a href="my-profile.html" class="d-flex align-items-center mb-2">
                                <img class="avatar rounded-circle border border-3 me-2"
                                     src="{{asset('backassets/images/xs/avatar1.jpg')}}" alt="avatar">
                                Kevin Gill
                            </a>
                            <a href="my-profile.html" class="d-flex align-items-center mb-2">
                                <img class="avatar rounded-circle border border-3 me-2"
                                     src="{{asset('backassets/images/xs/avatar2.jpg')}}" alt="avatar">
                                Michelle Glover
                            </a>
                            <a href="my-profile.html" class="d-flex align-items-center mb-2">
                                <img class="avatar rounded-circle border border-3 me-2"
                                     src="{{asset('backassets/images/xs/avatar3.jpg')}}" alt="avatar">
                                Jony Doe
                            </a>
                        </div>
                    </div>
                </form>
                <ul class="header-menu flex-grow-1">
                    <!--[ Start:: notification ]-->
                    <li class="nav-item dropdown px-md-1 d-none d-md-inline-flex">
                        <a class="dropdown-toggle gray-6" href="#" role="button" data-bs-toggle="dropdown"
                           aria-expanded="false" title="notification">
                            <span class="bullet-dot bg-primary animation-blink"></span>
                            <svg class="svg-stroke" xmlns="http://www.w3.org/2000/svg" width="22" height="22"
                                 viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-linecap="round"
                                 stroke-linejoin="round">
                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                <path
                                    d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6"></path>
                                <path d="M9 17v1a3 3 0 0 0 6 0v-1"></path>
                                <path d="M21 6.727a11.05 11.05 0 0 0 -2.794 -3.727"></path>
                                <path d="M3 6.727a11.05 11.05 0 0 1 2.792 -3.727"></path>
                            </svg>
                        </a>
                        <div class="dropdown-menu shadow rounded-4 notification" id="NotificationsDiv">
                            <div class="card border-0">
                                <div class="card-header d-flex justify-content-between align-items-center py-3">
                                    <h4 class="mb-0 text-gradient title-font">Notifications</h4>
                                    <a href="#" class="btn btn-link" title="view all">View all</a>
                                </div>
                                <ul class="card-body p-0 list-unstyled mb-0 custom_scroll ps-2" style="height: 400px;">
                                    <li class="pe-2">
                                        <a class="d-flex p-lg-3 p-2 rounded-3" href="javascript:void(0);">
                                            <div class="avatar sm">
                                                <svg class="svg-stroke" xmlns="http://www.w3.org/2000/svg"
                                                     viewBox="0 0 24 24" stroke="currentColor" fill="none"
                                                     stroke-linecap="round" stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                                    <path
                                                        d="M7 11v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1h3a4 4 0 0 0 4 -4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1 -2 2h-7a3 3 0 0 1 -3 -3"></path>
                                                </svg>
                                            </div>
                                            <div class="flex-fill ms-3">
                                                <span class="d-flex justify-content-between"><small
                                                        class="text-primary">Holiday Sale</small><small
                                                        class="text-muted">11:30 AM Today</small></span>
                                                <p class="mb-0 mt-1">Your New Campaign sale live on themeforest and our
                                                    store is approved.</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="pe-2">
                                        <a class="d-flex p-lg-3 p-2 rounded-3" href="javascript:void(0);">
                                            <div class="avatar sm">
                                                <svg class="svg-stroke" xmlns="http://www.w3.org/2000/svg"
                                                     viewBox="0 0 24 24" stroke="currentColor" fill="none"
                                                     stroke-linecap="round" stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                                    <path d="M8 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h5.697"></path>
                                                    <path d="M18 14v4h4"></path>
                                                    <path d="M18 11v-4a2 2 0 0 0 -2 -2h-2"></path>
                                                    <path
                                                        d="M8 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"></path>
                                                    <path d="M18 18m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path>
                                                    <path d="M8 11h4"></path>
                                                    <path d="M8 15h3"></path>
                                                </svg>
                                            </div>
                                            <div class="flex-fill ms-3">
                                                <span class="d-flex justify-content-between"><small class="text-info">Reports</small><small
                                                        class="text-muted">04:00 PM Today</small></span>
                                                <p class="mb-0 mt-1">Website visits from Twitter is 27% higher than last
                                                    week.</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="pe-2">
                                        <a class="d-flex p-lg-3 p-2 rounded-3 align-items-start"
                                           href="javascript:void(0);">
                                            <img class="avatar sm rounded-circle"
                                                 src="{{asset('backassets/images/xs/avatar4.jpg')}}" alt="avatar">
                                            <div class="flex-fill ms-3">
                                                <span class="d-flex justify-content-between"><small
                                                        class="text-warning">HTML Code</small><small class="text-muted">1day</small></span>
                                                <p class="mb-0 mt-1">Update new code in github and share deteail</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="pe-2">
                                        <div class="d-flex p-lg-3 p-2 rounded-3">
                                            <img class="avatar sm rounded-circle"
                                                 src="{{asset('backassets/images/xs/avatar1.jpg')}}" alt="avatar">
                                            <div class="flex-fill ms-3">
                                                <span class="d-flex justify-content-between"><small
                                                        class="text-success">New Request</small><small
                                                        class="text-muted">1day</small></span>
                                                <p class="mb-0 mt-1"><strong>Tina Harris</strong> is requesting to
                                                    upgrade Plan</p>
                                                <div class="mt-2">
                                                    <a href="#" class="btn btn-sm bg-accent text-white">Accept</a>
                                                    <a href="#" class="btn btn-sm btn-dark text-white">Decline</a>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="pe-2">
                                        <a class="d-flex p-lg-3 p-2 rounded-3" href="javascript:void(0);">
                                            <div class="avatar sm">
                                                <svg class="svg-stroke" xmlns="http://www.w3.org/2000/svg"
                                                     viewBox="0 0 24 24" stroke="currentColor" fill="none"
                                                     stroke-linecap="round" stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                                    <path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path>
                                                    <path d="M12 8v4"></path>
                                                    <path d="M12 16h.01"></path>
                                                </svg>
                                            </div>
                                            <div class="flex-fill ms-3">
                                                <span class="d-flex justify-content-between"><small class="text-danger">Error 404</small><small
                                                        class="text-muted">Yesterday</small></span>
                                                <p class="mb-0 mt-1">Deniche admin template on website analytics
                                                    configurations</p>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li class="nav-item py-2 py-md-1 col-auto">
                        <div class="vr d-none d-sm-flex h-100 mx-sm-2"></div>
                    </li>
                    <!--[ Start:: language ]-->
                    <li class="nav-item dropdown px-md-1 d-none d-md-inline-flex">
                        <a class="dropdown-toggle gray-6" href="#" data-bs-toggle="dropdown" role="button"
                           title="language">
                            <svg class="svg-stroke" xmlns="http://www.w3.org/2000/svg" width="22" height="22"
                                 viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-linecap="round"
                                 stroke-linejoin="round">
                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                <path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path>
                                <path d="M3.6 9h16.8"></path>
                                <path d="M3.6 15h16.8"></path>
                                <path d="M11.5 3a17 17 0 0 0 0 18"></path>
                                <path d="M12.5 3a17 17 0 0 1 0 18"></path>
                            </svg>
                        </a>
                        <ul class="dropdown-menu shadow rounded-4 p-2 p-xl-3 li_animate">
                            <li class="mb-1"><a class="dropdown-item rounded-pill active" href="#" title="language">English</a>
                            </li>
                            <li class="mb-1"><a class="dropdown-item rounded-pill" href="#" title="language">Hindi</a>
                            </li>
                            <li class="mb-1"><a class="dropdown-item rounded-pill" href="#" title="language">Spanish</a>
                            </li>
                            <li class="mb-1"><a class="dropdown-item rounded-pill" href="#" title="language">Arabic</a>
                            </li>
                            <li class="mb-1"><a class="dropdown-item rounded-pill" href="#" title="language">French</a>
                            </li>
                        </ul>
                    </li>
                    <!--[ Start:: theme light/dark ]-->
                    <li class="nav-item dropdown px-md-1">
                        <a class="dropdown-toggle gray-6" href="#" id="bd-theme" data-bs-toggle="dropdown"
                           aria-expanded="false">
                            <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"
                                 class="theme-icon-active">
                                <use href="#sun-fill"></use>
                            </svg>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end p-2 p-xl-3 shadow rounded-4"
                            aria-labelledby="bd-theme">
                            <li class="mb-1"><a class="dropdown-item rounded-pill" href="#" data-bs-theme-value="light">
                                    <svg class="avatar xs me-2 opacity-50 theme-icon" fill="currentColor">
                                        <use href="#sun-fill"></use>
                                    </svg>
                                    Light</a></li>
                            <li class="mb-1"><a class="dropdown-item rounded-pill active" href="#"
                                                data-bs-theme-value="dark">
                                    <svg class="avatar xs me-2 opacity-50 theme-icon" fill="currentColor">
                                        <use href="#moon-stars-fill"></use>
                                    </svg>
                                    Dark</a></li>
                            <li class="mb-1"><a class="dropdown-item rounded-pill" href="#" data-bs-theme-value="auto">
                                    <svg class="avatar xs me-2 opacity-50 theme-icon" fill="currentColor">
                                        <use href="#circle-half"></use>
                                    </svg>
                                    Auto</a></li>
                        </ul>
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                             viewBox="0 0 16 16" style="display: none;">
                            <symbol id="sun-fill" viewBox="0 0 16 16">
                                <path
                                    d="M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/>
                            </symbol>
                            <symbol id="moon-stars-fill" viewBox="0 0 16 16">
                                <path
                                    d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/>
                                <path
                                    d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"/>
                            </symbol>
                            <symbol id="circle-half" viewBox="0 0 16 16">
                                <path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/>
                            </symbol>
                        </svg>
                    </li>
                    <!--[ Start:: theme setting ]-->
                    <li class="nav-item dropdown px-md-1">
                        <a class="dropdown-toggle gray-6" href="#offcanvas_setting" data-bs-toggle="offcanvas"
                           aria-expanded="false" title="template setting">
                            <svg class="svg-stroke" xmlns="http://www.w3.org/2000/svg" width="22" height="22"
                                 viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-linecap="round"
                                 stroke-linejoin="round">
                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                <path
                                    d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z"></path>
                                <path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"></path>
                            </svg>
                        </a>
                    </li>
                    <li class="nav-item py-2 py-md-1 col-auto">
                        <div class="vr d-none d-sm-flex h-100 mx-sm-2"></div>
                    </li>
                    <!--[ Start:: user detail ]-->
                    <li class="nav-item user ms-3">
                        <a class="dropdown-toggle gray-6 d-flex text-decoration-none align-items-center lh-sm p-0"
                           href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" title="User"
                           data-bs-auto-close="outside">
                            <img class="avatar rounded-circle border border-3"
                                 src="{{asset('backassets/images/profile_av.png')}}" alt="avatar">
                            <span class="ms-2 fs-6 d-none d-sm-inline-flex">Michelle</span>
                        </a>
                        <div class="dropdown-menu dropdown-menu-end shadow p-2 p-xl-3 rounded-4">
                            <div class="bg-body p-3 rounded-3">
                                <h4 class="mb-1 title-font text-gradient">Michelle Glover</h4>
                                <p class="small text-muted">michelle.glover@gmail.com</p>
                                <input type="text" class="form-control form-control-sm" placeholder="Update my status">
                            </div>
                            <ul class="list-unstyled mt-3">

                                <li><a class="dropdown-item rounded-pill" aria-label="my profile"
                                       href="my-profile.html">My Profile</a></li>
                                <li><a class="dropdown-item rounded-pill" aria-label="common settings"
                                       href="common-settings.html">Common Settings</a></li>
                                <li><a class="dropdown-item rounded-pill" aria-label="account settings"
                                       href="accounts-setting.html">Settings</a></li>

                            </ul>
                            <a class="btn py-2 btn-primary w-100 mt-3 rounded-pill" href="signin.html" role="button">Logout</a>
                            <div class="mt-3 text-center small">
                                <a class="text-muted me-1" href="#!">Privacy policy</a>•<a class="text-muted mx-1"
                                                                                           href="#!">Terms</a>•<a
                                    class="text-muted ms-1" href="#!">Cookies</a>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </header>
        <!-- start: page header area -->
        <div class="px-xl-5 px-lg-4 px-3 py-2 page-header">
            <ol class="breadcrumb mb-0 bg-transparent">
                <li class="breadcrumb-item">
                    <a href="{{route('home')}}" title="home">Home</a>
                </li>
                <li class="breadcrumb-item active" aria-current="page" title="Dashboard">
                    Dashboard
                </li>
            </ol>
            <ul class="list-unstyled action d-flex align-items-center mb-0">
                <li class="dropdown">
                    <a href="#" data-bs-toggle="dropdown" aria-expanded="false">
                        <svg class="svg-stroke" xmlns="http://www.w3.org/2000/svg" width="22" viewBox="0 0 24 24"
                             stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                            <path
                                d="M3 3m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z"></path>
                            <path d="M9 12l6 0"></path>
                            <path d="M12 9l0 6"></path>
                        </svg>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-end p-2 p-xl-3 shadow rounded-4">
                        <li><a class="dropdown-item rounded-pill" href="#">New folder</a></li>
                        <li><a class="dropdown-item rounded-pill" href="#">File upload</a></li>
                        <li><a class="dropdown-item rounded-pill" href="#">Google docs</a></li>
                        <li><a class="dropdown-item rounded-pill" href="#">Google sheets</a></li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>
                        <li><a class="dropdown-item rounded-pill" href="#">+ Invite</a></li>
                        <li><a class="dropdown-item rounded-pill" href="#">Generate report</a></li>
                        <li><a class="dropdown-item rounded-pill" href="#">New Reports</a></li>
                    </ul>
                </li>
                <li class="dropdown ms-3">
                    <a href="#" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
                        <svg class="svg-stroke" xmlns="http://www.w3.org/2000/svg" width="22" viewBox="0 0 24 24"
                             stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                            <path
                                d="M4 4h16v2.172a2 2 0 0 1 -.586 1.414l-4.414 4.414v7l-6 2v-8.5l-4.48 -4.928a2 2 0 0 1 -.52 -1.345v-2.227z"></path>
                        </svg>
                    </a>
                    <div class="dropdown-menu dropdown-menu-end p-2 p-xl-3 shadow rounded-4" style="width: 300px;">
                        <h6>Filter Options</h6>
                        <div class="row g-3 mt-3">
                            <div class="col-12">
                                <label class="form-label small text-muted">Sorted by:</label>
                                <input type="search" class="form-control" placeholder="Search">
                            </div>
                            <div class="col-12">
                                <label class="form-label small text-muted">Status:</label>
                                <select class="form-select">
                                    <option selected>Choose...</option>
                                    <option>...</option>
                                </select>
                            </div>
                            <div class="col-12">
                                <label class="form-label small text-muted">Notifications:</label>
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" role="switch">
                                    <label class="form-check-label">Enabled</label>
                                </div>
                            </div>
                            <div class="col-12 text-end mt-4">
                                <button type="reset" class="btn btn-sm btn-light me-1">Reset</button>
                                <button type="submit" class="btn btn-sm btn-primary">Apply</button>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <!-- start: page body area -->
        <div class="px-xl-5 px-lg-4 px-3 py-3 page-body">
            <div class="row g-3 mb-3">
                <div class="col-md-6 col-lg-3">
                    <div class="card">
                        <div class="card-header">
                            <h6 class="card-title mb-0">Today Booking</h6>
                        </div>
                        <div class="card-body">
                            <h2>1,587</h2>
                            <span class="badge bg-primary">+11% </span>
                            <span class="text-muted">From previous period</span>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3">
                    <div class="card">
                        <div class="card-header">
                            <h6 class="card-title mb-0">Total Amount</h6>
                        </div>
                        <div class="card-body">
                            <h2>&#x20a6;102,258</h2>
                            <span class="badge bg-info">+05% </span>
                            <span class="text-muted">New income</span>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3">
                    <div class="card">
                        <div class="card-header">
                            <h6 class="card-title mb-0">Total Customer</h6>
                        </div>
                        <div class="card-body">
                            <h2>2.3k</h2>
                            <span class="badge bg-warning">+11% </span>
                            <span class="text-muted">From previous period</span>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3">
                    <div class="card">
                        <div class="card-header">
                            <h6 class="card-title mb-0">Total Revenue</h6>
                        </div>
                        <div class="card-body">
                            <h2>11,5587</h2>
                            <span class="badge bg-success">+21% </span>
                            <span class="text-muted">From previous period</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row g-3">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <h6 class="card-title">Reservations</h6>
                        </div>
                        <div class="card-body">
                            <div id="reservations" style="height: 280px;"></div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12">
                    <div class="card">
                        <div class="card-header">
                            <h6 class="card-title">Today Booking List</h6>
                        </div>
                        <div class="card-body">
                            <table class="table dataTable align-middle table-hover table-body" style="width: 100%;">
                                <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Room Type</th>
                                    <th>Check In</th>
                                    <th>Check Out</th>
                                    <th>Paid Amount</th>
                                    <th>Due Amount</th>
                                    <th>Payment Status</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>
                                        Frank Baker
                                    </td>
                                    <td>Single</td>
                                    <td>12/03/2024</td>
                                    <td>13/03/2024</td>
                                    <td>0.00</td>
                                    <td>&#x20a6;10230</td>
                                    <td><span class="badge text-bg-warning">Pending</span></td>
                                </tr>
                                <tr>
                                    <td>
                                        Rya Randall
                                    </td>
                                    <td>Deluxe</td>
                                    <td>12/03/2024</td>
                                    <td>24/03/2024</td>
                                    <td>0.00</td>
                                    <td>&#x20a6;10430</td>
                                    <td><span class="badge text-bg-warning">Pending</span></td>
                                </tr>
                                <tr>
                                    <td>
                                        Phil Glover
                                    </td>
                                    <td>Studio</td>
                                    <td>12/03/2024</td>
                                    <td>21/03/2024</td>
                                    <td>0.00</td>
                                    <td>&#x20a6;104450</td>
                                    <td><span class="badge text-bg-warning">Pending</span></td>
                                </tr>
                                <tr>
                                    <td>
                                        Victor Rampling
                                    </td>
                                    <td>Junior Suite</td>
                                    <td>12/03/2024</td>
                                    <td>15/03/2024</td>
                                    <td>0.00</td>
                                    <td>&#x20a6;10530</td>
                                    <td><span class="badge text-bg-warning">Pending</span></td>
                                </tr>
                                <tr>
                                    <td>
                                        Sally Graham
                                    </td>
                                    <td>Queen</td>
                                    <td>12/03/2024</td>
                                    <td>17/03/2024</td>
                                    <td>&#x20a6;101550</td>
                                    <td>0.00</td>
                                    <td><span class="badge text-bg-success">Success</span></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection
