@extends('layouts.app')

@section('title') {{ $product->name }} @endsection

@section('css')
<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">
<link href="//cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" rel="stylesheet">
@endsection

@section('content')
<div class="product-container">
    @php
        $variations = $product->variations;
        $reviews    = $product->reviews;
    @endphp
    
    <div class="container-fluid">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <ul class="product-image-list">
                    @foreach ($product->images as $image)
                    <li data-thumb="{{ $image->image }}">
                        <a href="@if ($image->youtube_id)https://www.youtube.com/embed/{{ $image->youtube_id }}@else{{ $image->image }}@endif" data-fancybox="gallery">
                            <img src="{{ $image->image }}" class="product-image" alt="{{ $product->name }}">
                        </a>
                    </li>
                    @endforeach
                </ul>
            </div>

            <div class="col-lg-6 col-xl-5 pl-lg-5">
                <h1 class="product-name">{{ $product->name }}</h1>

                <div class="d-flex flex-column flex-sm-row align-items-sm-center justify-content-sm-between mb-4">
                    <div class="d-flex align-items-end">
                        <h4 class="product-price">MYR @if ($product->discounted_price > 0){{ $product->discounted_price }}@else{{ $product->unit_price }}@endif</h4>
                        
                        @if ($product->discounted_price > 0)
                        <del class="product-price-discounted">MYR {{ $product->unit_price }}</del>
                        @endif
                    </div>

                    <div class="d-flex align-items-center">
                        <ul class="rating-list">
                            @for ($i = 1; $i <= 5; $i++)
                            <li class="rating-item @if ($product->average_rating >= $i) active @endif">
                                <i class="fa fa-star"></i>
                            </li>
                            @endfor
                        </ul>

                        <span class="reviews-count">{{ $reviews->count() }} {{ str_plural('review', $reviews->count()) }}</span>
                    </div>
                </div>

                <p class="product-description-short">{{ $product->brief_description }}</p>

                <form id="form-cart" action="{{ route('carts.update') }}" method="POST">
                    <div class="mb-4">
                        <label class="product-variation-label">Variation:</label>

                        <div>
                            @foreach ($variations as $variation)
                            <button type="button" class="btn btn-variation-selection 
                                @if (($in_cart == true and $in_cart_variation_id == $variation->id) or ($in_cart == false and $loop->first))
                                selected
                                @endif" 

                                data-id="{{ $variation->id }}" 
                                
                                @if ($variation->color_hex_code) 
                                style="background-color: {{ $variation->color_hex_code }}" 
                                @endif>{{ $variation->title }}</button>
                            @endforeach
                        </div>
                    </div>

                    <div class="mb-5 product-quantity-selection">
                        <label class="product-variation-label">Quantity:</label>

                        <div class="input-group">
                            <div class="input-group-prepend">
                                <button type="button" class="btn btn-quantity-decrease">
                                    <i class="fas fa-chevron-down"></i>
                                </button>
                            </div>

                            <input type="text" class="form-control" name="quantity" value="1" data-min="1" data-max="10" autocomplete="off" readonly>

                            <div class="input-group-append">
                                <button type="button" class="btn btn-quantity-increase">
                                    <i class="fas fa-chevron-up"></i>
                                </button>
                            </div>
                        </div>

                        <p class="flag text-red small d-none mt-2"></p>
                    </div>

                    <ul class="list-inline">
                        <li class="list-inline-item mb-1">
                            <button type="submit" class="btn btn-lg btn-tertiary">
                                <i class="fas fa-shopping-cart"></i> Add To Cart
                            </button>
                        </li>

                        @auth
                        <li class="list-inline-item mb-1">
                            <button type="button" id="btn-wishlist" class="btn btn-lg btn-outline-tertiary" @if (auth()->check() == false or $in_wishlist == true) disabled @endif>
                                <i class="fas fa-gem"></i></i> @if ($in_wishlist == true) In @else Add To @endif Wishlist
                            </button>
                        </li>
                        @endif
                    </ul>

                    <input type="hidden" name="product_variation_id" value="{{ $variations->first()->id }}">
                </form>

                @if (auth()->check() and $in_wishlist == false)
                <form id="form-wishlist" action="{{ route('wishlists.store') }}" method="POST">
                    <input type="hidden" name="product_id" value="{{ $product->id }}">
                </form>
                @endif
            </div>
        </div>
    </div>

    <div class="container py-5">
        <ul class="nav nav-tabs mt-5 mb-3" role="tablist">
            <li class="nav-item">
                <a href="#tab-desc" class="nav-link active" data-toggle="tab" role="tab" aria-controls="tab-desc" aria-selected="true">Description</a>
            </li>

            <li class="nav-item">
                <a href="#tab-review" class="nav-link" data-toggle="tab" role="tab" aria-controls="tab-review" aria-selected="false">Reviews</a>
            </li>
        </ul>

        <div class="tab-content">
            <div id="tab-desc" class="tab-pane fade show active" role="tabpanel">
                <p class="product-description">{!! nl2br($product->full_description) !!}</p>
            </div>

            <div id="tab-review" class="tab-pane fade" role="tabpanel">
                <div id="review">
                    @include('partials.reviews')
                </div>

                <div class="review-form-wrapper">
                    <h5 class="text-uppercase font-weight-bold mb-4">Leave a review</h5>

                    @auth
                    <form id="form-review" action="{{ route('reviews.store') }}" method="POST">
                        <div class="form-group">
                            <label class="form-label" for="rating">Your rating</label>

                            <select id="rating" class="form-control" name="rating">
                                <option value="5">★★★★★ (5/5)</option>
                                <option value="4">★★★★☆ (4/5)</option>
                                <option value="3">★★★☆☆ (3/5)</option>
                                <option value="2">★★☆☆☆ (2/5)</option>
                                <option value="1">★☆☆☆☆ (1/5)</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="comment">Your comment</label>
                            <textarea id="comment" class="form-control" name="comment" rows="4"></textarea>
                        </div>

                        <input type="hidden" name="product_id" value="{{ $product->id }}">
                        <button type="submit" class="btn btn-outline-dark">Post Review</button>
                    </form>
                    @else
                    <p class="text-muted">Please <a href="{{ route('login') }}">login</a> to review.</p>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
<script src="//cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.6/js/lightslider.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<script>
    function getVariationData(id)
    {
        let url = `{{ route('products.variations.data', ['id' => ':id']) }}`;
            url = url.replace(':id', id);
            
        $.ajax({
            url: url,
            dataType: 'json'

        }).done(function(data)
        {
            const flag            = $('.flag');
            const input_quantity  = $('[name="quantity"]');
            const button_decrease = $('.btn-quantity-decrease');
            const button_increase = $('.btn-quantity-increase');
            const form            = $('#form-cart');
            const button_submit   = form.find('[type="submit"]');

            flag.addClass('d-none');
            input_quantity.val(data.data.quantity_to_display).data('max', data.data.stock);

            button_decrease.prop('disabled', data.data.buttons_disabled.decrease);
            button_increase.prop('disabled', data.data.buttons_disabled.increase);
            button_submit.prop('disabled', data.data.buttons_disabled.cart);
    
            if (data.data.flags.insufficient_stock)
            {
                flag.text(`Insufficient stock (${data.data.stock} remaining)`).removeClass('d-none');
            }

            else if (data.data.flags.out_of_stock)
            {
                flag.text('Out of stock').removeClass('d-none');
            }

            else if (data.data.flags.unavailable)
            {
                flag.text('Currently unavailable.').removeClass('d-none');
            }
        });
    }

    function getReviews()
    {
        $.ajax({
            url: `{{ route('reviews.retrieve', ['product_id' => $product->id]) }}`,
            dataType: 'html'

        }).done(function(data)
        {
            $('#review').html(data);
        });
    }

    $(function()
    {
        getVariationData($('.btn-variation-selection.selected').data('id'));
    });

    $('.product-image-list').lightSlider({
        gallery: true,
        vertical: false,
        item: 1,
        loop: true,
        thumbItem: 9,
        slideMargin: 0,
        enableDrag: false,
        controls: false,
        currentPagerPosition:'left',
    });

    $('.btn-variation-selection').click(function()
    {
        const id = $(this).data('id');

        getVariationData(id);

        $('[name="product_variation_id"]').val(id);

        $(this).addClass('selected').siblings().removeClass('selected');
    });

    $('#btn-wishlist').click(function()
    {
        $('#form-wishlist').submit();
    });

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

        $.ajax({
            url: $(this).attr('action'),
            type: $(this).attr('method'),
            data: $(this).serialize(),
            dataType: 'json'

        }).done(function(data)
        {
            showNoty(data);

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

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

        $.ajax({
            url: $(this).attr('action'),
            type: $(this).attr('method'),
            data: $(this).serialize(),
            dataType: 'json'

        }).done(function(data)
        {
            showNoty(data);

            if (data.status == 'success')
            {
                $('#btn-wishlist').attr('disabled', true).html('<i class="fas fa-gem"></i> In Wishlist');
            }
        });
    });

    $('#form-review').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')
            {
                form[0].reset();

                getReviews();
            }
        });
    });
</script>
@endsection