<?php
include('include/headscript.php'); ?>
<?php
// pickup the get variable
if (isset($_GET["idtrf"])) {
    $idtrf = $_GET["idtrf"];
}
if (isset($_GET["codestep"])) {
    $code = "8";
    $InsertQuery = new WA_MySQLi_Query($cmctrfdb);
    $InsertQuery->Action = "insert";
    $InsertQuery->Table = "wheretrfstep";
    $InsertQuery->bindColumn("idtrf", "i", "$idtrf", "WA_DEFAULT");
    $InsertQuery->bindColumn("code", "i", "$code", "WA_DEFAULT");
    $InsertQuery->saveInSession("");
    $InsertQuery->execute();
    $InsertGoTo = "";
    $InsertQuery->redirect($InsertGoTo);
}
?>
<?php
$trfnumberfinal = new WA_MySQLi_RS("trfnumberfinal", $cmctrfdb, 1);
$trfnumberfinal->setQuery("SELECT * FROM `trf-details` WHERE `trf-details`.idtrfdetails='$idtrf'");
$trfnumberfinal->execute();
$idcertn = $trfnumberfinal->getColumnVal("idcertification");
?>
<?php $idcert = $trfnumberfinal->getColumnVal("idcertification"); ?>
<?php
$certname = new WA_MySQLi_RS("certname", $cmctrfdb, 1);
$certname->setQuery("SELECT * FROM certificationtype WHERE certificationtype.idcertificationtype='$idcert'");
$certname->execute(); ?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title><?php echo $titlepage; ?> </title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta content="<?php echo $ownercompanyname; ?> TRF Portal" name="description" />
    <meta content="" name="author" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- App favicon -->
    <link rel="shortcut icon" href="../images/favicon.ico">

    <!--Form Wizard-->
    <link href="../plugins/jquery-steps/jquery.steps.css" rel="stylesheet" type="text/css">
    <!-- App css -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="assets/css/jquery-ui.min.css" rel="stylesheet">
    <link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
    <link href="assets/css/metisMenu.min.css" rel="stylesheet" type="text/css" />
    <link href="assets/css/app.min.css" rel="stylesheet" type="text/css" />

    <!-- submit form with button -->
    <script>
        function formSubmit() {
            document.forms["myForm"].submit();
        }
    </script>
    <!-- upload image script -->
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        $(document).ready(function() {
            $(".upload-doc").click(function() {
                $(".form-horizontal").ajaxForm({
                    target: '.preview'
                }).submit();
            });
        });
    </script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
        /* Add this CSS to your styles */
        .custom-file-upload {
            display: inline-block;
            padding: 6px 12px;
            cursor: pointer;
            background: #28a745;
            color: white;
            border-radius: 0.25rem;
            margin-right: 10px;
        }

        .file-name-display {
            border: 1px solid #ccc;
            padding: 6px 12px;
            display: inline-block;
            width: auto;
            min-width: 120px;
            margin-right: 10px;
            text-align: left;
        }

        .upload-div {
            display: flex;
            align-items: center;
            gap: 10px;
        }
    </style>
</head>

<body>

    <!-- Top Bar Start -->
    <?php include('include/topbar.php'); ?>
    <!-- Top Bar End -->

    <!-- Left Sidenav -->
    <?php include('include/leftsidenav.php'); ?>
    <!-- end left-sidenav-->
    <div class="page-wrapper">
        <!-- Page Content-->
        <div class="page-content">
            <div class="container-fluid">
                <!-- Page-Title -->
                <div class="row">
                    <div class="col-sm-12">
                        <div class="page-title-box">
                            <div class="float-right">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="javascript:void(0);"><?php echo $titlepage; ?></a></li>
                                    <li class="breadcrumb-item active">Starter</li>
                                </ol>
                            </div>
                            <h4 class="page-title"><?php echo $titlewb; ?></h4>
                        </div><!--end page-title-box-->
                    </div><!--end col-->
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="media">

                                    <?php include('include/appform.php'); ?>

                                </div><!--end media-->

                            </div><!--end card-body-->
                        </div><!--end card-->

                        <div class="progress mb-4">
                            <div class="progress-bar" role="progressbar" style="width: 95%;" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100">95%</div>
                        </div>


                        <?php // photos 
                        ?>

                        <?php if (($trfnumberfinal->getColumnVal("idcertification") != '5') and ($trfnumberfinal->getColumnVal("idcertification") != '6')) { ?>
                            <div class="card">
                                <div class="card-body">
                                    <h4 class="mt-0"><?php echo $addphotosdoc; ?> <i class="fas fa-info-circle" data-toggle="modal" data-animation="bounce" data-target=".bs-example-modal-center5"></i>
                                        <div class="modal fade bs-example-modal-center5" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
                                            <div class="modal-dialog modal-dialog-centered">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title mt-0" id="exampleModalLabel"><?php echo $m18btitle; ?></h5>
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                            <span aria-hidden="true">&times;</span>
                                                        </button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <p>Foto frontale e laterale
                                                        </p>
                                                    </div>
                                                </div><!-- /.modal-content -->
                                            </div><!-- /.modal-dialog -->
                                        </div><!-- /.modal -->
                                    </h4>

                                    <p class="text-muted mb-3"><?php echo $allowedkind; ?></p>


                                    <table id="photoaded">
                                        <tr>
                                            <?php
                                            $photoshoesside = "";
                                            $photoshoessole = "";

                                            if ($trfnumberfinal->getColumnVal("idarticletype") == '1') {
                                                $photo1 = $photoshoesside;
                                                $photo2 = $photoshoessole;
                                            } elseif ($trfnumberfinal->getColumnVal("idarticletype") == '2') {
                                                $photo1 = $photogloveup;
                                                $photo2 = $photoglovebottom;
                                            } elseif ($trfnumberfinal->getColumnVal("idarticletype") == '3') {
                                                $photo1 = $photomasksidea;
                                                $photo2 = $photomasksideb;
                                            } ?>
                                            <th><?php echo $photo1; ?></th>
                                            <th></th>
                                            <th><?php echo $photo2; ?></th>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div class="upload-div">
                                                    <!-- File upload form -->
                                                    <form id="uploadFormphoto" enctype="multipart/form-data">
                                                        <label for="fileInput1" class="custom-file-upload"><?php echo $browsebotton; ?></label>
                                                        <div class="file-name-display" onclick="document.getElementById('fileInput1').click();"><?php echo $nofilechoosen; ?></div>
                                                        <input type="file" name="docphotoone[]" id="fileInput1" style="display: none;" onchange="updateFileName(1)">
                                                        <input type="hidden" name="idtrf" id="idtrf" value="<?php echo $trfnumberfinal->getColumnVal("idtrfdetails"); ?>">
                                                        <input type="submit" name="submit" value="UPLOAD" />
                                                    </form>
                                                    <!-- Display upload status -->
                                                    <div id="uploadStatus1"></div>
                                                </div>
                                            </td>
                                            <td></td>
                                            <td>
                                                <div class="upload-div">
                                                    <!-- File upload form -->
                                                    <form id="uploadFormphototwo" enctype="multipart/form-data">
                                                        <label for="fileInput2" class="custom-file-upload"><?php echo $browsebotton; ?></label>
                                                        <div class="file-name-display" onclick="document.getElementById('fileInput2').click();"><?php echo $nofilechoosen; ?></div>
                                                        <input type="file" name="docphototwo[]" id="fileInput2" style="display: none;" onchange="updateFileName(2)">
                                                        <input type="hidden" name="idtrf" id="idtrf" value="<?php echo $trfnumberfinal->getColumnVal("idtrfdetails"); ?>">
                                                        <input type="submit" name="submit" value="UPLOAD" />
                                                    </form>
                                                    <!-- Display upload status -->
                                                    <div id="uploadStatus2"></div>
                                                </div>
                                                <script>
                                                    // Add this script to handle the filename display
                                                    function updateFileName(index) {
                                                        var input = document.getElementById('fileInput' + index);
                                                        var fileNameDisplay = document.querySelector('.upload-div #uploadStatus' + index);
                                                        fileNameDisplay.textContent = input.files[0].name || 'No file chosen';
                                                    }
                                                </script>

                                </div>
                                </td>
                                </tr>
                                <tr>
                                    <td id="cont_photoone">
                                        <?php if (!empty($trfnumberfinal->getColumnVal("photoone"))) { ?>
                                            <img src="uploaddocuments/<?php echo ($trfnumberfinal->getColumnVal("photoone")); ?>" height="200" alt="" />

                                        <?php } ?>
                                    </td>
                                    <td>
                                    </td>
                                    <td id="cont_phototwo">

                                        <?php if (!empty($trfnumberfinal->getColumnVal("phototwo"))) { ?>

                                            <img src="uploaddocuments/<?php echo ($trfnumberfinal->getColumnVal("phototwo")); ?>" height="200" alt="" />

                                        <?php } ?>
                                    </td>
                                </tr>
                                </table>

                                <br>

                            </div><!--end card-body-->
                    </div><!--end card--><?php  } ?>



                <?php // documents
                ?>
                <div class="card">
                    <div class="card-body">
                        <h4 class="mt-0"><?php echo $adddoctitle; ?> <i class="fas fa-info-circle" data-toggle="modal" data-animation="bounce" data-target=".bs-example-modal-center5"></i>
                            <div class="modal fade bs-example-modal-center5" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title mt-0" id="exampleModalLabel"><?php echo $m18btitle; ?></h5>
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                        </div>
                                        <div class="modal-body">
                                            <p><?php echo nl2br($documenthelp); ?>
                                            </p>
                                        </div>
                                    </div><!-- /.modal-content -->
                                </div><!-- /.modal-dialog -->
                            </div><!-- /.modal -->
                        </h4>
                        <?php if ($idcert != 5) { ?>
                            <p class="text-muted mb-3"><?php echo $adddoctitle_help; ?></p>
                        <?php } else { ?>
                            <p class="text-muted mb-3"><?php echo $auditdocumenttitle; ?></p>
                        <?php } ?>


                        <div class="upload-div">
                            <!-- File upload form -->
                            <form id="uploadForm" enctype="multipart/form-data">
                                <div class="form-group row">
                                    <label for="validationTooltip01" class="col-sm-5 col-form-label"><?php echo $filedescription; ?></label>
                                    <div class="col-sm-7">
                                        <input type="text" class="form-control" id="validationTooltip01" name="filedescription" placeholder="<?php echo $filedescription; ?>" required="">
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-sm-4 col-form-label"><?php echo $selectfileonyourpc; ?></label>
                                    <div class="col-sm-8">
                                        <div class="custom-file">
                                            <input type="file" class="custom-file-input" id="fileInput" name="doc[]" onchange="document.getElementById('fileInputLabel').innerHTML = document.getElementById('fileInput').files[0].name">
                                            <label class="custom-file-label" for="fileInput" id="fileInputLabel"><?php echo $nofilechoosen; ?></label>
                                        </div>
                                    </div>
                                </div>

                                <input type="hidden" name="idtrf" id="idtrf" value="<?php echo $trfnumberfinal->getColumnVal("idtrfdetails"); ?>">
                                <input type="submit" class="btn btn-primary" name="submit" value="UPLOAD" />
                            </form>

                            <script>
                                // Assicurati che questo script sia incluso dopo il form o prima della chiusura del tag body
                                document.getElementById('fileInput').onchange = function() {
                                    // Verifica se un file è stato selezionato
                                    if (this.files && this.files.length > 0) {
                                        // Aggiorna il testo della label con il nome del file
                                        document.getElementById('fileInputLabel').innerHTML = this.files[0].name;
                                    } else {
                                        // Se non è stato selezionato nessun file, mostra il testo di default
                                        document.getElementById('fileInputLabel').innerHTML = '<?php echo $nofilechoosen; ?>';
                                    }
                                };
                            </script>


                            <!-- Display upload status -->
                            <div id="uploadStatus"></div>

                        </div>

                        <br>

                    </div><!--end card-body-->
                </div><!--end card-->


                <div class="card" id="provacla">

                    <?php
                    $filenamelist = new WA_MySQLi_RS("filenamelist", $cmctrfdb, 0);
                    $filenamelist->setQuery("SELECT * FROM fileattached WHERE fileattached.idtrfdetails='$idtrf'");
                    $filenamelist->execute();
                    ?>
                    <div class="card-body">
                        <h4 class="mt-0 header-title"><?php echo $addeddoctitle; ?></h4>
                        <p class="text-muted mb-3"><?php echo $addeddoctitle_help; ?></p>


                        <div class="upload-div">
                            <!-- File upload form -->
                            <div class="card-body">



                                <div class="table-responsive" id="docadded">

                                    <table class="table table-striped mb-0">
                                        <thead>
                                            <tr>
                                                <th><?php echo $filenametitle; ?></th>
                                                <th><?php echo $filenamedesc; ?></th>

                                                <th><?php echo $actiondel; ?></th>
                                            </tr>
                                        </thead>
                                        <tbody id="cont_file">

                                            <?php
                                            $wa_startindex = 0;
                                            while (!$filenamelist->atEnd()) {
                                                $wa_startindex = $filenamelist->Index;
                                            ?>
                                                <tr>
                                                    <td>
                                                        <a href="uploaddocuments/<?php echo ($filenamelist->getColumnVal("filename_fileattached")); ?>" target="_blank"><?php echo $filesent; ?></a>
                                                    </td>
                                                    <td><?php echo ($filenamelist->getColumnVal("description_fileattached")); ?></td>

                                                    <td>

                                                        <a href="deleteaddedoc.php?idtrf=<?php echo $idtrf; ?>&idadddoc=<?php echo ($filenamelist->getColumnVal("idfileattached")); ?>"><i class="fas fa-trash-alt text-danger font-16"></i></a>
                                                    </td>
                                                </tr>
                                            <?php
                                                $filenamelist->moveNext();
                                            }
                                            $filenamelist->moveFirst(); //return RS to first record
                                            unset($wa_startindex);
                                            unset($wa_repeatcount);
                                            ?>


                                        </tbody>
                                    </table><br>

                                    <!--end /table-->
                                </div><!--end /tableresponsive-->
                            </div>


                        </div>

                        <br>

                    </div><!--end card-body-->
                </div><!--end card-->

                <div class="card" id="provaclaphoto">
                    <?php
                    $additionalphotoslist = new WA_MySQLi_RS("additionalphotoslist", $cmctrfdb, 0);
                    $additionalphotoslist->setQuery("SELECT * FROM additionalphotos WHERE additionalphotos.idtrf='$idtrf'");
                    $additionalphotoslist->execute();
                    ?>
                    <div class="card-body">
                        <h4 class="mt-0 header-title"><?php echo $addphotos; ?></h4>
                        <p class="text-muted mb-3"><?php echo $addphotossuggestion; ?></p>

                        <!-- Upload area -->
                        <div class="upload-area" id="uploadfile">
                            <div class="upload-icon">
                                <i class="fas fa-cloud-upload-alt"></i>
                            </div>
                            <p><?php echo $addphotosup; ?></p>
                            <input type="file" id="fileupload" multiple accept="image/*" style="display:none;">
                        </div>
                        <div id="thumbnail-container"></div>

                        <div class="upload-div">
                            <!-- File upload form -->
                            <div class="card-body">
                                <div class="table-responsive" id="docadded">
                                    <table class="table table-striped mb-0">
                                        <thead>
                                            <tr>
                                                <th><?php echo $filenametitle; ?>-</th>

                                                <th><?php echo $actiondel; ?></th>
                                            </tr>
                                        </thead>
                                        <tbody id="cont_file_photo">
                                            <?php
                                            $wa_startindex = 0;
                                            while (!$additionalphotoslist->atEnd()) {
                                                $wa_startindex = $additionalphotoslist->Index;
                                            ?>
                                                <tr>
                                                    <td>
                                                        <a href="uploadimages/<?php echo $additionalphotoslist->getColumnVal("filenameadditionalphotos"); ?>" target="_blank">
                                                            <img src="uploadimages/<?php echo $additionalphotoslist->getColumnVal("filenameadditionalphotos"); ?>" class="thumbnail">
                                                        </a>
                                                    </td>

                                                    <td>
                                                        <a href="deleteaddephotos.php?idtrf=<?php echo $idtrf; ?>&idadditionalphotos=<?php echo $additionalphotoslist->getColumnVal("idadditionalphotos"); ?>">
                                                            <i class="fas fa-trash-alt text-danger font-16"></i>
                                                        </a>
                                                    </td>
                                                </tr>
                                            <?php
                                                $additionalphotoslist->moveNext();
                                            }
                                            $additionalphotoslist->moveFirst(); //return RS to first record
                                            unset($wa_startindex);
                                            unset($wa_repeatcount);
                                            ?>
                                        </tbody>
                                    </table><br>
                                    <a href="trfoption.php?idtrf=<?php echo $idtrf; ?>&codestep=8"><button type="button" class="btn btn-success waves-effect waves-light"><?php echo $nextsteptitle; ?></button></a>
                                    <button type="button" class="btn btn-dark waves-effect waves-light" onclick="window.location.href='identificationparts.php?idtrf=<?php echo $idtrf; ?>'"><?php echo $backstep; ?></button>
                                    <!--end /table-->
                                </div><!--end /tableresponsive-->

                            </div>
                        </div>
                        <br>
                    </div><!--end card-body-->
                </div><!--end card-->

                <style>
                    .upload-area {
                        border: 2px dashed #007bff;
                        border-radius: 5px;
                        background-color: #e9f7ff;
                        text-align: center;
                        padding: 20px;
                        cursor: pointer;
                    }

                    .upload-area:hover {
                        background-color: #d4efff;
                    }

                    .upload-icon {
                        font-size: 50px;
                        color: #007bff;
                        margin-bottom: 10px;
                    }

                    .thumbnail {
                        width: 50px;
                        height: 50px;
                        margin: 5px;
                        display: inline-block;
                    }
                </style>

                <script>
                    document.querySelector('.upload-area').addEventListener('click', function() {
                        document.getElementById('fileupload').click();
                    });

                    document.getElementById('fileupload').addEventListener('change', function(e) {
                        const files = e.target.files;
                        handleFiles(files);
                    });

                    document.querySelector('.upload-area').addEventListener('dragover', function(e) {
                        e.preventDefault();
                        e.stopPropagation();
                        this.style.backgroundColor = '#d4efff';
                    });

                    document.querySelector('.upload-area').addEventListener('dragleave', function(e) {
                        e.preventDefault();
                        e.stopPropagation();
                        this.style.backgroundColor = '#e9f7ff';
                    });

                    document.querySelector('.upload-area').addEventListener('drop', function(e) {
                        e.preventDefault();
                        e.stopPropagation();
                        this.style.backgroundColor = '#e9f7ff';
                        const files = e.dataTransfer.files;
                        handleFiles(files);
                    });

                    function handleFiles(files) {
                        const thumbnailContainer = document.getElementById('thumbnail-container');
                        thumbnailContainer.innerHTML = ''; // Clear previous thumbnails

                        for (let i = 0; i < files.length; i++) {
                            const file = files[i];
                            const fileType = file.type.toLowerCase();
                            const validImageTypes = ["image/jpeg", "image/png", "image/jpg"];

                            if (!validImageTypes.includes(fileType)) {
                                alert('Only JPG, JPEG, and PNG files are allowed.');
                                continue;
                            }

                            const reader = new FileReader();
                            reader.onload = function(e) {
                                const img = document.createElement('img');
                                img.src = e.target.result;
                                img.classList.add('thumbnail');
                                thumbnailContainer.appendChild(img);

                                setTimeout(() => {
                                    thumbnailContainer.removeChild(img);
                                }, 3000);
                            };
                            reader.readAsDataURL(file);

                            const formData = new FormData();
                            formData.append('file', file);
                            formData.append('idtrf', '<?php echo $idtrf; ?>'); // Pass idtrf from PHP to JS

                            fetch('uploadaddphotos.php', {
                                    method: 'POST',
                                    body: formData
                                })
                                .then(response => response.json())
                                .then(data => {
                                    if (data.success) {
                                        console.log('File uploaded successfully');
                                        updatePhotoTable();
                                    } else {
                                        console.error('File upload failed: ', data.message);
                                    }
                                })
                                .catch(error => {
                                    console.error('Error:', error);
                                });
                        }
                    }

                    function updatePhotoTable() {
                        fetch('getphotos.php?idtrf=<?php echo $idtrf; ?>')
                            .then(response => {
                                if (!response.ok) {
                                    throw new Error('Network response was not ok');
                                }
                                return response.text(); // Modifica per leggere come testo per il debug
                            })
                            .then(data => {
                                console.log('Server response:', data); // Logga la risposta grezza del server
                                try {
                                    let jsonData = JSON.parse(data); // Prova a fare il parsing della risposta come JSON
                                    if (jsonData.error) {
                                        throw new Error(jsonData.error); // Gestisce errori dal server
                                    }
                                    let html = '';
                                    jsonData.forEach(photo => {
                                        html += `<tr>
                                <td><img src="uploadimages/${photo.filename}" class="thumbnail"></td>
                                <td>${photo.description}</td>
                                <td><a href="deleteaddephotos.php?idtrf=<?php echo $idtrf; ?>&idadditionalphotos=${photo.id}">
                                        <i class="fas fa-trash-alt text-danger font-16"></i>
                                    </a>
                                </td>
                             </tr>`;
                                    });
                                    document.getElementById('cont_file_photo').innerHTML = html;
                                } catch (e) {
                                    console.error('Error parsing JSON:', e, data); // Logga l'errore di parsing e la risposta
                                }
                            })
                            .catch(error => {
                                console.error('Fetch error:', error); // Logga eventuali errori di fetch
                            });
                    }
                </script>










                </div><!--end col-->
            </div>
            <!-- end page title end breadcrumb -->

        </div><!-- container -->
        <!-- footer start -->
        <?php include('include/footer.php'); ?>
        </footer><!--end footer-->
    </div>
    <!-- end page content -->
    </div>
    <!-- end page-wrapper -->
    <script>
        var match = [
            "application/pdf",
            "application/msword", // per i file .doc
            "application/vnd.openxmlformats-officedocument.wordprocessingml.document", // per i file .docx
            "image/jpg",
            "image/jpeg",
            "image/gif",
            "application/xls",
            "application/xlsx",
            "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
            "application/vnd.ms-excel.sheet.macroEnabled.12",
            "image/png",
            "image/bmp"
        ];
        $(document).ready(function() {
            // File upload via Ajax
            $("#uploadForm").on('submit', function(e) {
                e.preventDefault();
                $.ajax({
                    type: 'POST',
                    url: 'uploadfile.php',
                    data: new FormData(this),
                    contentType: false,
                    cache: false,
                    processData: false,
                    beforeSend: function() {
                        $('#uploadStatus').html('<img src="../images/uploading.gif"/>');
                    },
                    error: function() {
                        $('#uploadStatus').html('<span style="color:#EA4335;">File upload failed, please try again.<span>');
                    },
                    success: function(data) {
                        $('#uploadForm')[0].reset();
                        $('#uploadStatus').html('<span style="color:#28A74B;">File uploaded successfully.<span>');
                        // $('.gallery').html(data);
                        // $("#docadded").load(location.href + " #docadded");
                        // SHOW UPLOADED FILE
                        $('#cont_file').html(data);
                    }
                });
            });

            // File type validation
            $("#fileInput").change(function() {
                var fileLength = this.files.length;
                // var match= ["application/pdf","application/msword","image/jpg","image/gif","application/xls","application/xlsx", "application/vnd.ms-excel", "application/vnd.openxmlformats-officedocument.wordprocessingml.document"];
                var i;
                for (i = 0; i < fileLength; i++) {
                    var file = this.files[i];
                    var imagefile = file.type;
                    // if(!((imagefile==match[0]) || (imagefile==match[1]) || (imagefile==match[5]) || (imagefile==match[6]) || (imagefile==match[7]) || (imagefile==match[8]))){
                    //     alert('Please select a valid  file (PDF, word, excel).');
                    //     $("#fileInput").val('');
                    //     return false;
                    // }
                    if (!match.includes(imagefile)) {
                        alert('Please select a valid  file (PDF, word, excel).');
                        $("#fileInput").val('');
                        return false;
                    }
                }
            });
        });
    </script>
    <script>
        $(document).ready(function() {
            // File upload via Ajax
            $("#uploadFormphoto").on('submit', function(e) {
                e.preventDefault();
                $.ajax({
                    type: 'POST',
                    url: 'uploadphotofile.php',
                    data: new FormData(this),
                    contentType: false,
                    cache: false,
                    processData: false,
                    beforeSend: function() {
                        $('#uploadStatus1').html('<img src="../images/uploading.gif"/>');
                    },
                    error: function() {
                        $('#uploadStatus1').html('<span style="color:#EA4335;">File upload failed, please try again.<span>');
                    },
                    success: function(data) {
                        $('#uploadFormphoto')[0].reset();
                        $('#uploadStatus1').html('<span style="color:#28A74B;">File uploaded successfully.<span>');
                        // $('.gallery').html(data);

                        // $("#photoaded").load(location.href + " #photoaded");
                        // SHOW PHOTO 1
                        $('#cont_photoone').html(data);
                    }
                });
            });

            // File type validation
            $("#fileInput1").change(function() {
                var fileLength = this.files.length;
                // var match= ["application/pdf","application/msword","image/jpg","image/gif","application/xls","application/xlsx", "application/vnd.ms-excel", "application/vnd.openxmlformats-officedocument.wordprocessingml.document"];
                var i;
                for (i = 0; i < fileLength; i++) {
                    var file = this.files[i];
                    var imagefile = file.type.toLowerCase();
                    if (!((imagefile == match[2]) || (imagefile == match[3]) || (imagefile == match[4]) || (imagefile == match[9]) || (imagefile == match[10]))) {
                        alert('Please select a valid  file (jpg, jpeg, png, bmp).');
                        $("#fileInput1").val('');
                        return false;
                    }
                }
            });
        });
    </script>

    <script>
        $(document).ready(function() {
            // File upload via Ajax
            $("#uploadFormphototwo").on('submit', function(e) {
                e.preventDefault();
                $.ajax({
                    type: 'POST',
                    url: 'uploadphotofile2.php',
                    data: new FormData(this),
                    contentType: false,
                    cache: false,
                    processData: false,
                    beforeSend: function() {
                        $('#uploadStatus2').html('<img src="../images/uploading.gif"/>');
                    },
                    error: function() {
                        $('#uploadStatus2').html('<span style="color:#EA4335;">File upload failed, please try again.<span>');
                    },
                    success: function(data) {
                        $('#uploadFormphototwo')[0].reset();
                        $('#uploadStatus2').html('<span style="color:#28A74B;">File uploaded successfully.<span>');
                        // $('.gallery').html(data);
                        // $("#photoaded").load(location.href + " #photoaded");
                        // SHOW PHOTO 2
                        $('#cont_phototwo').html(data);
                    }
                });
            });

            // File type validation
            $("#fileInput2").change(function() {
                var fileLength = this.files.length;
                // var match= ["application/pdf","application/msword","image/jpg","image/gif","application/xls","application/xlsx", "application/vnd.ms-excel", "application/vnd.openxmlformats-officedocument.wordprocessingml.document"];
                var i;
                for (i = 0; i < fileLength; i++) {
                    var file = this.files[i];
                    var imagefile = file.type.toLowerCase();
                    if (!((imagefile == match[2]) || (imagefile == match[3]) || (imagefile == match[4]) || (imagefile == match[9]) || (imagefile == match[10]))) {
                        alert('Please select a valid  file (jpg, jpeg, png, bmp).');
                        $("#fileInput2").val('');
                        return false;
                    }
                }
            });
        });
    </script>
    <!-- jQuery  -->
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/bootstrap.bundle.min.js"></script>
    <script src="assets/js/metismenu.min.js"></script>
    <script src="assets/js/waves.js"></script>
    <script src="assets/js/feather.min.js"></script>
    <script src="assets/js/jquery.slimscroll.min.js"></script>
    <script src="assets/js/jquery-ui.min.js"></script>

    <script src="../plugins/jquery-steps/jquery.steps.min.js"></script>
    <script src="assets/pages/jquery.form-wizard.init.js"></script>
    <!-- App js -->
    <script src="assets/js/app.js"></script>

</body>

</html>