<?php include 'header.php'; ?>

// <script type="text/javascript" >
//  $(document).ready(function() {
//         $('#imageform').on('submitPhoto', function(){
//          $("#preview").html('<div class="progress progress-striped active"><div class="bar" style="width: 40%;"></div></div>');
//          $("#imageform").ajaxForm({
//              target: '#preview'
//          }).submit();

//      });
//     });
// </script>
<script>
    $(function(){
        $('#imageform').on('submitPhoto', function(e){
            e.preventDefault();
            $.ajax({
                url: 'ajaximage.php',
                type: 'POST',
                data: $('#imageform').serialize(),
                success: function(data){
                     $('submit.php/#photoModal').modal('hide');
                     $('submit.php/#confirm').modal('show');
                }
            });
        });
    });
</script>

<a href="#photoModal" role="button" class="btn" data-toggle="modal">Submit a Photo</a>

<!-- Modal -->
<div id="photoModal" class="modal hide fade"
    tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Submit Your Media</h3>
    </div>

    <form id="imageform" method="post" enctype="multipart/form-data">

        <div class="modal-body">

            Upload your image
            <input type="file" name="photoimg" id="photoimg" />

            <div id="preview">
            </div>

        </div>

        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            <input type="submit" id="photoSubmit" name="submitPhoto" value="Submit" class="btn btn-primary">
        </div>

    </form>

</div>

<!-- Modal -->
<div id="confirm" class="modal hide fade"
    tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Media Submitted</h3>
    </div>

        <div class="modal-body">

            <p>Success</p>
            <ul>
                <li><?php echo $name; ?></li>
                <li><?php echo $type; ?></li>
                <li><?php echo $size; ?></li>
            </ul>

        </div>

        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            <input type="submit" name="okay" value="Okay" class="btn btn-primary">
        </div>
</div>

<?php
    include('db.php');
    session_start();
    $session_id='1'; //$session id
    $path = "uploads/";

$valid_formats = array("jpg", "png", "gif", "bmp");
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")
    {
        $name = $_FILES['photoimg']['name'];
        $size = $_FILES['photoimg']['size'];

        if(strlen($name))
            {
                list($txt, $ext) = explode(".", $name);
                if(in_array($ext,$valid_formats))
                {
                if($size<(1024*1024))
                    {
                        $actual_image_name = time().substr(str_replace(" ", "_", $txt), 5).".".$ext;
                        $tmp = $_FILES['photoimg']['tmp_name'];
                        if(move_uploaded_file($tmp, $path.$actual_image_name))
                            {
                                mysql_query("UPDATE submissions SET filename='$actual_image_name' ");

                                echo "<img src='uploads/".$actual_image_name."'  class='preview'>";
                            }
                        else
                            echo "failed";
                    }
                    else
                    echo "Image file size max 1 MB";
                    }
                    else
                    echo "Invalid file format..";
            }

        else
            echo "Please select image..!";

        exit;
    }
    ?>