@extends('admin.master')


@section('css')

    

@endsection

@section('content')

    <div class="container">
        <h3>Nueva pelicula</h3>

        <hr>

        <form method="POST" action="/peliculas">
            {{csrf_field()}}

            <div class="form-group">
                <label for="titulo">Titulo de la película</label>
                <input type="text" class="form-control" id="titulo" name="titulo">
            </div>
            <div class="form-group">
                <label for="descripcion_corta">Descripcion</label>
                <input type="text" class="form-control" id="descripcion_corta" name="descripcion_corta">
            </div>
            <div class="form-group">
                <label for="categoria_id">Categoria</label>
                <select class="form-control" id="categoria_id" name="categoria_id">

                    @foreach($categorias as $c)
                        <option value="{{$c->id}}">{{$c->nombre}}</option>
                    @endforeach
                </select>
            </div>
            <label for="video_url">Url del Video</label>
            <div class="form-row">

                <div class="form-group col-md-9">
                    <label class="sr-only" for="video_url">Url del Video</label>
                    <input type="text" class="form-control" id="video_url" name="video_url" placeholder="Url del video">
                </div>
                <div class="form-group col-md-3">
                    <button type="button" id="cargarImagen" class="btn btn-primary">Ver foto del video</button>
                </div>
            </div>

            <img id="video-thumb" />

            <div class="form-group">
                <label for="featured">Mostrar esta película en el landing page, sin tener que registrarse</label>
                <select class="form-control" id="featured" name="featured">
                    <option value="0">No, Solo mostrar a los usuarios registrados</option>
                    <option value="1">Sí, Mostrar al público en general</option>
                </select>
            </div>

            <hr>

            <div class="form-group">
                <label for="pais">Pais</label>
                <input type="text" class="form-control" id="pais" name="pais">
            </div>
            <div class="form-group">
                <label for="categoria">Categoría</label>
                <input type="text" class="form-control" id="categoria" name="categoria">
            </div>
            <div class="form-group">
                <label for="genero">Género</label>
                <input type="text" class="form-control" id="genero" name="genero">
            </div>
            <div class="form-group">
                <label for="tipo">Tipo</label>
                <input type="text" class="form-control" id="tipo" name="tipo">
            </div>
            <div class="form-group">
                <label for="idioma">Idioma</label>
                <input type="text" class="form-control" id="idioma" name="idioma">
            </div>
            <div class="form-group">
                <label for="año">Año</label>
                <input type="number" class="form-control" id="año" name="año">
            </div>
            <div class="form-group">
                <label for="director">Director</label>
                <input type="text" class="form-control" id="director" name="director">
            </div>

            <label for="featured">Duración de la Pelicula</label>
            <div class="form-inline">
                <label class="sr-only" for="duracion_hora">Hora</label>
                <input type="number" class="form-control mb-2 mr-sm-2" name="duracion_hora" id="duracion_hora" placeholder="Horas">

                <label class="sr-only" for="duracion_minuto">Minutos</label>
                <input type="number" class="form-control mb-2 mr-sm-2" name="duracion_minuto" id="duracion_minuto" placeholder="Minutos">

                <label class="sr-only" for="duracion_segundo">Segundos</label>
                <input type="number" class="form-control mb-2 mr-sm-2" name="duracion_segundo" id="duracion_segundo" placeholder="Segundos">

            </div>

            <div class="form-group">
                <label for="rango_edad">Rango de Edad</label>
                <input type="text" class="form-control" id="rango_edad" name="rango_edad">
            </div>
            <div class="form-group">
                <label for="trailer">Trailer</label>
                <input type="text" class="form-control" id="trailer" name="trailer">
            </div>
            <div class="form-group">
                <label for="titulo_ingles">Titulo en Ingles</label>
                <input type="text" class="form-control" id="titulo_ingles" name="titulo_ingles">
            </div>
            <div class="form-group">
                <label for="federacion">Federación</label>
                <input type="text" class="form-control" id="federacion" name="federacion">
            </div>
            <div class="form-group">
                <label for="completition_date">Completition Date</label>
                <input type="text" class="form-control" id="completition_date" name="completition_date">
            </div>
            <div class="form-group">
                <label for="production">Production</label>
                <input type="text" class="form-control" id="production" name="production">
            </div>
            <div class="form-group">
                <label for="pais_filmacion">País de filmación</label>
                <input type="text" class="form-control" id="pais_filmacion" name="pais_filmacion">
            </div>
            <div class="form-group">
                <label for="film_color">Film Color</label>
                <input type="text" class="form-control" id="film_color" name="film_color">
            </div>

            

            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="first_time_filmmaker" name="first_time_filmmaker[]">
                <label class="form-check-label" for="first_time_filmmaker">
                First-time Filmmaker
                </label>
            </div>

            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="student_project" name="student_project[]">
                <label class="form-check-label" for="student_project">
                Student Project
                </label>
            </div>
            <div class="form-group">
                <label for="archivo">Archivo</label>
                <input type="text" class="form-control" id="archivo" name="archivo">
            </div>
                    
            <div class="form-group">
                <button id="grabar" type="submit" class="btn btn-primary">Grabar</button>
            </div>
            @include('layouts.formErrors')
        </form>

        

    </div>



@endsection


@section('js')

    <script type="text/javascript" src="{{ asset('libs/kendo/jquery.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('libs/kendo/kendo.calendar.min.js') }}"></script>

    <script>

        $(function () {
            $('#cargarImagen').click(function () {
                console.log('cargar imagen');

                var video_url = $('#video_url').val();
                console.log(video_url);

                $.ajax({
                    type: 'GET',
                    url: 'https://vimeo.com/api/oembed.json?url=' + video_url,
                    dataType: 'json',
                    success: function (data) {
                        console.log(data);
                        var img_url = data.thumbnail_url;
                        // $('thumb-'+video_id).append('<img src="' + thumbnail_src + '"/>');
                        // $('.featured-movie').css("background-image", "url("+ thumbnail_src+")");
                        $('#video-thumb').attr("src", img_url);
                    }
                });
            });

            $("#completition_date").kendoDatePicker();


        });

    </script>



@endsection