@extends('layouts.app')

@section('title') Reward @endsection

@section('css')
@endsection

@section('content')
@if($banner->reward_active)
<div>
    <picture>
        <source srcset="{{ $banner->reward_web }}" media="(min-width: 992px)">
        <source srcset="{{ $banner->reward_mobile }}" media="(max-width: 991.98px)">
        <img src="{{ $banner->reward_web }}" class="img-fluid" alt="Reward banner">
    </picture>
</div>
@endif
<div class="container mt-5">
    <aside class="float-right">
        <p class="fa-lg">CATEGORIES</p>
        <form id="form-filter" action="{{ route('reward') }}" method="GET">
            <div class="row">
                @foreach ($global->categories as $category)
                <div class="col-md-12 col-sm-6 mb-4">
                    <p>{{ $category->name }}</p>
                    @foreach ($category->subcategories as $subcategory)
                    <div><input type="checkbox" id="subcategory-{{ $subcategory->id }}" name="subcategory_ids[]" value="{{ $subcategory->id }}">{{ $subcategory->name }}</div>
                    @endforeach
                </div>
                @endforeach
            </div>
        </form>
    </aside>
    <article>
        <div class="row products">
            @include('partials.rewards')
        </div>
    </article>
</div>
<input type="hidden" name="page" value="1">
@endsection

@section('js')
<script>
$('#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();
});

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