@extends('web.layouts.app')
@section($title, $subtitle)
@section('content')
@section('heads')
<meta name="csrf-token" content="{{ csrf_token() }}">

<link href="{{asset('food/vendor/slick/slick/slick.css')}}" rel="stylesheet" type="text/css">
<link href="{{asset('food/vendor/slick/slick/slick-theme.css')}}" rel="stylesheet" type="text/css">
<link href="{{asset('food/css/style.css')}}" rel="stylesheet">
<link href="{{asset('assets/css/order.css')}}" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

</head>
@endsection

<main>
	{{-- titulo 	 --}}
	<div class="container-fluid p-0 vh-50 d-flex align-items-center justify-content-center"
		style="background-image: url({{asset('images/sliders/mario.jpg')}}); background-size: cover; background-position: center; background-repeat: no-repeat;">
		<div class="text-center text-white">
			<div><br><br><br><br></div>
			<h1 class="text-white">Order Food</h1>
			<p class="text-white">Order food with home delivery or take away</p>
		</div>
	</div>

	{{-- menus  --}}
	{{-- menus  --}}
<section class="bg-light">
    <div><br></div>
    <div style="margin-top:10px">
        <div class="container">
            <!-- Tabs for Days of the Week -->
            <div class="d-flex justify-content-center">
                <ul class="nav nav-tabs" id="menuTabs" role="tablist">
                    @foreach ($daysOfWeek as $day)
                    <li class="nav-item" role="presentation">
                        <a class="nav-link @if($loop->first) active @endif" id="{{ strtolower($day) }}-tab" data-bs-toggle="tab" href="#{{ strtolower($day) }}" role="tab" aria-controls="{{ strtolower($day) }}" aria-selected="@if($loop->first) true @else false @endif">{{ $day }}</a>
                    </li>
                    @endforeach
                </ul>
            </div>

            <!-- Tab Panes -->
            <div class="tab-content" id="menuTabsContent">
                @foreach ($daysOfWeek as $day)
                <div class="tab-pane fade @if($loop->first) show active @endif" id="{{ strtolower($day) }}" role="tabpanel" aria-labelledby="{{ strtolower($day) }}-tab">
                    <!-- Carrusel Bootstrap para los menús -->
                    <div id="menuCarousel-{{ strtolower($day) }}" class="carousel slide position-relative">
                        <div class="carousel-inner">
                            @php $menuCount = 0; @endphp
                            @foreach ($menus as $menu)
                            @php
                            $menuDays = json_decode($menu->days);
                            @endphp
                            @if (in_array(strtolower($day), $menuDays))
                            @if ($menuCount % 3 == 0)
                            <div class="carousel-item @if($menuCount == 0) active @endif">
                                <div class="row">
                                    @endif

                                    <!-- Inicio de la tarjeta de menú -->
                                    <div class="col-md-4 col-12 mb-3"> <!-- Usar col-md-4 para pantallas medianas en adelante y col-12 para móviles -->
                                        <div class="cat-item px-1 py-3" style="background-color:white; border-radius:5%; display: flex; flex-direction: column; align-items: center;">
                                            <div class="position-relative">
                                                <div style="position: absolute; top: 10px; left: 10px; background-color: #808000; color: white; padding: 5px 10px; border-radius: 3px; font-size: 12px;">
                                                    <strong>{{ $menu->category->name }}{{ $menu->vegan == 'yes' ? ' - Vegan' : '' }}</strong>
                                                </div>
                                                <div class="position-absolute" style="top: 10px; right: 10px;">
                                                    <input type="checkbox" id="menu-select-{{ $menu->id }}" data-id="{{ $menu->id }}" data-day="{{ strtolower($day) }}" class="form-check-input menu-checkbox" style="transform: scale(1.5);">
                                                </div>
                                                <div class="text-center">
                                                    <img alt="#" src="{{ asset('images/menus_dias/dash/' . $menu->image) }}" class="img-fluid rounded" style="width: 100%; border-radius: 5px;">
                                                </div>
                                                <div style="margin: 10px; padding: 10px; text-align: center;">
                                                    <h6 class="mb-1">
                                                        <a class="text-black">{{ $menu->name }}&nbsp;<span><i class="icon-food_icon_cloche"></i></span></a><br>
                                                        <span class="text-black-50" style="font-size: 0.7rem;">Prot:{{ $menu->proteins }} Cabs:{{ $menu->carbohydrate }} Fat:{{ $menu->fat }}</span><br>
                                                        <span class="text-black-50" style="font-size: 0.7rem;">Total Calories:{{ $menu->calories }} </span>
                                                    </h6>
                                                    <p class="text-gray mb-3">
                                                        @foreach ($menuDays as $menuDay)
                                                        <span class="text-black-50">{{ ucfirst($menuDay) }}</span>
                                                        @endforeach
                                                    </p>
                                                    <p class="text-gray m-0" style="color:teal">
                                                        <span class="text-success-50">${{ $menu->price }}</span>
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Fin de la tarjeta de menú -->

                                    @php $menuCount++; @endphp
                                    @if ($menuCount % 3 == 0)
                                </div>
                            </div>
                            @endif
                            @endif
                            @endforeach
                            @if ($menuCount % 3 != 0)
                        </div>
                    </div>
                    @endif
                </div>
                <!-- Controles de navegación del carrusel con estilo personalizado -->
                <button class="carousel-control-prev custom-carousel-control" type="button" data-bs-target="#menuCarousel-{{ strtolower($day) }}" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Previous</span>
                </button>
                <button class="carousel-control-next custom-carousel-control" type="button" data-bs-target="#menuCarousel-{{ strtolower($day) }}" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                </button>
            </div>
        </div>
        @endforeach
    </div> 
</section>




	<section>
		{{-- orden  --}}
		<section style="background-color: white; margin-top:3%">
			<div class="container">
				<div class="row">
					<div class="col-lg-8">
						<div id="accordion">
							<div id="accordion-container"></div>
						</div>
					</div>
					<!-- /col -->
					<div class="col-lg-4" id="sidebar_fixed">
						<div class="box_booking">
							<div class="head">
								<h3>Order Summary</h3>
							</div>
							<!-- /head -->
							<div class="main">
								<ul id="order-summary-list" class="clearfix">
									<!-- Los elementos de resumen se agregarán dinámicamente aquí -->
								</ul>
								<ul class="clearfix">
									<li>Subtotal<span id="subtotal">$0.00</span></li>
									<li>Delivery fee<span>$10.00</span></li>
									<li class="total">Total<span id="total">$10.00</span></li>
								</ul>
								<!-- Aquí puedes añadir el resto de elementos como selección de día y hora -->
								<a class="btn_1 full-width mb_5" onclick="abrirpopup()">Order Now</a>
								<div class="text-center"><small>No money charged on this steps</small></div>
							</div>
						</div>
					</div>
				</div>
				<!-- /row -->
			</div>
		</section>
	</section>
	{{-- ------------------------------------MODALES -------------------------------------------- --}}
	<!-- Modal Newsletter -->
	<div class="popup_wrapper" id="menuModal" style="display: none;">
		<div class="popup_content newsletter_c">
			<span class="popup_close"><i class="icon_close">X</i></span>
			<div class="row no-gutters">
				<div class="col-md-5 d-none d-md-flex align-items-center justify-content-center">
					<figure><img src="{{asset('assets/img/staff/staff_4.jpg')}}" alt=""></figure>
				</div>
				<div class="col-md-7">
					<div class="content">
						<div class="wrapper">
							<img src="{{asset('assets/img/logo.png')}}" width="200" height="150" alt="">
							{{-- <h3>Detalles del Menú</h3> --}}
							<div class="row">
								<div class="col">
									<label for="">Carbohydrates</label>
									<p id="menuCarbohydrates"></p>
								</div>
								<div class="col">
									<label for="">Proteins</label>
									<p id="menuProteins"></p>
								</div>
								<div class="col">
									<label for="">Fat</label>
									<p id="menuFat"></p>
								</div>
								<div class="col">
									<label for="">Calories</label>
									<p id="menuCalories"></p>
								</div>
							</div>
							<h3>Ingredients</h3>
							<p id="menuIngredients"></p>

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

	<!-- Modal Newsletter -->
	<div class="popup_wrapper" id="clientModal" style="display: none;">
		<div class="container margin_60_40">
			<div class="row justify-content-center">
				<div class="col-xl-6 col-lg-8">
					<div class="box_booking_2 style_2">
						<button class="close_modal" onclick="closeModal()">×</button>
						<div class="head">
							<div class="title">
								<h3>Personal Details</h3>
							</div>
						</div>
						<!-- /head -->
						<div class="main">
							<form id="createslider-form" action="{{ route('order.store') }}" method="POST" enctype="multipart/form-data">
								@csrf
								<div class="form-group">
									<label>First and Last Name</label>
									<input class="form-control" id="nombreCompleto" name="nombreCompleto" placeholder="First and Last Name">
									<small id="nombreCompletoError" class="form-text text-danger"></small>
								</div>
								<div class="row">
									<div class="col-md-6">
										<div class="form-group">
											<label>Your Instagram</label>
											<input class="form-control" id="emailCliente" name="emailCliente" placeholder="Your Instagram">
											<small id="emailClienteError" class="form-text text-danger"></small>
										</div>
									</div>
									<div class="col-md-6">
										<div class="form-group">
											<label>Phone</label>
											<input class="form-control" id="celularCliente" name="celularCliente" placeholder="Phone">
											<small id="celularClienteError" class="form-text text-danger"></small>
										</div>
									</div>
								</div>
								<div class="form-group">
									<label>Full Address</label>
									<input class="form-control" id="direccionCliente" name="direccionCliente" placeholder="Full Address">
									<small id="direccionClienteError" class="form-text text-danger"></small>
								</div>
								<div class="form-group">
									<div class="row">
										<div id="imageUploadCol" class="col-12">
											<label>Payment Confirmation</label>
											<input type="file" class="form-control" id="paymentImage" name="paymentImage" accept="image/*" onchange="previewImage(event)">
											<small id="paymentImageError" class="form-text text-danger"></small>
										</div>
										<div id="imagePreviewCol" class="col-4" style="display: none;">
											<img id="imagePreview" style="width: 100%; height: auto;" />
										</div>
									</div>
								</div>

								<input type="hidden" id="menu-data" name="menu_data">
								<input type="hidden" id="nombreClienteHidden" name="nombreCliente">
								<input type="hidden" id="emailClienteHidden" name="emailCliente">
								<input type="hidden" id="celularClienteHidden" name="celularCliente">
								<input type="hidden" id="direccionClienteHidden" name="direccionCliente">
								<input type="submit" class="btn_1 full-width mb_5" value="Order Now">
							</form>
						</div>
					</div>
				</div>
				<!-- /col -->
			</div>
			<!-- /row -->
		</div>
	</div>

	<!-- Modal info menu vacio-->
	<div class="modal fade" id="infoModal" tabindex="-1" aria-labelledby="infoModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-dialog-centered"> <!-- Añadido modal-dialog-centered -->
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="infoModalLabel">Information</h5>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>
				<div class="modal-body" id="information_modal">

				</div>
				<div class="modal-footer">
					<button type="button" class="btn" style="background-color: #808000; color:#f7f7f7" data-bs-dismiss="modal">Close</button>
				</div>
			</div>
		</div>
	</div>

	<style>
		/* Estilo general del modal */
		.popup_wrapper {
			display: flex;
			justify-content: center;
			align-items: center;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5);
			/* Fondo semi-transparente */
			z-index: 1000;
		}

		/* Contenedor principal del modal */
		.box_booking_2 {
			position: relative;
			/* Necesario para el botón de cierre */
			display: flex;
			flex-direction: column;
			width: 100%;
			max-width: 600px;
			/* Ajusta el ancho máximo del modal */
			max-height: 80vh;
			/* Limita la altura máxima del modal */
			background-color: #fff;
			/* Fondo blanco para el modal */
			border-radius: 8px;
			overflow: hidden;
			/* Oculta el contenido que sobresale */
		}

		/* Botón de cierre */
		.close_modal {
			position: absolute;
			top: 10px;
			right: 10px;
			background: none;
			border: none;
			font-size: 24px;
			color: #333;
			cursor: pointer;
			z-index: 1001;
			/* Asegura que el botón esté encima del contenido del modal */
		}

		/* Contenido principal */
		.main {
			padding: 20px;
			flex-grow: 1;
			/* Permite que el contenido principal crezca */
			overflow: auto;
			/* Habilita el desplazamiento si el contenido es más alto que el área visible */
		}

		/* Pie de la caja */
		.box_booking_footer {
			padding: 20px;
			background-color: #f7f7f7;
			/* Fondo gris claro para el pie de la caja */
			border-top: 1px solid #ddd;
			/* Línea superior para separar el contenido del pie */
		}

		/* Botón de envío */
		.btn_1.full-width {
			width: 100%;
			/* Botón a lo ancho del contenedor */
		}

		/* Responsividad para pantallas pequeñas */
		@media (max-width: 768px) {
			.box_booking_2 {
				margin: 10px;
				/* Agrega margen para el contenedor en pantallas pequeñas */
				padding: 10px;
			}
		}
	</style>
</main>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.3.1/js/bootstrap.bundle.min.js"></script>

<!-- COMMON SCRIPTS -->
<script src="{{asset('assets/js/common_scripts.min.js')}}"></script>
<script src="{{asset('assets/js/common_func.js')}}"></script>
<script src="{{asset('assets/phpmailer/validate.js')}}"></script>

<!-- SPECIFIC SCRIPTS -->
<script src="{{asset('assets/js/sticky_sidebar.min.js')}}"></script>
<script src="{{asset('assets/js/shop_order_func.js')}}"></script>

<script src="{{asset('food/vendor/jquery/jquery.min.js')}}"></script>
<script src="{{asset('food/vendor/bootstrap/js/bootstrap.bundle.min.js')}}"></script>

<script src="{{asset('food/vendor/slick/slick/slick.min.js')}}"></script>

<script src="{{asset('food/vendor/sidebar/hc-offcanvas-nav.js')}}"></script>

<script src="{{asset('food/js/osahan.js')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/5.3.0/js/bootstrap.min.js"></script>

<script>
	window.menusData = @json($menus);
	window.ingredientsData = @json($ingredients);
</script>

<script src="{{asset('assets/js/order.js')}}"></script>

@endsection