@extends('admin.master')


@section('css')


    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">


@endsection


@section('js')

<script type="text/javascript" src="{{ asset('libs/kendo/jquery.min.js') }}"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jszip/2.4.0/jszip.js"></script>
<script type="text/javascript" src="{{ asset('libs/kendo/kendo.grid.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('libs/kendo/kendo.messages.es-PE.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('libs/kendo/kendo.culture.es-PE.min.js') }}"></script>

    <script>

    $(function() {

        var peliculas = {!! $peliculas !!};

        var dataSource = new kendo.data.DataSource({
                            data: peliculas,
                            schema: {
                                model: {
                                    fields: {
                                        activo: {type: "boolean"},
                                        archivo: {type: "string"},
                                        año: {type: "number"},
                                        big_featured: {type: "boolean"},
                                        categoria: {type: "string"},
                                        completition_date: {type: "number"},
                                        descripcion_corta: {type: "string"},
                                        director: {type: "string"},
                                        duracion_hora: {type: "number"},
                                        duracion_minuto: {type: "number"},
                                        duracion_segundo: {type: "number"},
                                        featured: {type: "boolean"},
                                        federacion: {type: "string"},
                                        film_color: {type: "string"},
                                        first_time_filmmaker: {type: "boolean"},
                                        genero: {type: "string"},
                                        id: {type: "number"},
                                        idioma: {type: "string"},
                                        imagen_pequeña: {type: "string"},
                                        pais: {type: "string"},
                                        pais_filmacion: {type: "string"},
                                        production: {type: "string"},
                                        rango_edad: {type: "string"},
                                        student_project: {type: "boolean"},
                                        tipo: {type: "string"},
                                        titulo: {type: "string"},
                                        titulo_ingles: {type: "string"},
                                        trailer: {type: "string"},
                                        video_contador: {type: "number"},
                                        video_id: {type: "string"},
                                        video_url: {type: "string"}
                                    }
                                }
                            },
                            pageSize: 10
                        });

        $("#grid").kendoGrid({
                        dataSource: dataSource,
                        height: 800,
                        // groupable: true,
                        scrollable: true,
                        sortable: true,
                        reorderable: true,
                        columnMenu: true,
                        resizable: true,
                        filterable: true,
                        pageable: {
                            input: true,
                            numeric: true
                        },
                        toolbar: [
                            {template: '<a class="k-button k-button-icontext" href="/peliculas/crear"><span class="k-icon k-i-plus"></span>Crear Pelicula</a>'},
                            {name: "excel"},
                            ],
                        excel: {
                            allPages: true,
                            fileName: "Minuto90Club - Biblioteca.xlsx"
                        },
                        columns: [
                            { 
                                field: 'imagen_pequeña', title: ' ', width: 150, 
                                // locked: true,
                                template: '<img src="#: imagen_pequeña #" width="150" />'
                            },
                            { field: "video_id", title: "Id", width: 100},
                            { 
                                field: "titulo", title: "Titulo", width: "130px", 
                                // locked: true 
                            },
                            { field: "descripcion_corta", title: "Sinopsis", width: "400px" },
                            { field: "featured", title:"Featured", width: 100},
                            { field: "pais", title:"País", width: 150},
                            { field: "categoria", title:"Categoría", width: 150},
                            { field: "genero", title:"Género", width: 150},
                            { field: "tipo", title:"Tipo", width: 150},
                            { field: "idioma", title:"Idioma", width: 150},
                            { field: "año", title:"Año", width: 150},
                            { field: "director", title:"Director", width: 150},
                            { template: '#: duracion_hora #:#: duracion_minuto #:#: duracion_segundo #', title:"Duración", width: 150},
                            { field: "rango_edad", title:"Rango de Edad", width: 150},
                            { field: "trailer", title:"Trailer", width: 150},
                            { field: "titulo_ingles", title:"Titulo en Inglés", width: 150},
                            { field: "federacion", title:"Federación", width: 150},
                            { field: "completition_date", title:"Completition Date", width: 150},
                            { field: "production", title:"Producción", width: 150},
                            { field: "pais_filmacion", title:"País de Filmación", width: 150},
                            { field: "film_color", title:"Folm Color", width: 150},
                            { field: "first_time_filmmaker", title:"First Time Filmmaker", width: 150},
                            { field: "student_project", title:"Student Project", width: 150},
                            { field: "archivo", title:"Archivo", width: 150},
                            { 
                                command: { 
                                    text: "Editar", 
                                    click: function(e) {
                                        var dataItem = this.dataItem($(e.currentTarget).closest('tr'));
                                        window.location = "{{url('peliculas/editar/')}}/"+dataItem.id;
                                    },
                                }, 
                                title: " ", 
                                width: "180px" 
                            }
                        ]
                    });
    })

    /* function eliminarVideo(id) {
        alert('Eliminar ' + id);
    } */

    </script>

@endsection

@section('content')

    <div class="container">
    {{-- <a class="btn btn-primary" href="/peliculas/crear">+ Pelicula</a> --}}

    <div id="grid"></div>

    </div>

@endsection