<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf8" />
        <meta name="viewport" content="width=device-width" />

        <title>Image selection</title>

        <!-- pintura CSS-->
        <link rel="stylesheet" href="./jquery-pintura/pintura.css" />
        <!-- filepond CSS-->
        <link href="./filepond/filepond.css" rel="stylesheet" type="text/css" />
        <link href="./filepond/filepond-plugin-file-poster.css" rel="stylesheet" type="text/css" />

    </head>

    <body>
        <style>
            html {
                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
                    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
                font-size: 16px;
                line-height: 1.5;
            }

            img {
                max-width: 100%;
            }
            
            
            /*Hacer filas de 3 for FilePond */
            #filepond, #uploaded{
                width: 75%;
                margin-left: 12.5%;
            }
            .filepond--item, #uploaded img {
                width: calc(33% - 1em) !important;
            }
            #uploaded img {
                margin: 5px;
            }
            @media only all and (max-width: 47.99rem) {
                .filepond--item {
                    width: calc(100% - 1em) !important;
                }
                #filepond{
                    margin-left: 2.5%;
                    width: 95%;
                }
            }
            .filepond--credits{
                display: none !important;
            }
            
            /*Ocultar botones en el editor*/
            .PinturaTabList li[id*="-resize"],/*con esto ocultas cualquier id que termine en -resize*/
            .PinturaTabList li[id*="-redact"]
            /*.PinturaTabList li[id*="-frame"]/**/
            {  /* WE USE * HERE */
                display: none !important;
                background: green;
                color: white;
            }
            /*el boton continuar oculto de entrada*/
            .continuar{ 
                display: none;
                text-align: center;
            }
            .continuar button{ 
                margin: 20px;
                padding: 5px 20px;
                font-size: 2em;
                color: white;
                background-color: green;
            }
            
            
        </style>
        
<?php $usuario=1; 
if(isset($_POST['usuario']) ){
    ;echo "Uploaded images (click to view in a new tab):";
    echo "<br><div id='uploaded'>";
    for ($i = 1; $i < 10; $i++) {   
        echo '<a href="./uploads/'.$_POST['img'.$i].'" target="_blank"><img src="./uploads/'.$_POST['img'.$i].'"></a>';
    }
    echo "</div><br /><hr>";
    //echo "...<pre>";var_dump($_POST);echo "</pre>...";
}
?>        
        <div class="instrucciones">
            <h2 style="text-align: center">Upload your 9 images and arrange them, please.</h2>
            <h3 style="text-align: center">
                If you want to edit them, click on the pencil icon.<br />
                You can remove ("x") and upload new ones as well.</h3>
            <form method="post" class="continuar">
            <p style="text-align: center">
                Files uploaded: <span id="exitos"></span> / Errors <span id="errores"></span>
                    <input type="hidden" name="usuario" value="<?php echo $usuario;?>">
                    <input type="hidden" name="img1">
                    <input type="hidden" name="img2">
                    <input type="hidden" name="img3">
                    <input type="hidden" name="img4">
                    <input type="hidden" name="img5">
                    <input type="hidden" name="img6">
                    <input type="hidden" name="img7">
                    <input type="hidden" name="img8">
                    <input type="hidden" name="img9">
                    <button type="submit">Upload</button>
            </p>
            </form>
        </div>
        
        <div id="filepond">
            <input type="file" id="my-pond" multiple />
        </div>
        <scriptsIncludes>
            <script src="jquery.js"></script>
            <script src="jquery-pintura/pintura.js"></script>

            <!-- filepond -->
            <script src="./filepond/filepond.js"></script>
            <script src="./filepond/filepond-plugin-file-poster.js"></script>
            <script src="./filepond/filepond-plugin-file-validate-type.js"></script>

            <!-- filepond image editor plugin -->
            <script src="./filepond-plugin-image-editor/FilePondPluginImageEditor.js"></script>

            <!-- filepond jquery adapter -->
            <script src="./filepond/filepond.jquery.js"></script>

            <!--validador del tipo de imagen-->
            <script src="./plugins/filepond-plugin-file-validate-type.js"></script>
            <!--validador del tamaño de la imagen-->
            <script src="./plugins/filepond-plugin-image-validate-size.js"></script>
            <!--validador del peso del archivo-->
            <script src="./plugins/filepond-plugin-file-validate-size.js"></script>
            <!--Esto permite enviar la imagen codificada por ajax-->
            <script src="./plugins/filepond-plugin-file-encode.js"></script>
        </scriptsIncludes>
        
        <script>
            // FilePond es gratis, el editor de imagenes es la libreria de "pintura" de paga
            let cropRatio = 1;// w/h ratio
            let minW=500;//el min tamaño del crop y/o imagen en px
            let minH=500;
            
            // Register FilePond plugins
            const {
                openEditor,
                createDefaultImageReader,
                createDefaultImageWriter,
                processImage,
                getEditorDefaults,
                //ImageValidateSize,
            } = $.fn.pintura;
            $.fn.filepond.registerPlugin(
                FilePondPluginFileValidateType,
                FilePondPluginImageEditor,
                FilePondPluginFilePoster
            );
            //registra mas plugins de filepond
            FilePond.registerPlugin(FilePondPluginFileValidateType);
            FilePond.registerPlugin(FilePondPluginImageValidateSize);
            FilePond.registerPlugin(FilePondPluginFileValidateSize);
            //este plugin envia por ajax la info donde se sube temporalmente y permite la copia
            FilePond.registerPlugin(FilePondPluginFileEncode);
            FilePond.setOptions({
                server:{
                    url: "./upload.php?usuario=<?php echo $usuario;?>",//mandas como get ciertos datos que quiero alla
                },
            });
            
            //Create FilePond field
            $('#my-pond').filepond({
                /* FilePond properties */
                    maxFiles: 9,
                allowReorder: true,
                filePosterMaxHeight: 256,
                
                //tipo de archivo https://pqina.nl/filepond/docs/api/plugins/file-validate-type/
                acceptedFileTypes: ['image/*'],//will accept all images. ['image/png', 'image/jpeg'] will only accepts PNGs and JPEGs.
                //tamaño imagen 
                imageValidateSizeMinWidth: minW,//tienes que tener ambos w y h para que funcione
                imageValidateSizeMinHeight: minH,
                imageValidateSizeLabelImageSizeTooSmall: "Image is too small for printing.",
                //peso https://pqina.nl/filepond/docs/api/plugins/file-validate-size/
                //maxFileSize: '1MB',       
                labelMaxFileSizeExceeded: 'El archivo es muy pesado...',

                /* Image Editor plugin properties */
                imageEditor: {
                    // used to create the editor, receives editor configuration, should return an editor instance
                    createEditor: openEditor,

                    // Required, used for reading the image data
                    imageReader: [createDefaultImageReader],

                    // optionally. can leave out when not generating a preview thumbnail and/or output image
                    imageWriter: [
                        createDefaultImageWriter,
                        // optional image writer instructions, this instructs
                        // the image writer to resize the image to match a width of 384 pixels
                        {
                            targetSize: {
                                width: 384,
                            },
                        },
                    ],

                    // used to generate poster images, runs an editor in the background
                    imageProcessor: processImage,

                    // Pintura Image Editor properties
                    editorOptions: {
                        // pass the editor default configuration options
                        ...getEditorDefaults(),
                        //Estos son solo lo que quieres habilitar
                        //utils: ['crop', 'filter', 'finetune'],

                        // we want a square crop
                        imageCropAspectRatio: cropRatio,
                        
                        //Aqui escoges el tamaño minimo de lo cropeado
                        // we want a minimum crop size
                        imageCropMinSize: { width: minW, height: minH },
                    },

                    // map legacy data objects to new imageState objects, uncomment if you've used FilePond with version 6 of Pintura and are loading old file metadata
                    // legacyDataToImageState: legacyDataToImageState,
                },
                
                
                });
            
            //Aqui ya upload functions y que hacer si se subio bien o mal            
            function uploadNow(){
                let quantityImages = 9;
                if( quantityImages == 9){
                    alert("Your edited images will now be saved")
                }else{
                    alert("You must have 9 images, please review and try again");
                }
            }

            //cuenta fallidos y exitosos
            let fallido = [];
            $("#my-pond").on('FilePond:addfile', (e) => {                
                let exitos=$("#exitos").html()*1;
                let errores=$("#errores").html()*1;
                
                if (e.detail.error) {
                    //console.log('Oh no, '+e.detail.error.main);
                    fallido.push(e.detail.file.filename);
                    //console.log(fallido);
                    errores++;
                }else{
                    //console.log('File added ', e.detail.file.filename);     
                    exitos++;
                }                
                
                $("#exitos").html(exitos);                    
                $("#errores").html(errores);
                faltanX(exitos,errores);
            });/**/
            //descuenta fallidos y exitosos
            $("#my-pond").on('FilePond:removefile', (e) => {                
                let exitos=$("#exitos").html()*1;
                let errores=$("#errores").html()*1;
                
                //console.log(e);
                //console.log('File removed ', e.detail.file.filename);                   
                if(jQuery.inArray(e.detail.file.filename, fallido) != -1 ){
                   errores--;
                }else{
                   exitos--;
                }
                   
                $("#exitos").html(exitos);                    
                $("#errores").html(errores);
                faltanX(exitos,errores);
            });/**/               
            //display cuantos faltan y mostrar boton si ya listo
            function faltanX(ok,err){
                let faltan=9-ok-err;
                $(".filepond--drop-label label").html('Drag &amp; Drop your files or <span class="filepond--label-action" tabindex="0">Browse</span> - '+faltan+' still missing')    
                if(ok<9){
                    $(".continuar").hide();                                        
                }                
            }
            //inicial mostrar
            setTimeout(function() {  
                faltanX(0,0);
            }, 2000);
            //lista los cambios y pone los valores para el post
            let items = [];//la lista se guarda aparte de los archivos y su orden
            document.addEventListener('FilePond:updatefiles', (e) => {
                items = e.detail.items;
                //console.log('update', items);
            });
            document.addEventListener('FilePond:reorderfiles', (e) => {
                items = e.detail.items;
                //console.log('update', items);
            });
            //Solo cuando termino de modif y subio los 9 muestra submit
            document.addEventListener('FilePond:processfiles', (e) => {
                //console.log('update', e);
                //se actualiza el orden
                //console.log(items.length,items);
                let i = 1;
                $.each(items, function(index, value) {
                    //console.log(value.filename);
                    $("input[name=img"+i+"]").val(value.serverId);//filename es el nombre que subiste, serverId es lo que regresa el ajax                    
                    i++;
                });
                
                if(items.length==9){
                    setTimeout(function() {  
                        $(".continuar").show();                    
                    }, 1000);
                }else{
                    $(".continuar").hide();                                        
                }                
            });
            //cuando se empieza a editar un archivo se oculta el boton
            document.addEventListener('FilePond:processfilestart', (e) => {
                $(".continuar").hide();                                        
                //console.log("El archivo que subio es es ",e.detail.file);
            });
            
            /*
            //algo cambia
            document.addEventListener('FilePond:updatefiles', (e) => { // para reordenar FilePond:reorderfiles
                console.log('update', e.detail);
            });
            //cuando algo sube
            document.addEventListener('FilePond:addfile', (e) => {
                console.log('upload', e.detail);
            });
            //cuando algo falla
            document.addEventListener('FilePond:error', (e) => {
                console.log('error ', e.detail);
                let file =e.detail.file;
                setTimeout(function() {  
                    console.log("El archivo que falla es ",file.filename);
                   pond.removeFile(file.id);
                }, 2000);
            });
            // Listen for addfile event
            $('#my-pond').on('FilePond:error', function (e) {
                console.log('file error', e);
                let file =e.detail.file;
                setTimeout(function() {  
                    console.log("falla es ",file.filename);
                   //$(this).filepond("removeFile",file.id);
                   $("#my-pond .filepond--root.filepond--hopper").filepond("removeFile",file.id);
                   pond.removeFile(file.id);
                   //$("#my-pond .filepond--root.filepond--hopper").removeFile(file.id);
                }, 2000);
            });
            */
            
            function metodos(){
                // https://pqina.nl/filepond/docs/api/instance/methods/
                
                //para correr metodos en jQuery le haces asi
                let resu=$('#my-pond').filepond('getFiles');
                console.log(resu);
                
                $('#my-pond').filepond('addFile',"./uploads/1-0OPC4-c.png");//asi con los metodos que tienen parametros
            }
            
        </script>
    
    <?php 
    if(isset($_POST['old1']) ){//volver a cargar los archivos si se regreso (re-sube el archivo por así llamarlo)
    ?>
        <script>//el ultimo cargado lo pone en el primer lugar...
            $('#my-pond').filepond('addFile',"./uploads/<?php echo $_POST['old9'];?>");//asi con los metodos que tienen parametros    
            $('#my-pond').filepond('addFile',"./uploads/<?php echo $_POST['old8'];?>");//asi con los metodos que tienen parametros    
            $('#my-pond').filepond('addFile',"./uploads/<?php echo $_POST['old7'];?>");//asi con los metodos que tienen parametros    
            $('#my-pond').filepond('addFile',"./uploads/<?php echo $_POST['old6'];?>");//asi con los metodos que tienen parametros    
            $('#my-pond').filepond('addFile',"./uploads/<?php echo $_POST['old5'];?>");//asi con los metodos que tienen parametros    
            $('#my-pond').filepond('addFile',"./uploads/<?php echo $_POST['old4'];?>");//asi con los metodos que tienen parametros    
            $('#my-pond').filepond('addFile',"./uploads/<?php echo $_POST['old3'];?>");//asi con los metodos que tienen parametros    
            $('#my-pond').filepond('addFile',"./uploads/<?php echo $_POST['old2'];?>");//asi con los metodos que tienen parametros    
            $('#my-pond').filepond('addFile',"./uploads/<?php echo $_POST['old1'];?>");//asi con los metodos que tienen parametros    
        </script>
    <?php
    }
    ?>
    </body>
</html>