@extends('frontend::layouts.master')
@section('title')

@section('style')
<style>.bg-bg{--tw-bg-opacity: 1;background-color: rgb(197 156 109 / var(--tw-bg-opacity));border-radius: 8px;}.bg-bg .img-logo-detail{padding-top: 8px}</style>
@endsection

@section('content')
    <main>
        <div class="bg-right">
            <div class="bg-asp"> </div>
        </div>
        <div class="bg-left">
            <div class="bg-asp"> </div>
        </div>
        <div class="container pt-[.5rem] lg:pt-8">
            <div class="flex -mx-3 flex-wrap lg:pt-12">
                <div class="px-[.75rem] pb-[.75rem] w-full text-center">
                    <p class="uppercase fs-24 text">@lang('frontend::lang.direc_1')</p>
                </div>
            </div>
            <div class="flex items-center justify-around -mx-3 mb-2 flex-wrap xs:flex-no-wrap xs:justify-between relative">
                <div class="py-1 px-2 rounded-lg bg-2nd">
                    <p class="text fs-12">@lang('frontend::lang.direc_2')</p>
                </div>
                <div class="py-1 px-2 rounded-lg bg-2nd">
                    <p class="text fs-12">@lang('frontend::lang.direc_3')</p>
                </div>
                <div class="py-3 w-full">
                    @if (!empty($data['floor_plan']->image))
                        <div class="py-3 w-full">
                            <img class="mx-auto cursor-pointer" src="{{ asset($data['floor_plan']->image) }}" alt="Alternate Text"  data-bs-toggle="modal" data-bs-target="#zoomModal" />
                        </div>
                    @endif
                </div>
                <div class="zoom-icn" data-bs-toggle="modal" data-bs-target="#zoomModal">
                    <img src="{{ Module::asset('frontend:img/icon/zoom.svg') }}" alt="Alternate Text" />
                </div>
            </div>
            <div class="tabs-zone">
                @if (!empty($data['category']))
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                    @foreach ($data['category'] as $k => $category)
                        <li class="nav-item" role="presentation">
                            @if (empty($data['category_active']))
                                <button class="nav-link {{$k == 1 ? 'active': ""}}" id="{{$category['name']}}-tab" data-bs-toggle="tab" data-bs-target="#{{$category['name']}}" type="button" role="tab" aria-controls="{{$category['name']}}" aria-selected="true" value="{{ !empty($category['name']) ? $category['name'] : '' }}">{{ !empty($category['name']) ? $category['name'] : '' }}</button>
                            @else
                                <button class="nav-link {{ !empty($data['category_active']) && ($data['category_active'] == $k) ? "active" : "" }}" id="{{$category['name']}}-tab" data-bs-toggle="tab" data-bs-target="#{{$category['name']}}" type="button" role="tab" aria-controls="{{$category['name']}}" aria-selected="true" onclick="nav_category(this.value);" value="{{ !empty($category['name']) ? $category['name'] : '' }}">{{ !empty($category['name']) ? $category['name'] : '' }}</button>
                            @endif
                            <input type="hidden" name="url" id="url" value="{{$category['url'] ? $category['url'] : ""}}">
                        </li>
                    @endforeach
                </ul>
                @endif
                <div class="tab-content" id="myTabContent">
                    @if (!empty($data['category']))
                        @foreach ($data['category'] as $kk => $item_category)
                            <br />
<b>Warning</b>:  Undefined variable $kk in <b>/home/cp073329/public_html/new-market.mwz/Modules/Frontend/Resources/views/directory.blade.php</b> on line <b>63</b><br />
                            {{-- category_active --}}
                            {{-- {{$cl}} --}}
                            <div class="tab-pane fade show {{$cl}}" id="{{$item_category['name']}}" role="tabpanel" aria-labelledby="{{$item_category['name']}}-tab">
                                <div class="flex -mx-3 flex-wrap">
                                    @if (!empty($data['product'][$kk]))
                                        @foreach ($data['product'][$kk] as $product)
                                            {{-- loop product  --}}
                                                <div class="w-full xs:w-1/2 lg:w-1/3 xl:w-1/4 p-[.75rem]">
                                                    <div class="flex space-x-3 full-url bg-bg">
                                                        @if (!empty($product['image']))
                                                            <div class="img-logo-wrapper">
                                                                <img src="{{ asset($product['image']) }}" alt="Alternate Text" />
                                                            </div>  
                                                        @endif
                                                        <div class="img-logo-detail">
                                                            <p class="text fs-13">{{ !empty($product['name']) ? $product['name'] : '' }}</p>
                                                            <p class="text fs-13">{{ !empty($product['lock']) ? $product['lock'] : '' }}</p>
                                                            <p class="text fs-13 text-grey-dark">{{ !empty($product['floor']) ? $product['floor'] : '' }}</p>
                                                        </div>
                                                        <a href="{{ !empty($product['url']) ? $product['url'] : "" }}"></a>
                                                    </div>
                                                </div>
                                            {{-- .loop product  --}}
                                        @endforeach
                                    @else 
                                         <div class="w-full xs:w-1/2 lg:w-1/3 xl:w-1/4 p-[.75rem]"></div>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    @endif
                </div>
            </div>
        </div>
    </main>
@endsection

@section('script')
<script type="text/javascript" charset="utf-8">
 nav_category = function(res){
    var url = "/"+res;
    window.history.replaceState({}, res, url)
 }
</script>
@endsection