{% extends "modulos/dashboard/dashboard.html" %}

{% block head %}
    {{ parent() }}

    <!-- SweetAlert2 -->
    <link rel="stylesheet" href="/assets/vendor/sweetalert2/sweetalert2.min.css">
{% endblock %}

{% block content %}
    <div class="content-wrapper">
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0">Producto</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="/productos">Productos</a></li>
                            <li class="breadcrumb-item active">{{ product.value }}</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>

        <div class="content">
            <div id="contenedor" class="container-fluid">
                <div class="row">
                    <div class="col-md-3">
                        <div class="card card-primary">
                            <div class="card-header">
                                <h3 class="card-title">{{ product.value }}</h3>
                            </div>
                            <div class="card-body">
                                <strong><i class="fas fa-book mr-1"></i> Modelo</strong>
                                <p class="text-muted">{{ product.modelo }}</p>
                                <hr>
                                <strong><i class="fas fa-file-alt mr-1"></i> Clasificaci&oacute;n</strong>
                                <p class="text-muted">{{ product.categoria }}, {{ product.subcategoria }}</p>
                                <hr>
                                <strong><i class="fas fa-pencil-alt mr-1"></i> Creado</strong>
                                <p class="text-muted">
                                    <span class="tag tag-success">{{ product.creadopor }}: {{ product.created }}</span>
                                </p>
                                <hr>
                                <strong><i class="fas fa-pencil-alt mr-1"></i> Modificado</strong>
                                <p class="text-muted">
                                    <span class="tag tag-success">{{ product.actualizadopor }}: {{ product.updated }}</span>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-9">
                        <div class="card">
                            <div class="card-header p-2">
                                <ul class="nav nav-pills">
                                    <li class="nav-item"><a class="nav-link active" href="#informacion" data-toggle="tab"><i class="fas fa-clipboard-list mr-1"></i> Informaci&oacute;n</a></li>
                                    <li class="nav-item"><a class="nav-link" href="#imagenes" data-toggle="tab"><i class="fas fa-images mr-1"></i> Im&aacute;genes</a></li>
                                </ul>
                            </div>
                            <div class="card-body">
                                <div class="tab-content">
                                    <div class="active tab-pane" id="informacion">
                                        <form class="form-horizontal">
                                            <div class="form-group row">
                                                <label for="nombre" class="col-sm-2 col-form-label">Nombre</label>
                                                <div class="col-sm-10">
                                                    <input disabled type="text" class="form-control" id="nombre" value="{{ product.name }}">
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label for="codigo" class="col-sm-2 col-form-label">C&oacute;digo</label>
                                                <div class="col-sm-10">
                                                    <input disabled type="text" class="form-control" id="codigo" value="{{ product.value }}">
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label for="sku" class="col-sm-2 col-form-label">SKU</label>
                                                <div class="col-sm-10">
                                                    <input disabled type="text" class="form-control" id="sku" value="{{ product.sku }}">
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label for="categoria" class="col-sm-2 col-form-label">Categor&iacute;a</label>
                                                <div class="col-sm-10">
                                                    <input disabled type="text" class="form-control" id="categoria" value="{{ product.categoria }}">
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label for="marca" class="col-sm-2 col-form-label">Marca</label>
                                                <div class="col-sm-10">
                                                    <input disabled type="text" class="form-control" id="marca" value="{{ product.marca }}">
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    <div class="tab-pane" id="imagenes">
                                        <div class="row">
                                            {% for image in images %}
                                            <div id="{{ image.id }}" class="col-md-4 col-lg-3 col-xl-3">
                                                <div class="card mb-2">
                                                    <div class="card-body card-img p-0">
                                                        <img src="{{ image.downloadurl }}" class="w-100">
                                                        <div class="btn-group">
                                                            <div class="btn btn-copy btn-info" data-clipboard-text="{{ image.downloadurl }}">
                                                                <i class="fas fa-copy"></i>
                                                            </div>
                                                            <div class="btn delete btn-danger" data-product="{{ image.codigo }}" data-image="{{ image.name }}">
                                                                <i class="fas fa-eraser"></i>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="card-footer">
                                                        <p>{{ image.name }}</p>
                                                        <p>{{ image.created }}</p>
                                                    </div>
                                                </div>
                                            </div>
                                            {% endfor %}
                                        </div>
                                        <div class="row mt-3" id="producto-imagenes">
                                            <div class="col-lg-12">
                                                <div class="btn-group w-100">
                                                    <span class="btn btn-success col-4 fileinput-button">
                                                        <i class="fas fa-plus"></i>
                                                        <span>Agregar</span>
                                                    </span>
                                                    <button type="submit" class="btn btn-primary col-4 start">
                                                        <i class="fas fa-upload"></i>
                                                        <span>Subir</span>
                                                    </button>
                                                    <button type="reset" class="btn btn-warning col-4 cancel">
                                                        <i class="fas fa-times-circle"></i>
                                                        <span>Cancelar</span>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="table table-striped files" id="previews">
                                            <div id="template" class="row mt-2">
                                                <div class="col-4">
                                                    <span class="preview"><img src="data:," alt="data-dz-name" data-dz-thumbnail /></span>
                                                </div>
                                                <div class="col-4 d-flex flex-column align-items-center">
                                                    <p class="mb-0">
                                                        <span data-dz-name></span>
                                                        (<span data-dz-size></span>)
                                                    </p>
                                                    <strong class="error text-danger" data-dz-errormessage></strong>
                                                    <div class="progress progress-striped active w-100" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
                                                        <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
                                                    </div>
                                                </div>
                                                <div class="col-4 d-flex align-items-center">
                                                    <div class="btn-group">
                                                        <button data-dz-remove class="btn btn-success start">
                                                            <i class="fas fa-upload"></i>
                                                            <span>Borrar</span>
                                                        </button>
                                                        <button data-dz-remove class="btn btn-danger delete">
                                                            <i class="fas fa-trash"></i>
                                                            <span>Borrar</span>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascript %}
    {{ parent() }}

    <!-- SweetAlert2 -->
    <script src="/assets/vendor/sweetalert2/sweetalert2.all.min.js"></script>

    <script>
        $(function () {
            $('.card .delete').on('click', function() {
                Swal.fire({
                    title: "Esta seguro de eliminar esta imagen",
                    html: "Esta acci&oacute;n no puede ser revertida posteriormente!",
                    icon: "warning",
                    showCancelButton: true,
                    cancelButtonText: "Cancelar!",
                    confirmButtonText: "Borrar!",
                    confirmButtonColor: "#d33"
                }).then( (result) => {
                    if(result.isConfirmed) {
                        App.Jaxon.Product.delete_image(this.dataset.product, this.dataset.image)
                    }
                })
            })

            const Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 1500,
                didOpen: (toast) => {
                    toast.addEventListener('mouseenter', Swal.stopTimer)
                    toast.addEventListener('mouseleave', Swal.resumeTimer)
                }
            })

            $('.btn-copy').on('click', function () { 
                Toast.fire({ icon: 'success', title: 'Copiado!' })
            })
        })
    </script>

    <!-- ClipboardJS -->
    <script src="/node_modules/clipboard/dist/clipboard.min.js"></script>
    <script>
        new ClipboardJS('.btn-copy');
    </script>
    
    <!-- DropZoneJS -->
    <script src="/assets/vendor/dropzone/min/dropzone.min.js"></script>

    <script>
        // DropzoneJS Demo Code Start
        Dropzone.autoDiscover = false

        // Get the template HTML and remove it from the doumenthe template HTML and remove it from the doument
        var previewNode = document.querySelector("#template")
        previewNode.id = ""
        var previewTemplate = previewNode.parentNode.innerHTML
        previewNode.parentNode.removeChild(previewNode)

        var myDropzone = new Dropzone(document.body, { // Make the whole body a dropzone
            url: "/producto/imagen/{{ product.value }}", // Set the url
            thumbnailWidth: 80,
            thumbnailHeight: 80,
            parallelUploads: 5,
            maxFiles: 5,
            maxFilesize: 1,
            previewTemplate: previewTemplate,
            acceptedFiles: 'image/png, image/jpeg, image/webp',
            autoQueue: false, // Make sure the files aren't queued until manually added
            previewsContainer: "#previews", // Define the container to display the previews
            clickable: ".fileinput-button" // Define the element that should be used as click trigger to select files.
        })

        myDropzone.on("addedfile", function(file) {
            // Hookup the start button
            file.previewElement.querySelector(".start").onclick = function() { myDropzone.enqueueFile(file) }
        })

        myDropzone.on("sending", function(file) {
            // And disable the start button
            file.previewElement.querySelector(".start").setAttribute("disabled", "disabled")
        })

        // Hide the total progress bar when nothing's uploading anymore
        myDropzone.on("queuecomplete", function(progress) {
            window.location.href = "/producto/{{ product.value }}"
        })

        // Setup the buttons for all transfers
        // The "add files" button doesn't need to be setup because the config
        // `clickable` has already been specified.
        document.querySelector("#producto-imagenes .start").onclick = function() {
            myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED))
        }
        document.querySelector("#producto-imagenes .cancel").onclick = function() {
            myDropzone.removeAllFiles(true)
        }
        // DropzoneJS Demo Code End
    </script>
{% endblock %}