@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">
        <div class="row gx-5">
            <div class="col-lg-7">
                <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-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>

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

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

                        <div class="d-flex gap-2 flex-wrap">
                            @foreach ($variations as $variation)
                                <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>
                            @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-quantity-decrease">
                                <i class="fas fa-chevron-down"></i>
                            </button>
                    
                            <input type="text" class="form-control" name="variation_quantity" value="1" data-min="1" data-max="1000">
                        
                            <button type="button" class="btn btn-quantity-increase">
                                <i class="fas fa-chevron-up"></i>
                            </button>
                        </div>

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

                    <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> -->

                    <button type="submit" class="btn btn-lg btn-primary text-white">
                        <i class="fas fa-shopping-cart"></i> Add To Cart
                    </button>

                    <input type="hidden" name="time" value="00:00:00">
                    <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">
                    -
                </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>
    </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)
    {

        let url = `{{ route('products.variations.data', ['id' => ':id']) }}`;
            url = url.replace(':id', id);
            
        $.ajax({
            url: url,
            dataType: 'json'

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

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

            $('[name="quantity"]').val(res.data.quantity_to_display);

            $('.btn-quantity-decrease').prop('disabled', res.data.buttons_disabled.decrease);
            $('.btn-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)
            {
                $('.flag').text('Currently unavailable.').removeClass('d-none');
            }
            
            if (res.data.time_slots.length)
            {
                for (time of res.data.time_slots)
                {
                    $('[name="time"]').append(`<option value="${time}">${time}</option>`);
                }

                $('[name="time"]').parent().removeClass('d-none');
            }
        });
    }

    function renderCalendar(product_variation_id)
    {
        if ($('#calendar').length)
        {
            Calendar('calendar', {
                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();

            $('.date.inside.today').click();
        }
    }

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

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

    $('#calendar').on('click', '.date.inside', function()
    {
        const date = $(this).data('date');

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

        $('[data-attribute="unit_price"]').html('<i class="fas fa-spinner fa-spin ms-2"></i>');

        $.ajax({
            url: `{{ route('products.variations.price', ['id' => ':id']) }}`.replace(':id', $('.btn-variation.btn-secondary').data('id')),
            type: 'GET',
            data: { date: date },  
            dataType: 'json',
           
        })
        .done(function(res) 
        {
            if (res.status === 'success') 
            {
                $('[data-attribute="unit_price"]').text(res.price);
            }
        });

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

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

        getVariationData(id);
        renderCalendar(id);

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

        $(this).removeClass('btn-outline-secondary').addClass('btn-secondary text-white')
                .siblings().removeClass('btn-secondary text-white').addClass('btn-outline-secondary');
    });

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

        if (!$('[name="date"]').val()) 
        {
            showNoty({
                status: 'error', 
                message: 'Please select a date before adding to cart.'
            });

            return;
        }

        $.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);
            }
        });
    });
</script>
@endsection