@php $categories = getCategories(); @endphp

<div class="container" id="bottom-top">
    <div class="mob-main d-xxl-none d-xl-none d-lg-none d-md-none d-sm-block d-block ">
        <div id="mySidenav" class="sidenav">
            <a class="close-icon" href="javascript:void(0)" class="closebtn " onclick="closeNav()">&times;</a>
            <a href="{{ route('homepage') }}">Home</a>
            <a href="{{ route('about') }}">About</a>
            <a href="list-prod.php">Collection </a>
            <div class="mob-sublink">
                <ul>
                    @foreach($categories as $category)
                        <li>
                            <a href="{{ route('productListing',['category'=>$category->alias]) }}"><i class="fa fa-angle-right"></i> {{ $category->name }}</a>
                        </li>
                    @endforeach
                </ul>
            </div>
            <a href="{{ route('services') }}">Services</a>
            <a href="{{ route('bookAppointment') }}">Book Appointment </a>
            <a href="{{ route('faqs') }}">FAQs </a>
            <a href="{{ route('blog') }}">Blog </a>
            <a href="{{ route('contact') }}">Contact</a>
        </div>

        <div class="row mob-menu-main">
            <div class="col-6">
                <a href="index.php">
                    <img class="img-fluid" src="{{ asset(Storage::url($settings->logo)) }}" alt="logo">
                </a>
            </div>
            <div class="col-6">
                <div class="mob-menu">
                    <span style="font-size:30px;cursor:pointer" onclick="openNav()">
                        <i class="fa fa-bars" aria-hidden="true"></i>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

<section class="topbar-main d-xl-block d-lg-block d-md-block d-sm-none d-none">
    <div class="container">
        <div class="row">
            <div class="col-6">
                <div class="topleft">
                    <span>
                        <i class="fa fa-map-marker"></i> Find a Store
                    </span>
                    <span>
                        <i class="fa fa-phone"></i>
                        Call us: <span class="top-number"><a class="text-decoration-none text-dark" href="tel:+{{ $settings->phone }}">{{ $settings->phone }}</a></span>
                    </span>
                </div>
            </div>
            <div class="col-6">
                <div class="text-right top-right">
                    <a href="{{ $settings->instagram }}"><i class="fa fa-instagram"></i></a>
                    <a href="{{ $settings->pinterest }}"><i class="fa fa-pinterest-p"></i></a>
                    <a href="{{ $settings->tiktok }}"><img src="{{ asset('imgs/tiktok.svg') }}" alt="tiktok icon"></a>
                    <a href="{{ $settings->facebook }}"><i class="fa fa-facebook"></i></a>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="navbar-main d-xxl-block d-xl-block d-lg-block d-md-block d-sm-none d-none">
    <div class="container">
        <div class="row">
            <div class="col-5 text-right dropdown">
                <a href="{{ route('about') }}">About</a>
                <button class="btn btn-secondary collection-button dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Collection</button>
                <ul class="dropdown-menu collection-sub-links">
                    @foreach($categories as $category)
                        <li>
                            <a class="dropdown-item" href="{{ route('productListing',['category'=>$category->alias]) }}"> {{ $category->name }}</a>
                        </li>
                    @endforeach
                </ul>
                <a href="{{ route('services') }}">Services</a>
            </div>
            <div class="col-2 text-center">
                <a href="{{ route('homepage') }}"><img src="{{ asset(Storage::url($settings->logo)) }}" alt=""></a>
            </div>
            <div class="col-5 rightnav-top">
                <a href="{{ route('bookAppointment') }}"">Book Appointment</a>
                <a href="{{ route('faqs') }}">FAQs</a>
                <a href="{{ route('blog') }}">Blog</a>
                <a href="{{ route('contact') }}">Contact</a>
            </div>
        </div>
    </div>
</section>