@extends("Site.Layouts.blank")
@section ("content")

  <div class="bg-green-dark  min-h-screen">
    <main class="x-container ">
        <div class="relative"  >
            <!--  -->
            <img src="{{asset('site_assets/images/meal_inner_banner.webp')}}" alt="home_banner" class="w-full   h-[300px] md:h-auto md:max-h-[400px] object-cover">
            <div class="absolute inset-0 flex justify-end flex-col " style="background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.50) 100%);">

                <div class="ms-2 md:ms-8  mb-5">

                    <section class="flex gap-2">
                        <div class="bg-white rounded-lg p-1  center-by-flex flex-col w-[85px]">
                            <p class="text-[12px]">Person</p>
                            <p class="text-[14px] font-medium">{{$meal->protein}}</p>
                        </div>
                        <div class="bg-white rounded-lg p-1  center-by-flex flex-col w-[85px]">
                            <p class="text-[12px]">Hour</p>
                            <p class="text-[14px] font-medium">{{$meal->duration_hour}}</p>
                        </div>
                        <div class="bg-white rounded-lg p-1  center-by-flex flex-col w-[85px]">
                            <p class="text-[12px]">Min</p>
                            <p class="text-[14px] font-medium">{{$meal->duration_minutes}}</p>
                        </div>
                    </section>

                    <p class="mt-3  md:text-[25px] text-white font-semibold md:max-w-[40%]"> {{$meal->title}} </p>

                </div>

            </div>
        </div>

    </main>

    <!-- ************ Main *************** -->
    <main class="x-container bg-white  grid md:grid-cols-[2fr_1fr] gap-5  px-5 md:px-10 ">

        <!-- ************** Steps ************ -->
        <section class="bg-LightGray-200 mt-6 rounded-md">
            <div class="mx-3 my-2">
                <h1 class="mt-6 text-green-200 font-medium ps-10 text-[20px]">Cooking Steps</h1>
                <div class="mt-3">
                    @foreach($meal->steps as $key => $step)
                        <div class="grid grid-cols-[1fr_6fr_4fr] items-center gap-4 border-b py-3">
                            <div class="center-by-flex flex-col text-primary">
                                <p class="text-[14px] font-medium"> STEP </p>
                                <p class="text-[25px] font-medium leading-[18px]"> {{$key<9?'0':null}}{{++$key}} </p>
                            </div>
                            <div class="text-[11px] me-2">
                                {{$step->description}}
                            </div>
                            <div class="min-h-[150px]">
                                @if($step->media_path)
                                    <img src="{{$step->media_path}}" alt="{{$step->title}}" class="rounded-lg">
                                @else
                                    <img src="{{asset('site_assets/images/step_default_image.png')}}" alt="thumbnail" class="rounded-lg ">
                                @endif
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>

        <section class="relative">

            <!-- ************** Chef ************ -->
            <div class="bg-primary p-3 rounded-md flex items-center gap-3 relative md:top-[-35px] mb-4 md:mb-0">
                <img src="{{$meal?->chef?->profile_img_path}}" alt="{{$meal?->chef?->name}}" class="rounded-full size-[65px] object-cover">
                <div>
                    <h1 class="text-[#FCFF3C] font-semibold text-[18px]"> {{$meal?->chef?->name}} </h1>
                </div>
            </div>

            <!-- ********* Video & Nutrition Facts *********  -->
            <div class="md:mt-[-20px] bg-LightGray-200 rounded-md">
                <div class="p-2 relative">
                    <img src="{{$meal->main_img_path}}" alt="{{$meal->title}}" class="h-[200px] w-full object-cover object-center rounded-md brightness-75">
                    <div class="absolute inset-0 center-by-flex">
                        <img src="{{asset('site_assets/images/play-media.svg')}}" onclick="showVideoDialog()"
                             alt="play media" class="cursor-pointer">
                    </div>
                </div>

                <!-- *********** Nutrition Facts *********** -->
                <div class="p-2">
                    <h3 class="text-green-200 font-medium text-lg"> Nutrition Facts </h3>
                    <div class="grid grid-cols-4 gap-3 mt-3">
                        <div class="bg-white center-by-flex flex-col rounded-md py-1">
                            <p class="text-[10px]">Calories</p>
                            <p class="font-medium">{{$meal->calories}} kcal</p>
                        </div>
                         <div class="bg-white center-by-flex flex-col rounded-md py-1">
                            <p class="text-[10px]">Carbs</p>
                            <p class="font-medium">{{$meal->calories}} gm</p>
                        </div>
                         <div class="bg-white center-by-flex flex-col rounded-md py-1">
                            <p class="text-[10px]">Protein</p>
                            <p class="font-medium">{{$meal->calories}} gm</p>
                        </div>
                         <div class="bg-white center-by-flex flex-col rounded-md py-1">
                            <p class="text-[10px]">Fat</p>
                            <p class="font-medium">{{$meal->calories}} gm</p>
                        </div>
                    </div>
                </div>

                <!-- *********** Btns *********** -->
                <div class="px-2 py-4 grid grid-cols-2 gap-2 ">
                    <div class="center-by-flex bg-[#E9E9E9] py-2 rounded-full">
                        <p class="text-[15px] font-medium"> Price AED {{$meal->price}} </p>
                    </div>
                    <Btn_add-to-cart :meal="{{$meal}}" size_type="large"></Btn_add-to-cart>
                </div>

            </div>

            <!-- ********* Ingredients *********  -->
            <div class="bg-[#4300880f] mt-6 p-3">
                <h3 class="text-green-200 font-medium text-lg"> Ingredients </h3>
                <div class="mt-5">
                    @foreach($meal->ingredients_sample as $ingredient)
                        <div class="flex items-center gap-2 [&:not(:last-of-type)]:border-b border-[#ccc] pb-3 mt-4">
                            <img src="{{asset('site_assets/images/check-ingredient.svg')}}" alt="check" class="w-[15px]">
                            <p class=" text-sm"> {{$ingredient->name}} </p>
                        </div>
                    @endforeach
                </div>
            </div>

            <!-- ********* Cuisines *********  -->
            <div class=" mt-6 mb-2">
                <h3 class="text-green-200 font-medium text-lg"> Cuisines </h3>
                <div class="mt-3 flex gap-3">
                    @foreach($meal->regionalCuisines as $cuisine)
                        <div class="bg-[#F6F7F7] p-2 rounded-xl">
                            <p class=" text-sm"> {{$cuisine->name}} </p>
                        </div>
                    @endforeach
                </div>
            </div>

        </section>

    </main>
      <br><br><br><br>
      @include("Site.Layouts.footer_cart")
  </div>


  <!-- ****************************************************** -->
  <!-- ******************* Dialog Element ******************* -->
  <!-- ****************************************************** -->
  <dialog id="videoDialog" class="overflow-hidden bg-transparent p-0  max-w-4xl rounded-lg  fixed inset-0 backdrop:bg-black/80">
      <div class="relative">
          <!-- Video Container -->
          <div class="aspect-w-16 aspect-h-9 bg-black">
              <iframe
                  src="" id="reelVideo" class="w-full h-[70vh]" frameborder="0" allowfullscreen
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
              >
              </iframe>
          </div>

          <!-- Close Button -->
          <button
              onclick="closeVideoDialog()" aria-label="Close video"
              class="absolute  top-0 right-0 bg-white rounded-full p-1 shadow-lg hover:bg-gray-100 transition-colors"
          >
              <svg xmlns="http://www.w3.org/2000/svg" class="size-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
              </svg>
          </button>
      </div>
  </dialog>

@endsection

@section('script')
    <script>
        const video_url = '{{$meal->main_video_path}}';
        function showVideoDialog() {
            document.getElementById('videoDialog').showModal();
            document.querySelector('#videoDialog iframe').src = video_url + "?autoplay=1";
        }
        function closeVideoDialog() {
            document.querySelector('#videoDialog iframe').src = '';
            document.getElementById('videoDialog').close();
        }
    </script>
@endsection