@extends('layouts.blit')
@section('Breadcrumbs')
    {!! Breadcrumbs::render('home') !!}
@endsection
@section('content')
    <link rel="stylesheet" href="{{ asset("assets/libs/dropzone/dropzone.css") }}">
    <script src="{{ asset("assets/libs/dropzone/dropzone.js") }}"></script>
    <link rel="stylesheet" href="{{ asset("assets/libs/fancybox/jquery.fancybox.css") }}">
    <script src="{{ asset("assets/libs/fancybox/jquery.fancybox.js") }}"></script>
    <script src="{{ asset("assets/libs/masonry/masonry.min.js") }}"></script>
    <script src="{{ asset("assets/js/imagesLoaded.js") }}"></script>
    <div class="the-box">
        <blockquote>
            <p>{{ $product->name }}</p>
            <small>{{ $product->slug }}</small>
        </blockquote>
    </div>
    <style>
        .grid-item {
            width: 200px;
            padding: 3px;
        }
        .grid-item .legenda input{
            margin-top: 5px;
            width: 83%;
            border: 1px dashed #b5b5b5;
            outline:0;
            height: 25px;
        }

        .grid-item .legenda button {
            position: absolute;
            bottom: 0px;
            right: 2px;
            margin: 3px 0px;
            height: 25px;
        }
        .dropzone {
            min-height: 150px;
            border: 1px dashed rgba(0, 0, 0, 0.3);
            background: white;
            padding: 20px 20px;
        }
    </style>
    <div class="the-box rounded">
        <div class="row">
            <div class="col-md-3">
                <div class="panel panel-info">
                    <div class="panel-heading">
                        <h3 class="panel-title">Upload de imagens</h3>
                    </div>
                    <div class="panel-body uploadZone">
                        <form action="{{ url("/product/$product->id/gallery/upload")}}" class="dropzone" id="dropzone" method="post" enctype="multipart/form-data">
                            {!! Form::token() !!}
                        </form>
                    </div><!-- /.panel-body -->
                </div><!-- /.panel panel-info -->
            </div>
            <div class="col-md-9">
                <div class="panel panel-success">
                    <div class="panel-heading">
                        <h4 class="panel-title"><i class="fa fa-picture-o"></i> Galeria</h4>
                    </div>
                    <div class="panel-body">
                        <div class="gridGaleria">
                            @foreach($product->images as $item)
                                <div id="imagem_{{$item->id}}" item-id="{{$item->id}}" class="grid-item" style="border: 1px #cccccc solid; padding: 3px; margin: 3px; border-radius: 3px;">
                                    <a class="fancybox" rel="group" href="{!! asset("uploads/gallery/$item->id/$item->image") !!}">
                                    <img class="img-responsive" src="{!! asset("uploads/gallery/$item->id/$item->image") !!}">
                                    </a>
                                    <div class="legenda">
                                        <input id="legend{{$item->id}}" value="{{$item->legend}}" onchange="addLegend(this)" placeholder="digite uma legenda">
                                        <button onclick="eraseLegend({{$item->id}})" class="btn btn-xs btn-info"><i class="fa fa-eraser"></i> </button>
                                    </div>
                                    <div style="position: absolute; left: 5px; top: 5px; background-color: #880000; padding: 0 2px 0 2px;">
                                        <a href="javascript:" onclick="deletaImagem({{$product->id}},{{$item->id}})" style="color: #ffffff"> <i class="fa fa-trash-o"></i></a>
                                    </div>
                                    <div id="loading_{{$item->id}}" style="position: absolute; left: 50%; top: 50%; margin-left: -16px; margin-top: -16px; border: 1px solid #ffffff; padding: 3px; border-radius: 3px; display: none ">
                                        <img src="{!! asset("assets/images/loading.gif") !!}">
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                    <script>

                        var deletaImagem = function (product_id,image_id) {
                            $.ajax({
                                url: "/products/delimage/" + product_id + "/" +image_id,
                                type: "GET",
                                beforeSend: function() {
                                    $("body").css("cursor", "progress");
                                },
                                success: function (result) {
                                    if (result) {
                                        $('#imagem_'+image_id).fadeOut(300);
                                        toastr.success('Sucesso: imagem removida ');
                                    }
                                },
                                complete: function(){
                                    $("body").css("cursor", "default");
                                }
                            });
                        }

                        var eraseLegend = function(id){
                            $.ajax({
                                url: "/gallery/" + id + "/eraseLegend/",
                                type: "GET",
                                beforeSend: function() {
                                    $("body").css("cursor", "progress");
                                },
                                success: function (result) {
                                    if (result) {
                                        $('#legend'+id).val('');
                                        toastr.success('Sucesso: legenda removida ');
                                    }
                                },
                                complete: function(){
                                    $("body").css("cursor", "default");
                                }
                            });
                        }
                        var addLegend = function(cmp){
                            var obj = $(cmp);
                            var id  = obj.parent().parent().attr('item-id');
                            if(obj.val().length>0) {
                                $.ajax({
                                    url: "/gallery/" + id + "/addLegend/" + obj.val(),
                                    type: "GET",
                                    beforeSend: function() {
                                        $("body").css("cursor", "progress");
                                    },
                                    success: function (result) {
                                        if (result) {
                                            toastr.success('Sucesso: ' + obj.val());
                                        }
                                    },
                                    complete: function(){
                                        $("body").css("cursor", "default");
                                    }
                                });
                            }
                        }
                    </script>
                </div> <!-- panel -->
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function() {

            // inicializa a dropzone e chama 'addImageToGrid'.
            $(".dropzone").dropzone({
                success : function(file, response){
                    addImageToGrid(response);
                }
            });

            initImages();

            $(".fancybox").fancybox({
                'transitionIn'	:	'elastic',
                'transitionOut'	:	'elastic',
                'speedIn'		:	600,
                'speedOut'		:	200,
                'overlayShow'	:	false
            });

        });

        /**
         * Adiciona a imagem recém upada para o grid.
         */
        var addImageToGrid = function(response) {
            var obj = JSON.parse(response);

            var $grid = $('.gridGaleria').masonry({
                itemSelector: '.grid-item'
            });

            var $items = $('<div id="imagem_' + obj.id + '" item-id="'+ obj.id +'" class="grid-item"><a class="fancybox" rel="group" href="{!! asset("/uploads/gallery/' + obj.id + '/' + obj.image + '") !!}"><img class="img-responsive" src="{!! asset("/uploads/gallery/' + obj.id + '/' + obj.image + '") !!}"></a><div class="legenda"> <input id="legend' + obj.id + '" value="" onchange="addLegend(this)" placeholder="digite uma legenda"> <button onclick="eraseLegend(' + obj.id + ')" class="btn btn-xs btn-info"><i class="fa fa-eraser"></i> </button> </div><div style="position: absolute; left: 5px; top: 5px; background-color: #880000; padding: 0 2px 0 2px;"><a href="javascript:" onclick="deletaImagem(' + obj.id + ')" style="color: #ffffff"> <i class="fa fa-trash-o"></i></a></div><div id="loading_' + obj.id + '" style="position: absolute; left: 50%; top: 50%; margin-left: -16px; margin-top: -16px; border: 1px solid #ffffff; padding: 3px; border-radius: 3px; display: none "><img src="{!! asset("assets/images/loading.gif") !!}"></div></div>');

            $grid.append( $items ).masonry( 'appended', $items );
            initImages();
        }

        var initImages = function () {
            var $container = $('.gridGaleria');
            $container.imagesLoaded( function () {
                $container.masonry({
                    columnWidth: '.grid-item',
                    itemSelector: '.grid-item'
                });
            });
        }

    </script>
@endsection