HOME

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

if (isset($_POST['save-date'])) {

    foreach ($_POST['sort'] as $key => $img) {
        $key = $key + 1;
        $sql = "UPDATE `album-photos` SET `sort` = '" . $key . "'  WHERE id = '" . $img . "'";

        $db = new DB();

        $db->readQuery($sql);
    }
}
?>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 

<script>
    $(function () {
        $("#sortable").sortable();
        $("#sortable").disableSelection();
    });
</script>

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">Arrange Photos : <?php echo $_GET['name']; ?></h3>
    </div>
    <div class="panel-body">
        <section class="albums mt100">
            <form method="post">
                <div class="container-fluid">
                    <div class="row album-list fadeIn appear"> 

                        <div class="col-sm-12">
                            <ul id="sortable">
                                <?php
                                $albums = getAlbumPhotosByAlbumId($_GET['album']);

                                foreach ($albums as $key => $album) {
                                    ?> 

                                    <li class="ui-state-default">
                                        <span class="number-class">(<?php echo $key + 1; ?>)</span>
                                        <img width="200px" class="example-image img-responsive" src="../images/photo-albums/photos/thumb/<?php echo $album['photo']; ?>" alt=""/>
                                        <input type="hidden" name="sort[]"  value="<?php echo $album["id"]; ?>" class="sort-input"/> 
                                    </li>

                                    <?php
                                }
                                ?>
                            </ul>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12 text-center" style="margin-top: 19px;">
                            <input type="submit" class="btn btn-info" id="btn-submit" value="Save Photos" name="save-date">
                        </div>
                    </div>
                </div>
            </form>
        </section>


    </div>
</div>
<style>
    #sortable {  
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    #sortable li {
        float: left;
        padding: 2px;
        margin: 3px;
        cursor: move;
    } 
    .number-class{
        position: absolute; 
        background-color: white;
        padding: 0px 2px 0px 1px;
        border: solid 1px #8E8E8E;
        border-radius: 3px;
        margin: 1px;
        font-size: 12px;
    }
    .villas-title{
        margin: 2px 0px 2px 1px;
        font-weight: 600;
        color: black;
    } 
</style>
<?php
include './footer.php';
?>