@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>
        <ul class="steps">
            <li><a href="{{ route('cart.content.'.app()->getLocale()) }}">{{ __('Kosár tartalma') }}</a></li>
            <li class="active"><a href="{{ route('cart.step2.'.app()->getLocale()) }}">{{ __('Szállítási és fizetési adatok') }}</a></li>
            <li>{{ __('Áttekintés, megrendelés') }}</li>
        </ul>

        @if (!$errors->isEmpty())
            <div class="alert alert-danger">
            @foreach ($errors->all() as $error)
                {{ $error }} <br>
            @endforeach
            </div>            
        @endif
        
        <form action="{{ route('cart.submit_step_2') }}" method="POST" id="form2">
        @csrf
        <div class="pt-3">
            <div class="block-title">{{ __('Számlázási adatok') }}</div>
            <div class="row">
                <div class="col-12 col-sm-4 py-2">
                    <label for="name" class="req">{{ __('név') }}</label>
                    <input type="text" name="name" class="form-control req" maxlength="100" value="{{ old('name', $form['name']) }}" />
                </div>
                <div class="col-12 col-sm-4 py-2">
                    <label for="company">{{ __('cégnév') }}</label>
                    <input type="text" name="company" class="form-control" maxlength="100" value="{{ old('company', $form['company']) }}" />
                </div>
                <div class="col-12 col-sm-4 py-2">
                    <label for="email" class="req">email</label>
                    <input type="email" name="email" class="form-control req" maxlength="100" value="{{ old('email', $form['email']) }}" />
                </div>
            </div>
            <div class="row">
                <div class="col-12 col-sm-2 py-2">
                    <label for="zip" class="req">{{ __('irányítószám') }}</label>
                    <input type="text" name="zip" class="form-control req" maxlength="10" value="{{ old('zip', $form['zip']) }}" />
                </div>
                <div class="col-12 col-sm-4 py-2">
                    <label for="city" class="req">{{ __('település') }}</label>
                    <input type="text" name="city" class="form-control req" maxlength="100" value="{{ old('city', $form['city']) }}" />
                </div>
                <div class="col-12 col-sm-6 py-2">
                    <label for="address" class="req">{{ __('utca, házszám, emelet, ajtó') }}</label>
                    <input type="text" name="address" class="form-control req" maxlength="100" value="{{ old('address', $form['address']) }}" />
                </div>
            </div>
            <div class="row">
                <div class="col-12 col-sm-4 py-2">
                    <label for="phone" class="req">{{ __('telefonszám') }}</label>
                    <input type="text" name="phone" class="form-control req" maxlength="10" value="{{ old('phone', $form['phone']) }}" />
                </div>
                <div class="col-12 col-sm-4 py-2">
                    <label for="tax">{{ __('adószám') }}</label>
                    <input type="text" name="tax" class="form-control" maxlength="100" value="{{ old('tax', $form['tax']) }}" />
                </div>                
            </div>
        </div>

        <div class="pt-3">
            <label class="cb-container">{{ __('eltérő szállítási cím') }}
                <input type="checkbox" value="different_shipping_data" name="different_shipping_data" {{ old('different_shipping_data') ? 'checked' : '' }}>
                <span class="checkmark"></span>
            </label>
        </div>

        <div class="pt-3 collapse" id="shipping-block">
            <div class="block-title">{{ __('Szállítási adatok') }}</div>
            <div class="row">
                <div class="col-12 col-sm-4 py-2">
                    <label for="name2" class="req">{{ __('név') }}</label>
                    <input type="text" name="name2" class="form-control req2" maxlength="100" value="{{ old('name2', $form['name2']) }}" />
                </div>
                <div class="col-12 col-sm-4 py-2">
                    <label for="company2">{{ __('cégnév') }}</label>
                    <input type="text" name="company2" class="form-control" maxlength="100" value="{{ old('company2', $form['company2']) }}" />
                </div>
                <div class="col-12 col-sm-4 py-2">
                    <label for="email2" class="req">email</label>
                    <input type="email" name="email2" class="form-control req2" maxlength="100" value="{{ old('email2', $form['email2']) }}" />
                </div>
            </div>
            <div class="row">
                <div class="col-12 col-sm-2 py-2">
                    <label for="zip2" class="req">{{ __('irányítószám') }}</label>
                    <input type="text" name="zip2" class="form-control req2" maxlength="10" value="{{ old('zip2', $form['zip2']) }}" />
                </div>
                <div class="col-12 col-sm-4 py-2">
                    <label for="city2" class="req">{{ __('település') }}</label>
                    <input type="text" name="city2" class="form-control req2" maxlength="100" value="{{ old('city2', $form['city2']) }}" />
                </div>
                <div class="col-12 col-sm-6 py-2">
                    <label for="address2" class="req">{{ __('utca, házszám, emelet, ajtó') }}</label>
                    <input type="text" name="address2" class="form-control req2" maxlength="100" value="{{ old('address2', $form['address2']) }}" />
                </div>
            </div>
            <div class="row">
                <div class="col-12 col-sm-4 py-2">
                    <label for="phone2" class="req">{{ __('telefonszám') }}</label>
                    <input type="text" name="phone2" class="form-control req2" maxlength="10" value="{{ old('phone2', $form['phone2']) }}" />
                </div>                
            </div>
        </div>

        <div class="pt-3">
            <div class="block-title">{{ __('Fizetési mód') }}</div>
            <div class="py-2 req-one-rad" data-err-msg="{{ __('Válasszon egy opciót a fentiekből!') }}">
                @forelse($payment_methods as $payment)
                <label class="cb-container">{{ $payment->title() }}
                    <input type="radio" name="payment_method" value="{{ $payment->id }}" {{ isset($form['payment_method']) && $form['payment_method'] == $payment->id ? 'checked' : '' }}>
                    <span class="checkmark"></span>
                </label>
                @empty
                @endforelse                
            </div>
        </div>

        <div class="pt-3">
            <div class="block-title">{{ __('Szállítási mód') }}</div>
            <div class="py-2 mb-3 req-one-rad" data-err-msg="{{ __('Válasszon egy opciót a fentiekből!') }}">
            @forelse($shipping_methods as $shp)
                <label class="cb-container">{{ $shp->title() }}
                    <input type="radio" value="{{ $shp->id }}" name="shipping_method" {{ isset($form['shipping_method']) && $form['shipping_method'] == $shp->id ? 'checked' : '' }}>
                    <span class="checkmark"></span>
                </label>
            @empty
            @endforelse
            </div>            
        </div>

        <div class="row">
            <div class="col-12 col-lg-6">
                <label for="message">{{ __('megjegyzés') }}</label>
                <textarea class="form-control" rows="3" name="message">{{ old('message', $form['message']) }}</textarea>
            </div>
        </div>

        <hr>

        <div class="row">
            <div class="col-12 col-md-6 text-center text-md-start pb-3">
                <a href="{{ route('cart.content.'.app()->getLocale()) }}" class="cyan">{{ __('vissza az kosárhoz') }}</a>
            </div>
            <div class="col-12 col-md-6 text-center text-md-end">
                <button type="submit" class="btn-def" id="submitButton">{{ __('Tovább a megrendelés áttekintéséhez') }}</button>
            </div>
        </div>
        </form>
    </div>
</section>

@include('components.iconsBlock')

@endsection

@section('css')
<link rel="stylesheet" href="{{ asset('assets/cart.css') }}">
<link rel="stylesheet" href="{{ asset('assets/sweetalert2/sweetalert2.min.css') }}">
<style>
    .req-one-rad.not-valid::after{
        margin-top:0;
    }
</style>
@endsection

@section('scripts')
    <script src="{{ asset('assets/fslightbox/fslightbox.js') }}"></script>    
    <script src="{{ asset('assets/sweetalert2/sweetalert2.min.js') }}"></script>
    <script>
                
        document.querySelector('input[name=different_shipping_data]').addEventListener('change', function(){
            toggleCollapseIfNeeded();            
        });
        function toggleCollapseIfNeeded(){
            var shippingDataBlock = document.getElementById('shipping-block');
            var bsCollapse = new bootstrap.Collapse(shippingDataBlock, {
                toggle: false
            });
            if(document.querySelector('input[name=different_shipping_data]').checked){
                bsCollapse.show();
            }
            else{
                bsCollapse.hide();
            }            
        }
        toggleCollapseIfNeeded();
        


        function checkForm(formId){
            var form = document.getElementById(formId);        
            console.log('clicked');  
            var ret = true;      
            
            form.querySelectorAll('input.req').forEach(function(el, i){
                el.classList.remove('not-valid');
                if(el.value == ''){
                    ret = false;
                    el.classList.add('not-valid');
                }            
            });

            form.querySelectorAll('.req-one-cb').forEach(function(el, i){
                el.classList.remove('not-valid');
                var checked_cbs = 0;
                el.querySelectorAll('input[type="checkbox"]').forEach(function(cb){
                    if(cb.checked){ checked_cbs++; }
                });
                if(checked_cbs == 0){
                    el.classList.add('not-valid');
                    ret = false;
                }
            });
            
            form.querySelectorAll('.req-one-rad').forEach(function(el, i){
                el.classList.remove('not-valid');
                var checked_cbs = 0;
                el.querySelectorAll('input[type="radio"]').forEach(function(cb){
                    if(cb.checked){ checked_cbs++; }
                });
                if(checked_cbs == 0){
                    el.classList.add('not-valid');
                    ret = false;
                }
            });

            if(document.querySelector('input[name=different_shipping_data]').checked){
                form.querySelectorAll('input.req2').forEach(function(el, i){
                    el.classList.remove('not-valid');
                    if(el.value == ''){
                        ret = false;
                        el.classList.add('not-valid');
                    }            
                });
            }

            if(ret == false){
                Swal.fire({
                    title: "{{ __('Töltse ki a hiányzó mezőket!') }}",
                    icon: 'error'
                });
            }
            else{
                form.submit();
            }
        }

        document.getElementById('submitButton').addEventListener('click',function(e){
            e.preventDefault();
            checkForm("form2");
        });

        document.querySelectorAll('input.req').forEach(function(el, i){
            el.addEventListener('keyup',function(e){
                this.classList.remove('not-valid');
            });
        });

    </script>
@endsection