@extends('frame')

@section('frameContent')
<section id="content-area" class="animateMeIn" data-animation="fadeIn">
    <div class="container py-3 py-lg-5 px-4">        
        <div class="page-title">{{ __('Kosár és rendelés') }}</div>
        <hr>


        @if(sizeof($items))

            <ul class="steps">
                <li class="active"><a href="#">{{ __('Kosár tartalma') }}</a></li>
                <li>{{ __('Szállítási és fizetési adatok') }}</li>
                <li>{{ __('Áttekintés, megrendelés') }}</li>
            </ul>

            <form action="{{ route('cart.submit_step_1') }}" method="POST">
                @csrf
                
                <div class="cart-table first-step">
                    <div class="cart-head font-light text-uppercase">
                        <div>{{ __('Alkotás neve') }}</div>
                        <div>{{ __('Egységár') }}</div>
                        <div class="text-center">{{ __('Mennyiség') }}</div>
                        <div>{{ __('Összesen') }}</div>
                        <div></div>
                    </div>
                    @foreach ($items as $i => $item)
                    <div class="cart-row" id="cart-row-{{ $i }}">
                        <div><label>{{ __('Alkotás neve') }}</label>{{ $item->title() }} <em>({{ implode(', ',$item->data) }})</em></div>
                        <div class="price"><label>{{ __('Egységár') }}</label></label><span class="thousands price-val">{{ $item->priceBySize($item->data['size'])->price }}</span> Ft</div>
                        @if($item->in_stock == 0)
                        <div class="text-end text-sm-center"><label>{{ __('Mennyiség') }}</label><span class="qty-button minus">-</span><input type="text" class="numbersOnly qty" maxlength="2" value="{{ $item->qty }}" name="incart[{{ $item->azon }}]" data-azon="{{ $item->azon }}" data-ndx="{{ $i }}" /><span class="qty-button plus">+</span></div>
                        @else
                        <div class="text-end text-sm-center"><label>{{ __('Mennyiség') }}</label><input type="text" class="numbersOnly qty" maxlength="2" value="{{ $item->qty }}" name="incart[{{ $item->azon }}]" data-azon="{{ $item->azon }}" data-ndx="{{ $i }}" readonly /></div>
                        @endif
                        <div class="sum"><label>{{ __('Összesen') }}</label><span class="thousands">{{ $item->priceBySize($item->data['size'])->price * $item->qty }}</span> Ft</div>
                        <div><a href="#" class="remove-me" data-azon="{{ $item->azon }}" data-ndx="{{ $i }}">{{ __('törlés') }}</a></div>
                    </div>
                    @endforeach
                    <div class="total-row font-bold">
                        <div></div>
                        <div class="bt hide-at-mob">{{ __('Összesen') }}</div>
                        <div class="bt"></div>
                        <div class="bt"><label>{{ __('Összesen') }}</label><span class="thousands total-prices"></span> Ft</div>
                        <div class="bt"></div>
                    </div>
                </div>
                
                <div class="text-center text-lg-end py-5">            
                    <button type="submit" class="btn-def">{{ __('Tovább a szállítási és fizetési adatokhoz') }}</button>
                </div>

            </form>

        @else
            
            <div class="alert alert-warning text-center my-5">{{ __('A kosár üres!') }}</div>

        @endif
    </div>
</section>

@include('components.iconsBlock')

@endsection

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

@section('scripts')
@if(sizeof($items))
<script src="{{ asset('assets/tools.js') }}"></script>
<script>    

    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if (this.readyState == 4) {
            var res = JSON.parse(this.response);
            refreshNumberInCart();
            countTotal();        
        }
    };

    function countTotal(){
        var cart_rows = document.querySelectorAll('.cart-row');
        if(cart_rows.length == 0){
            location.reload();
        }
        else{
            var total = 0;
            document.querySelectorAll('.cart-row').forEach(function(row, i){
                var qty = parseInt(row.querySelector('.qty').value);
                if(isNaN(qty)){qty =0;}
                var price = parseInt(row.querySelector('.price-val').innerHTML.replace(' ', ''));
                var sum = qty * price;
                row.querySelector('.sum .thousands').innerHTML = format(sum);
                total += sum;
            });
            document.querySelector('.total-prices').innerHTML = format(total);
        }
    }

    countTotal();

    document.querySelectorAll('input.qty').forEach(function(el, i){
        el.addEventListener('keyup', function(event){
            console.log('changed');
            countTotal();
        });        
    });

    document.querySelectorAll('.qty-button').forEach(function(el, i){        
        el.addEventListener('click', function(event){
            var qtyInput = el.parentNode.querySelector('.qty');
            var val = parseFloat(qtyInput.value);
            var azon = qtyInput.getAttribute('data-azon');
            var ndx = qtyInput.getAttribute('data-ndx');
            console.log(azon);
            if(el.classList.contains('minus')){
                val--;
                if(val <= 0){ 
                    val = 0;
                    document.getElementById('cart-row-'+ndx).remove();
                }
                xhr.open('POST', "{{ route('decreaseCartItem') }}");                
            }
            else{
                val++;                
                xhr.open('POST', "{{ route('increaseCartItem') }}");
            }
            
            xhr.setRequestHeader('Content-Type', 'application/json');
            xhr.send(JSON.stringify({
                '_token': '{{ csrf_token() }}',
                'azon': azon
            })); 

            qtyInput.value = val;
            
        });        
    });



    document.querySelectorAll('.remove-me').forEach(function(el, i){                
        el.addEventListener('click', function(event){
            event.preventDefault();
            var ndx = el.getAttribute('data-ndx');
            var azon = el.getAttribute('data-azon');        
            xhr.open('POST', "{{ route('removeCartItem') }}");
            xhr.setRequestHeader('Content-Type', 'application/json');
            xhr.send(JSON.stringify({
                '_token': '{{ csrf_token() }}',
                'azon': azon
            }));
            document.getElementById('cart-row-'+ndx).remove();            
        });
    });


</script>
@endif
@endsection