@extends('frame')

@section('frameContent')
<section id="content-area">
    <div class="container py-3 py-lg-5 px-4">        
            <div class="page-title animateMeIn" data-animation="fadeInFromLeft">{{ __('Lámpák és lámpa installációk') }}</div>
            <ul class="cat-selector animateMeIn" data-animation="fadeInFromRight">
                @forelse($categories as $cat)
                <li><a href="{{ $cat->url() }}" {!! request()->segment(2) == $cat->slug() ? 'class="active"' : '' !!}>{{ $cat->title() }}</a></li>
                @empty                
                @endforelse
            </ul>

            
            @forelse($activeCat->visibleProducts()->get() as $item)

            <div class="prod-full mb-5 animateMeIn" data-animation="fadeIn" data-id="{{ $item->id }}">
                <div class="prod-title">{{ $item->title() }} - {{ $item->cikkszam }}</div>
                <div class="instruction">{{ __('A képre kattintva az alkotáshoz kapcsolódó galéria nyílik meg.') }}</div>
                <div class="row">
                    <div class="col-12 col-sm-3 col-md-4">
                        <div class="pic-container mb-3">
                            @forelse($item->pics as $i=>$pic)
                            @if($i==0)
                                <a href="{{ asset($pic->origiImageUrl()) }}" class="piclink" data-fslightbox="gallery-{{ $item->id }}" data-caption="{{ $pic->title() }}"><img src="{{ asset($pic->thumbnailImageUrl()) }}" class="w-100" /></a>
                            @else
                            <a href="{{ asset($pic->origiImageUrl()) }}" class="piclink d-none" data-fslightbox="gallery-{{ $item->id }}" data-caption="{{ $pic->title() }}"></a>
                            @endif
                            @empty
                            @endforelse
                            
                        </div>
                    </div>
                    <div class="col-12 col-sm col-md">
                        {!! $item->description() !!}
                        <div class="row mt-3 gx-lg-5 gy-4">
                            <div class="col-6 col-md-3">
                                <label>{{ $item->param_0_name() }}</label>
                                <div class="select-container">
                                    <select name="size" class="size-selector">
                                        @forelse($item->pricesAndSizes as $p)
                                        <option data-price="{{ $p->price }}">{{ $p->size }}</option>
                                        @empty
                                        @endforelse
                                    </select>
                                </div>
                            </div>
                            <div class="col-6 col-md-3">
                                <label>{{ $item->param_1_name() }}</label>
                                <div class="select-container">
                                    <select name="param_1">
                                        @forelse($item->params_1_as_array() as $opt)
                                        <option value="{{ $opt }}">{{ $opt }}</option>
                                        @empty
                                        @endforelse
                                    </select>
                                </div>
                            </div>
                            <div class="col-6 col-md-3">
                                <label>{{ $item->param_2_name() }}</label>
                                <div class="select-container">
                                    <select name="param_2">
                                        @forelse($item->params_2_as_array() as $opt)
                                        <option value="{{ $opt }}">{{ $opt }}</option>
                                        @empty
                                        @endforelse
                                    </select>
                                </div>
                            </div>
                            <div class="col-6 col-md-3">
                                <label>{{ $item->param_3_name() }}</label>
                                <div class="select-container">
                                    <select name="param_3">
                                        @forelse($item->params_3_as_array() as $opt)
                                        <option value="{{ $opt }}">{{ $opt }}</option>
                                        @empty
                                        @endforelse
                                    </select>
                                </div>
                            </div>                            
                        </div>
                        
                        <div class="prod-price mt-4 mb-4 animateMeIn" data-animation="fadeIn">
                            <span class="price-val"></span> Ft
                        </div>
                        {{--
                        <div class="cart-block mt-3 mb-5">                            
                            @if($item->in_stock == 0)
                            <em class="d-none d-md-inline">rendelni kívánt mennyiség</em> <input type="text" class="numbersOnly qty" maxlength="2" name="qty" /> <em>db</em> <button class="to-cart-btn">Kosárba &raquo;</button>
                            @else
                            <input type="text" class="numbersOnly qty d-none" maxlength="2" name="qty" value="1" readonly /> <button class="to-cart-btn ml-0">Kosárba &raquo;</button>
                            @endif
                        </div>
--}}
                        @if($item->in_stock == 0)
                        <a href="{{ route('ajanlatkeresForm.'.app()->getLocale(),['slug'=>$activeCat->slug(),'prodslug'=>$item->slug()]) }}" class="btn btn-def">{{ __('Ajánlatot kérek egyedi alkotáshoz') }}</a>
                        @endif
                    </div>                
                </div>
            </div>

            @empty
            <div class="alert alert-warning text-center">Nincs megjeleníthető tartalom!</div>
            @endif

    </div>
</section>
@endsection

@section('css')
<link rel="stylesheet" href="{{ asset('assets/sweetalert2/sweetalert2.min.css') }}">
@endsection

@section('scripts')
<script src="{{ asset('assets/fslightbox/fslightbox.js') }}"></script>
<script src="{{ asset('assets/tools.js') }}"></script>
<script src="{{ asset('assets/sweetalert2/sweetalert2.min.js') }}"></script>
<script>
    
    function setPrice(el){
        var prod = el.parentNode.closest('.prod-full');
        var selectedPrice = el.options[el.selectedIndex].getAttribute('data-price');
        var priceLabel = prod.querySelector('.price-val').innerHTML = format(selectedPrice);
    }

    document.querySelectorAll('.size-selector').forEach(function(el, i){
        setPrice(el);
        el.addEventListener('change', (event) => {
            setPrice(el);
        });
    });

    document.querySelectorAll('.to-cart-btn').forEach(function(el, i){
        el.addEventListener('click', function(event){
            var prod = this.parentNode.closest('.prod-full');            
            addToCart(prod);
        });
        
    });

    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if (this.readyState == 4) {
            var res = JSON.parse(this.response);
            if(res.error){
                Swal.fire({
                    title: res.error,
                    icon: 'error'
                });
            }
            else{
                Swal.fire({
                    title: res.message,
                    icon: 'success',
                    timer: 3000,
                    timerProgressBar: true
                });
                refreshNumberInCart();
            }
        }
    };

    function addToCart(prod){
        var prod_id = prod.getAttribute('data-id');        
        var size = prod.querySelector('select[name=size]').value;
        var param_1 = prod.querySelector('select[name=param_1]').value;
        var param_2 = prod.querySelector('select[name=param_2]').value;
        var param_3 = prod.querySelector('select[name=param_3]').value;
        var qty = prod.querySelector('input[name=qty]').value;
        console.log('prod: '+prod_id+', qty: '+qty+' size: '+size+', param_1: '+param_1+', param_2: '+param_2+', param_3: '+param_3);
        
        xhr.open('POST', "{{ route('addToCart') }}");
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.send(JSON.stringify({
            '_token': '{{ csrf_token() }}',
            'product_id': prod_id,
            'qty': qty,
            'size': size,
            'param_1': param_1,
            'param_2': param_2,
            'param_3': param_3
        })); 

    }
    

</script>
@endsection