@extends('layouts.app')

@section('title') Products @endsection

@section('css')
<link href="//cdnjs.cloudflare.com/ajax/libs/noUiSlider/13.1.1/nouislider.min.css" rel="stylesheet">
@endsection

@section('content')
<div class="container py-5">
    <div class="row">
        <div class="col-xl-9 col-lg-8">
            <div class="products">
                @include('partials.products')
            </div>
        </div>

        <div class="col-xl-3 col-lg-4">
            <form id="form-filter" action="{{ route('products.index') }}" method="GET">
                <div class="filter-container">
                    <h6 class="filter-heading">Categories</h6>

                    @foreach ($global->categories as $category)
                    <div class="@if (!$loop->last) mb-5 @endif">
                        <h6>{{ $category->name }}</h6>

                        @foreach ($category->subcategories as $subcategory)
                        <div class="form-group mb-1">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" id="subcategory-{{ $subcategory->id }}" class="custom-control-input" name="subcategory_ids[]" value="{{ $subcategory->id }}" @if (($category_id and !$subcategory_id and $category_id == $subcategory->category_id) or ($subcategory_id and $subcategory_id == $subcategory->id) or (!$category_id and !$subcategory_id)) checked @endif>
                                <label for="subcategory-{{ $subcategory->id }}" class="custom-control-label">{{ $subcategory->name }} <small>({{ $subcategory->products_count }})</small></label>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    @endforeach
                </div>

                <div class="filter-container">
                    <h6 class="filter-heading">Price</h6>
                    <div class="slider"></div>
                    <div class="slider-values">
                        <div class="min">MYR <span>10.00</span></div>
                        <div class="max">MYR <span>500.00</span></div>
                    </div>

                    <input type="hidden" name="min_price">
                    <input type="hidden" name="max_price">
                    <input type="hidden" name="page" value="1">
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('js')
<script src="//cdnjs.cloudflare.com/ajax/libs/noUiSlider/13.1.1/nouislider.min.js"></script>
<script>
    const slider = $('.slider')[0];

    function updateSlideValues()
    {
        const price_array = slider.noUiSlider.get();
        const min_price   = price_array[0];
        const max_price   = price_array[1];

        $('.slider-values').find('.min').find('span').text(min_price).end().end()
                           .find('.max').find('span').text(max_price);

        $('[name="min_price"]').val(min_price);
        $('[name="max_price"]').val(max_price);
    }

    noUiSlider.create(slider, {
        start: [10, 500],
        connect: true,
        step: 100,
        behaviour: 'tap-drag',
        range: {
            'min': 10,
            'max': 500
        },
    });

    slider.noUiSlider.on('update', function()
    {
        updateSlideValues();

    });

    slider.noUiSlider.on('end', function()
    {
        $('#form-filter').submit();
    });

    $('#form-filter').change(function()
    {
        $(this).find('[name="page"]').val(1).end().submit();

    }).submit(function(e)
    {
        $.Event(e).preventDefault();

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

        }).done(function(data)
        {
            $('.products').fadeOut(function()
            {
                $(this).html(data).fadeIn();
            });
        });
    });

    $('.products').delegate('.page-link', 'click', function(e)
    {
        $.Event(e).preventDefault();

        const href = $(this).attr('href');
        const page = href.split('?page=').pop();

        $('#form-filter').find('[name="page"]').val(page).end()
                         .submit();
    });
</script>
@endsection