@extends('layouts.master2')

@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">
            <div class="col-2">
                <a href="{{ url('/') }}">
                    <i class="fa fa-arrow-left text-white cursor-pointer"></i>
                </a>
            </div>
            <div class="col-7 text-center">
                <span class="text-white font-weight-bold">Diskon Gila</span>
            </div>
        </div>
    </div>
</div>
@endsection

@section('content')
<div class="container">
    <div class="py-md-5">
        @if (!empty($product_sale))
            <div class="row">
                <div class="col-12 col-md-6">
                    <div class="gd-voucher-detail-slider gd-slider">
                        @foreach($product_sale->image as $img)
                        <div class="item-box">
                            <img v-gallery:productSale src="{{ $img }}" alt="{{ $product_sale->title }}" class="img-fluid">
                        </div>
                        @endforeach
                    </div>
                </div>
                <div class="col-12 col-md-6 px-0 px-md-3">
                    <div class="h-100 bg-white summary mb-5 mb-md-0">
                        <div class="p-3">
                            <div class="row">
                                <div class="col-12">
                                    <div class="h4">{{ $product_sale->title }}</div>
                                    <div class="h5 font-weight-bold">Diskon {{ $product_sale->discount }}%</div>
                                    <div><strike class="text-gd-grey">{{ 'Rp '.number_format($product_sale->start_price, 0, ",", ".") }}</strike>&nbsp;&nbsp;<span class="font-weight-bold h5 text-gd-primary">{{ 'Rp '. number_format($product_sale->final_price, 0, ",", ".") }}</span></div>
                                    <div class="py-3">
                                        <order-product-sale :product_id="{{ $product_sale->id }}"></order-product-sale>
                                    </div>
                                    <div>{{ $product_sale->description }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @else 
            @if ($errors->has('system'))
                <div class="alert alert-danger my-3 text-center" >
                    <div>{{ $errors->first('system') }}</div>
                    <div class="pt-2">
                        <a href="{{ url('/') }}" class="btn btn-gd-primary">Lihat promo lainya</a>
                    </div>
                </div>
            @endif
        @endif
    </div>
</div>
@endsection

@section('script')
<script src="{{ asset('js/jquery.min.js') }}"></script>
<script src="{{ asset('js/popper.min.js') }}"></script>
<script src="{{ asset('js/bootstrap.min.js') }}"></script>
<script type="text/javascript" src="{{ env('MIDTRANS_SNAP_FRONT_END') }}" data-client-key="{{ env('MIDTRANS_CLIENT_KEY') }}"></script>
<script src="{{ asset('js/slick.min.js') }}"></script>
@endsection