@extends('manager::layouts.master')

@section('styles')
    @parent
    {!! Html::style('packages/manager/css/medias.css') !!}
@stop

@section('content')
    <div class="medias">
        @if (! config('manager.medias.' . $config . '.header'))
            @include('manager::partials.breadcrumb', ['pages' => [

                config('manager.videos') ? 'Fotos e vídeos' : 'Fotos'
            ]])

            <div class="page-header">
                <div class="row">
                    <div class="col-sm-8">
                        <h3>{{ config('manager.medias.' . $config . '.title') }} <small>Fotos</small></h3>
                    </div>

                    <div class="col-sm-4 text-right">

                        <a href="{{ route('manager.medias.destroyAll', [$config, $model->id]) }}" class="btn btn-small btn-danger" data-delete>
                            <i class="glyphicon glyphicon-trash"></i> Remover todas
                        </a>
                    </div>
                </div>
            </div><!-- .page-header -->
        @else
            @include(config('manager.medias.' . $config . '.header'))
        @endif

        <div class="alert alert-danger js-alert">
        </div>

        <div class="row">
            <div class="col-md-8">
                <form action="{{ route('manager.medias.store', [$config, $model->id]) }}" method="post" class="form-horizontal" id="form-medias" enctype="multipart/form-data">
                    {{ csrf_field() }}
                    <legend>Inserir fotos</legend>

                    <div class="input-append">
                        {!! Form::file('files[]', ['id' => 'files', 'class' => 'form-control', 'multiple' => true, 'accept' => 'image/jpg,image/jpeg,image/png', 'required' => true]) !!}

                        <div class="box-dragging-files js-fileupload-drag">
                            <h1 class="text-primary">Arraste as imagens para iniciar o upload</h1>
                        </div><!-- .box-dragging-files -->

                        <div class="progress">
                            <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
                            </div>
                        </div><!-- .progress -->

                        <p class="help-block">
                            Apenas imagens jpg e png são aceitas<br>
                            Tamanho máximo de <strong>{{ ini_get('post_max_size') }}B</strong>.
                        </p>
                    </div>
                </form><!-- #form-medias -->
            </div><!-- .com-md-8 -->

            <div class="col-md-4">
                @if (config('manager.videos') && config('manager.medias.' . $config . '.videos'))
                    <form action="{{ route('manager.medias.store', [$config, $model->id]) }}" method="post" class="form-horizontal" id="form-videos">
                        {{ csrf_field() }}
                        <input type="hidden" name="type" value="video">
                        <legend>Inserir vídeo</legend>

                        <div class="input-group">
                            <span class="input-group-addon">https://youtube.com/watch?v=</span>
                            <input type="text" name="video" class="form-control" required>
                        </div><!-- .input-group -->

                        <span class="help-block">Apenas o código do vídeo do youtube. Ex: pnrx1UV6mdQ</span>

                        <button type="submit" class="btn btn-primary btn-block js-btn-submit">Adicionar vídeo</button>
                    </form>
                @endif
            </div><!-- .col-md-4 -->
        </div><!-- .row -->

        <hr>

        <div class="js-with-medias">
            <p>Arraste as fotos para alterar a ordem.</p>
            <div class="row js-thumbnails"></div>
        </div><!-- .js-with-medias -->

    </div><!-- .medias -->

    <div class="modal fade" id="modal-video" tabindex="-1" role="dialog" aria-labelledby="video" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-body">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <div>
                        <iframe width="100%" height="500" src="" allowfullscreen></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div><!-- .modal -->
@stop

@section('scripts')
    @parent

    <script type="html/template" id="media-template">
        <div class="col-xs-6 col-md-3 medias-list-item medias-list-item-{ type }" data-media data-id="{ id }" data-file="{ file }">
            <div class="thumbnail">
                <div class="thumbnail-box">
                    <img src="{ full_path }?w=400&h=200&fit=crop" alt="{ caption }" style="max-width: 100%;">
                </div>

                <div class="caption">
                    {!! Form::open(['url' => Request::url() . '/{ id }', 'class' => 'js-form-media-update', 'method' => 'put']) !!}


                        <div class="pull-right btn-group btn-group-sm">

                            <a href="{{ Request::url() }}/{ id }" class="btn btn-danger btn-small" title="Excluir" data-delete="true" style="margin: 10px 0 20px 0">
                                <span class="glyphicon glyphicon-trash"></span>
                                Excluir
                            </a>
                        </div>
                    {!! Form::close() !!}
                    <div class="clearfix"></div>
                </div><!-- .caption -->
            </div>

            <span class="glyphicon glyphicon-play"></span>
        </div>
    </script>

    {!! Html::script('packages/manager/js/medias.vendor.js') !!}
    {!! Html::script('packages/manager/js/medias.js') !!}
@stop