@extends('layouts.master2')

@section('imagePreload')
    @if (!empty($banners)) 
        @foreach ($banners as $banner)
        <link rel="preload" as="image" href="{{ $banner->image_path }}">
        @endforeach
    @endif
@endsection

@section('headerMobile')
    <section class="@if (config('giladiskon.use_thematic'))
        {{ "bg-gd-thematic-color" }}
    @else
        {{ "bg-gd-primary" }}
    @endif d-md-none d-block">
        <div class="container pt-3">
            <div class="row">
                <div class="col-6 offset-3 col-md-4 offset-md-4 text-center">
                    <a href="{{url('/')}}">
                        @if (config('giladiskon.custom_logo'))
                        <img src="{{ asset('img/lqip_x.gif') }}" data-src="{{ config('giladiskon.custom_logo') }}" alt="Giladiskon.com" class="lazyload blur-up img-fluid">
                        @else
                        <img src="{{ asset('img/lqip_x.gif') }}" data-src="{{ asset('img/gd_logo.png') }}" alt="Giladiskon.com" class="lazyload blur-up img-fluid">
                        @endif
                    </a>
                </div>
            </div>
        </div>
        <div class="container py-3">
            {{-- @if($userDetails)
            <div class="row">
                <div class="col-10 text-white">
                    <h3>@if(isset($userDetails->details->first_name)) Hi, {{ ucfirst($userDetails->details->first_name) }} @else {{ $userDetails->email }} @endif</h3>
                    <p>Dapatkan deal terbaik untuk hari ini!</p>
                </div>
                @if($user) 
                <div class="col-2 text-right">
                    <a href="{{ url('user/inbox') }}">
                        <div class="position-relative">
                            @if($user->unreadMessages) 
                            <span class="oval abs-t-0 abs-r-min-5"></span>
                            @endif
                            <img src="{{ asset('img/lqip.gif') }}" data-src="{{ asset('img/icon/ic_message.svg') }}" class="lazyload blur-up img-fluid" alt="message">
                        </div>
                    </a>
                </div>
                @endif
            </div>
            @endif --}}
            <search @if (config('giladiskon.use_thematic'))
                {{ "use_thematic" }}
            @endif></search>
        </div>
        @if (config('giladiskon.use_thematic'))
        <div class="thematic-mobile-header">
            <img src={{ asset('img/theme/idul_adha/img-header-desktop-kambing-left.png') }} />
        </div>
        @endif
    </section>
@endsection
@section('content')
{{-- <get-location></get-location> --}}
<div class="pb-5 pb-md-3">
    {{-- @if ($user)
        <div class="pt-3">
            <notifications
                :unreviewed="{{ json_encode($user->unreviewedVouchers) }}"
                :unused_trial="{{ json_encode($user->remaining_trial) }}"
                :user_expired="{{ json_encode($user->expired_date) }}"
            ></notifications>
        </div>
    @endif --}}
    <div class="container">
        <div class="pt-3">
            <div class="row">
                <div class="col-md-8">
                    @if(!empty($banners))
                        <banner-slider :banner-lists="{{ json_encode($banners) }}"></banner-slider>
                    @else
                        <banner-slider></banner-slider>
                    @endif
                </div>
                @if (!empty($surveys) && !empty($banners))
                <div class="col-md-4 d-none d-md-block gd-slider-wraper">
                    <div class="bg-gd-primary rounded h-100">
                        <div class="row">
                            <div class="col align-self-start">
                                <div>
                                    <div>
                                        <div class="row">
                                            <div class="col-12 ">
                                                <div class="text-center">
                                                    <img src="{{ asset('img/lqip.gif') }}" data-src="{{ asset('img/info/img_survey_promo.png') }}" class="lazyload blur-up img-fluid" alt="Survey Page">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12 align-self-end">
                                <div class="px-3 py-3">
                                    <a href="{{ url('survey') }}" class="btn btn-outline-light btn-block btn-lg gd-font-sm">Lihat Survey</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @endif
            </div>
        </div>
    </div>
    {{-- <div class="container bg-white d-block d-md-none my-3 py-3">
        <div class="row no-gutters categories">
            @php
                $gd_products = [
                    ["name" => "Giladiskon Sale", "img" => 'img/gd_sale_icon.png', "url" => "https://sale.giladiskon.com"],
                    // ["name" => "Giladiskon Mart", "img" => 'img/gd_mart_icon.png', "url" => "https://belanja.giladiskon.com"],
                    ["name" => "Voucher Giladiskon", "img" => 'img/gd_plus_icon.png', "url" => "vouchers"]                ]
            @endphp
            @foreach($gd_products as $gd_product)
            <div class="col-6">
                <div class="text-center">
                    <a href="{{ url($gd_product['url']) }}" onclick="sendCustomActivity('click gd product', {'gd_product_name': '{{ $gd_product['name'] }}' });" class="d-block">
                        <div><img src="{{ asset('img/lqip.gif') }}" data-src="{{ asset($gd_product['img']) }}" alt="{{ $gd_product['name'] }}" class="lazyload blur-up img-max-50"></div>
                        <div><span class="gd-font-xs">{{ $gd_product['name'] }}</span></div>
                    </a>
                </div>
            </div>
            @endforeach
        </div>
    </div> --}}
    @if(is_array($categories))
    <div class="container bg-white d-block d-md-none my-3 py-3">
        <div class="row align-items-center mt-2 mb-3">
            <div class="col-8">
                <div class="row align-items-center">
                    <div class="col-auto">
                        <h5 class="mb-0">Kategori</h5>
                    </div>
                </div>
            </div>
            <div class="col-4 text-right">
                <a href="{{ url('/category') }}">
                    <span class="gd-font-md font-weight-bold text-gd-primary">
                        Lihat semua
                    </span>
                </a>
            </div>
        </div>
        <div class="row no-gutters categories">
            @foreach(array_slice($categories, 0, 8) as $cat)
            <div class="col-3 mb-2">
                <div class="text-center">
                    <a href="{{ url('/category/'. $cat->slug) }}" onclick="sendCustomActivity('clickcategory', {'category_name': '{{$cat->slug}}' });" @click="$refs.trackerComponent.tracking({activity: 'click', type: null, section: 'category', 'category': '{{ $cat->name }}'})" class="d-block">
                        <div><img src="{{ asset('img/lqip.gif') }}" data-src="{{ $cat->image }}" alt="{{ $cat->name }}" class="lazyload blur-up img-max-50"></div>
                        <div class="title-wrap"><span class="gd-font-xs">{{ $cat->name }}</span></div>
                    </a>
                </div>
            </div>
            @endforeach
        </div>
    </div>
    @endif
    @livewire('section', ['cookie' => $cookie])
    <div class="container bg-white mt-md-3 mb-4 rounded">
        <div class="py-3">
            <merchant-slider></merchant-slider>
        </div>
    </div>
</div>
@endsection
@section('script')
@parent
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBX7VbZbSZ6Ro2ucRF8LcBPKilFtzwsnBk&amp;libraries=places"></script>
<script src="{{ asset('js/slick.min.js') }}"></script>
@endsection