@extends('template.portal.layout')
@section('content-body')
    <div class="portlet light">
        <div class="portlet-title">
            @include('alerts.index')
            <time class="text-uppercase" style="font-size: 12px">{{ \Jenssegers\Date\Date::parse($evento['created_at'])->format('l j, F Y') }}</time>
            <h3 class="titulo-default text-center" style="margin-bottom: 0; margin-top: 0;">{{ $evento['nombre'] }}</h3>
        </div>
        <div class="portlet-body">

            <div class="img-default-container text-center" style="margin-bottom: 20px;">
                <img src="{{ asset($evento['imagen_grande_url']) }}" style="width: 600px;">
            </div>

            <p class="parrafo-justificado">{!! $evento['detalle'] !!}</p>
            <div><strong class="sub-title">Ubicacion: </strong>{{ $evento['lugar'] }}</div>
            @if ($evento['fecha_inicio'] != $evento['fecha_fin'])
                <div><strong class="sub-title">Fecha: </strong>{{ \Jenssegers\Date\Date::parse($evento['fecha_inicio'])->format('l j, F Y') }} - {{ \Jenssegers\Date\Date::parse($evento['fecha_fin'])->format('l j, F Y') }}</div>
            @else
                <div><strong class="sub-title">Fecha: </strong> <label class="text-capitalize">{{ \Jenssegers\Date\Date::parse($evento['fecha_inicio'])->format('l j, F Y')  }}</label></div>
            @endif
            @if($evento['pago'])
            <div><strong class="sub-title">Costo: </strong>{{ number_format($evento['costo'], 2, '.', ',') }}</div>
            @endif

            @if($evento['video_url'])
                <div class="img-default-container text-center" style="margin-bottom: 20px;">
                    <iframe src="" id="ytpreview" style="width: 50%; height: 300px; padding:10px 10px 10px 10px;background:#1a1a1a;border-radius:3px;-moz-box-shadow:3px 3px 3px black;-webkit-box-shadow:3px 3px 3px black;box-shadow:3px 3px 3px black;" frameborder="0"></iframe>
                </div>
            @endif

            <div class="text-center margin-top-10">
                <button type="button" data-toggle="modal" data-target="#Registro" class="btn btn-primary" style="max-width: 250px; width: 100%;">Inscribirse</button>
            </div>
        </div>
    </div>

    <div class="modal fade bs-modal-lg" id="Registro" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title caption-subject sbold"> Participa en el evento </h4>
                </div>
                <div class="modal-body">
                    {{--style="max-width: 430px; width: 100%; margin: auto">--}}
                    <div class="row">
                        <div class="col-md-12">
                            <div class="col-md-6 evento-invitado">
                                <h4>Participar como invitado</h4>
                                {{ Form::open(array('id' => 'form-validation','route' => array('evento.invitado'), 'class'=>'form-horizontal')) }}
                                <div class="form-body">
                                    <div class="form-group hide">
                                        {!! Form::text('id_evento', $evento['id'], array('placeholder' => 'id','class' => 'form-control')) !!}
                                    </div>
                                    <div class="form-group">
                                        <div class="col-md-12">
                                            <label class="control-label" for="dni">DNI</label>
                                            {!! Form::text('dni', null, array('placeholder' => '','class' => 'form-control', 'required' => 'required', 'maxlength' => '8')) !!}
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-md-12">
                                            <label class="control-label" for="nombres">Nombres</label>
                                            {!! Form::text('nombres', null, array('placeholder' => '','class' => 'form-control', 'required' => 'required', 'onkeypress' => 'return isTextKey(event)', 'onpaste' => 'return false')) !!}
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <div class="col-md-12">
                                            <label class="control-label" for="apellidos">Apellidos</label>
                                            {!! Form::text('apellidos', null, array('placeholder' => '','class' => 'form-control', 'required' => 'required', 'onkeypress' => 'return isTextKey(event)', 'onpaste' => 'return false')) !!}
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <div class="col-md-12">
                                            <label class="control-label" for="email">Email</label>
                                            {!! Form::email('email', null, array('placeholder' => '','class' => 'form-control', 'required' => 'required')) !!}
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <div class="col-md-12">
                                            <label class="control-label" for="telefono">Tel&eacute;fono</label>
                                            {!! Form::text('telefono', null, array('placeholder' => '','class' => 'form-control', 'required' => 'required', 'maxlength' => '9')) !!}
                                        </div>
                                    </div>

                                    <div class="form-actions">
                                        <button id="submitBtn" type="submit" class="btn btn-primary ladda-button" data-style="slide-down" style="width: 100%;">
                                            <span class="ladda-label">Registrarte</span>
                                            <span class="ladda-spinner"></span>
                                        </button>
                                    </div>
                                </div>
                                {!! Form::close() !!}
                            </div>
                            <div class="col-md-6 evento-usuario">
                                <h4>Participar como usuario</h4>
                                <p style="margin-bottom: 10px">Si cuentas con una cuenta registrada, ingresa aqu&iacute; para registrarte en el evento.</p>
                                {{ Form::open(array('id' => 'form-validation','route' => array('evento.usuario'), 'class'=>'form-horizontal')) }}
                                <div class="form-body">
                                    {!! Form::hidden('id_evento', $evento['id']) !!}
                                    <div class="form-group">
                                        <div class="col-md-12">
                                            <label class="control-label" for="usuario">Usuario</label>
                                            <input class="form-control" type="text" autocomplete="off" placeholder="Usuario" name="usuario"/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-md-12">
                                            <label class="control-label" for="password">Contrase&ntilde;a</label>
                                            <input class="form-control" type="password" autocomplete="off" placeholder="Contrase&ntilde;a" name="password"/>
                                        </div>
                                    </div>
                                    <div class="form-actions">
                                        <button id="submitBtn" type="submit" class="btn btn-primary ladda-button" data-style="slide-down" style="width: 100%;">
                                            <span class="ladda-label">Inscribirte</span>
                                            <span class="ladda-spinner"></span>
                                        </button>
                                    </div>
                                </div>
                                {!! Form::close() !!}
                            </div>
                        </div>
                    </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 video = "{{ $evento['video_url'] }}";
        if(video != undefined && video != ""){
            var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=|\?v=)([^#\&\?]*).*/;
            var match = video.match(regExp);
            $('#ytpreview').attr('src', 'https://www.youtube.com/embed/' + match[2] + '?vq=hd1080&cc_load_policy=1&fs=0&iv_load_policy=3&rel=0&showinfo=0&color=white&autohide=0&disablekb=1');
        }

        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-validation").validate({
            rules: {
                dni: {
                    required: true,
                    pattern: '^[0-9]{8}$'
                },
                nombres: {
                    required: true,
                    pattern: '^[a-zA-Z][a-zA-Z\\s]+$'
                },
                apellidos: {
                    required: true,
                    pattern: '^[a-zA-Z][a-zA-Z\\s]+$'
                },
                telefono: {
                    required: true,
                    pattern: '^[0-9]{7,9}$'
                }
            },
            errorPlacement: function(error, element) {
                error.insertBefore(element);
            },
            submitHandler: function (form) {
                var l = Ladda.create(document.querySelector('#submitBtn'));
                l.start();
                form.submit();
            }
        });
    </script>
@endsection