@extends('layouts.app')

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

@section('css')
<link href="//fonts.googleapis.com/css2?family=Martel&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">
<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">
            <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">{{ config('app.currency') }} <span data-attribute="unit_price">{{ $product->unit_price }}</span></h4>
                    </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>

                        <div class="reviews-count">
                            {{ $reviews->count() }} {{ Str::plural('review', $reviews->count()) }}
                        </div>
                    </div>
                </div>

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

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

                                <div class="d-flex gap-2 flex-wrap">
                                    @foreach ($variations as $variation)
                                        @if($variation->id == $in_cart_variation_id)
                                        <button type="button" class="btn btn-outline-secondary btn-variation
                                            @if (($in_cart == true and $in_cart_variation_id == $variation->id) or ($in_cart == false and $loop->first))
                                            {{ 'btn-secondary text-white' }}
                                            @else 
                                            {{ 'btn-outline-secondary' }}
                                            @endif" 
                                        data-id="{{ $variation->id }}">{{ $variation->name }}</button>
                                        @endif
                                    @endforeach
                                </div>
                            </div>

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

                                <div class="input-group">
                                    <button type="button" class="btn btn-variation-quantity-decrease">
                                        <i class="fas fa-chevron-down"></i>
                                    </button>
                            
                                    <input type="text" class="form-control" name="variation_quantity" value="{{ $in_cart_quantity }}" data-min="1" data-max="1000">
                                
                                    <button type="button" class="btn btn-variation-quantity-increase">
                                        <i class="fas fa-chevron-up"></i>
                                    </button>
                                </div>

                                <div class="flag d-none mt-2">Test</div>
                            </div>

                            @foreach ($variations as $variation)
                                @if($variation->addon)
                                    @php
                                        $subcategories = $variation->addon->subcategories;
                                    @endphp
                                    @foreach ($subcategories as $subcategory)
                                        @php
                                            $addons = collect();
                                            foreach ($subcategory->products as $product) {
                                                $addons = $addons->merge($product->variations);
                                            }
                                        @endphp
                                        @if($addons->count() > 0)
                                        <div class="addon-container">
                                            <div class="mb-4 toggle-addons d-none" data-id="{{$variation->id}}">
                                                <label class="product-variation-label">{{$subcategory->name}} :</label>
                                                <div class="d-flex gap-2 flex-wrap">
                                                    @foreach ($addons as $addon)
                                                    @php
                                                        $addonItem = $cartItems->firstWhere('product_variation_id', $addon->id);
                                                    @endphp
                                                        <button type="button" class="btn btn-addon btn-outline-secondary @if($addonItem) btn-secondary text-white @endif"
                                                        data-id="{{ $addon->id }}">{{ $addon->name }}</button>
                                                    @endforeach
                                                </div>
                                            </div>
                                            <div class="mb-4 toggle-addons d-none product-quantity-selection" data-id="{{$variation->id}}">
                                                <label class="product-variation-label">Quantity:</label>
                
                                                <div class="input-group">
                                                    <button type="button" class="btn btn-addon-quantity-decrease">
                                                        <i class="fas fa-chevron-down"></i>
                                                    </button>
                                        
                                                    <input type="text" class="form-control" name="addon_quantity[]" value="{{  $addonItem ? $addonItem->quantity : 1 }}" data-min="1" data-max="1000">
                                                
                                                    <button type="button" class="btn btn-addon-quantity-increase">
                                                        <i class="fas fa-chevron-up"></i>
                                                    </button>
                                                </div>
                
                                                <div class="flag d-none mt-2">Test</div>
                                            </div>
                                            <input type="hidden" name="addon_id[]" value="">
                                        </div>
                                        @endif
                                    @endforeach
                                @endif
                            @endforeach

                            @if ($product->type == 'TICKET')
                            <div class="mb-4">
                                <label class="product-variation-label">Date:</label>

                                <input type="hidden" name="date">
                                <div id="calendar"></div>
                            </div>

                            <div class="mb-5">
                                <label class="product-variation-label">Time:</label>

                                <select class="form-select" name="time">
                                    <option selected disabled>Select one</select>
                                </select>
                            </div>
                            @endif
                        </div>
                    </div>

                    <button type="submit" class="btn btn-lg btn-dark">
                        <i class="fas fa-shopping-cart"></i> Add To Cart
                    </button>
                    
                    <input type="hidden" name="product_variation_id" value="{{ $variations->first()->id }}">
                </form>
            </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-bs-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-bs-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">
                <div class="product-description">{!! nl2br($product->full_description) !!}</div>
            </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 fw-bold mb-4">Leave a review</h5>

                    @auth
                    <form id="form-review" action="{{ route('reviews.store') }}" method="POST">
                        <div class="mb-3">
                            <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="mb-3">
                            <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
                    <div class="text-muted">Please <a href="{{ route('login') }}">login</a> to review.</div>
                    @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 src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
<script src="{{ asset('js/calendar.js') }}"></script>
<script>
    function getVariationData(id, parentDiv)
    {
        let url = `{{ route('products.variations.data', ['id' => ':id']) }}`;
            url = url.replace(':id', id);
            
        $.ajax({
            url: url,
            dataType: 'json'

        }).done(function(res)
        {   
            // reset
            parentDiv.find('.flag').addClass('d-none');

            parentDiv.find('[name="date"]').val('');
            parentDiv.find('[name="time"]').find('option').not(':first').remove();

            // update
            $('[data-attribute="unit_price"]').text(res.data.unit_price);

            if(parentDiv.hasClass('.btn-variation'))
            {
                parentDiv.closest('[name="variation_quantity"]').val(res.data.quantity_to_display);
                parentDiv.closest('.btn-variation-quantity-decrease').prop('disabled', res.data.buttons_disabled.decrease);
                parentDiv.closest('.btn-variation-quantity-increase').prop('disabled', res.data.buttons_disabled.increase);
            }
            else
            {
                parentDiv.find('[name="addon_quantity[]"]').val(res.data.quantity_to_display);
                parentDiv.find('.btn-addon-quantity-decrease').prop('disabled', res.data.buttons_disabled.decrease);
                parentDiv.find('.btn-addon-quantity-increase').prop('disabled', res.data.buttons_disabled.increase);
            }


            $('#form-cart').find('[type="submit"]').prop('disabled', res.data.buttons_disabled.cart);

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

            if (res.data.time_slots.length)
            {
                for (time of res.data.time_slots)
                {
                    parentDiv.find('[name="time"]').append(`<option value="${time}">${time}</option>`)
                                        .removeClass('d-none');
                }
            }

            else 
            {
                parentDiv.find('[name="time"]').parent().addClass('d-none');
            }
        });
    }

    function renderCalendar(product_variation_id)
    {
        if ($('#calendar').length)
        {
            Calendar('calendar',{
                onDateClick: function(item)
                {   
                    const date = $(item).data('date');

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

                    $(item).addClass('selected').siblings().removeClass('selected').end()
                            .parent().siblings().children().removeClass('selected');
                },
                fetchEvents: function(year, month)
                {   
                    let slots = [];

                    $.ajax({
                        url: `{{ route('bookings.slots') }}`,
                        type: 'POST',
                        data: {
                            product_variation_id: product_variation_id,
                            year: year,
                            month: month
                        },
                        dataType: 'json',
                        async: false,
                    })
                    .done(function(res)
                    {
                        slots = res.data.slots;
                    });

                    return slots;
                }
            })
            .render();
        }
    }

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

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

    $(function()
    {
        getVariationData($('.btn-variation.btn-secondary').data('id'), $('.btn-variation.btn-secondary'));
        renderCalendar($('[name="product_variation_id"]').val());

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

    $('.btn-variation-quantity-increase, .btn-addon-quantity-increase').click(function()
    {
        const quantity_input = $(this).hasClass("btn-variation-quantity-increase") ? $(this).siblings('[name="variation_quantity"]') : $(this).siblings('[name="addon_quantity[]"]');
        let quantity         = quantity_input.val();
        const max            = quantity_input.data('max');
        const form           = $(this).closest('.form-cart');

        quantity++;

        if (quantity <= max)
        {
            const another_input = $(this).hasClass("btn-variation-quantity-increase") ? $('.btn-variation-quantity-decrease') : $('.btn-addon-quantity-decrease');
            another_input.attr('disabled', false);

            quantity_input.val(quantity);

            if (form.length)
            {
                form.submit();
            }
        }
    });

    $('.btn-variation-quantity-decrease, .btn-addon-quantity-decrease').click(function()
    {
        const quantity_input = $(this).hasClass("btn-variation-quantity-decrease") ? $(this).siblings('[name="variation_quantity"]') : $(this).siblings('[name="addon_quantity[]"]');
        let quantity         = quantity_input.val();
        const min            = quantity_input.data('min');
        const max            = quantity_input.data('max');
        const form           = $(this).closest('.form-cart');

        quantity--;

        if (quantity >= min)
        {
            const another_input = $(this).hasClass("btn-variation-quantity-decrease") ? $('.btn-variation-quantity-increase') : $('.btn-addon-quantity-increase');
            another_input.attr('disabled', false);

            quantity_input.val(quantity);

            if (form.length)
            {
                form.submit();
            }
        }

        if (quantity == min)
        {
            $(this).attr('disabled', true);
        }
    });

    $(document).ready(function() {
        $(".btn-variation").filter(function() {
            return $(this).hasClass("btn-secondary") && $(this).hasClass("text-white");
        }).click();
    });

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

        getVariationData(id, $(this));
        renderCalendar(id);

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

        $('.btn-variation').removeClass('btn-secondary text-white');
        $(this).addClass('btn-secondary text-white');

        //show addons
        $('[name="addon_id[]"]').prop('disabled', true);
        const addOn = $('.toggle-addons[data-id="' + id + '"]');
        $('.toggle-addons').not(addOn).addClass('d-none');
        addOn.removeClass('d-none');

        $('input[name="addon_quantity[]"]').prop('disabled', true);

        if (!addOn.hasClass('d-none')) {
            addOn.find('input[name="addon_quantity[]"]').prop('disabled', false);
        }
    });

    $('.btn-addon').click(function()
    {
        const parentDiv = $(this).closest('.addon-container');

        if($(this).hasClass("btn-secondary text-white"))
        {
            parentDiv.find('input[name="addon_quantity[]"]').prop('disabled', true);
            parentDiv.find('input[name="addon_id[]"]').prop('disabled', true);
            $(this).removeClass('btn-secondary text-white');
            return;
        }

        parentDiv.find('input[name="addon_quantity[]"]').prop('disabled', false);
        parentDiv.find('input[name="addon_id[]"]').prop('disabled', false);

        const id = $(this).data('id');

        getVariationData(id, parentDiv);
        renderCalendar(id);

        parentDiv.find('[name="addon_id[]"]').val(id);

        parentDiv.find('.btn-addon').removeClass('btn-secondary text-white');
        $(this).addClass('btn-secondary text-white');
    });


    $('.product-container').on('click', '.dropdown-menu, .btn-link', function(e)
    {
        e.stopPropagation();
    });

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

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

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

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

        });
    });

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

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

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

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

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

        const form = $(this);

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

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

            if (res.status == 'success')
            {
                form[0].reset();

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