@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>

            <div class="prod-full mb-3 animateMeIn" data-animation="fadeIn" data-id="{{ $item->id }}">
                <div class="prod-title">{{ $item->titleForQuotation() }}</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>                
                </div>
            </div>
        <span id="fake-anchor"></span>
        <form action="{{ route('ajanlatkeres.save') }}" method="POST" id="form1" class="needs-validation" novalidate>
            <input type="hidden" name="type_id" value="{{ $item->params_type }}" />
            <input type="hidden" name="product_id" value="{{ $item->id }}" />
            @csrf
            <div class="block-title color-1 mb-3">{{ __('Igényfelmérő kérdések') }}</div>

            @if (!$errors->isEmpty())
                <div class="alert alert-danger">
                @foreach ($errors->all() as $error)
                    {{ $error }} <br>
                @endforeach
                </div>            
            @endif

            <div class="form-group">
                <label for="kerdes_1">{{ __('Melyik-milyen helységbe gondoltad elhelyezni az alkotást?') }}</label>
                <textarea name="kerdes_1" rows="4" class="form-control req">{{ old('kerdes_1') }}</textarea>
            </div>

            <div class="form-group">
                <label for="kerdes_2">{{ __('Van-e olyan a kész lámpák közül ami a legjobban tetszik? (A galériában lévő fotó vagy fotók száma, maximum kettőt jelölj meg kérlek!)') }}</label>
                <textarea name="kerdes_2" rows="4" class="form-control req">{{ old('kerdes_2') }}</textarea>
            </div>
            
            <div class="form-group">
                <label for="kerdes_3">{{ __('Van-e szín elgondolásod, kedvenc színeid?') }}</label>
                <textarea name="kerdes_3" rows="4" class="form-control req">{{ old('kerdes_3') }}</textarea>
            </div>
            
            <div class="form-group">
                <label for="kerdes_4">{{ __('Kötnéd-e érzéshez, érzelemhez, amit kifejezzen vagy erősítsen?') }}</label>
                <textarea name="kerdes_4" rows="4" class="form-control req">{{ old('kerdes_4') }}</textarea>
            </div>
            
            <div class="pb-2 form-group req-one-cb" data-err-msg="{{ __('Válasszon legalább egy opciót a fentiekből!') }}">
                <label class="cb-container mb-4"> {{ __('Önmagadnak szóló boldogságforrásnak szánod?') }}
                    <input type="checkbox" name="chk_1" value="1" {{ old('chk_1') ? 'checked' : '' }} >
                    <span class="checkmark"></span>
                </label>
                <label class="cb-container mb-4"> {{ __('Családi boldogságforrásnak szánod?') }}
                    <input type="checkbox" name="chk_2" value="2" {{ old('chk_2') ? 'checked' : '' }} >
                    <span class="checkmark"></span>
                </label>
                <label class="cb-container mb-4"> {{ __('Párodnak és neked szóló boldogságforrásnak szánod?') }}
                    <input type="checkbox" name="chk_3" value="3" {{ old('chk_3') ? 'checked' : '' }} >
                    <span class="checkmark"></span>
                </label>
                <label class="cb-container mb-4"> {{ __('Ezoterikus vonatkozásban szeretnéd-e, ha hatása érvényesülne?') }}
                    <input type="checkbox" name="chk_4" value="4" {{ old('chk_4') ? 'checked' : '' }} >
                    <span class="checkmark"></span>
                </label>
            </div>

            {{-- VONALLÁMPA --}}
            @if($item->params_type == 1 || $item->params_type == 3)

                <div class="block-title mb-3">{{ __('Az installációban lévő vonallámpa paraméterei') }}:</div>
                <div class="block-title mb-3">{{ __('A vonallámpa hossza') }}</div>

                    @if($item->params_type == 1)
                    <div class="req-one-rad" data-err-msg="{{ __('Válasszon legalább egy opciót a fentiekből!') }}">
                        <div class="d-flex gap-4">
                            <div>
                                <label class="cb-container mb-4">
                                    <input type="radio" name="size" value="50 cm" {{ old('size') == '50 cm' ? 'checked' : '' }} > 50 cm
                                    <span class="checkmark"></span>
                                </label>
                            </div>
                            <div>
                                <label class="cb-container mb-4">
                                    <input type="radio" name="size" value="100 cm" {{ old('size') == '100 cm' ? 'checked' : '' }} > 100 cm
                                    <span class="checkmark"></span>
                                </label>
                            </div>
                            <div>
                                <label class="cb-container mb-4">
                                    <input type="radio" name="size" value="154 cm" {{ old('size') == '154 cm' ? 'checked' : '' }} > 154 cm
                                    <span class="checkmark"></span>
                                </label>
                            </div>
                            <div>
                                <label class="cb-container mb-4">
                                    <input type="radio" name="size" value="{{ __('egyedi méret') }}" {{ old('size') == __('egyedi méret') ? 'checked' : '' }} > {{ __('egyedi méretet szeretnék') }} (minimum 38 cm - maximum 154 cm)
                                    <span class="checkmark"></span>
                                </label>
                            </div>
                            <div>
                                <input type="text" class="form-control" style="width: 150px;border:1px solid #00AEC7;margin-top:-8px;" placeholder="{{ __('egyedi méret') }} (cm)" maxlength="100" name="size_extra" value="{{ old('size_extra') }}" />
                            </div>
                        </div>
                    </div>
                    @endif
            
                    @if($item->params_type == 3)                    
                        <label class="cb-container mb-4">
                            <input type="radio" name="size" value="50 cm" {{ old('size') == '50 cm' ? 'checked' : '' }} checked readonly > 50 cm
                            <span class="checkmark"></span>
                        </label>                    
                    @endif
                

                <div class="block-title mb-3 mt-3">{{ __('A vonallámpa alap felülete') }}</div>
                <div class="req-one-rad" data-err-msg="{{ __('Válasszon legalább egy opciót a fentiekből!') }}">
                    <label class="cb-container mb-4">
                        <input type="radio" name="felulet" value="{{ $strings[1] }}" {{ old('felulet') == $strings[1] ? 'checked' : '' }} > {{ $strings[1] }}
                        <span class="checkmark"></span>
                    </label>

                    <div class="d-flex gap-4">
                        <div>
                            <label class="cb-container mb-4">
                                <input type="radio" name="felulet" value="{{ $strings[2] }}" {{ old('felulet') == $strings[2] ? 'checked' : '' }} > {{ $strings[2] }}
                                <span class="checkmark"></span>
                            </label>
                        </div>                        
                        <div>
                            <label class="cb-container mb-4">
                                <input type="radio" name="felulet" value="{{ $strings[3] }}" {{ old('felulet') == $strings[3] ? 'checked' : '' }} > {{ $strings[3] }}
                                <span class="checkmark"></span>
                            </label>
                        </div>
                        <div>
                            <label class="cb-container mb-4">
                                <input type="radio" name="felulet" value="{{ $strings[4] }}" {{ old('felulet') == $strings[4] ? 'checked' : '' }} > {{ $strings[4] }}
                                <span class="checkmark"></span>
                            </label>
                        </div>
                        <div>
                            <label class="cb-container mb-4">
                                <input type="radio" name="felulet" value="{{ $strings[5] }}" {{ old('felulet') == $strings[5] ? 'checked' : '' }} > {{ $strings[5] }}
                                <span class="checkmark"></span>
                            </label>
                        </div>
                        
                    </div>

                    <div class="d-flex gap-4">
                        <div>
                            <label class="cb-container mb-4">
                                <input type="radio" name="felulet" value="{{ $strings[6] }}" {{ old('felulet') == $strings[6] ? 'checked' : '' }} > {{ $strings[6] }}
                                <span class="checkmark"></span>
                            </label>
                        </div>
                        <div>
                            <label class="cb-container mb-4">
                                <input type="radio" name="felulet" value="{{ $strings[7] }}" {{ old('felulet') == $strings[7] ? 'checked' : '' }} > {{ $strings[7] }}
                                <span class="checkmark"></span>
                            </label>
                        </div>
                    </div>
                </div>

                <div class="block-title mb-3 mt-3">{{ __('Fény és világítás') }}</div>

                <div class="req-one-rad" data-err-msg="{{ __('Válasszon legalább egy opciót a fentiekből!') }}">
                    <div class="d-flex gap-4">
                        <div>
                            <label class="cb-container mb-4">
                                <input type="radio" name="feny" value="{{ $strings[8] }}" {{ old('feny') == $strings[8] ? 'checked' : '' }} > {{ $strings[8] }}
                                <span class="checkmark"></span>
                            </label>
                        </div>
                        <div>
                            <label class="cb-container mb-4">
                                <input type="radio" name="feny" value="{{ $strings[9] }}" {{ old('feny') == $strings[9] ? 'checked' : '' }} > {{ $strings[9] }}
                                <span class="checkmark"></span>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="req-one-rad" data-err-msg="{{ __('Válasszon legalább egy opciót a fentiekből!') }}">
                    <div class="d-flex gap-4">
                        <div>
                            <label class="cb-container mb-4">
                                <input type="radio" name="vilagitas" value="{{ $strings[10] }}" {{ old('vilagitas') == $strings[10] ? 'checked' : '' }} > {{ $strings[10] }}
                                <span class="checkmark"></span>
                            </label>
                        </div>
                        <div>
                            <label class="cb-container mb-4">
                                <input type="radio" name="vilagitas" value="{{ $strings[11] }}" {{ old('vilagitas') == $strings[11] ? 'checked' : '' }} > {{ $strings[11] }}
                                <span class="checkmark"></span>
                            </label>
                        </div>
                    </div>
                </div>

                <div class="block-title mb-3 mt-3">{{ __('Tájolás, áramforrás, vezeték, kapcsoló') }}</div>
                <div class="req-one-rad" data-err-msg="{{ __('Válasszon legalább egy opciót a fentiekből!') }}">
                    <div class="mb-3">
                        <label class="cb-container mb-4">
                            <input type="radio" name="tajolas" value="{{ $strings[12] }}" {{ old('tajolas') == $strings[12] ? 'checked' : '' }} > {{ $strings[12] }}
                            <span class="checkmark"></span>
                        </label>

                        <label class="cb-container mb-4"> 
                            <input type="radio" name="tajolas" value="{{ $strings[13] }}" {{ old('tajolas') == $strings[13] ? 'checked' : '' }} > {{ $strings[13] }}
                            <span class="checkmark"></span>
                        </label>

                        <label class="cb-container mb-4">
                            <input type="radio" name="tajolas" value="{{ $strings[14] }}" {{ old('tajolas') == $strings[14] ? 'checked' : '' }} > {{ $strings[14] }}
                            <span class="checkmark"></span>
                        </label>
                    </div>
                </div>
                <div class="req-one-rad" data-err-msg="{{ __('Válasszon legalább egy opciót a fentiekből!') }}">
                    <div class="row pt-4">
                        <div class="col-5">
                            <label class="cb-container mb-4">
                                <input type="radio" name="aramforras" value="{{ $strings[15] }}" {{ old('aramforras') == $strings[15] ? 'checked' : '' }} > {{ $strings[15] }}
                                <span class="checkmark"></span>
                            </label>
                        </div>
                        <div class="col">
                            <label class="cb-container mb-4">
                                <input type="radio" name="aramforras" value="{{ $strings[16] }}" {{ old('aramforras') == $strings[16] ? 'checked' : '' }} > {{ $strings[16] }}
                                <span class="checkmark"></span>
                            </label>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-5">
                            <label class="cb-container mb-4">
                                <input type="radio" name="aramforras" value="{{ $strings[17] }}" {{ old('aramforras') == $strings[17] ? 'checked' : '' }} > {{ $strings[17] }}
                                <span class="checkmark"></span>
                            </label>
                        </div>
                        <div class="col">
                            <label class="cb-container mb-4">
                                <input type="radio" name="aramforras" value="{{ $strings[18] }}" {{ old('aramforras') == $strings[18] ? 'checked' : '' }} > {{ $strings[18] }}
                                <span class="checkmark"></span>
                            </label>
                        </div>
                    </div>
                </div>

                    <label class="cb-container mb-4"> 
                        <input type="radio" name="kapcsolo" value="{{ $strings[19] }}" {{ old('kapcsolo') == $strings[19] ? 'checked' : '' }} > {{ $strings[19] }}
                        <span class="checkmark"></span>
                    </label>
            @endif

            {{-- KÖRLÁMPA --}}
            @if($item->params_type == 2 || $item->params_type == 4)
                
                @if($item->params_type == 4)
                    <div class="block-title mb-3 mt-3">{{ __('Az installációban lévő körlámpák (7db) paraméterei') }}:</div>
                @endif

                <div class="row">
                    <div class="col-12 col-sm-6 col-lg-4">
                        <div class="block-title mb-3 mt-3">{{ __('A körlámpa alap felülete') }}</div>
                        <div class="req-one-rad" data-err-msg="{{ __('Válasszon legalább egy opciót a fentiekből!') }}">
                            <div class="d-flex gap-4">
                                <div>
                                    <label class="cb-container mb-4">
                                        <input type="radio" name="felulet" value="{{ $strings[20] }}" {{ old('felulet') == $strings[20] ? 'checked' : '' }} > {{ $strings[20] }}
                                        <span class="checkmark"></span>
                                    </label>
                                </div>
                                <div>
                                    <label class="cb-container mb-4">
                                        <input type="radio" name="felulet" value="{{ $strings[21] }}" {{ old('felulet') == $strings[21] ? 'checked' : '' }} > {{ $strings[21] }}
                                        <span class="checkmark"></span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-sm">
                        <div class="block-title mb-3 mt-3">{{ __('A körlámpa keretének, kávájának a színe') }}</div>
                            <div class="req-one-rad" data-err-msg="{{ __('Válasszon legalább egy opciót a fentiekből!') }}">
                            <div class="d-flex gap-4">
                                <div>
                                    <label class="cb-container mb-4">
                                        <input type="radio" name="keret" value="{{ $strings[22] }}" {{ old('keret') == $strings[22] ? 'checked' : '' }} > {{ $strings[22] }}
                                        <span class="checkmark"></span>
                                    </label>
                                </div>
                                <div>
                                    <label class="cb-container mb-4">
                                        <input type="radio" name="keret" value="{{ $strings[23] }}" {{ old('keret') == $strings[23] ? 'checked' : '' }} > {{ $strings[23] }}
                                        <span class="checkmark"></span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="block-title mb-3 mt-3">{{ __('Fény és világítás') }}</div>
                <div class="req-one-rad" data-err-msg="{{ __('Válasszon egy opciót a fentiekből!') }}">
                    <div class="d-flex gap-4">
                        <div>
                            <label class="cb-container mb-4">
                                <input type="radio" name="vilagitas" value="{{ $strings[10] }}" {{ old('vilagitas') == $strings[10] ? 'checked' : '' }} > {{ $strings[10] }}
                                <span class="checkmark"></span>
                            </label>
                        </div>
                        <div>
                            <label class="cb-container mb-4">
                                <input type="radio" name="vilagitas" value="{{ $strings[11] }}" {{ old('vilagitas') == $strings[11] ? 'checked' : '' }} > {{ $strings[11] }}
                                <span class="checkmark"></span>
                            </label>
                        </div>
                    </div>
                </div>

                <div class="block-title mb-3 mt-3">{{ __('Állandó, alapvető paraméterek amik nem módosíthatók') }}</div>
                    <ul>
                        <li>{{ __('a körlámpa átmérője') }} 25 cm</li>
                        <li>{{ __('a körlámpa káva magassága') }} 5 cm</li>
                        <li>{{ __('a körlámpa áramforrása elemes') }}</li>
                        <li>{{ __('a körlámpa kapcsolása távirányítással történik') }}</li>
                    </ul>

            @endif

            <div class="block-title color-1 mt-5 mb-1">
                {{ __('Fontos') }}!
            </div>
            <div class="block-title color-1 mb-5">
                {{ __('A fenti összes kédésre adott válasz esetén van módunk az ajánlat elkészítésére.') }} <br>
                {{ __('Az ajánlatunkat az ajánlatkérés beérkezését követően 48-órán belül elkészítjük és a lent megadott e-mail címre megküldjük. Az ajánlatkérés nem jár kötelezettséggel.') }}
            </div>


            <div class="row">
                <div class="col-12 col-sm-4">
                    <div class="form-group">
                        <label for="name">{{ __('Név') }}</label>
                        <input type="text" class="form-control req" required name="name" maxlength="100" value="{{ old('name') }}" /> 
                    </div>
                </div>
                <div class="col-12 col-sm-4">
                    <div class="form-group">
                        <label for="email">{{ __('E-mail cím') }}</label>
                        <input type="email" class="form-control req" required name="email" maxlength="100" value="{{ old('email') }}" /> 
                    </div>
                </div>
                <div class="col-12 col-sm-4">
                    <div class="form-group">
                        <label for="phone">{{ __('Telefonszám') }}</label>
                        <input type="text" class="form-control req" required name="phone" maxlength="100" value="{{ old('phone') }}" /> 
                    </div>
                </div>
            </div>

            {!! app('captcha')->render(app()->getLocale()) !!}

            <div class="text-center mt-5">
                <button type="submit" class="btn-def" id="submitButton">{{ __('Ajánlatkérés elküldése') }}</button>
            </div>
        </form>
    </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 checkForm(formId){
        var form = document.getElementById(formId);        
        console.log('clicked');  
        var ret = true;      
        
        form.querySelectorAll('.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(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("form1");
    });

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

    var anchor = document.getElementById('fake-anchor');
    window.scroll({
        top: anchor.offsetTop, 
        left: 0, 
        behavior: 'smooth' 
    });
    

</script>
@endsection