<!doctype html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.rtl.min.css"
          integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">
    <link rel="stylesheet" href="{{ asset('css/fontiran.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/owl/owl.carousel.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/owl/owl.theme.default.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/font-awesome/css/all.css') }}">
    <style>
        body {
            font-family: IRANSans, serif !important;
        }

        .header-cover::before {
            content: '';
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            margin: auto;
            background: #000000cc;
            width: 100%;
            height: 100%;
        }

        .category-slide {
            /*background: #383838;*/
        }
    </style>
    <title>Menu 1</title>
</head>
<body>
<div class="container-fluid text-light header-cover position-relative"
     style="min-height: 400px; background-image: url('{{ asset('re.png') }}'); background-size: cover; background-position: center center;">
    <div class="row text-center">
        <h1 class="mt-5" style="z-index: 99999">رستوران من</h1>
        <i class="fab fa-facebook"></i>
        <i class="fab fa-instagram"></i>
        <i class="fab fa-telegram"></i>
    </div>
</div>

<div style="background-color: #17191b !important;">
    <div class="container category-slider-container pt-3" id='navbar-example'>
        <div class="row">
            <div class="owl-carousel owl-theme category-slider p-0">
                @foreach($domain->user->categories as $category)
                    <a href="#cat-{{$category->id}}"
                       class="h-100 px-1 py-2 category-slide d-block text-center text-light text-decoration-none"
                       style="min-width: 150px"
                    >
                        <img src="{{asset('icons/icon-burger.png')}}" class="mx-auto mb-2" style="width: 40px;">
                        <h2 class="h6">{{$category->name}}</h2>
                    </a>
                @endforeach
            </div>
        </div>
    </div>
</div>
<div class="container-fluid bg-dark" data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0"
     tabindex="0">
    <div class="container">
        @foreach($domain->user->categories as $category)
            <h2 id="cat-{{$category->id}}" class="my-2 pt-4 mt-0 text-light text-center">{{ $category->name }}</h2>
            <hr>
            <div class="row">
                @foreach($category->foods as $food)
                    <div class="col-md-3 position-relative mb-4">
                        <img src="{{asset('food.png')}}" alt="food"
                             style="left: 0; right: 0; top: 0; width: 170px; height: 170px"
                             class="rounded-circle position-absolute m-auto">
                        <div style="height: 85px"></div>
                        <div
                            style="padding-top: 100px; border-style: solid; background: #ffffff40; height: 300px"
                            class="col px-4 pb-4 d-flex flex-column rounded-2 border-1 border-secondary">
                            <h3 class="mb-0">{{ $food->name }}</h3>
                            <div class="mb-1 text-body-secondary">
                                <span>
                                    {{ number_format($food->price) }}
                                </span>
                                <span class="ms-1">
                                    تومان
                                </span>
                            </div>
                            <p class="card-text mb-auto">{{ $food->description }}</p>
                        </div>
                    </div>
                @endforeach
            </div>
        @endforeach
    </div>
</div>
<footer class="container-fluid">

</footer>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="{{asset('assets/owl/owl.carousel.min.js')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>
<script>
    $('.owl-carousel').owlCarousel({
        rtl: true,
        margin: 10,
        nav: false,
        dots: false,
        stagePadding: 50,
        autoWidth:true,
        // responsive: {
        //     0: {
        //         items: 2
        //     },
        //     600: {
        //         items: 3
        //     },
        //     1000: {
        //         items: 5
        //     }
        // }
    })
    console.log(JSON.parse("{{$domain->user->categories->toJson()}}"));
</script>
</body>
</html>
