<?php include('config.php');?>
<?php include('session.php');?>
<?php include('upload_announcement.php');?>
<?php include('upload.php');?>
<?php include('announcement_edit_delete.php');?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- SEO Meta Tags -->
    <meta name="description" content="Tivo is a HTML landing page template built with Bootstrap to help you crate engaging presentations for SaaS apps and convert visitors into users.">
    <meta name="author" content="Inovatik">

    <!-- OG Meta Tags to improve the way the post looks when you share the page on LinkedIn, Facebook, Google+ -->
    <meta property="og:site_name" content="" /> <!-- website name -->
    <meta property="og:site" content="" /> <!-- website link -->
    <meta property="og:title" content=""/> <!-- title shown in the actual shared post -->
    <meta property="og:description" content="" /> <!-- description shown in the actual shared post -->
    <meta property="og:image" content="" /> <!-- image link, make sure it's jpg -->
    <meta property="og:url" content="" /> <!-- where do you want your post to link to -->
    <meta property="og:type" content="article" />

    <!-- Website Title -->
    <title>Announcements - MinSU Office of Planning, Monitoring and Evaluation </title>

    <!-- Styles -->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700&display=swap&subset=latin-ext" rel="stylesheet">
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/fontawesome-all.css" rel="stylesheet">
    <link href="css/swiper.css" rel="stylesheet">
    <link href="css/magnific-popup.css" rel="stylesheet">
    <link href="css/sstyle.css" rel="stylesheet">
    <link href="css/mystyle.css" rel="stylesheet">

    <!-- Favicon  -->
    <link rel="icon" href="images/logos.png">
</head>
<body data-spy="scroll" data-target=".fixed-top">

    <!-- Preloader -->
    <div class="spinner-wrapper">
        <div class="spinner">
            <div class="bounce1"></div>
            <div class="bounce2"></div>
            <div class="bounce3"></div>
        </div>
    </div>
    <!-- end of preloader -->



    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark navbar-custom fixed-top" style="background-color: 	#004d25; ">
        <div class="container">

            <!-- Text Logo - Use this if you don't have a graphic logo -->
            <!-- <a class="navbar-brand logo-text page-scroll" href="index.html">Tivo</a> -->

            <!-- Image Logo -->
            <a class="navbar-brand logo-image" href="home.php"><img src="images/Minsu.png" alt="alternative" style="height:50px; width: 50px; "></a>

            <!-- Mobile Menu Toggle Button -->
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-awesome fas fa-bars"></span>
                <span class="navbar-toggler-awesome fas fa-times"></span>
            </button>
            <!-- end of mobile menu toggle button -->

            <div class="collapse navbar-collapse" id="navbarsExampleDefault">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item">
                        <a class="nav-link page-scroll" href="home.php">HOME <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link page-scroll" href="#video">FEATURES</a>
                    </li>

                    <!-- Dropdown Menu -->
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle page-scroll" href="profile.php" id="navbarDropdown" role="button" aria-haspopup="true" aria-expanded="false">PROFILE</a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="gallery.php"><span class="item-text">GALLERY</span></a>
                            <div class="dropdown-items-divide-hr"></div>
                            <a class="dropdown-item" href="files.php"><span class="item-text">FILES</span></a>
                            <div class="dropdown-items-divide-hr"></div>
                            <a class="dropdown-item" href="evaluations.php"><span class="item-text">EVALUATIONS</span></a>
                            <!--<div class="dropdown-items-divide-hr"></div>-->
                            <!--<a class="dropdown-item" href="min-sahe.php"><span class="item-text">MIN-SAHE</span></a>-->
                        </div>
                    </li>
                    <!-- end of dropdown menu -->

                    <li class="nav-item">
                        <a class="nav-link page-scroll" href="announcements.php">ANNOUNCEMENTS</a>
                    </li>
                </ul>
                <span class="nav-item">
                    <a class="btn-outline-sm" href="logout.php">LOG OUT</a>
                </span>
            </div>
        </div> <!-- end of container -->
    </nav> <!-- end of navbar -->
    <!-- end of navigation -->

      <!-- Header -->
    <header id="header" class="ex-header">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h1><?php echo $_SESSION['office']; ?></h1>
                </div> <!-- end of col -->
            </div> <!-- end of row -->
        </div> <!-- end of container -->
    </header> <!-- end of ex-header -->
    <!-- end of header -->
    <br>
    <!-- profile header  -->
    <!-- end profile header -->

    

    <!-- uploaded pics of events and programs or projects -->
    <!-- this should be from all the uploaded pics and will be from the database -->

    <div class="container" >
        <div class="row">
            <div class="col-lg-12">

                <!-- Card -->
                <div class="card"  style="border: 0px solid #fff;">
                    <div class="card-image">
                        <?php
                        while ($row = mysqli_fetch_array($profile_pic)) {
                            echo "<a href='../profile_pic/".$row['Profile_Picture']."' style='height:100px; width:100px; padding: 5px;' data-lightbox='roadtrip' title='Testtttt' target='_blank'><img  style='height:100px; width: 100px; object-fit:cover; border: 2px solid #a1a1a1; border-radius: 50%; ' src='../profile_pic/".$row['Profile_Picture']."' alt='Portfolio Item' ></a>";
                        }
                        ?>
                    </div>
                    <div style="float:left; margin-top: -100px; margin-left: 120px; ">
                        <form method="POST" action="upload_announcement.php" enctype="multipart/form-data">
                            <input type="hidden" name="size" value="1000000">
                            <div >
                                <input type="text" name="event" style="border-radius: 5px; border-color: gray; border-width: thin; padding: 8px; ; width: 100%; height: auto; margin-top:auto;" value="Event:" placeholder="Name of the Event" required>
                                <br>
                                <input type="text" name="venue"  style="margin-top: 5px; border-radius: 5px; border-color: gray; border-width: thin; padding: 8px; width: 100%; height: auto; " value="Venue:" placeholder="Venue of the Event" required>
                                <hr>
                                <label for="due_date"> From:
                                <input name="due_date" class="textbox-n" type="date"  id="date" style="width:auto; height: auto; margin-top:auto;cursor: pointer; padding: 8px; border-style: solid; border-radius: 10px; border-width: thin;" required>
                                </label>
                                <label for="to_date"> To:    
                                 <input name="to_date" class="textbox-n" type="date"  id="date" style="width:auto; height: auto; margin-top:auto;cursor: pointer; padding: 8px; border-style: solid; border-radius: 10px; border-width: thin;" required>
                                </label>
                                <hr>
                                <textarea 
                                id="text" 
                                cols="40" 
                                rows="4" 
                                name="description" 
                                placeholder="Say something about the event..." 
                                style="border-radius: 5px; width:100%; border:0.01rem solid #dddddd; background-color:	#dddddd; padding:10px; 	resize: none;" required></textarea>
                            </div>
                            
                            <div>
                                <input type="hidden" name="date_announced" value="<?php
                                                // Set the new timezone
                                date_default_timezone_set('Asia/Manila');
                                $date = date('d-m-y h:i:s A');
                                echo $date;
                            ?>">
                        </div>
                        <div>
                            <div class="image-upload">
                                <label for="file-input">
                                    <img id="previewImg" src="icons/photo.svg" style="width: 40px; height: 40px; cursor:pointer;"/>
                                    <label >Upload photo</label>
                                </label>

                                <input id="file-input" type="file" onchange="previewFile(this);" style="opacity: 0; margin-left: -120px;"  name="announcement_img" required>
                            </div>
                            <script>
                                function previewFile(input){
                                    var file = $("input[type=file]").get(0).files[0];

                                    if(file){
                                        var reader = new FileReader();

                                        reader.onload = function(){
                                            $("#previewImg").attr("src", reader.result);
                                        }

                                        reader.readAsDataURL(file);
                                    }
                                }
                            </script>

                            
                        </div>
                        <br>
                        <div style="float:right; margin-top:auto;">
                            <button type="submit" name="upload" style=" width:10rem; background-color:#4267b2; color: white; border: none; padding: 7px;" >POST</button>
                        </div>
                    </form>
                </div>
            </div>
            <!-- end of card -->
        </div>
    </div>
</div>
<hr>
                        
<!-- announcement panel -->
<div class=" row" style=" height:37rem; width: auto; margin:1rem; overflow:auto;">
    <?php
    while ($row = mysqli_fetch_array($retrieve_announcements)) {
        echo "<div class='post_card' style='box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); transition: 0.3s; margin: 1%; 	width: 290px; height:550px; '>";
        echo "<a href='update_announcements.php?ID=".$row['announcement_id']. "' style='float:right;'><image src='icons/edit.svg'  style=' height: 20px;width: 20px;'></a>";
        echo "<a href='announce_edit_delete.php?delete_announcement=".$row['announcement_id']. "&img_ann=".$row['announcement_img']. "' style='float:right;'><image src='icons/trash-solid.svg'  style=' height: 20px;width: 20px;'></a>";
        echo "<a href='new_announcements/".$row['announcement_img']."' target='_blank' style='height:100px; width:100px; padding: 5px;' data-lightbox='roadtrip' title='".$row['announcement_text']."'><img style='height:20%; width:50%; object-fit:cover; border: 2px solid #a1a1a1; margin-left:auto; margin-right:auto; display:flex; ' src='new_announcements/".$row['announcement_img']."' alt='".$row['announcement_text']."'></a>";
        echo " <div class='post_container'>";
        echo "<p>".$row['announcement_text']."</p> ";
        echo "<p>".$row['announcement_venue']."</p> ";
        echo "<p>From: ".$row['announcement_date']."</p> ";
        echo "<p>To: ".$row['to_date']."</p> ";
                                     $text=substr($row['description'],0,20)."...";
                             echo "<pre style='
                             white-space: pre-wrap;
                             white-space: -moz-pre-wrap;
                             white-space: -pre-wrap;
                             white-space: -o-pre-wrap;
                             word-wrap: break-word;
                             font-family: Open Sans, sans-serif;'>".$text."
                             </pre>";
        echo "<a href='read_announcement.php?announce=".$row['announcement_id']. "' ><strong>See More </strong></a>";
        echo "</div>";
        echo "</div>";
    }
    ?>
</div>                  
<!-- end announcement panel -->

<!-- Footer -->
<svg class="footer-frame" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1920 79"><defs><style>.cls-2{fill:#11823b;}</style></defs><title>footer-frame</title><path class="cls-2" d="M0,72.427C143,12.138,255.5,4.577,328.644,7.943c147.721,6.8,183.881,60.242,320.83,53.737,143-6.793,167.826-68.128,293-60.9,109.095,6.3,115.68,54.364,225.251,57.319,113.58,3.064,138.8-47.711,251.189-41.8,104.012,5.474,109.713,50.4,197.369,46.572,89.549-3.91,124.375-52.563,227.622-50.155A338.646,338.646,0,0,1,1920,23.467V79.75H0V72.427Z" transform="translate(0 -0.188)"/></svg>
<div class="footer">
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <div class="footer-col first">
                    <h4>About Tivo</h4>
                    <p class="p-small">We're passionate about designing and developing one of the best marketing apps in the market</p>
                </div>
            </div> <!-- end of col -->
            <div class="col-md-4">
                <div class="footer-col middle">
                    <h4>Important Links</h4>
                    <ul class="list-unstyled li-space-lg p-small">
                        <li class="media">
                            <i class="fas fa-square"></i>
                            <div class="media-body">Our business partners <a class="white" href="#your-link">startupguide.com</a></div>
                        </li>
                        <li class="media">
                            <i class="fas fa-square"></i>
                            <div class="media-body">Read our <a class="white" href="terms-conditions.html">Terms & Conditions</a>, <a class="white" href="privacy-policy.html">Privacy Policy</a></div>
                        </li>
                    </ul>
                </div>
            </div> <!-- end of col -->
            <div class="col-md-4">
                <div class="footer-col last">
                    <h4>Contact</h4>
                    <ul class="list-unstyled li-space-lg p-small">
                        <li class="media">
                            <i class="fas fa-map-marker-alt"></i>
                            <div class="media-body">22 Innovative, San Francisco, CA 94043, US</div>
                        </li>
                        <li class="media">
                            <i class="fas fa-envelope"></i>
                            <div class="media-body"><a class="white" href="mailto:contact@tivo.com">contact@tivo.com</a> <i class="fas fa-globe"></i><a class="white" href="#your-link">www.tivo.com</a></div>
                        </li>
                    </ul>
                </div>
            </div> <!-- end of col -->
        </div> <!-- end of row -->
    </div> <!-- end of container -->
</div> <!-- end of footer -->
<!-- end of footer -->


<!-- Copyright -->
<div class="copyright">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <p class="p-small">Copyright © 2020 <a href="https://inovatik.com">Template by Inovatik</a></p>
            </div> <!-- end of col -->
        </div> <!-- enf of row -->
    </div> <!-- end of container -->
</div> <!-- end of copyright -->
<!-- end of copyright -->


<!-- Scripts -->
<script src="js/jquery.min.js"></script> <!-- jQuery for Bootstrap's JavaScript plugins -->
<script src="js/popper.min.js"></script> <!-- Popper tooltip library for Bootstrap -->
<script src="js/bootstrap.min.js"></script> <!-- Bootstrap framework -->
<script src="js/jquery.easing.min.js"></script> <!-- jQuery Easing for smooth scrolling between anchors -->
<script src="js/swiper.min.js"></script> <!-- Swiper for image and text sliders -->
<script src="js/jquery.magnific-popup.js"></script> <!-- Magnific Popup for lightboxes -->
<script src="js/validator.min.js"></script> <!-- Validator.js - Bootstrap plugin that validates forms -->
<script src="js/scripts.js"></script> <!-- Custom scripts -->
</body>
</html>
