@extends('template.admin.layout')
@section('styles')
@endsection

@section('content-head')
    <h1 class="page-title"> Gesti&oacute;n de Eventos </h1>
@endsection

@section('content-body')
    <div class="portlet light">
        <div class="portlet-title">
            <div class="caption">
                <span class="caption-subject bold uppercase"> Registrar nuevo evento </span>
            </div>
        </div>
        <div class="portlet-body form">
            @include('alerts.index')
            {{ Form::model($evento,array('id' => 'form-validation','route' => array('evento.editar', $evento->id), 'class'=>'form-horizontal', 'enctype' => 'multipart/form-data')) }}
            <div class="form-body">
                <div class="form-group hide">
                    {!! Form::text('id', null, array('placeholder' => 'id','class' => 'form-control')) !!}
                </div>
                <div class="form-group">
                    <label class="control-label col-md-2" for="nombre">Nombre</label>
                    <div class="col-md-10">{!! Form::text('nombre', null, array('placeholder' => '','class' => 'form-control', 'required' => 'required')) !!}</div>
                </div>

                <div class="form-group">
                    <label class="control-label col-md-2" for="detalle">Detalle</label>
                    <div class="col-md-10">{!! Form::textarea('detalle', null, array('placeholder' => '','class' => 'form-control','style' => 'resize:none;', 'required' => 'required')) !!}</div>
                </div>

                <div class="form-group">
                    <label class="control-label col-md-2" for="video_url">Video URL</label>
                    <div class="col-md-10">{!! Form::text('video_url', null, array('placeholder' => 'https://www.youtube.com/watch?v=XXXXXXX','class' => 'form-control','style' => 'resize:none;', 'required' => 'required')) !!}</div>
                    <div class="col-md-12" style="text-align: center; padding: 2%;">
                        <iframe src="" id="ytpreview" style="width: 50%;padding:15px 15px 15px 15px;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>
                </div>

                <div class="form-group">
                    <label class="control-label col-md-2" for="pago">¿Es pagado?</label>
                    <div class="col-md-10">
                        <input type="hidden" name="pago" value="0">
                        <div class="mt-checkbox-inline">
                            <label class="mt-checkbox mt-checkbox-outline" style="margin-bottom: 0">
                                {!! Form::checkbox('pago') !!} <small class="help-block">Los participantes deberán pagar un monto fijado</small>
                                <span></span>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-2" for="costoa">Costo</label>
                    <input type="hidden" name="costo" value="0">
                    @if($evento['pago'])
                        <div class="col-md-10">{!! Form::number('costo', null, array('id' => 'costo','placeholder' => '','class' => 'form-control', 'required' => 'required','step'=>'any' )) !!}</div>

                    @else
                        <div class="col-md-10">{!! Form::number('costo', null, array('id' => 'costo','placeholder' => '','class' => 'form-control', 'required' => 'required','step'=>'any', 'disabled' => 'disabled' )) !!}</div>
                    @endif
                </div>

                <div class="form-group">
                    <label class="control-label col-md-2" for="lugar">Lugar</label>
                    <div class="col-md-10">{!! Form::text('lugar', null, array('placeholder' => '','class' => 'form-control', 'required' => 'required')) !!}</div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label col-md-4" for="fecha_inicio">Fecha inicio</label>
                            <div class="col-md-8">
                                <div id="fecha_inicio" class="input-group date date-picker" data-date-format="dd-mm-yyyy">
                                    {!! Form::text('fecha_inicio', $evento->fecha_inicio->format('d-m-Y'), array('class' => 'form-control' , 'required' => 'required')) !!}
                                    <span class="input-group-btn">
                                <button class="btn default" type="button">
                                  <i class="fa fa-calendar"></i>
                                </button>
                            </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label col-md-4" for="fecha_fin">Fecha fin</label>
                            <div class="col-md-8">
                                <div id="fecha_fin" class="input-group date date-picker" data-date-format="dd-mm-yyyy">
                                    {!! Form::text('fecha_fin', $evento->fecha_fin->format('d-m-Y'), array('class' => 'form-control' , 'required' => 'required')) !!}
                                    <span class="input-group-btn">
                                <button class="btn default" type="button">
                                  <i class="fa fa-calendar"></i>
                                </button>
                            </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-2" for="imagen_pequenia_path">Imagen peque&ntilde;a</label>

                    <div class="col-md-10">
                        {!! Form::file('imagen_pequenia_path', array('placeholder' => '','class' => 'form-control filestyle', 'data-buttonBefore' => 'true', 'data-buttonText' => 'Seleccionar imagen', 'data-placeholder' => 'No se ha seleccionado ninguna imagen', 'data-buttonName' => 'btn-primary', 'accept' => 'image/png,image/bmp,image/jpeg')) !!}
                        <label class="help-block">S&oacute;lo se permite archivos en formato JPEG, BMP o PNG menor igual a 10 MB</label>

                        <div class="img-default-container">
                            <img id="output1" src="{{ asset($evento->imagen_pequenia_url) }}" alt="imagen evento" style="max-width: 150px; width: 100%; height: 160px; object-fit: cover;" />
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="control-label col-md-2" for="imagen_grande_path">Imagen grande</label>

                    <div class="col-md-10">
                        {!! Form::file('imagen_grande_path', array('placeholder' => '','class' => 'form-control filestyle', 'data-buttonBefore' => 'true', 'data-buttonText' => 'Seleccionar imagen', 'data-placeholder' => 'No se ha seleccionado ninguna imagen', 'data-buttonName' => 'btn-primary', 'accept' => 'image/png,image/bmp,image/jpeg')) !!}
                        <label class="help-block">S&oacute;lo se permite archivos en formato JPEG, BMP o PNG menor igual a 10 MB</label>

                        <div class="img-default-container">
                            <img id="output2" src="{{ asset($evento->imagen_grande_url) }}" alt="imagen evento" style="max-width: 600px; width: 100%; object-fit: cover;" />
                        </div>
                    </div>
                </div>

                <div class="form-actions">
                    <div class="row">
                        <div class="col-md-offset-2 col-md-10">
                            <a href="{{ url('/admin/eventos') }}" class="btn btn-default">Cancelar</a>
                            <button id="submitBtn" type="submit" class="btn btn-primary ladda-button" data-style="slide-down">
                                <span class="ladda-label">Guardar</span>
                                <span class="ladda-spinner"></span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            {!! Form::close() !!}

        </div>
    </div>
@endsection

@section('scripts')
    <script>

        $(document).ready(function(){
            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 readURLsmall(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#output1').attr('src', e.target.result);
                };

                reader.readAsDataURL(input.files[0]);
            }
        }
        $('input[name=imagen_pequenia_path]').change(function () {
            readURLsmall(this);
        });

        function readURLbig(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#output2').attr('src', e.target.result);
                }

                reader.readAsDataURL(input.files[0]);
            }
        }

        $.validator.addMethod(
            "videoYoutube",
            function(value, element) {
                if (value != undefined && value != "") {
                    var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=|\?v=)([^#\&\?]*).*/;
                    var match = value.match(regExp);
                    if (match && match[2].length == 11) {
                        $('#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');
                        return true;
                    }
                    return false;
                }
                return true;
            },
            "Ingresar una url correcta."
        );

        $('input[name=imagen_grande_path]').change(function () {
            readURLbig(this);
        });
        $('input[name=pago]').change(function () {
            $('#costo').attr('disabled', !this.checked);
        });

        $('#fecha_inicio').datepicker({
            language: 'es',
            autoclose: true,
//            startDate: new Date(),
            startDate: '{{ $evento->fecha_inicio->format('d-m-Y') < time() ? $evento->fecha_inicio->format('d-m-Y') : date() }}',
            endDate: '{{ $evento->fecha_fin->format('d-m-Y') }}',
        })
            .on('changeDate', function(e) {
                $('#fecha_fin').datepicker('setStartDate', e.date);
            });

        $('#fecha_fin').datepicker({
            language: 'es',
            autoclose: true,
            startDate: '{{ $evento->fecha_inicio->format('d-m-Y') }}',
        })
            .on('changeDate', function(e) {
                $('#fecha_inicio').datepicker('setEndDate', e.date);
            });

        $("#form-validation").validate({
            rules: {
                imagen_pequenia_path: {
                    fileSize: 10
                },
                imagen_grande_path: {
                    fileSize: 10
                },
                video_url: {
                    videoYoutube:  true,
                    required: false
                }
            },
            submitHandler: function (form) {
                var l = Ladda.create(document.querySelector('#submitBtn'));
                l.start();
                form.submit();
            }
        });

    </script>
@endsection