@extends('template.portal.layout')
@section('styles')
    <meta name="csrf-token" content="{{ csrf_token() }}" />
@endsection
@section('content-body')
    <div class="portlet light">
        <div class="portlet-body">
            <div class="directorio-container" style="max-width: 900px; margin: 0 auto;">
                <div class="row">
                    <div class="col-md-6">
                        @foreach($datos as $dato)
                            <div class="form-group">
                                <div style="color:#6A6A6A; font-size:16px; font-weight:600;"> {{ $dato['titulo'] }} </div>
                                <div style="font-size: 15px; text-align: justify; margin-bottom: 0px; display: block;"> {!! $dato['descripcion'] !!} </div>
                            </div>
                        @endforeach

                            <div class="form-group">
                                <div style="color:#6A6A6A; font-size:16px; font-weight:600;"> Bolsa de Trabajo </div>
                                <a href="{{ config('constants.URL.INTRANET_BOLSA') }}" class="btn btn-primary" target="_blank"> Acceder como Empresa </a>
                            </div>
                    </div>
                    <div class="col-md-6">


                       <form id = "form-validation" class="login-form" method="POST" action="{{ url('contactenos') }}">
                            {{ csrf_field() }}
                            <div class="portlet light bordered">
                                <div class="portlet-title">
                                    <div class="caption">

                                        <span class="caption-subject font-dark sbold uppercase">Comun&iacute;cate</span>

                                    </div>
                                </div>
                                <div class="form-group {{ $errors->has('name') ? ' has-error' : '' }}">
                                    <span class="f-label">Ingrese su nombre:</span>
                                    <input type="text" class="form-control input-sm" name="name" value="{{ old('name') }}" onkeypress="return isTextKey(event)" onpaste="return false">
                                    @if ($errors->has('name'))
                                        <span class="help-block">
                                            <strong>{{ $errors->first('name') }}</strong>
                                        </span>
                                    @endif
                                </div>
                                <div id class="form-group {{ $errors->has('email') ? ' has-error' : '' }}">
                                    <span class="f-label">Su email:</span>
                                    <input type="text" class="form-control input-sm" name="email" value="{{ old('email') }}">
                                    @if ($errors->has('email'))
                                        <span class="help-block">
                                            <strong>{{ $errors->first('email') }}</strong>
                                        </span>
                                    @endif
                                </div>

                                <div class="form-group {{ $errors->has('mensaje') ? ' has-error' : '' }}" rows="3">
                                    <span class="f-label">Mensaje:</span>
                                    <textarea class="form-control" rows="3" name="mensaje" value="{{ old('mensaje') }}" style="resize: none"></textarea>
                                    @if ($errors->has('mensaje'))
                                        <span class="help-block">
                                            <strong>{{ $errors->first('mensaje') }}</strong>
                                        </span>
                                    @endif
                                </div>
                                <div>
                                    <button id="submitBtn" type="submit" class="btn btn-primary ladda-button" data-style="slide-down">
                                        <span class="ladda-label"> Enviar Mensaje </span>
                                        <span class="ladda-spinner"></span>
                                    </button>
                                    {{--<button type="submit" class="btn white" style=" background-color:#8c3c11; color: #ffffff">Enviar</button>--}}
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="row">
                    <div id="map" style="width: 100%; height: 300px"></div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <script src="{{asset('plugins/sweet-alert/sweetalert.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('plugins/jquery-validation/js/jquery.validate.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('plugins/jquery-validation/js/additional-methods.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('plugins/jquery-validation/js/localization/messages_es_PE.js')}}" type="text/javascript"></script>
    @include('sweet::alert')
    <script>
        var map;
        function initMap() {
            var latitud = {{ $ubicacion['latitud'] }};
            var longitud = {{ $ubicacion['longitud'] }};
            var latlong = { lat: latitud, lng: longitud };
            map = new google.maps.Map(document.getElementById('map'), {
                center: latlong,
                zoom: 15
            });

            var marker = new google.maps.Marker({
                position: latlong,
                map: map,
                title: 'ISEP Jorge Basadre',
            });
        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAwC1bxOuwYFoCot3rPPeBOTPdh2JmL12s&callback=initMap"
            async defer></script>
    <script>
        function isTextKey(evt){
            var charCode = (evt.which) ? evt.which : event.keyCode;
            console.log(charCode);
            return ((charCode >= 65 && charCode <= 90) || (charCode >= 97 && charCode <= 122) || charCode === 209 || charCode === 241 || charCode === 32);
        }

        $(".form-control").keyup(function() {
            $(".form-group.has-error").removeClass("has-error");
            $(".help-block").remove();
        });
        $("#form-validation").validate({
            rules: {
                name: {
                    required: true,

                },
                email: {
                    required: true,
                    email:true,
                },
                mensaje:{
                    required: true,
                }

            },
            errorPlacement: function(error, element) {
                error.insertBefore(element);
            },
            submitHandler: function (form) {
                var l = Ladda.create(document.querySelector('#submitBtn'));
                l.start();
                form.submit();
            }
        });
        
        function Registrar() {

            window.location.href = 'contacto/empresa';
        }
    </script>
@endsection