@extends('layout.b2c')
@section('title', 'Kontakt | Krojačeva škola')
@section('description', 'Kontaktiraj tim Krojačeve škole za sve informacije o kursevima, pretplatama i saradnji. Tu smo da odgovorimo na sva tvoja pitanja.')
@section('keywords', 'Krojačeva škola, kontakt, podrška, informacije, kursevi, pretplata, pomoć')

@section('header-scripts')
<script>
    function recaptchaCallback() {
        const calbackExecutedElement = document.querySelector('input[type=hidden][name=re-captcha-callback-executed]')
        if(calbackExecutedElement) {
            calbackExecutedElement.value = 1;
        }
    }
</script>
<script src="https://www.google.com/recaptcha/api.js?hl=sr" async defer></script>
@endsection

@section('content')
    <section class="section section-top-title">
        <figure class="curly-line">
            <svg xmlns="http://www.w3.org/2000/svg" width="300" height="240" viewBox="0 0 300 240">
                <g transform="translate(0,240) scale(0.1,-0.1)" fill="currentColor" stroke="none">
                    <path
                        d="M2970 2378 c0 -7 -23 -60 -50 -117 -43 -89 -62 -115 -133 -186 -69 -69 -98 -89 -187 -133 -135 -65 -217 -93 -595 -203 -170 -50 -353 -106 -405 -126 -297 -111 -445 -237 -521 -445 -53 -143 -73 -375 -49 -538 l10 -65 -41 -34 c-22 -19 -101 -104 -175 -188 -143 -162 -205 -216 -296 -258 -91 -42 -176 -55 -361 -55 -110 0 -166 -3 -162 -10 10 -16 301 -12 392 5 127 24 222 77 324 182 48 48 106 111 130 138 75 87 173 185 185 185 6 0 14 -15 18 -32 3 -18 18 -62 31 -98 73 -188 209 -264 345 -193 90 47 149 156 136 250 -26 191 -223 257 -444 150 -34 -16 -66 -27 -70 -23 -4 4 -7 94 -7 199 0 222 14 303 74 432 111 236 275 329 906 510 662 190 803 276 929 563 38 88 42 102 26 102 -5 0 -10 -6 -10 -12z m-1544 -1757 c110 -50 153 -174 100 -286 -53 -113 -173 -166 -272 -119 -67 32 -146 148 -174 254 -6 25 -13 52 -16 62 -6 22 42 55 124 84 84 30 179 32 238 5z" />
                </g>
            </svg>
        </figure>
        <!-- curly-line end -->
        <div class="container-custom">
            <div class="row">
                <div class="col-lg-8 offset-lg-2">
                    <h1><span class="text-light">Javite nam se,</span> tu smo.</h1>
                    <p>Ako imate pitanje, sugestiju ili želite da razgovaramo o vašim ciljevima, slobodno nam se
                        obratite. Rado ćemo saslušati, odgovoriti i pomoći.
                        Vaše povratne informacije su nam važne i cenimo svaku poruku.
                    </p>
                </div>
                <!-- col end -->
            </div>
            <!-- row end -->
        </div>
        <!-- container end -->
    </section>
    <!-- section end -->

    <section class="section section-contact">
        <figure class="curly-line">
            <svg xmlns="http://www.w3.org/2000/svg" width="300" height="240" viewBox="0 0 300 240">
                <g transform="translate(0,240) scale(0.1,-0.1)" fill="currentColor" stroke="none">
                    <path
                        d="M2970 2378 c0 -7 -23 -60 -50 -117 -43 -89 -62 -115 -133 -186 -69 -69 -98 -89 -187 -133 -135 -65 -217 -93 -595 -203 -170 -50 -353 -106 -405 -126 -297 -111 -445 -237 -521 -445 -53 -143 -73 -375 -49 -538 l10 -65 -41 -34 c-22 -19 -101 -104 -175 -188 -143 -162 -205 -216 -296 -258 -91 -42 -176 -55 -361 -55 -110 0 -166 -3 -162 -10 10 -16 301 -12 392 5 127 24 222 77 324 182 48 48 106 111 130 138 75 87 173 185 185 185 6 0 14 -15 18 -32 3 -18 18 -62 31 -98 73 -188 209 -264 345 -193 90 47 149 156 136 250 -26 191 -223 257 -444 150 -34 -16 -66 -27 -70 -23 -4 4 -7 94 -7 199 0 222 14 303 74 432 111 236 275 329 906 510 662 190 803 276 929 563 38 88 42 102 26 102 -5 0 -10 -6 -10 -12z m-1544 -1757 c110 -50 153 -174 100 -286 -53 -113 -173 -166 -272 -119 -67 32 -146 148 -174 254 -6 25 -13 52 -16 62 -6 22 42 55 124 84 84 30 179 32 238 5z" />
                </g>
            </svg>
        </figure>
        <!-- curly-line end -->
        <div class="container-custom">
            <div class="row">
                <div class="col-lg-6">
                    <div class="contact-info">
                        <div class="title-holder">
                            <h2>Krojačeva škola d.o.o.</h2>
                            <p class="text-light">Deo infostud grupe</p>
                        </div>
                        <!-- title-holder end -->
                        <div class="info-holder">

                            <p>Adresa: <a href="#"><strong>Matije Korvina 17, sprat 4, Subotica, 24000 Subotica, Srbija</strong></a></p>
                            @if ($isB2C)
                                <p>E-mail: <a
                                        href="mailto:info@krojacevaskola.com"><strong>info@krojacevaskola.com</strong></a>
                                </p>
                            
                            @else                                
                                <p>E-mail: <a
                                        href="mailto:biznis@krojacevaskola.com"><strong>biznis@krojacevaskola.com</strong></a>
                                </p>
                            @endif

                            <p>Radno vreme podrške: <strong>08-16h, pon-pet</strong></p>
                        </div>
                        <!-- info-holder end -->
                        <p>Ukoliko želite brzu komunikaciju, <br>popunite kratku formu ispod i naš tim će vam se javiti
                            u najkraćem roku.</p>
                    </div>
                    <!-- contact-info end -->
                </div>
                <!-- col end -->
                <div class="col-lg-6">
                    <form class="contact-form" action="{{ route('not_logged_in.contact.send_message') }}" method="POST" id="sendMessageForm">
                        @csrf
                        <div class="form-group">
                            <label for="inputName" class="form-label">Ime i prezime:</label>
                            <input type="text" class="form-control bordered" id="inputName" name="name" value="{{ $fullName }}"
                                placeholder="Upišite ime i prezime">
                        </div>
                        <!-- form-group end -->
                        <div class="form-group">
                            <label for="inputEmail" class="form-label">E-mail adresa:</label>
                            <input type="email" class="form-control bordered" id="inputEmail" name="email" value="{{ $email }}" required
                                placeholder="Upišite Vaš e-mail">
                        </div>
                        <!-- form-group end -->
                        <div class="form-group">
                            <label for="selectOption" class="form-label">Tema poruke:</label>
                            <select id="selectOption" class="form-select bordered" name="subject">
                                <option value="Ostalo" selected disabled>Izaberi</option>
                                <option value="Pitanje o kursu">Pitanje o kursu</option>
                                <option value="Tehnička podrška">Tehnička podrška</option>
                                <option value="Saradnja">Saradnja</option>
                            </select>
                        </div>
                        <!-- form-group end -->
                        <div class="form-group">
                            <label for="inputMesssage" class="form-label">Poruka:</label>
                            <textarea id="inputMesssage" class="form-control bordered height-10" name="message" required
                                placeholder="Upišite poruku"></textarea>
                        </div>
                        <!-- form-group end -->

                        <input type="hidden" name="re-captcha-callback-executed" id="re-captcha-callback-executed" value="0">
                        <div class="g-recaptcha" data-sitekey="{{ config('app.re_captcha_site_key') }}" data-callback="recaptchaCallback"></div>
                        <div class="form-group">
                            <div class="button-holder">
                                <button class="btn btn-square-50 black-bg" type="button" id="btnSendMessage">Pošalji poruku</button>

                                <p><strong>Napomena:</strong> Vaša poruka stiže direktno našem timu i potrudićemo se
                                    da odgovorimo
                                    što pre.</p>
                                <p>Sajt je zaštićen reCAPTCHA sistemom i primenjuju se Google politika privatnosti i
                                    Uslovi korišćenja.</p>
                            </div>
                            <!-- button-holder end -->
                        </div>
                        <!-- form-group end -->
                    </form>
                </div>
                <!-- col end -->
            </div>
            <!-- row end -->
        </div>
    <!-- container end -->
    </section>
    
    <!-- Footer -->
    @include('front.partials.index_b2c._footer')
    <!--- page-wrapper end -->
@endsection

@section('modals-and-offcanvas')
@endsection

@section('add-scripts')
    @parent
    <script>
        const elements_ids = [
            'inputName',
            //'inputSurname',
            //'inputCompany',
            //'inputPhone',
            'inputEmail',
            'inputMesssage',
            'g-recaptcha-response',
            're-captcha-callback-executed'
        ];

        elements_ids.forEach((element) => {
            if(!['re-captcha-callback-executed', 'g-recaptcha-response',].includes(element)) {
                document.querySelector(`#${element}`).addEventListener('focus', (e) => {
                    document.querySelector(`#${e.target.id}`).classList.remove('is-invalid');
                    document.querySelector(`label[for=${e.target.id}]`).classList.remove('is-invalid');
                });
            }
        });

        const validateForm = (dispalyErrors = true) => {
                var valid = true;

                elements_ids.forEach(el => {
                    const item = document.querySelector('#' + el);
                    const itemLabel = document.querySelector(`label[for=${el}]`);

                    if(el == 're-captcha-callback-executed') {
                        if (item.value == 0) {
                            if (dispalyErrors) {
                                bsToastDanger("Morate potvrditi da niste robot (reCAPTCHA)")
                            }

                            valid = false;
                        }
                    }
                    if(el != 're-captcha-callback-executed') {
                        if (item.value == '') {
                            if (dispalyErrors) {
                                item.classList.add('is-invalid');
                                if(itemLabel) {
                                    itemLabel.classList.add('is-invalid');
                                }
                            }
    
                            valid = false;
                        }
                    }
                });

                return valid;
            }
            (() => {
                document.querySelector("#btnSendMessage").addEventListener('click', (event) => {
                    event.preventDefault();
                    if  (validateForm(true)) {
                        document.querySelector("#sendMessageForm").submit();
                        return;
                    }
                });
            })();
    </script>
@endsection