@extends('frontendv2.layouts.frontend_design')

@section('content')

<!-- new UI style="height: 240px !important;width: 1440px !important;"-->
<section id="banner" class="w-full">

    <img alt="banner" class="w-full autocenterbanner" src="{{$banner}}"  />
</section>
<section id="location"
    class="w-full flex flex-col md:flex-row justify-between items-center py-6 px-4 md:px-6 lg:px-[60px] lg:py-8">
    <div class="w-full md:w-4/5">
        <h1 class="font-bold text-[#181B37] text-[24px] lg:text-[32px] mb-3 lg:mb-6">
            {{$establish->business_name}}
        </h1>
        <p class="text-[12px] md:text-[13px] font-medium text-[#545454]">@if($establish->address_line_f)
            {{$establish->address_line_f}}, @endif @if($establish->address_line_s) {{$establish->address_line_s}},
            @endif @if($establish->city) {{$establish->city}}, @endif {{$establish->state}}
            {{$establish->zip_postal_code}}</p>
        <br />
        <p class="text-[12px] md:text-[13px] font-medium text-[#545454]">{{$establish->description}}</p>
    </div>
    <!-- <div class="w-full md:w-1/5">
        <p class="font-bold text-left mt-5 md:m-0 md:text-right text-sm text-[#037ABC]">
            View Location
        </p>
    </div> -->
</section>


<!-- Slider main container -->
<section class="slider w-full bg-white no-scrollbar border-t border-b border-[#EFEFF7] py-8 top-0 sticky bg-white z-10">
    <div class="w-full relative flex">
        <div id="slider" class="overflow-auto scroll-smooth">
            <ul id="main-slider" class="scroll-smooth py-4 w-max no-scrollbar px-[60px]">
                @if($categories)
                    @foreach($categories as $category)
                        @if(count($category['getcategorywiseproducts']))
                        <li onclick="triggerElem('category{{$category['id']}}')" class="text-center inline px-6 py-2 cursor-pointer font-[700] text-[15px] border-2 border-[#333] mx-[5px] my-0 text-[#333] rounded-[80px]">
                            {{$category['categorie_name']}}
                        </li>
                        @endif
                    @endforeach
                @endif
            </ul>
        </div>
        <div
            class="absolute flex items-center justify-center top-1/2 -translate-y-1/2 left-0 bg-white cursor-pointer h-[80px] w-[55px]" onclick="handleNext()">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-left w-5 h-5 text-[#333]" viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z" />
            </svg>
        </div>
        <div class="absolute flex items-center justify-center top-1/2 -translate-y-1/2 right-0 bg-white cursor-pointer h-[80px] w-[55px]" onclick="handlePrevious()">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right w-5 h-5 text-[#333]" viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
            </svg>
        </div>
    </div>
</section>

<!-- Slider main container PLEASE DO NOT DELETE BELOW CODE -->
<!-- Slider main container PLEASE DO NOT DELETE BELOW CODE -->