|
|
|
|
@ -0,0 +1,362 @@ |
|
|
|
|
<!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" |
|
|
|
|
style="min-width: 130px" |
|
|
|
|
> |
|
|
|
|
<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: 0, |
|
|
|
|
nav: false, |
|
|
|
|
dots: false, |
|
|
|
|
stagePadding: 0, |
|
|
|
|
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> |
seyedmr