@extends('site.index')
@section('bodyclass', 'page-home')
@section('page','Home')
@section('main')
    <main>

        <section class="section-banner">

            <div
                    class="carousel"
                    data-aos="fade-in"
                    data-ix="carousel"
                    data-carousel-autoplay="false"
                    data-carousel-loop="false"
                    data-carousel-margin="0"
                    data-carousel-margin-991="0"
                    data-carousel-items="1"
                    data-carousel-items-1200="1"
                    data-carousel-items-991="1"
                    data-carousel-items-767="1"
                    data-carousel-items-480="1"
                    data-carousel-items-0="1"
                    data-carousel-center="false"
                    data-carousel-dots="false"
                    data-carousel-nav="false"
                    data-carousel-auto-width="false"
                    data-carousel-auto-height="false"
                    data-carousel-mouse-drag="false"
                    data-carousel-touch-drag="true"
                    data-carousel-pull-drag="true"
                    data-carousel-auto-play-timeout="3500"
                    data-carousel-auto-play-hover-pause="true"
            >
                <div>
                    <img src="{{asset($banner->image)}}" alt="">
                    <img src="{{asset($banner->mobile)}}" class="mob" alt="">
                </div>
            </div>

            <div class="row">
                <div class="col md-up-offset-7 md-up-4 sm-offset-7 sm-5">

                    <form action="{{route('site.contact.send')}}" data-aos="fade-up" data-aos-delay="300" method="post"
                          id="frm-contact" novalidate>
                        @csrf
                        @method('post')
                        <ul>
                            <li>
                                <input type="text" placeholder="Nome" name="name" id="name">
                            </li>
                            <li>
                                <input type="text" placeholder="Email" name="email" id="email">
                            </li>
                            <li>
                                <input type="text" placeholder="Telefone" name="phone" id="phone" class="phones">
                            </li>
                            <li>
                                <label>Em qual unidade deseja estudar?</label>
                            </li>
                            <li class="d-flex a-center">
                                @foreach ($units as $unit)
                                    <div class="radio-custom">
                                        <input type="radio" id="unit{{$unit->id}}" name="unit" value="{{$unit->id}}">
                                        <label for="unit{{$unit->id}}">{{str_replace('CNA ','',$unit->name)}}</label>
                                    </div>

                                @endforeach
                            </li>
                            <li>
                                <button class="btn" type="button" id="btn-send-contact">quero aprender!</button>
                            </li>
                        </ul>
                    </form>

                </div>
            </div>
        </section>

        <section class="section section-course">
            <div class="row">
                <div class="col md-up-7">
                    <div class="image" data-aos="fade-up">
                        <img src="{{asset('admin/img/mulher.png')}}" alt="">
                    </div>
                </div>
                <div class="col md-up-4">

                    <div class="text" data-aos="fade-in">
                        <h2 class="text-title">
                            <span>Na escola ou online,</span>
                            <span>temos o curso ideal</span>
                            <span>para você</span>
                        </h2>
                        <p>
                            O CNA sempre está ao seu lado durante a jornada de aprendizagem de um novo idioma. Por isso,
                            contamos com o Live Class. <br><br>
                            Ele é ideal para quem busca um curso de inglês online, mas também valoriza estar com seus
                            colegas de classe e seu professor durante a aprendizagem. Você participa de aulas online e
                            ao vivo e ainda pode interagir com os colegas de turma para realizar as atividades propostas
                            e praticar a conversação. <br><br>
                            <strong>O CNA Live Class possui a mesma carga horária e conteúdo do curso
                                presencial.</strong>
                        </p>
                    </div>

                </div>
            </div>
        </section>

        <section class="section section-units">
            <div class="row" data-aos="fade-in">
                <div class="col md-up-7">

                    <div
                            class="carousel"
                            data-ix="carousel"
                            data-carousel-autoplay="false"
                            data-carousel-loop="false"
                            data-carousel-margin="40"
                            data-carousel-margin-991="40"
                            data-carousel-items="2"
                            data-carousel-items-1200="2"
                            data-carousel-items-991="2"
                            data-carousel-items-767="2"
                            data-carousel-items-480="2"
                            data-carousel-items-0="1"
                            data-carousel-center="false"
                            data-carousel-dots="false"
                            data-carousel-nav="false"
                            data-carousel-auto-width="false"
                            data-carousel-auto-height="false"
                            data-carousel-mouse-drag="false"
                            data-carousel-touch-drag="true"
                            data-carousel-pull-drag="true"
                            data-carousel-auto-play-timeout="3500"
                            data-carousel-auto-play-hover-pause="true"
                    >
                        @foreach ($units as $unit)
                            <img src="{{asset($unit->image)}}" alt="{{$unit->name}}">
                        @endforeach
                    </div>

                </div>
                <div class="col md-up-4">

                    <div class="text">
                        <h2 class="text-title">
                            <span>COMO SÃO</span>
                            <span>NOSSAS UNIDADES?</span>
                        </h2>
                        <p>
                            As unidades CNA Campos Salles e Dom Pedro oferecem toda a <strong>infraestrutura e
                                tecnologia necessárias para que você aprenda inglês ou espanhol</strong> dentro e fora
                            da sala de aula.<br><br>
                            As aulas são dinâmicas e os materiais didáticos do CNA são mais do que livros. Eles estão
                            totalmente integrados a recursos tecnológicos, oferecendo ao aluno aplicativos e conteúdos
                            em redes sociais, atividades com QR Codes, realidade aumentada e jogos interativos, que
                            inserem o idioma no cotidiano do aluno.
                        </p>
                    </div>

                </div>
            </div>
        </section>

        <section class="section section-address">
            <div class="row" data-aos="fade-in">
                <div class="col md-up-offset-2 md-up-4 sm-6">

                    <div class="text">
                        <h2 class="text-title">
                            Tudo isso pertinho <br>de você!
                        </h2>
                    </div>

                </div>
                <div class="col md-up-5 sm-6">
                    @foreach ($units as $unit)

                        <div class="box-address">
                            <div class="d-flex a-center">
                                <i class="fas fa-map-marker-alt"></i>
                                <address>
                                    <strong>{!! explode("\n",$unit->address)[0] !!}</strong>
                                    {!! explode("\n",$unit->address)[1] !!}
                                </address>
                            </div>
                            <a href="{{$unit->maps}}">como chegar</a>
                        </div>

                    @endforeach


                </div>
            </div>
        </section>

        <section class="section section-learn">
            <div class="row">
                <div class="col md-up-7 sm-6">
                    <div class="image" data-aos="fade-up">
                        <img src="{{asset('admin/img/pessoas.png')}}" alt="">
                    </div>
                </div>
                <div class="col md-up-4 sm-6">

                    <div class="text" data-aos="fade-in">
                        <h2 class="text-title">
                            <span>E como vou</span>
                            <span>aprender?</span>
                        </h2>
                        <p>
                            A metodologia CNA tem em um jeito diferente de ensinar: <strong>desde a primeira aula o
                                aluno já se comunica na língua que está aprendendo.</strong> Ele trabalha a comunicação
                            oral e escrita em atividades que simulam situações do dia a dia, com temas atuais que mantêm
                            o estudante motivado. É com interação que o aluno aprende o idioma, e não repetindo e
                            memorizando frases. <br><br>
                            Assim o curso torna-se mais <strong>dinâmico, divertido e eficiente. </strong>
                        </p>
                    </div>

                </div>
            </div>
        </section>

        <section class="section section-results">
            <div class="row a-center">

                <div class="col md-up-offset-1 md-up-4 sm-6">

                    <div class="text" data-aos="fade-in">
                        <h2 class="text-title">
                            O jeito CNA <br>de ensinar <br>dá resultados!
                        </h2>
                        <p>
                            A eficiência é comprovada com os exames internacionais da Cambridge Assessment English,
                            departamento da Universidade de Cambridge, na Inglaterra, e do SIELE para o
                            espanhol.<br><br>
                            <strong>
                                Tudo isso sem custo adicional para alunos que concluírem os cursos de inglês e espanhol
                                para adultos do CNA.
                            </strong>
                        </p>
                    </div>

                </div>
                <div class="col md-up-offset-1 md-up-6 sm-6">

                    <div class="image" data-aos="fade-up">
                        <img src="{{asset('admin/img/results-image.png')}}" alt="">
                    </div>

                </div>

            </div>
        </section>

        <section class="section section-testimony">
            <div class="row">
                <div class="col">

                    <div class="text" data-aos="fade-in">
                        <h2 class="text-title text-center">
                            Confira o que nossos alunos têm a dizer!
                        </h2>
                    </div>

                    <div
                            class="carousel mg-top-50"
                            data-aos="fade-up"
                            data-ix="carousel"
                            data-carousel-autoplay="true"
                            data-carousel-loop="true"
                            data-carousel-margin="40"
                            data-carousel-margin-991="40"
                            data-carousel-items="3"
                            data-carousel-items-1200="3"
                            data-carousel-items-991="3"
                            data-carousel-items-767="2"
                            data-carousel-items-480="2"
                            data-carousel-items-0="1"
                            data-carousel-center="false"
                            data-carousel-dots="false"
                            data-carousel-nav="false"
                            data-carousel-auto-width="false"
                            data-carousel-auto-height="false"
                            data-carousel-mouse-drag="false"
                            data-carousel-touch-drag="true"
                            data-carousel-pull-drag="true"
                            data-carousel-auto-play-timeout="6000"
                            data-carousel-auto-play-hover-pause="true"
                    >
                        @foreach ($testimonials as $testimonial)
                            <div class="box-testimony">
                                <p>
                                    “{{$testimonial->text}}”
                                </p>
                                <h3>{{$testimonial->name}}</h3>
                                <span>{{$testimonial->course}}</span>
                            </div>
                        @endforeach
                    </div>

                </div>
            </div>
        </section>

        <section class="section section-registration">
            <div class="row" data-aos="fade-in">
                <div class="col d-flex a-center jc-center">

                    <div class="text">
                        <h2 class="text-title text-center">
                            Aprenda de verdade com a gente
                        </h2>
                    </div>
                    <a href="#" data-scroll-form class="btn btn-secundary">fazer matrícula</a>

                </div>
            </div>
        </section>

    </main>

@endsection
@push('scripts')
    <script src="{{asset('admin/js/plugin/sweetalert/sweetalert.min.js')}}"></script>
    <script src="{{asset('admin/js/plugin/jquery.mask/jquery.mask.min.js')}}"></script>
    <script>
        @if (session()->has('alert') )
        swal("Formulário Enviado ", "{{session()->get('alert')}} ", {
            icon: "success",
            buttons: {
                confirm: {
                    className: 'btn btn-success'
                }
            },
        });
        @endif

        $("#btn-send-contact").click(function () {

            var error = "";
            if ($("#name").val() == "")
                error += " O campo *Nome* é obrigatório" + "\n";

            if ($("#email").val() == "")
                error += " O campo *E-mail* é obrigatório" + "\n";


            if ($("#phone").val() == "")
                error += " O campo *Telefone* é obrigatório" + "\n";
            var unit = $('input[name="unit"]:checked').length > 0;
            if (unit == false)
                error += " Escolha uma *Unidade* CNA" + "\n";


            if (error != "") {
                swal("Ops =(", error, {
                    icon: "error",
                    buttons: {
                        confirm: {
                            className: 'btn btn-danger'
                        }
                    }
                });
                return false;
            }

            jQuery.support.cors = true;
            _uri = "{{route('site.contact.send')}}";
            _data = $("#frm-contact").serialize();

            $.ajaxSetup({
                headers: {
                    accept: "*",
                    "Access-Control-Allow-Origin": "*",
                    "Access-Control-Allow-Credentials": "true",
                    "Content-Type": "application/x-www-form-urlencoded",
                },
            });


            $.ajax({
                method: 'POST',
                dataType: "json",
                contentType: "multipart/form-data",
                crossDomain: true,
                data: _data,
                url: _uri,
                statusCode: {
                    404: function (response) {
                        swal("Não conseguimos enviar sua mensagem", response.message, {
                            icon: "error",
                            buttons: {
                                confirm: {
                                    className: 'btn btn-danger'
                                }
                            }
                        });
                        return false;
                    },
                    200:
                        function (response) {
                            swal("Mensagem enviada ", "Obrigado por entrar em contato, em breve retornaremos. ", {
                                icon: "success",
                                buttons: {
                                    confirm: {
                                        className: 'btn btn-success'
                                    }
                                },
                            });
                            $('#frm-contact').each(function () {
                                this.reset();
                            });
                            return false;
                        },
                },
            });

//            $("#frm-contact").submit();
        });

        var SPMaskBehavior = function (val) {
                return val.replace(/\D/g, '').length === 11 ? '(00) 00000-0000' : '(00) 0000-00009';
            },
            spOptions = {
                onKeyPress: function (val, e, field, options) {
                    field.mask(SPMaskBehavior.apply({}, arguments), options);
                }
            };

        $('.phones').mask(SPMaskBehavior, spOptions);
    </script>
@endpush