@extends('layouts.sistema')
@section('titulo', URL::full())

@section('conteudo')
    @include('sistema/components/navbar')
    <div class="row no-gutters">
        @include('sistema/components/painel_lateral')
        <div class="col-10">
            <div class="painel">
                <div class="my-5">
                    <div class="container">
                        <div class="row no-gutters justify-content-center">                            
                            <div class="col-12">
                                <h2 class="mb-5">Upload de Imagem</h2>
                                @if(isset($errors) && count($errors) >0)
                                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                        @foreach($errors->all() as $erro)
                                        <p class="m-0">{{$erro}}</p>
                                        @endforeach
                                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                @endif
                                @if(session('error_mensagem'))
                                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                        <p class="m-0">{{session('error_bd')}}</p>
                                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                @endif                          
                                @if(session('mensagem'))
                                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                                        <p class="m-0">{{session('mensagem')}}</p>
                                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                @endif

                                <h3>Instruções para envio de Imagens:</h3>
                                
                                <p><strong>Renomeie as imagens no padrão abaixo, feito isso basta arrastar para a caixa. </strong><i>(Máximo 20 Imagens por vez)</i></p>  

                                <p>(Referência do Produto)-1.jpg, (Referência do Produto)-2.jpg, (Referência do Produto)-3.jpg </p>  
                                <p><strong>Exemplo:</strong> <strong>017002</strong>-1.jpg, <strong>017002</strong>-2.jpg, <strong>017002</strong>-3.jpg</p>  


                                <p><strong style="color:red">CASO AS REFERÊNCIAS POSSUEM BARRAS, SUBSTITUIR a '/' (BARRA) POR '-' (HIFÉN) PARA RENOMEAR AS IMAGENS</strong></p>  

                                <p>Exemplo: Referência: 0170/02</p>  
                                <p><strong>Fica:</strong> <strong>0170-02</strong>-1.jpg, <strong>0170-02</strong>-2.jpg, <strong>0170-02</strong>-3.jpg</p>  
                                <p><i>Neste exemplo, temos um mesmo produto com 3 variantes de imagens</i> </p>      
                                 
                                {{-- COLOCAR NA MASTER --}}
                                <link rel="stylesheet" href="{{asset('plugin/dropzone/dropzone.css')}}" type="text/css">
                                <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
                                <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
                                <script src="{{asset('plugin/dropzone/dropzone.js')}}"></script>
                                {{-- COLOCAR NA MASTER --}}
                                
                                <div class="dropzone dz-clickable" id="myDrop">
                                    <div class="dz-default dz-message" data-dz-message=""></div>
                                </div>
                  
                                <div id="msg"></div>
                          
                                <script>
                                    $(document).ready(function(){
                                        $("#updateReorder").click(function( e ){
                                            if(!$("#updateReorder").length){
                                                $.ajax({
                                                    type: "POST",
                                                    data: {
                                                        _token: "{{ csrf_token() }}"
                                                    },
                                                    success: function(data){
                                                        if(data==1 || parseInt(data)==1){
                                                            window.location.reload();
                                                        }
                                                    }
                                                }); 
                                                return false;
                                            }       
                                            e.preventDefault();     
                                        });
                                                                        
                                        var myDropzone = new Dropzone("div#myDrop", { 
                                                paramName: "files", // The name that will be used to transfer the file
                                                addRemoveLinks: true,
                                                uploadMultiple: true,
                                                autoProcessQueue: true,
                                                parallelUploads: 100, //LIMITE DE IMAGENS
                                                maxFilesize: 1000, // MB
                                                maxFiles: null,
                                                acceptedFiles: ".png, .jpeg, .jpg, .gif",
                                                url: "{{ asset('plugin/ajax/action-z.ajax.php') }}",
                                                 
                                        });
                                            
                                        /* Adiciona os arquivos (Modo Auto Upload ON)*/
                                        myDropzone.on("success", function(file, message){
                                            $("#msg").html(message);
                                            // Caso haja sucesso no upload de imagens o Ajax redireciona para a mesma página para resetar
                                            setTimeout(function(){window.location.href="{{URL::full()}}"},2000);
                                        });
                                            
                                        myDropzone.on("error", function (data, message) {
                                            $("#msg").html('<i class="fa-solid fa-warning"></i> ' + message);
                                            // Caso o tipo de arquivo seja inválido, emite mensagem de alerta e redireciona para a mesma página para resetar
                                            setTimeout(function(){window.location.href="{{URL::full()}}"},2000);
                                        });
                                            
                                        myDropzone.on("complete", function(file) {
                                            myDropzone.removeFile(file);
                                        });
                                            
                                        $("#add_file").on("click",function (){
                                            myDropzone.processQueue();
                                        });
                                            
                                    });
                                </script>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
     </div>
@endsection