<!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;*/
        }

        .order-indicator {
            z-index: 9999;
            bottom: 20px;
            left: 20px;
            text-align: center;
            line-height: 39px;
            padding: 15px;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            font-size: 25px;
            background-color: #3d3d3d !important;
        }

        #order-count {
            position: absolute;
            top: -6px;
            right: -6px;
            background: #de3232;
            font-size: 16px;
            height: 22px;
            line-height: 25px;
            width: 22px;
            padding: 3px;
            box-sizing: content-box;
            border-radius: 50%;
        }

        .order-box {
            margin-top: 15px;
        }

        .order-manager {
            height: 38px;
            width: 98px;
            background: #a1a1a1;
            border-radius: 4px;
            padding: 4px;
        }

        .order-manager .increase-btn {
            width: 30px;
            display: inline-block;
            border-radius: 0 3px 3px 0;
            color: #337413;
        }

        .order-manager .decrease-btn {
            width: 30px;
            display: inline-block;
            border-radius: 3px 0 0 3px;
            color: #d62b2b;
        }

        .order-manager .order-holder {
            width: 30px;
            display: inline-block;
        }

        .order-page > div {
            position: fixed;
            top: 0;
            right: 100vw;
            transition: all .5s;
            left: 0;
            width: 100%;
            bottom: 0;
            height: 100%;
            background: #fff;
            z-index: 99999;
        }

        .order-page.open > div {
            right: 0;
        }

        .order-page .header {
            height: 60px;
        }

        .order-page .body {
            height: 100vh;
            z-index: 10000;
            padding-top: 75px;
        }
    </style>
    <title>Menu 1</title>
</head>
<body>
<header class="container-fluid bg-dark">
    <div class="row text-center py-4">
        @if($domain->user->restaurant_logo != '')
            <img src="{{'/storage/' . basset($domain->user->restaurant_logo)}}"
                 class="d-inline-block align-top rounded-3 m-auto img-thumbnail w-25"
                 alt=""
            >
        @endif
        <h1 class="h4 text-center text-light my-4">
            {{$domain->user->restaurant_name}}
        </h1>
        <div>
            <a type="button" class="btn btn-outline-info" href="#">
                <i class="fab fa-instagram me-2"></i>
                ما را در اینستاگرام دنبال کنید
            </a>
        </div>
    </div>
</header>
<div style="background-color: #c2c2c2 !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 py-2 category-slide d-block text-center text-dark text-decoration-none"
                    >
                        <img
                            src="{{$category->icon != '' ? asset("icons/{$category->icon}") : asset('icons/icon-default.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="{{$food->image != '' ? '/storage/' . $food->image : 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; min-height: 300px"
                            class="col px-4 pb-4 d-flex flex-column rounded-2 border-1 border-secondary">
                            <h3 class="mb-3">{{ $food->name }}</h3>
                            <p class="card-text mb-auto">{{ $food->description }}</p>
                            <div class="order-box d-flex justify-content-between align-items-center">
                                <div class="order-manager d-flex">
                                    <span
                                        data-food-selector
                                        data-food-id="{{$food->id}}"
                                        data-selector-type="increase"
                                        class="increase-btn text-center d-flex justify-content-center align-items-center"
                                    >
                                        <i class="fa fa-plus"></i>
                                    </span>
                                    <span
                                        class="order-holder fw-bold text-center d-flex justify-content-center align-items-center"
                                        data-order-container="{{$food->id}}">0</span>
                                    <span
                                        data-food-selector
                                        data-food-id="{{$food->id}}"
                                        data-selector-type="decrease"
                                        class="decrease-btn text-center d-flex justify-content-center align-items-center"
                                    >
                                        <i class="fa fa-minus"></i>
                                    </span>
                                </div>
                                <div class="price text-dark fw-bold">
                                    <span>
                                        {{ number_format($food->price) }}
                                    </span>
                                    <span class="ms-1">
                                        تومان
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @endforeach
    </div>
</div>
<div style="background-color: #17191b !important;">
    <div class="container text-secondary">
        <footer class="row">
            <ul class="nav justify-content-center border-bottom pb-3 mb-3">
                <li class="nav-item"><a href="#" class="nav-link px-2 text-secondary">نمکا</a></li>
                <li class="nav-item"><a href="#" class="nav-link px-2 text-secondary">امکانات</a></li>
                <li class="nav-item"><a href="#" class="nav-link px-2 text-secondary">قیمت</a></li>
                <li class="nav-item"><a href="#" class="nav-link px-2 text-secondary">سوالات متداول</a></li>
                <li class="nav-item"><a href="#" class="nav-link px-2 text-secondary">درباره نمکا</a></li>
            </ul>
            <p class="text-center text-body-secondary" dir="ltr">© 2024 Namaka</p>
        </footer>
    </div>
</div>
<span class="bg-danger order-indicator position-fixed text-light" id="open-order-page">
    <i class="fa-solid fa-list"></i>
    <span id="order-count">0</span>
</span>
<div class="order-page" id="order-page">
    <div
        class="header bg-dark d-flex justify-content-between px-4 py-3 align-items-center border-bottom border-light text-light position-fixed top-0 w-100">
        <h1 class="h4 m-0">سفارشات شما</h1>
        <i class="fa fa-close text-danger" id="close-order-page"></i>
    </div>
    <div class="body bg-dark text-light">
        <table class="table table-striped table-dark">
            <thead>
            <tr>
                <th scope="col">نام</th>
                <th scope="col">تعداد</th>
                <th scope="col">قیمت واحد</th>
            </tr>
            </thead>
            <tbody id="order-list">
            </tbody>
            <tfoot>
            <tr>
                <th scope="col">جمع کل</th>
                <th scope="col" class="text-center" colspan="2" id="total_price">0</th>
            </tr>
            </tfoot>
        </table>

    </div>
</div>
<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: 5,
        autoWidth: true,
    })
    let foods = JSON.parse('{!! $domain->user->categories->pluck('foods')->flatten()->toJson() !!}');
    let selected_foods = {};
    $('[data-food-selector]').click(function () {
        let selector_type = $(this).data('selector-type');
        let food_id = $(this).data('food-id')
        if (selector_type === 'increase') {
            changeOrder(food_id, 1);
        } else {
            changeOrder(food_id, -1);
        }
    });

    function changeOrder(food_id, change) {
        if (!selected_foods[food_id]) {
            selected_foods[food_id] = 0;
        }
        selected_foods[food_id] += change;

        if (selected_foods[food_id] <= 0) {
            delete selected_foods[food_id];
            calculateOrder()
            changeInBox(food_id, 0);
            return;
        }

        calculateOrder()
        changeInBox(food_id, selected_foods[food_id]);
    }

    function changeInBox(food_id, count) {
        $(`[data-order-container=${food_id}]`).html(count);
    }

    function calculateOrder() {
        let count = 0;
        for (let key in selected_foods) {
            count += selected_foods[key];
        }
        $('#order-count').html(count)
    }

    $('#open-order-page').click(function () {
        $('body').addClass('overflow-hidden')
        $('#order-page').addClass('open')
        let table_body = $('#order-list');
        table_body.html('');
        let price = 0;
        for (i = 0; foods.length > i; i++) {
            if (!selected_foods[foods[i].id]) {
                continue
            }
            table_body.append(createTableRow(foods[i].name, selected_foods[foods[i].id], foods[i].price))
            price += foods[i].price * selected_foods[foods[i].id]
        }
        $('#total_price').html(price.toLocaleString() + " تومان")
    })

    $('#close-order-page').click(function () {
        $('body').removeClass('overflow-hidden')
        $('#order-page').removeClass('open')
    })

    function createTableRow(dishName, quantity, price) {
        const $tr = $('<tr>');
        $('<th>', {
            scope: 'row',
            text: dishName
        }).appendTo($tr);
        $('<td>', {
            text: quantity
        }).appendTo($tr);
        $('<td>', {
            text: price.toLocaleString() + " تومان" // تبدیل قیمت به رشته‌ای با جداکننده هزارگان
        }).appendTo($tr);

        return $tr;
    }
</script>
</body>
</html>
