@extends('layouts.master2')

@if (isset($voucher))
    @section('scriptDataLayer')
        <script>smartech('dispatch', 'detail voucher', {vouchertitle: '{{ $voucher->name }}', vouchermerchant: '{{ $voucher->merchant_name }}'}) ;</script>
        <script>smartech('dispatch', 'open premium deal', {voucherid: {{ $voucher->id }} }) ;</script>
    @endsection

    @section('meta')
        <meta property="og:type" content="article" />
        <meta property="og:image" content="{{ $voucher->thumbnail  }}" />
        <meta property="og:title" content="{{ $voucher->name}}" />
        <meta property="og:description" content="{{ $voucher->name}}" />
        <meta property="og:url" content="{{ Request::url() }}" />
        <meta property="og:site_name" content="Giladiskon.com" />
    @endsection

    @section('canonical')
        @if (env('APP_ENV') == "production")
            <link href="{{ 'https://www.giladiskon.com/vouchers/'.$voucher->slug }}" rel="canonical">
        @elseif (env('APP_ENV') == "development")
            <link href="{{ 'https://dev.giladiskon.com/vouchers/'.$voucher->slug }}" rel="canonical">
        @else
        <link href="{{ URL::to('/').'/vouchers/'.$voucher->slug }}" rel="canonical">
        @endif
    @endsection
    
    @if (!empty($seo)) 
        @if (!empty($seo->meta_title)) @section('title', $seo->meta_title ) @endif
        @if (!empty($seo->meta_description)) @section('meta_description', $seo->meta_description ) @endif
        @if (!empty($seo->meta_keyword)) @section('meta_keyword', $seo->meta_keyword ) @endif
    @else
        @section('title', 'Promo '. $voucher->merchant_name . ' di Giladiskon.com')
    @endif

    @section('pageHeader')
    <div class="bg-gd-primary d-block d-md-none py-3" v-sticky>
        <div class="container">
            <div class="row align-items-center justify-content-center">
                <div class="col-6">
                    <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>
    @endsection

    @section('loginMobile')
    @endsection
    @section('content')
    <div class="mb-md-0">
        <input type="hidden" name="voucherid" id="voucherid" value="{{ $voucher->id }}" />
        <div class="gd-voucher-detail-slider gd-slider d-block d-md-none">
            @foreach($voucher->images as $img) 
            <div class="item-box">
                <img v-gallery:voucherDetail src="{{ $img->image_url }}" alt="{{ $voucher->name }}" class="img-fluid">
            </div>
            @endforeach
            @if(isset($voucher->giveaway_ID))
                <div class="giveaway_icon">
                    @php
                        $giveawayUrl = url('giveaway?giftId='.$voucher->giveaway_ID);
                        if($user) {
                            $giveawayUrl = url('giveaway/bridge?giftId='.$voucher->giveaway_ID);
                        }
                    @endphp
                    @if ($user)
                        <a href="{{ !isset($voucher->giveaway_URL) ? $voucher->giveaway_URL : $giveawayUrl }}" target="blank">
                            <img src="{{ $voucher->giveaway_Icon }}" alt="Giladiskon Giveaway">
                        </a>
                    @else
                        <login-button>
                            <template v-slot:button>
                                <img src="{{ $voucher->giveaway_Icon }}" alt="Giladiskon Giveaway">
                            </template>
                        </login-button>
                    @endif
                </div>
            @endif
        </div>
        <div class="voucher-details">
            <div class="container">
                <div class="pt-md-5">
                    <div class="row">
                        <div class="col-12 col-md-6 d-none d-md-block">
                            <div class="gd-voucher-detail-slider gd-slider">
                                @foreach($voucher->images as $img)
                                <div class="item-box">
                                    <img  v-gallery:voucherDetailDesktop src="{{ $img->image_url }}" alt="{{ $voucher->name }}" class="img-fluid">
                                </div>
                                @endforeach
                                @if(isset($voucher->giveaway_ID))
                                    <div class="giveaway_icon">
                                        @php
                                            $giveawayUrl = url('giveaway?giftId='.$voucher->giveaway_ID);
                                            if($user) {
                                                $giveawayUrl = url('giveaway/bridge?giftId='.$voucher->giveaway_ID);
                                            }
                                        @endphp
                                        @if ($user)
                                            <a href="{{ !isset($voucher->giveaway_URL) ? $voucher->giveaway_URL : url('giveaway') }}" target="blank">
                                                <img src="{{ $voucher->giveaway_Icon }}" alt="Giladiskon Giveaway">
                                            </a>
                                        @else
                                            <login-button>
                                                <template v-slot:button>
                                                    <img src="{{ $voucher->giveaway_Icon }}" alt="Giladiskon Giveaway">
                                                </template>
                                            </login-button>
                                        @endif
                                    </div>
                                @endif
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="h-100 bg-white summary">
                                <div class="pt-3 p-md-3 pt-md-4 border-bottom">
                                    <div class="row bg-white">
                                        <div class="col-12 col-md-10">
                                            <span class="gdplus-premium-label d-none d-md-block p-2 px-3 gd-font-sm gd-font-lg-md font-weight-bold"><img src="{{ asset('img/icon/diamon.png') }}">Voucher</span>
                                            <h5>{{ $voucher->name }}</h5>
                                            <div class="row align-items-center">
                                                <div class="col-6">
                                                    <div class="gd-badge {{ getLabelColor($voucher->type) }}">
                                                        <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 369 69">
                                                            <title>Artboard 1</title>
                                                            <path d="M369,6.17V0H0V6.17a7.09,7.09,0,0,1,7,7.08,7.09,7.09,0,0,1-7,7.08v7.09A7.09,7.09,0,0,1,7,34.5a7.09,7.09,0,0,1-7,7.08v7.09a7.09,7.09,0,0,1,7,7.08,7.09,7.09,0,0,1-7,7.08V69H369V62.83a7.08,7.08,0,0,1,0-14.16V41.58a7.08,7.08,0,0,1,0-14.16V20.33a7.08,7.08,0,0,1,0-14.16Z" />
                                                            <text x="50%" y="50%" class="badge-text" dominant-baseline="middle" text-anchor="middle">{{ getLabelPromo($voucher->type, $voucher->start_price, $voucher->final_price, $voucher->saving_value) }}</text>
                                                        </svg>
                                                    </div>
                                                </div>
                                                @if($voucher->total_review)
                                                <div class="col-6 text-right">
                                                    <i class="fa fa-star text-gd-yellow" aria-hidden="true"></i>&nbsp;
                                                    <span>{{ number_format($voucher->rate, 1) }} ({{ $voucher->total_review }} Ulasan)</span>
                                                </div>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="col-2 d-none d-md-block">
                                            {{-- <img src="{{ isFavourite($voucher->is_favourite) }}" alt="add to favorite" class="ic-favorit"> --}}
                                            @if($user) 
                                                <favorit-icon :status="{{ $voucher->is_favourite }}" :dealsid="{{ $voucher->id }}" :type="'vouchers'"></favorit-icon>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                <div class="py-3 p-md-3">
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="gd-font-sm">
                                                <div>Deals tersedia {{ $voucher->current_stock }} dari {{ $voucher->total_stock }}</div>
                                                <div>{{ getPeriod($voucher->max_used, $voucher->period) }}</div>
                                                <div class="font-weight-bold">Berlaku Hingga : {{ date('d F Y', strtotime($voucher->expired_date ))}}</div>
                                            </div>
                                        </div>
                                    </div>
                                    @if ( !$voucher->merchant_is_online )
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="pt-3">
                                                <div class="alert alert-warning mb-0 border-warning font-weight-bold gd-font-sm">Perhatian : Jangan gunakan voucher sebelum anda berada di area kasir {{ $voucher->merchant_name }} yang berpartisipasi</div>
                                            </div>
                                        </div>
                                    </div>
                                    @endif
                                    @if(!$user)
                                    <div class="row d-none mt-md-3 d-md-block">
                                        <div class="col-12">
                                            <use-voucher
                                            :voucher="{{ json_encode($voucher) }}"
                                            :first_name="@if($user) {{ $user->first_name }} @else {{ 'null' }} @endif"
                                            :login="@if($user) {{'true'}} @else {{ 'false' }} @endif"
                                            :is_gdplus="@if($user && strtotime($user->expired_date) > strtotime(now())) {{ 'true' }} @else {{ 'false'}} @endif"
                                            :is_trial="@if($user && $user->is_trial) {{ 'true' }} @else {{ 'false' }} @endif"
                                            :has_pin="@if($user && $user->has_pin) {{ 'true' }} @else {{ 'false' }} @endif"
                                            :remaining_trial="@if($user && $user->remaining_trial) {{ $user->remaining_trial }} @else {{ 0 }} @endif"
                                            :free_vouchers="@if($user && $user->free_vouchers) {{ $user->free_vouchers }} @else {{ 0 }} @endif"
                                            ></use-voucher>
                                        </div>
                                    </div>
                                    @endif
                                </div>
                                <div class="pt-3 p-md-3 border-top">
                                    <div class="row">
                                        <div class="col-12 align-items-end">
                                            <share 
                                                :share_url="'{{ url('deals/'. $voucher->slug) }}'"
                                                :share_message="'{{ str_replace("'", "\'", $voucher->name) }}'"
                                                :voucher_id="{{ $voucher->id }}">
                                            </share>
                                        </div>
                                    </div>
                                </div>
                                @if ($voucher->tags) 
                                <div class="py-3 p-md-3 border-top">
                                    <div class="row">
                                        <div class="col-12">
                                            <tags :tag_lists="{{ json_encode($voucher->tags) }}" :type="'voucher'"></tags>
                                        </div>
                                    </div>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="row d-none d-md-block">
                        <div class="col-12">
                            <div class="bg-white my-3">
                                <ul class="nav nav-tabs gd-tabs justify-content-center" id="myTab" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" id="aboutVoucher-tab" data-toggle="tab" href="#aboutVoucher" role="tab" aria-controls="aboutVoucher" aria-selected="true">Tentang Deals</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="voucherUse-tab" data-toggle="tab" href="#voucherUse" role="tab" aria-controls="voucherUse" aria-selected="false">Cara Penggunaan</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="terms-tab" data-toggle="tab" href="#terms" role="tab" aria-controls="terms" aria-selected="false">Syarat & ketentuan</a>
                                    </li>
                                    @if($voucher->total_review !== 0)
                                    <li class="nav-item">
                                        <a class="nav-link" id="review-tab" data-toggle="tab" href="#review" role="tab" aria-controls="review" aria-selected="false">Review {{ number_format($voucher->rate, 1) }} <i class="fa fa-star text-gd-yellow" aria-hidden="true"></i>&nbsp; ({{ $voucher->total_review }} Ulasan)</a>
                                    </li>
                                    @endif
                                    @if(!$voucher->merchant_is_online && $voucher->is_any_outlet)
                                    <li class="nav-item">
                                        <a class="nav-link" id="redeemPlace-tab" data-toggle="tab" href="#redeemPlace" role="tab" aria-controls="redeemPlace" aria-selected="true">Tempat Tukar Deals</a>
                                    </li>
                                    @endif
                                </ul>
                                <div class="tab-content" id="myTabContent">
                                    <div class="tab-pane fade show active" id="aboutVoucher" role="tabpanel" aria-labelledby="home-tab">
                                        <div class="py-2 px-5">
                                            {!! $voucher->description !!}
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="voucherUse" role="tabpanel" aria-labelledby="profile-tab">
                                        <div class="py-2 px-5">
                                            @if ($voucher->merchant_is_online) 
                                                <div class="row">
                                                    <div class="col-6 col-md-3">
                                                        <div class="text-center">
                                                            <img src="{{ asset('img/info/how_to_use_step-1_online.png') }}" class="img-fluid" />
                                                        </div>
                                                    </div>
                                                    <div class="col-6 col-md-3">
                                                        <div class="text-center">
                                                            <img src="{{ asset('img/info/how_to_use_step-2_online.png') }}" class="img-fluid" />
                                                        </div>
                                                    </div>
                                                    <div class="col-6 col-md-3">
                                                        <div class="text-center">
                                                            <img src="{{ asset('img/info/how_to_use_step-3_online.png') }}" class="img-fluid" />
                                                        </div>
                                                    </div>
                                                    <div class="col-6 col-md-3">
                                                        <div class="text-center">
                                                            <img src="{{ asset('img/info/how_to_use_step-4_online.png') }}" class="img-fluid" />
                                                        </div>
                                                    </div>
                                                </div>
                                            @else 
                                                <div class="row">
                                                    <div class="col-6 col-md-3">
                                                        <div class="text-center">
                                                            <img src="{{ asset('img/info/how_to_use_step-1_offline.png') }}" class="img-fluid" />
                                                        </div>
                                                    </div>
                                                    <div class="col-6 col-md-3">
                                                        <div class="text-center">
                                                            <img src="{{ asset('img/info/how_to_use_step-2_offline.png') }}" class="img-fluid" />
                                                        </div>
                                                    </div>
                                                    <div class="col-6 col-md-3">
                                                        <div class="text-center">
                                                            <img src="{{ asset('img/info/how_to_use_step-3_offline.png') }}" class="img-fluid" />
                                                        </div>
                                                    </div>
                                                    <div class="col-6 col-md-3">
                                                        <div class="text-center">
                                                            <img src="{{ asset('img/info/how_to_use_step-4_offline.png') }}" class="img-fluid" />
                                                        </div>
                                                    </div>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="terms" role="tabpanel" aria-labelledby="contact-tab">
                                        <div class="py-2 px-5">
                                            <div>
                                                                                            </div>
                                        </div>
                                    </div>
                                    @if($voucher->total_review !== 0)
                                    <div class="tab-pane fade" id="review" role="tabpanel" aria-labelledby="review-tab">
                                        <div class="py-2 px-5">
                                            <review 
                                                :review_list="{{ json_encode($reviews) }}"
                                                :voucher_id="{{ $voucher->id }}"
                                                :total_data="{{ $total_review_data }}">
                                            </review>
                                        </div>
                                    </div>
                                    @endif
                                    @if($voucher->is_any_outlet)
                                    <div class="tab-pane fade" id="redeemPlace" role="tabpanel" aria-labelledby="redeemPlace-tab">
                                        <div class="py-2 px-5">
                                            <outlets :merchant_id="{{ $voucher->merchant_id }}" :config="{ showImage: false}" :voucher_id="{{ $voucher->id }}"></outlets>
                                        </div>
                                    </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @if(!empty($voucher->merchant_id)) 
        <a href="{{ url('merchant/'.$voucher->merchant_slug) }}" class="text-gd-primary">
            <div class="d-block d-md-none bg-white border-bottom py-3">
                <div class="container">
                    <div class="row">
                        <div class="col-3">
                            <img src="{{ $voucher->merchant_image }}" alt="{{ $voucher->merchant_name }}" class="img-fluid">
                        </div>
                        <div class="col-9">
                            <div class="font-weight-bold text-gd-black">{{ ucfirst($voucher->merchant_name) }}</div>
                            <span class="text-gd-primary">Merchant Detail</span>
                        </div>
                    </div>
                </div>
            </div>
        </a>
        @endif
        <div class="d-block d-md-none bg-white border-bottom py-3">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <h5>Tentang voucher ini</h5>
                        <div>{!! $voucher->description !!}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="my-3">
                        <banner-slider :pos="2"></banner-slider>
                    </div>
                </div>
            </div>
        </div>
        <div class="d-block d-md-none bg-white border-bottom py-3">
            <div class="container">
                <div class="row">
                    <div class="col-12 gd-content-popup">
                        @if(!$voucher->merchant_is_online && $voucher->is_any_outlet)
                        <detail-content>
                            <template v-slot:icon><img src="{{ asset('img/icon/ic_vc_place.png')}}" alt="Redeem Place" class="img-max-25"></template>
                            <template v-slot:title>Tempat Tukar Deals</template>
                            <template v-slot:content>
                                <outlets :merchant_id="{{ $voucher->merchant_id }}" :config="{ showImage: false}" :voucher_id="{{ $voucher->id }}"></outlets>
                            </template>
                        </detail-content>
                        @endif
                        <detail-content>
                            <template v-slot:icon><img src="{{ asset('img/icon/ic_term.png')}}" alt="Terms and Conditions" class="img-max-25"></template>
                            <template v-slot:title>Baca Syarat & Ketentuan</template>
                            <template v-slot:content>
                                <div class="py-3">{!! $voucher->term !!}</div>
                            </template>
                        </detail-content>
                        <detail-content>
                            <template v-slot:icon><img src="{{ asset('img/icon/ic_use.png')}}" alt="How To Use" class="img-max-25"></template>
                            <template v-slot:title>Baca Cara Penggunaan</template>
                            <template v-slot:content>
                                <div>
                                    @if ($voucher->merchant_is_online) 
                                        <div class="row">
                                            <div class="col-12 col-md-3">
                                                <div class="text-center">
                                                    <img src="{{ asset('img/info/how_to_use_step-1_online.png') }}" class="img-fluid" />
                                                </div>
                                            </div>
                                            <div class="col-12 col-md-3">
                                                <div class="text-center">
                                                    <img src="{{ asset('img/info/how_to_use_step-2_online.png') }}" class="img-fluid" />
                                                </div>
                                            </div>
                                            <div class="col-12 col-md-3">
                                                <div class="text-center">
                                                    <img src="{{ asset('img/info/how_to_use_step-3_online.png') }}" class="img-fluid" />
                                                </div>
                                            </div>
                                            <div class="col-12 col-md-3">
                                                <div class="text-center">
                                                    <img src="{{ asset('img/info/how_to_use_step-4_online.png') }}" class="img-fluid" />
                                                </div>
                                            </div>
                                        </div>
                                    @else 
                                        <div class="row">
                                            <div class="col-12 col-md-3">
                                                <div class="text-center">
                                                    <img src="{{ asset('img/info/how_to_use_step-1_offline.png') }}" class="img-fluid" />
                                                </div>
                                            </div>
                                            <div class="col-12 col-md-3">
                                                <div class="text-center">
                                                    <img src="{{ asset('img/info/how_to_use_step-2_offline.png') }}" class="img-fluid" />
                                                </div>
                                            </div>
                                            <div class="col-12 col-md-3">
                                                <div class="text-center">
                                                    <img src="{{ asset('img/info/how_to_use_step-3_offline.png') }}" class="img-fluid" />
                                                </div>
                                            </div>
                                            <div class="col-12 col-md-3">
                                                <div class="text-center">
                                                    <img src="{{ asset('img/info/how_to_use_step-4_offline.png') }}" class="img-fluid" />
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            </template>
                        </detail-content>
                    </div>
                </div>
            </div>
        </div>
        <div class="container bg-white 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-12 col-md-auto">
                            <h5 class="mb-0">Komentar</h5>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <comment-list-detail-page 
                        :object_type_id="{{ (int) $voucher->object_type_id }}" 
                        :object_id="{{ (int) $voucher->id }}" 
                        :total_data="{{ (int) $voucher->comments_count }}" 
                        />
                </div>
            </div>
        </div>
        {{-- @if(!empty($sectionlist))
        <div class="container bg-white my-3 py-3">
            @foreach($sectionlist as $key => $section)
                @if (!empty($section->section_results))
                    <div class="row align-items-center mt-2 mb-3">
                        <div class="col-8">
                            <div class="row align-items-center">
                                <div class="col-12 col-md-auto">
                                    <h5 class="mb-0">{{ $section->section_title }}</h5>
                                </div>
                                <div class="col-12 col-md-auto">
                                    <span class="border-left-md pl-md-3">{{ $section->section_subtitle }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-4 text-right">
                            <a href="{{ url('/'.setProperQueryStringFilter($section->section_filters)) }}">
                                <span class="gd-font-md font-weight-bold text-gd-primary">
                                    Lihat semua
                                </span>
                            </a>
                        </div>
                    </div>
                    <div class="row pb-3 pb-md-5 @if($key != (count($sectionlist) - 1)) {{ 'border-bottom' }} @endif">
                        @switch($section->section_layout)
                            @case(1)
                                <div class="col-12">
                                    <div class="gd-popular-slider">
                                        <deals-slider
                                            :section_id="{{ $section->section_id }}"
                                            :slider_data="{{ json_encode($section->section_results) }}"
                                            :is_login="@if($user) {{ 'true' }} @else {{ 'false' }} @endif">
                                        </deals-slider>
                                    </div>
                                </div>
                                @break
                            @case(2)
                                @foreach ($section->section_results as $item)
                                    <div class="col-12 col-md-4">
                                        <a href="{{ url($item->object_type."/".$item->slug ) }}" target="_self" class="text-gd-black">
                                            <div class="mb-3 deals">
                                                <div class="row">
                                                    <div class="col-4">
                                                        @if ($item->object_type === "vouchers")
                                                            <img data-src="{{ asset('img/icon/ic_ribbon_voucher.png')}}" class="lazyload img-max-50 abs-t-min-12 abs-l-8 z-index-9">
                                                        @endif
                                                        <div class="deals-img">
                                                            @if ($item->object_type == "deals" && $item->discount)
                                                                <div class="discount-label left sm">
                                                                    <span class="h4">{{ $item->discount }}%</span>
                                                                </div>
                                                            @endif
                                                            <img src="{{ asset('img/lqip.gif') }}" data-src="{{ $item->image }}" alt="{{ $item->name }}" class="lazyload blur-up">
                                                        </div>
                                                    </div>
                                                    <div class="col-8">
                                                        @if ($user)
                                                            <div class="abs-r-7 abs-t-min-12">
                                                                <favorit-icon :status="{{ json_encode($item->is_favourite) }}" :dealsid="{{ json_encode($item->id) }}" :type="{{ json_encode($item->object_type) }}"></favorit-icon>
                                                            </div>
                                                        @endif
                                                        <div class="py-2">
                                                            <div class="gd-font-md font-weight-bold name">{{ $item->name }}</div>
                                                            <div class="gd-font-xs mt-2">Berakhir {{ date('d F Y', strtotime($item->expired_date)) }}</div>
                                                            <div class="text-gd-grey">
                                                                @if ($item->total_views)
                                                                <div class="d-inline pr-3">
                                                                    <i class="fa fa-eye gd-font-xl" aria-hidden="true"></i>
                                                                    <span>{{ $item->total_views }}</span>
                                                                </div>
                                                                @endif
                                                                <like-info :deals="{{ json_encode($item) }}" @if($user) {{ 'logged_in' }} @endif></like-info>&nbsp;&nbsp;
                                                                <comment-info :deals="{{ json_encode($item) }}" @if($user) {{ 'logged_in' }} @endif></comment-info>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                @endforeach
                                @break
                            @case(3) 
                                @foreach ($section->section_results as $item)
                                    <div class="col-12 col-md-4">
                                        <a href="{{ url($item->object_type."/".$item->slug ) }}" target="_self" class="text-gd-black">
                                            <div class="mb-3 deals">
                                                <div class="row">
                                                    <div class="col-12">
                                                        @if ($user)
                                                            <div class="abs-r-15 abs-t-min-3">
                                                                <favorit-icon :status="{{ json_encode($item->is_favourite) }}" :dealsid="{{ json_encode($item->id) }}" :type="{{ json_encode($item->object_type) }}"></favorit-icon>
                                                            </div>
                                                        @endif
                                                        @if ($item->object_type === "vouchers")
                                                            <img data-src="{{ asset('img/icon/ic_ribbon_voucher.png')}}" class="lazyload img-max-85 abs-t-min-12 abs-l-3 z-index-9">
                                                        @endif
                                                        <div class="deals-img">
                                                            @if ($item->object_type == "deals" && $item->discount)
                                                                <div class="discount-label left sm">
                                                                    <span class="h4">{{ $item->discount }}%</span>
                                                                </div>
                                                            @endif
                                                            <img src="{{ asset('img/lqip.gif') }}" data-src="{{ $item->image }}" alt="{{ $item->name }}" class="lazyload blur-up">
                                                        </div>
                                                    </div>
                                                    <div class="col-12">
                                                        <div class="py-2">
                                                            <div class="gd-font-md font-weight-bold name">{{ $item->name }}</div>
                                                            <div class="gd-font-xs mt-2">Berakhir {{ date('d F Y', strtotime($item->expired_date)) }}</div>
                                                            <div class="text-gd-grey">
                                                                @if ($item->total_views)
                                                                <div class="d-inline pr-3">
                                                                    <i class="fa fa-eye gd-font-xl" aria-hidden="true"></i>
                                                                    <span>{{ $item->total_views }}</span>
                                                                </div>
                                                                @endif
                                                                <like-info :deals="{{ json_encode($item) }}" @if($user) {{ 'logged_in' }} @endif></like-info>&nbsp;&nbsp;
                                                                <comment-info :deals="{{ json_encode($item) }}" @if($user) {{ 'logged_in' }} @endif></comment-info>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                @endforeach
                                @break
                            @case(4) 
                                @foreach ($section->section_results as $item)
                                    <div class="col-6 col-md-3">
                                        <a href="{{ url($item->object_type."/".$item->slug ) }}" target="_self" class="text-gd-black">
                                            <div class="mb-3 deals">
                                                <div class="row">
                                                    <div class="col-12">
                                                        @if ($user)
                                                            <div class="abs-r-15 abs-t-min-3">
                                                                <favorit-icon :status="{{ json_encode($item->is_favourite) }}" :dealsid="{{ json_encode($item->id) }}" :type="{{ json_encode($item->object_type) }}"></favorit-icon>
                                                            </div>
                                                        @endif
                                                        @if ($item->object_type === "vouchers")
                                                            <img data-src="{{ asset('img/icon/ic_ribbon_voucher.png')}}" class="lazyload img-max-50 abs-t-min-12 abs-l-8 z-index-9">
                                                        @endif
                                                        <div class="deals-img">
                                                            @if ($item->object_type == "deals" && $item->discount)
                                                                <div class="discount-label left sm">
                                                                    <span class="h4">{{ $item->discount }}%</span>
                                                                </div>
                                                            @endif
                                                            <img src="{{ asset('img/lqip.gif') }}" data-src="{{ $item->image }}" alt="{{ $item->name }}" class="lazyload blur-up">
                                                        </div>
                                                    </div>
                                                    <div class="col-12">
                                                        <div class="py-2">
                                                            <div class="gd-font-md font-weight-bold name">{{ $item->name }}</div>
                                                            <div class="gd-font-xs mt-2">Berakhir {{ date('d F Y', strtotime($item->expired_date)) }}</div>
                                                            <div class="text-gd-grey">
                                                                @if ($item->total_views)
                                                                <div class="d-inline pr-3">
                                                                    <i class="fa fa-eye gd-font-xl" aria-hidden="true"></i>
                                                                    <span>{{ $item->total_views }}</span>
                                                                </div>
                                                                @endif
                                                                <like-info :deals="{{ json_encode($item) }}" @if($user) {{ 'logged_in' }} @endif></like-info>&nbsp;&nbsp;
                                                                <comment-info :deals="{{ json_encode($item) }}" @if($user) {{ 'logged_in' }} @endif></comment-info>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                @endforeach
                                @break
                            @default
                                <div class="col-12">
                                    <div class="gd-popular-slider">
                                        <deals-slider
                                            :slider_data="{{ json_encode($section->section_results) }}"
                                            :is_login="@if($user) {{ 'true' }} @else {{ 'false' }} @endif"
                                        >
                                        </deals-slider>
                                    </div>
                                </div>
                            @break
                        @endswitch
                    </div>
                @endif
            @endforeach
        </div>
        @endif --}}
        @if ($total_review_data > 0)
        <div class="d-block d-md-none bg-white py-3">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <span class="h5">Ulasan Pengguna</span>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <review 
                            :review_list="{{ json_encode($reviews) }}"
                            :voucher_id="{{ $voucher->id }}"
                            :total_data="{{ $total_review_data }}">
                        </review>
                    </div>
                </div>
            </div>
        </div>
        @endif
    </div>
    @endsection

    @section('mobileMenu')
    <div class="bg-white py-3 d-block d-md-none fixed-bottom" v-sticky sticky-side="bottom">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <use-voucher-external
                        :voucher_id="{{ json_encode($voucher->id) }}"
                        :first_name="@if($user) {{ json_encode($user->first_name) }} @else {{ 'null' }} @endif"
                        :login="@if($user) {{'true'}} @else {{ 'false' }} @endif"
                        :is_gdplus="@if($user && strtotime($user->expired_date) > strtotime(now())) {{ 'true' }} @else {{ 'false'}} @endif"
                        :is_trial="@if($user && $user->is_trial) {{ 'true' }} @else {{ 'false' }} @endif"
                        :has_pin="@if($user && $user->has_pin) {{ 'true' }} @else {{ 'false' }} @endif"
                        :remaining_trial="@if($user && $user->remaining_trial) {{ $user->remaining_trial }} @else {{ 0 }} @endif"
                        :is_merchant_online="@if($voucher->merchant_is_online) {{ 'true' }} @else  {{ 'false' }}@endif"
                        :is_expired="@if($voucher->expired_date < \Carbon\Carbon::now()) {{ 'true' }} @else {{ 'false' }} @endif"
                        :is_used="@if($voucher->is_used) {{ 'true'}} @else {{ 'false' }} @endif"
                        :external_code = "'{{ $external_code }}'"
                    ></use-voucher-external>
                </div>
            </div>
        </div>
    </div>
    @endsection

    @section('script')
    @parent
        <script src="{{ asset('js/slick.min.js') }}"></script>
    @endsection
@else
    @section('content')
        <div class="container">
            <div class="row">
                <div class="col-12 col-md-4 offset-md-4">
                    <div class="py-5 text-center text-gd-grey gd-font-sm">
                        <div>
                            <img
                                src="{{ asset('img/icon/img_empty_vouchers.svg') }}"
                                alt="Tidak ada deals"
                            />
                        </div>
                        <div class="py-3">
                            <h6>Deals tidak ditemukan</h6>
                            <p>Silahkan mencari deals lainya</p>
                            <a href="{{ url('premium') }}" class="btn btn-gd-primary btn-sm">Lihat deals lainya</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endsection
@endif