<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>{{ $title }}</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="Free HTML Templates" name="keywords">
    <meta content="Free HTML Templates" name="description">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <!-- Favicon -->
    <link rel="shortcut icon" href="{{ asset('assets/') }}/mm.svg" type="image/png">

    <!-- Google Web Fonts -->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">

    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">

    <!-- Libraries Stylesheet -->
    <link href="{{ asset('assets/publics') }}/lib/animate/animate.min.css" rel="stylesheet">
    <link href="{{ asset('assets/publics') }}/lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">

    <!-- Customized Bootstrap Stylesheet -->
    <link rel="stylesheet" href="{{ asset('assets/') }}/admin/plugins/sweetalert2/sweetalert2.min.css">
    <link href="{{ asset('assets/publics') }}/css/style.css" rel="stylesheet">
    {{ $slot }}
    <style>
        .tw {
            color: white !important;
        }

        div#menu {
            display: flex;
            justify-content: center;
        }

        div#menu a {
            display: inline;
            color: black;
            /* background-color: black; */
            text-decoration: none;
            padding: 2px;
            padding-left: 6px;
            padding-right: 6px;
            margin-left: 5px;
            margin-right: 5px;
            margin: 5px;
            border-radius: 5px;
        }

        img.logg {
            width: 45%;
            position: absolute;
            margin-top: -20px;
        }

        @media (max-width: 768px) {
            img.logg {
                width: 25%;
                position: absolute;
                margin-top: -20px;
            }
        }

        @media (max-width: 428px) {
            img.logg {
                width: 45%;
                position: absolute;
                margin-top: -20px;
            }
        }
    </style>
</head>

<body>
    <!-- Topbar Start -->
    <div class="container-fluid">
        <div class="row bg-dark py-1 px-xl-5 ">
            <div class="col-lg-6 d-none d-lg-block head-contact">
                <div class="d-inline-flex align-items-center h-100">
                    <a class="text-body tw mr-3 " href="/">Beranda</a>
                    <a class="text-body tw mr-3 " href="/tentang">Tentang Kami</a>
                    <a class="text-body tw mr-3 " href="/list-produk">Produk </a>
                    <a class="text-body tw mr-3 " href="/layanan">Layanan </a>
                    <a class="text-body tw mr-3 " href="/kontak">Kontak</a>
                    {{-- <a class="text-body tw mr-3" href="">Help</a>
                    <a class="text-body tw mr-3" href="">FAQs</a> --}}
                </div>
            </div>
            <div class="col-lg-6 text-center text-lg-right">
                <div class="d-inline-flex align-items-center">

                    @if (Auth::guard('member')->check())
                        <a href="/logout-member" class="btn btn-danger 0 ml-2">
                            {{-- <i class="fas tw fa-user-circle text-dark"></i> --}}
                            Logout
                        </a>
                        <a href="/akun" class="btn  px-0 ml-2">
                            <span class="badge tw border border-dark rounded-circle"
                                style="padding-bottom: 2px;">Akun</span>
                            <i class="fas tw fa-user-circle text-dark"></i>
                        </a>
                    @else
                        <a href="/daftar" class="btn btn-danger 0 ml-2">
                            {{-- <i class="fas tw fa-user-circle text-dark"></i> --}}
                            Daftar
                        </a>

                        <a href="/login" class="btn btn-success 0 ml-2">
                            {{-- <i class="fas tw fa-user-circle text-dark"></i> --}}
                            Login
                        </a>
                    @endif

                </div>
                <div class="d-inline-flex align-items-center d-block d-lg-none">

                    <a href="/keranjang" class="btn  px-0 ml-2">
                        <i class="fas tw fa-shopping-cart text-dark"></i>
                        <span class="badge text-danger border border-white rounded-circle"
                            style="padding-bottom: 2px;"><span id="isi_cart1">{{ Cart::count() }}</span></span>
                    </a>
                </div>
            </div>
        </div>
        <div class="row align-items-center bg-light py-3 px-xl-5 d-none d-lg-flex">
            <div class="col-lg-4">
                <a href="/" class="text-decoration-none">
                    <img src="{{ asset('assets/publics/logomm.png') }}" alt="" style="width: 50%">
                </a>
            </div>
            <div class="col-lg-6 col-6 text-left">
                <form action="list-produk?cari=">
                    <div class="input-group">
                        <input type="text" class="form-control form-control-lg" placeholder="Search...."
                            name="cari">
                        <div class="input-group-append">
                            <span class="input-group-text bg-transparent text-danger">
                                <i class="fa fa-search"></i>
                            </span>
                        </div>
                    </div>
                </form>
            </div>
            <div class="col-lg-2 col-6 text-right">
                <div class="navbar-nav ml-auto py-0 d-none d-lg-block">

                    <a href="/keranjang" class="btn px-0 ml-3">
                        <i class="fas fa-shopping-cart text-dark fw-lg"></i>
                        <span class="badge text-dark border border-danger rounded-circle" style="padding-bottom: 2px;">
                            <span id="isi_cart2">{{ Cart::count() }}</span>
                        </span>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <!-- Topbar End -->


    <!-- Navbar Start -->
    <div class="container-fluid bg-primary">
        <div class="row">
            <div class="col-lg-12  d-lg-none " id="menu">
                <a href="/home">Beranda </a>
                <a href="/tentang">Tentang </a>
                <a href="/list-produk">Produk</a>
                <a href="/layanan">Layanan</a>
                <a href="/kontak">Kontak</a>
            </div>
            <div class="col-lg-12  d-none d-lg-flex">
                <br>
            </div>
        </div>
    </div>
    <div class="container-fluid bg-danger mb-30">
        <div class="row px-xl-5">
            {{-- <div class="col-lg-3 d-none d-lg-block">
                <a class="btn d-flex align-items-center justify-content-between bg-primary w-100" data-toggle="collapse"
                    href="#navbar-vertical" style="height: 65px; padding: 0 30px;">
                    <h6 class="text-dark m-0"><i class="fa fa-bars mr-2"></i>Categories</h6>
                    <i class="fa fa-angle-down text-dark"></i>
                </a>
                <nav class="collapse position-absolute navbar navbar-vertical navbar-light align-items-start p-0 bg-light"
                    id="navbar-vertical" style="width: calc(100% - 30px); z-index: 999;">
                    <div class="navbar-nav w-100">
                        <div class="nav-item dropdown dropright">
                            <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Dresses <i
                                    class="fa fa-angle-right float-right mt-1"></i></a>
                            <div class="dropdown-menu position-absolute rounded-0 border-0 m-0">
                                <a href="" class="dropdown-item">Men's Dresses</a>
                                <a href="" class="dropdown-item">Women's Dresses</a>
                                <a href="" class="dropdown-item">Baby's Dresses</a>
                            </div>
                        </div>
                        <a href="" class="nav-item nav-link">Shirts</a>
                        <a href="" class="nav-item nav-link">Jeans</a>
                        <a href="" class="nav-item nav-link">Swimwear</a>
                        <a href="" class="nav-item nav-link">Sleepwear</a>
                        <a href="" class="nav-item nav-link">Sportswear</a>
                        <a href="" class="nav-item nav-link">Jumpsuits</a>
                        <a href="" class="nav-item nav-link">Blazers</a>
                        <a href="" class="nav-item nav-link">Jackets</a>
                        <a href="" class="nav-item nav-link">Shoes</a>
                    </div>
                </nav>
            </div> --}}
            <div class="col-lg-9">
                <nav class="navbar navbar-expand-lg bg-danger navbar-dark py-3 py-lg-0 px-0">
                    <a href="/" class="text-decoration-none d-block d-lg-none">
                        <img src="{{ asset('assets/publics/ramizah.png') }}" alt="" class="logg">
                    </a>
                    <br>
                    <button type="button" class="navbar-toggler" data-toggle="modal" data-target="#cariproduk">
                        {{-- <span class="navbar-toggler-icon"></span> --}}
                        <i class="fa fa-search tw"></i>
                    </button>
                    {{-- <div class="collapse navbar-collapse justify-content-between" id="navbarCollapse">
                        <div class="navbar-nav mr-auto py-0">
                            <a href="index.html" class="nav-item nav-link active">Home</a>
                            <a href="shop.html" class="nav-item nav-link">Shop</a>
                            <a href="detail.html" class="nav-item nav-link">Shop Detail</a>
                            <div class="nav-item dropdown">
                                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Pages <i
                                        class="fa fa-angle-down mt-1"></i></a>
                                <div class="dropdown-menu bg-primary rounded-0 border-0 m-0">
                                    <a href="cart.html" class="dropdown-item">Shopping Cart</a>
                                    <a href="checkout.html" class="dropdown-item">Checkout</a>
                                </div>
                            </div>
                            <a href="contact.html" class="nav-item nav-link">Contact</a>
                        </div>
                        <div class="navbar-nav ml-auto py-0 d-none d-lg-block">
                            <a href="" class="btn px-0">
                                <i class="fas fa-heart text-primary"></i>
                                <span class="badge text-secondary border border-secondary rounded-circle"
                                    style="padding-bottom: 2px;">0</span>
                            </a>
                            <a href="" class="btn px-0 ml-3">
                                <i class="fas fa-shopping-cart text-primary"></i>
                                <span class="badge text-secondary border border-secondary rounded-circle"
                                    style="padding-bottom: 2px;">0</span>
                            </a>
                        </div>
                    </div> --}}
                </nav>
            </div>
        </div>
    </div>
    <!-- Navbar End -->

    <div class="modal" id="cariproduk" style="margin-top: 50px;">
        <div class="modal-dialog">
            <div class="modal-content">

                <!-- Modal Header -->
                <div class="modal-header">

                </div>

                <!-- Modal body -->
                <div class="modal-body">
                    <form action="list-produk?cari=">
                        <div class="input-group">
                            <input type="text" class="form-control form-control-lg" placeholder="Search...."
                                name="cari">
                            <div class="input-group-append">
                                <button class="input-group-text bg-transparent text-danger">
                                    <i class="fa fa-search"></i>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>

                <!-- Modal footer -->
                <div class="modal-footer">
                    {{-- <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> --}}
                </div>

            </div>
        </div>
    </div>
