@extends('layouts.app')

@section('title') Home @endsection

@section('css')
<link href="//fonts.googleapis.com/css2?family=PT+Sans:wght@700&display=swap" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.6/css/lightslider.min.css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.6/img/controls.png" type="image/png">
@endsection

@section('content')
@if($banner->home_active)
<div>
    <picture>
        <source srcset="{{ $banner->home_web }}" media="(min-width: 992px)">
        <source srcset="{{ $banner->home_mobile }}" media="(max-width: 991.98px)">
        <img src="{{ $banner->home_web }}" class="img-fluid" alt="Home banner">
    </picture>
</div>
@endif
<section>
    <div class="container py-5">
        <div class="row">
            <!-- <div class="col-md-6 col-sm-12">
                <img class="img-fluid spink_hall" src="{{ asset('img/spink_hall.jpg') }}">
            </div> -->
            <div class="col-md-12 col-sm-12 m-auto">
                <div class="introduction-line"></div>
                <p class="introduction mt-2">INTRODUCTION</p>
                <p class="what-is-spink">What is SPINK</p>
                <div class="vertical-line">
                    <table>
                        <tr class="what-is-spink">
                            <td class="pl-2">S</td>
                            <td>-</td>
                            <td align="left">Sincerity</td>
                        </tr>
                        <tr class="what-is-spink">
                            <td class="pl-2">P</td>
                            <td>-</td>
                            <td align="left">Patience</td>
                        </tr>
                        <tr class="what-is-spink">
                            <td class="pl-2">I</td>
                            <td>-</td>
                            <td align="left">Innovation</td>
                        </tr>
                        <tr class="what-is-spink">
                            <td class="pl-2">N</td>
                            <td>-</td>
                            <td align="left">Non Preoccuparti (No Worry)</td>
                        </tr>
                        <tr class="what-is-spink">
                            <td class="pl-2">K</td>
                            <td>-</td>
                            <td align="left">Knowledge</td>
                        </tr>
                    </table>
                </div><br/>
                <p class="grey-text">
                    <span class="fa-3x">F</span>ounded by a group of passionate 90’s youngsters, Spink is a corporate that is continuously growing and strive to become the top in service line. Begins in July 2019 as a single restaurant in Bayan Lepas, Spink has currently expanded its map into Ayer Itam, a famous tourists spots in Penang, by introducing <span class="text-black">Spink In the Sky</span> and <span class="text-black">Spink Confinement and Baby Care</span>. 
                </p>
                <p class="grey-text">
                    <span class="text-black">Spink Confinement and Baby Care</span> is a modern postnatal retreat based in DeView Hotel with well equipped nursery, baby jacuzzi, 15 luxury suite room, and in house doctor and nurses to allow new mothers to rest in. 
                </p>
                <p class="grey-text">
                    On the other hand, <span class="text-black">Spink In the Sky</span> is a European garden style restaurant with special glass-like dome overlooking the famous Kek Lok Si temple, which serves hotpot, tapas and liquors.From Food and Beverage industry to postnatal care service, Spink group aim was not only about expanding the business, but more about maintaining the good quality of service, solving problems, taking up challenges and continue to grow as a team. Adhering to 5 principles of ‘SPINK’, spink group has always trained the staffs to show sincerity and patience to our customers and treat every customer like our own friends and family.
                </p>
                <p class="grey-text">
                    The management of Spink Group also encourage innovation and continuous learning among the staffs to gain new knowledge and ideas to help the company to grow and expand. One of the latest innovations by the group is the reward point system that has been introduced in this website. Our customers can not only enjoy the food and services provided by us, but at the same time, they could collect points for every penny they spent in our merchants. Points collected can then be used to redeem various products from the website. Excited to know about the rewards? Spend with us to know!
                    Finally, the ‘N’ in SPINK, non preoccupati, an Italian word, which means no worry. We wish all our customers are worry free while enjoying our service as we use genuine products and always strive to improve our service. On the deeper context, we hope parents of our staffs not to be worried about their children as they trained not only for job skills but also good qualities that help them to success in the society. We believe great things in business are never done by one person. They are done by a team of people. At Spink, this is the place where we gather all youngsters, new ideas, fresh innovations, to move forwards as a team and continue to grow.
                    In future, Spink group will continue to expand, branching out and step our foot into more industries. Do continue to support us as it is your supports that sustained us on the journey we’ve started. And yea, stay tuned with Spink and see how we grow!
                </p>
            </div>
        </div>
    </div>
</section>

<section>
    <div class="container py-5">
        <div class="heading-box">
            <h5 class="heading">Voucher</h5>
        </div>
        <div class="row">
            <div class="col-md-6">
                <img class="img-fluid dropleft status-image" src="{{ asset('img/points.png') }}">
                <div class="voucher-container">
                    <div class="grey-text">MY POINTS</div>
                    <div class="fa-2x">@auth{{ auth()->user()->point }} @else 0 @endif Points</div>
                    <div class="fa-sm grey-text">current point balance</div>
                    @if($ongoing_expired && $ongoing_expired[0]->point_left > 0)
                    <div class="text-red">{{ $ongoing_expired[0]->point_left }} point(s) is going to expired on {{ $ongoing_expired[0]->exipred_date }}.</div>
                    @endif
                    @auth
                    <a href="{{ route('reward') }}" class="btn btn-login mt-2 voucher-btn">USE POINTS</a>
                    @else
                    <a href="{{ route('login') }}" class="btn btn-login mt-2 voucher-btn">USE POINTS</a>
                    @endif
                </div>
            </div>
            <div class="col-md-6">
                <img class="img-fluid dropleft" src="{{ asset('img/credit.png') }}">
                <div class="voucher-container">
                    <div class="grey-text">MY CREDIT</div>
                    <div class="fa-2x">RM @auth{{ number_format(auth()->user()->credit, 2) }} @else {{number_format(0, 2)}} @endif</div>
                    <div class="fa-sm grey-text">current credit balance</div>
                    <!-- <a class="btn btn-login mt-2 voucher-btn">USE CREDIT</a> -->
                </div>
            </div>
        </div>
        @foreach ($products as $product)
        <div class="row mb-4" style="border:2px solid #feb6b7;">
            <div class="col-md-3 px-xl-0 voucher-img">
                @foreach ($product->images as $image)
                    @if($image->main_image)
                        <img class="img-fluid home-voucher-img" src="{{ $image->image }}">
                    @endif
                @endforeach
            </div>
            <div class="col-md-7 m-xl-auto">
                <div class="grey-text">VOUCHER</div>
                <div class="fa-2x">{{ $product->name }}</div>
                <div class="grey-text">{{ $product->full_description }}</div>
                <div class="grey-text">Available From : {{ $product->start_date }}</div>
                <div class="grey-text">End From : {{ $product->end_date }}</div>
                <div class="grey-text">{{ $product->unit_price }} Points</div>
            </div>
            <div class="col-md-2 m-xl-auto">
                @auth
                <a class="btn btn-login mt-2 mb-2" onclick="addCart({{ $product->variations->first()->id }})">USE POINTS</a>
                @else
                <a href="{{ route('login') }}" class="btn btn-login mt-2 mb-2">USE POINTS</a>
                @endif
            </div>
        </div>
        @endforeach
    </div>
</section>

<section>
    <div class="container py-5">
        <div class="heading-box">
            <h5 class="heading">Voucher</h5>
        </div>
        <div class="row">
            @foreach ($products_home as $product)
            <div class="col-md-4 col-sm-12 mb-4">
                <div class="card">
                    @foreach ($product->images as $image)
                        @if($image->main_image)
                            <img class="img-fluid card-img reward-voucher-img" src="{{ $image->image }}" alt="{{ $product->name }}">
                        @endif
                    @endforeach
                    <div class="card-container">
                        <p>
                            @if($product->type == 1)
                            Voucher
                            @else
                            Product
                            @endif
                        </p>
                        <h5><b>{{ $product->name }}</b></h5> 
                        <p class="fa-xs grey-text min-height-30">{{ $product->full_description }}</p> 
                        <div class="row">
                            <div class="col-md-6">
                                <div class="fa-xs grey-text">Available From:</div>
                                <div class="fa-xs grey-text mb-2">{{ $product->start_date }}</div>
                            </div>
                            <div class="col-md-6">
                                <div class="fa-xs grey-text">End From:</div>
                                <div class="fa-xs grey-text mb-2">{{ $product->end_date }}</div>
                            </div>
                            <div class="col-md-6">
                                <div class="fa-md m-auto">{{ $product->unit_price }} Points</div>
                            </div>
                            <div class="col-md-6 pl-0">
                                <a class="btn btn-sm btn-reward mb-2" onclick="addCart({{ $product->variations->first()->id }})">USE POINTS</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>

<section>
    <div class="container py-5">
        <div class="heading-box">
            <h5 class="heading">Location</h5>
        </div>
        <div class="row">
            <div class="col-md-4 col-sm-12 mb-4">
                <a href="https://www.facebook.com/Spinkrestaurant" target="_blank">
                    <div class="card">
                        <img src="{{ asset('img/spink_hall.jpg') }}" class="img-fluid card-img location-img">
                        <div class="card-container">
                            <h5><b>SPINK Restaurant</b></h5>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-md-4 col-sm-12 mb-4">
                <a href="https://www.facebook.com/search/top?q=spink%20confinement%20%26%20baby%20center" target="_blank">
                    <div class="card">
                        <img src="{{ asset('img/spink_confinement.jpg') }}" class="img-fluid card-img location-img">
                        <div class="card-container">
                            <h5><b>SPINK Confinement & Baby Center</b></h5> 
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-md-4 col-sm-12 mb-4">
                <a href="https://www.facebook.com/spinkinthesky" target="_blank">
                    <div class="card">
                        <img src="{{ asset('img/spink_sky.jpg') }}" class="img-fluid card-img location-img">
                        <div class="card-container">
                            <h5><b>SPINK IN THE SKY</b></h5> 
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</section>

@if ($show_popup)
<div id="modal-popup" class="modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content">
            <button type="button" class="close close-custom" data-dismiss="modal" aria-label="Close">
                <i class="fas fa-times"></i>
            </button>
            <picture>
                <source srcset="@guest{{ $banner->guest_popup_web }}@else{{ $banner->member_popup_web }}@endif" media="(min-width: 992px)">
                <source srcset="@guest{{ $banner->guest_popup_mobile }}@else{{ $banner->member_popup_web }}@endif" media="(max-width: 991.98px)">
                <a href="@guest{{ $banner->guest_popup_url }}@else{{ $banner->member_popup_url }}@endif" class="d-block" target="_blank">
                    <img src="@guest{{ $banner->guest_popup_web }}@else{{ $banner->member_popup_web }}@endif" class="img-fluid" alt="Home popup banner">
                </a>
            </picture>
            <p class="grey-text modal-text">Welcome to Spink Group!</p> 
        </div>
    </div>
</div>
@endif
@auth
    @if(auth()->user()->first_time_login)
    <div id="password-popup" class="modal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header" style="background:#dd8d8d;">
                    <h4 class="modal-title">Change Password</h4>
                </div>
                
                <div class="modal-body"> 
                    <form id="form-password" action="{{ route('change.password') }}" method="POST">
                        <div class="row">
                            <div class="col-sm-6">
                                <img class="img-fluid spink_hall" src="{{ asset('img/spink_hall.jpg') }}">
                            </div>
                            <div class="col-sm-6 m-auto">
                                <div class="mb-4">
                                    <label>Password*</label>
                                    <input type="password" class="form-control form-control-lg" name="password">
                                    <input name="user_id" value="{{auth()->user()->id}}" hidden>
                                </div>
                                <div>
                                    <button type="submit" class="btn btn-md btn-login float-right">SUBMIT</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    @endif
    @if ($expiry_popup && auth()->user()->member_expiry > 0 && auth()->user()->member_expiry < date('Y-m-d'))
    <div id="modal-popup" class="modal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
            <div class="modal-content">
                <button type="button" class="close close-custom" data-dismiss="modal" aria-label="Close">
                    <i class="fas fa-times"></i>
                </button>
                <picture>
                    <source srcset="{{ $banner->member_expiry_popup_web }}" media="(min-width: 992px)">
                    <source srcset="{{ $banner->member_expiry_popup_mobile }}" media="(max-width: 991.98px)">
                    <a href="@if($banner->member_expiry_popup_url){{ $banner->member_expiry_popup_url }}@endif" class="d-block" target="_blank">
                        <img src="{{ $banner->member_expiry_popup_web }}" class="img-fluid" alt="Member Expiry popup banner">
                    </a>
                </picture>
            </div>
        </div>
    </div>
    @endif
@endif
@endsection

@section('js')
<script src="//cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.6/js/lightslider.min.js"></script>
<script>
    $(function()
    {
        $('.slideshow').lightSlider({
            item          : 1,
            slideshowMargin   : 0,
            loop          : false,
            adaptiveHeight: true,
            controls      : true,
            pager         : false
        });

        $('#modal-popup').modal('show');
        $('#password-popup').modal('show');
    });

function addCart(product_variation_id)
{   
    $.ajax({
        url: `{{ route('carts.update') }}`,
        type: 'POST',
        data: 'product_variation_id='+product_variation_id+'&quantity=1',
        dataType: 'json'

    }).done(function(data)
    {   
        showNoty(data);
        if (data.status == 'success')
        {
            $('[data-attribute="cart_quantity"]').text(data.data.quantity);
        }
    });
}

$('#form-password').submit(function(e)
{
    $.Event(e).preventDefault();

    const form = $(this);

    $.ajax({
        url: $(this).attr('action'),
        type: $(this).attr('method'),
        data: $(this).serialize(),
        dataType: 'JSON'
        
    }).done(function(data)
    {
        showNoty(data);

        if (data.status == 'success')
        {
            $('#password-popup').modal('hide');
        }
    });
});
</script>
@endsection