<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">


<style>
    body {
      margin: 0;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .container {
      display: grid;
      height: 500px; /* adjust height as needed */
      width: 700px; /* adjust width as needed */
      border: 1px solid #ccc; /* optional: Adding border for visualization */
      background-color: rgb(237, 237, 131);
    }

    .center-div {
      justify-self: center;
      align-self: center;
      margin-left: auto;
      margin-right: auto;
      height: 400px; /* adjust height as needed */
      width: 500px; /* adjust width as needed */
      border: 1px solid #ccc; /* optional: Adding border for visualization */
      background-color: rgb(102, 133, 196);
    }

    #outer {
  border: 0.05em solid red;
  width:100%;
  display: flex;
  justify-content: center;
}

.resultat {
  background-color: tomato;
  color: white;
  border: 2px solid black;
  margin: 20px;
  padding: 20px;
}


button {
  margin: 0 auto;
  display: block;
   
  .inner-div {
     margin: 0 auto;
     width: 100px;
}
   
}

  </style>

</style>    

<?php

    //session_start();
    //echo "<pre>";
	//print_r($_SESSION);
	//echo "</pre>";
    //echo $_SESSION["argument"];
    //echo "<br><br>"; 
    //echo $_SESSION["path"]; 
    
    if (isset($_GET['p'])) 
    {
        $pieces = explode("***", $_GET['p']);
        //echo $pieces[1]; 
        //echo "<br><br>"; 

        if(empty($pieces[1])) 
        {
            $upload_location = "/home/analogde/www/";
        }
        else
        {
            $upload_location = "/home/analogde/www/" .$pieces[1]  ."/";
        }

        //echo " Répertoire target : " .$upload_location ."<br>";
        setcookie("cookie_upload",  $upload_location , time()+3600);
    }

?>

	<script src=  "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

<!--
https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.3/themes/blitzer/jquery-ui.min.css
-->
<!--
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.3/themes/blitzer/jquery-ui.min.css">

<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css">  a voir !!!
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
-->

<!--   OK -->
<!--<link rel="stylesheet" href= "https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/dark-hive/jquery-ui.css"> -->
<link rel="stylesheet" href= "https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css"> 
<script src= "https://code.jquery.com/jquery-2.1.3.js"></script> 
<script src= "https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script> 
<!--      -->

<script> 
   /* $(document).ready(function() { 
        $("#demoDialog").dialog(); 
    }); */

function redirection()
{
    setTimeout(function()
    { 
     //window.location.href = "https://www.example.com";
     window.history.go(-1);
    }, 5000);
}

</script> 

<script>

var resultat = [];
            
$(document).ready(function(){

    $('#submit').click(function(){

            var form_data = new FormData();

            // Read selected files
            var totalfiles = document.getElementById('files').files.length;

            if( totalfiles == 0)
            {
                $("#demoDialog").dialog( {
                    resizable: false,
                    width: 250,
	                height: 175,
                    modal: true,
		overlay: {
			opacity: 0.5,
			background: "black"
		}

                } 


                 ); 
                //alert("Error !");
                
									/*$( "#message_expiration" ).dialog({
									modal: true,
									title: "Infos",
									buttons: {
												Ok: function()
												{
													$( this ).dialog( "close" );
													
												}
											 }
										});*/
							
            }

            else
            {
                    for (var index = 0; index < totalfiles; index++) 
                    {
                        form_data.append("files[]", document.getElementById('files').files[index]);
                    }

                    // AJAX request envoi_multiples07.php   debug_upload01.php
                    $.ajax({
                        url: 'upload_fichier02.php', 
                        type: 'post',
                        data: form_data,
                        dataType: 'json',
                        contentType: false,
                        processData: false,

                        beforeSend: function()
                                {
                                    $("#loader").show();
                                    
                                }, 

                        success: function (response) {

                                for(var index = 0; index < response.length; index++)
                                {
                                    var src = response[index];
                                    console.log(" ----- TEMP -------" + response[index]);
                                    resultat.push(response[index]);
                                    // Add img element in <div id='preview'>
                                    //$('#preview').append('<img src="'+src+'" width="200px;" height="200px">');
                                }

                        },

                        complete: function (data) 
                        {
                                    console.log(" ----- FIN -------" + resultat + " " + data);

                                   // alert(JSON.stringify(data));

                                    $("#loader").hide();
                                   // $('#user_reponse').html( " plouf Yes !" );

                                    var html = "<table>";
                                    for( var i=0; i < resultat.length ; i++ )
                                    {

                                        var text = resultat[i]; //  + " : envoi réussi ..........."    

                                        html += "<tr>";
                                        html += "<td>" + text + "</td>";

                                        //alert(text);   
                                        
                                        let position = text.search("Erreur");

                                        if( position >= 0)
                                        {
                                            html += "<td><img src='no.png' alt='Image' width='32' height='32'></td>";
                                        }   
                                        else
                                        {
                                            html += "<td><img src='yes.png' alt='Image' width='32' height='32'></td>";
                                        } 

                                         

                                        //html += "<tr>";
                                        //html += "<td>" + text + "</td>";
                                        //html += "<td><img src='check.png' alt='Image' width='32' height='32'></td>";
                                        //html += "</tr>";

                                    } 
                                    html += "</table>";   

                                    //var html = resultat;
                                    document.getElementById("resultat").innerHTML = html;

                                    document.getElementById("message_redirection").innerHTML = "Vous allez être rediriger ...";

                                    redirection();
                                    
                            }

                    });
            }
    });

});

</script>


<form method='post' action='' enctype="multipart/form-data">
    <input type="file" id='files' name="files[]" multiple><br>
    <input type="button" id="submit" value='Upload'>
</form>


<!--
<a href="javascript:history.go(-1)" title="Return to the previous page">Retour</a>
-->
<!--
<form>
 <input type="button" value="Retour" onclick="history.go(-1)">
</form>
-->
<!--
<div id="preview"></div>
-->

<!-- Image loader -->
 <!--
<div id="loader" style="display: none;">
<img src="wait.gif" alt="Envoie ..." width="50" height="60">
</div>
-->


<p id="user_reponse"></p>

<div id="dialog" title="Basic dialog"  style="display:none">
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
  </div>

  <div id="message_expiration" style="display: none">
    <p>
    <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
    La session a expiré. veuillez vous reconnecter.
    </p>
    </div>  

    <div id="demoDialog" title="Message" style="display:none"> 
        <p>Aucun fichier selectionné.</p> 
    </div> 

<!--
    <p id="resultat"></p>
    <br><br>
    <p id="message_redirection"></p>
-->
<!--   -->

<body>

    <div class="container">
    <div class="center-div">
        <!-- Your content goes here -->
        <p>This is a centered div in a grid container.</p>
    
        <p style="text-align: center;">This paragraph is centered.</p>
    
        <!--
        <div style="text-align:center; margin: 0 auto">
            <form method='post' action='' enctype="multipart/form-data">
            <input type="file" id='files' name="files[]" multiple>
            <input type="button" id="submit" value='Upload'>
            </form>
        </div>
        -->

        <br><br><br><br>
        <div class="resultat">
        <!--
        <h2>Londonaaa</h2>
        <p>London is the capital of England.</p>
        
        -->
        
        <div id="loader" style="display: none;">
        <img src="wait.gif" alt="Envoie ..." width="50" height="60">
        </div>
        
        <p id="resultat"></p>
        <br><br>
        <p id="message_redirection"></p>
        </div> 

    
        <div>
            <button> 
                <input type="button" value="Retour" onclick="history.go(-1)">
            </button>
        </div>

      <!--
      <form>
    <input type="button" value="Retour" onclick="history.go(-1)">
    </form>
-->
  <!--   
    <div id="inner">Foo foo</div>
-->
  </div>
</div>

</body>
