@extends('template.admin.layout')
@section('styles')
    <link href="{{asset('plugins/fancybox/source/jquery.fancybox.css')}}" rel="stylesheet" type="text/css" />
    <link href="{{asset('plugins/jquery-file-upload/blueimp-gallery/blueimp-gallery.min.css')}}" rel="stylesheet" type="text/css" />
    <link href="{{asset('plugins/jquery-file-upload/css/jquery.fileupload.css')}}" rel="stylesheet" type="text/css" />
    <link href="{{asset('plugins/jquery-file-upload/css/jquery.fileupload-ui.css')}}" rel="stylesheet" type="text/css" />
@endsection

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

@section('content-body')
    <div class="portlet light">
        <div class="portlet-title">
            <div class="caption">
                <span class="caption-subject bold uppercase"> Registrar nueva noticia </span>
            </div>
        </div>
        <div class="portlet-body form">
            @include('alerts.index')
            {{ Form::open(array('id' => 'fileupload','route' => 'noticia.galeria.registrar','method' => 'POST', 'class'=>'form-horizontal', 'enctype' => 'multipart/form-data')) }}
            <div class="row fileupload-buttonbar">
                <div class="col-lg-7">
                    <span class="btn green fileinput-button">
                        <i class="fa fa-plus"></i>
                        <span> Agregar imágenes... </span>
                        <input type="hidden" name="id" value="{{ $id }}">
                        <input type="file" name="files[]" multiple="">
                    </span>
                    <button type="submit" class="btn blue start">
                        <i class="fa fa-upload"></i>
                        <span> Subir imágenes</span>
                    </button>
                    <button type="reset" class="btn warning cancel">
                        <i class="fa fa-ban-circle"></i>
                        <span> Cancelar </span>
                    </button>
                    <button type="button" class="btn red delete">
                        <i class="fa fa-trash"></i>
                        <span> Eliminar </span>
                    </button>
                    <label class="mt-checkbox" style="margin-left: 2%;">
                        <input type="checkbox" class="toggle"> Eliminar todos
                        <span></span>
                    </label>
                    <span class="fileupload-process"> </span>
                </div>
                <div class="col-lg-5 fileupload-progress fade">
                    <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                        <div class="progress-bar progress-bar-success" style="width:0%;"> </div>
                    </div>
                    <div class="progress-extended"> &nbsp; </div>
                </div>
            </div>
            <table role="presentation" class="table table-striped clearfix">
                <thead>
                    <tr class="template-upload">
                        <td>
                            <p>Imagen</p>
                        </td>
                        <td>
                            <p>Nombre</p>
                        </td>
                        <td>
                           <p>Detalle</p>
                        </td>
                        <td>
                            <p>Opciones</p>
                        </td>
                    </tr>
                </thead>
                <tbody class="files">
                    @foreach($noticia_imagen as $image)
                        <tr class="template-download fade in">
                            <td>
                                <span class="preview">
                                     <img src="{{ $image['url_image'] }}" width="80px">
                                </span>
                            </td>
                            <td>
                                <p class="name">{{ explode('/',$image['url_image'])[4] }}</p>
                                <strong class="error label label-danger"></strong>
                            </td>
                            <td>
                            </td>
                            <td>
                                <button class="btn red delete btn-sm" data-type="GET" data-url="{{ route('noticia.galeria.eliminar',$image['id']) }}" data-xhr-fields="{&quot;withCredentials&quot;:true}">
                                    <i class="fa fa-trash-o"></i>
                                    <span>Eliminar</span>
                                </button>
                                <label class="mt-checkbox" style="float: right;">
                                    <input type="checkbox" name="delete" value="1" class="toggle">
                                    <span></span>
                                </label>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
            {!! Form::close() !!}

            <script id="template-upload" type="text/x-tmpl"> {% for (var i=0, file; file=o.files[i]; i++) { %}
                <tr class="template-upload fade">
                    <td>
                        <span class="preview"></span>
                    </td>
                    <td>
                        <p class="name">{%=file.name%}</p>
                        <strong class="error label label-danger"></strong>
                    </td>
                    <td>
                        <p class="size">Processing...</p>
                        <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
                            <div class="progress-bar progress-bar-success" style="width:0%;"></div>
                        </div>
                    </td>
                    <td> {% if (!i && !o.options.autoUpload) { %}
                        <button class="btn blue start" disabled>
                            <i class="fa fa-upload"></i>
                            <span>Subir</span>
                        </button> {% } %} {% if (!i) { %}
                        <button class="btn red cancel">
                            <i class="fa fa-ban"></i>
                            <span>Cancelar</span>
                        </button> {% } %} </td>
                </tr> {% } %} </script>
            <script id="template-download" type="text/x-tmpl"> {% for (var i=0, file; file=o.files[i]; i++) { %}
                <tr class="template-download fade">
                    <td>
                        <span class="preview"> {% if (file.url) { %}
                                <img src="{%=file.url%}" width="80px">
                            </a> {% } %} </span>
                    </td>
                    <td>
                        <p class="name"> {% if (file.url) { %}
                            <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl? 'data-gallery': ''%}>{%=file.name%}</a> {% } else { %}
                            <span>{%=file.name%}</span> {% } %} </p> {% if (file.error) { %}
                        <div>
                            <span class="label label-danger">Error</span> {%=file.error%}</div> {% } %} </td>
                    <td>
                        <span class="size">{%=o.formatFileSize(file.size)%}</span>
                    </td>
                    <td> {% if (file.deleteUrl) { %}
                        <button class="btn red delete btn-sm" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}" {% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}' {% } %}>
                            <i class="fa fa-trash-o"></i>
                            <span>Eliminar</span>
                        </button>
                        <label class="mt-checkbox" style="float: right;">
                            <input type="checkbox" name="delete" value="1" class="toggle">
                            <span></span>
                        </label>{% } else { %}
                        <button class="btn yellow cancel btn-sm">
                            <i class="fa fa-ban"></i>
                            <span>Cancelar</span>
                        </button> {% } %} </td>
                </tr> {% } %}
            </script>
        </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="{{asset('plugins/fancybox/source/jquery.fancybox.pack.js')}}" type="text/javascript"></script>
    <script src="{{asset('plugins/jquery-file-upload/js/vendor/jquery.ui.widget.js')}}" type="text/javascript"></script>
    <script src="{{asset('plugins/jquery-file-upload/js/vendor/tmpl.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('plugins/jquery-file-upload/js/vendor/load-image.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('plugins/jquery-file-upload/js/vendor/canvas-to-blob.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('plugins/jquery-file-upload/blueimp-gallery/jquery.blueimp-gallery.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('plugins/jquery-file-upload/js/jquery.iframe-transport.js')}}" type="text/javascript"></script>
    <script src="{{asset('plugins/jquery-file-upload/js/jquery.fileupload.js')}}" type="text/javascript"></script>
    <script src="{{asset('plugins/jquery-file-upload/js/jquery.fileupload-process.js')}}" type="text/javascript"></script>
    <script src="{{asset('plugins/jquery-file-upload/js/jquery.fileupload-image.js')}}" type="text/javascript"></script>
    <script src="{{asset('plugins/jquery-file-upload/js/jquery.fileupload-audio.js')}}" type="text/javascript"></script>
    <script src="{{asset('plugins/jquery-file-upload/js/jquery.fileupload-video.js')}}" type="text/javascript"></script>
    <script src="{{asset('plugins/jquery-file-upload/js/jquery.fileupload-validate.js')}}" type="text/javascript"></script>
    <script src="{{asset('plugins/jquery-file-upload/js/jquery.fileupload-ui.js')}}" type="text/javascript"></script>
    <script>
        $(document).ready(function() {
            $("#fileupload").fileupload({
                disableImageResize: !1,
                autoUpload: !1,
                disableImageResize: /Android(?!.*Chrome)|Opera/.test(window.navigator.userAgent),
                maxFileSize: 5e6,
                acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i
            }), $("#fileupload").addClass("fileupload-processing"), $.ajax({
                url: $("#fileupload").attr("action"),
                type: 'POST',
                dataType: "json",
                context: $("#fileupload")[0]
            }).always(function() {
                $(this).removeClass("fileupload-processing")
            }).done(function(e) {
                $(this).fileupload("option", "done").call(this, $.Event("done"), {
                    result: e
                })
            })
        });
    </script>
@endsection