@include('include/header_new')
<section >
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <ol class="breadcrumb">
                    <li><a href="/home">Dashboard</a></li>
                    <li class="active">Announcements </li>
                </ol>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <h1 class="page-title">Announcements <small class="text_black fb_300">(Sort and Select Recipients)</small></h1>
            </div>
        </div>
        <!-- filter form -->
        <form method="post">
            <div class="row mar_t10 mar0 filter form"> 
                <div class="col-md-8 col-sm-8 col-xs-12 pad_r20">
                    <div class="form-group">
                        <label class="ft_17"> By University </label>
                        <select class="form-control" name="agency" id="agency" onchange="agency_name(this.value)">
                            <option value="">All</option> 
                            @foreach($agencys as $agency) 
                            <option value="{{$agency->UID}}" {{($filter_agency==$agency->UID)?'selected':''}} >{{$agency->NAME}}</option> 
                            @endforeach 
                        </select>
                    </div>
                </div>
                <div class="col-md-4 col-sm-4 col-xs-12 pad0">
                    <div class="form-group">
                        <label class="ft_17">&nbsp;</label>
                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
                        <button name="filter" class="wid100 mar_t0">Search</button>
                    </div>
                </div>
            </div>
        </form>
        <div class="row announcement_chatbox">
            <div class="col-md-9 col-sm-8 col-xs-12 pad0">
                <div class="chat_window">
                    <form name="announce_form" method="post" enctype="multipart/form-data" onsubmit="return submit_annoucement();">
                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
                        <div class="chat_box">
                            <div class="chat_area">
                                <ul>
                                    @foreach($announcements as $announcement)
                                    @if($users[$announcement->user_id]->user_image != '') 
                                    @php 
                                    $user_img = @unserialize($users[$announcement->user_id]->user_image);
                                    $img_val = "images/profile/$user_img[0]"; 
                                    @endphp
                                    @else @php $img_val = 'images/photo.jpg'; @endphp
                                    @endif
                                    
                                    @php 
                                    $announce_date_array = array();
                                    $announce_date = date('M d, Y',strtotime($announcement->date)); @endphp
                                    
                                    @if(!in_array($announce_date,$announce_date_array)) 
                                    @php 
                                    $announce_date_array[]=$announce_date; 
                                    @endphp
                                    <p class="date_divider"><span class="text_blue fb_500">{{$announce_date}}</span></p>
                                    @endif 
                                    
                                    <!-- left comment area -->
                                    <li class="row left-comment text-left">
                                        <div class="col-md-1 col-sm-2 col-xs-2"> <img src="{!! asset($img_val) !!}" alt="profile icon" class="profile-image"> </div>
                                        <div class="col-md-11 col-sm-10 col-xs-9 pad_l20">
                                            <div class="comment-info">
                                                <span class="close" style="right: -11px !important;top: -11px;position: absolute;color: #000;opacity: 1;"><i onclick="remove_announcement('{{$announcement->id}}')" class="fa fa-times-circle"></i></span>
                                                <p><span class="chat-username">{{$announcement->user_name}}</span><small class="chat-datelocation"><i>
                                                    12:00 am                                                    </i></small></p>
                                                <span class="clearfix"></span> @if($announcement->attachement=='')
                                                <p class="chat-content mar_tb10">{{$announcement->comments}}</p>
                                                @else
                                                @php $image= explode('/', $announcement->attachement);
                                                $announce_image = (isset($image[1]))?$image[1]:'picture'; @endphp
                                                <p class="chat-content mar_tb10" align="right"><a href="{!! asset('announcement/'.$announcement->attachement) !!}" target="_blank" ><i class="fa fa-paperclip mar_r5"></i>{{$announce_image}}</a></p>
                                                @endif </div>
                                        </div>
                                    </li>
                                    @endforeach 
                                    <!-- left comment area -->
                                </ul>
                            </div>
                            <div class="comment-box">
                                <div class="row">
                                    <div class="col-md-8 col-sm-8 col-xs-7 pad_r0">
                                        <div class="form-group mar0">
                                            <textarea class="form-control" name="announce_text" id="announce_text" data-emojiable="true"></textarea>
                                        </div>
                                    </div>
                                    {{--
                                    <div class="col-md-1 col-sm-1 col-xs-2 mar_t10"> <span><i class="fa  fa-smile-o text_blue"></i></span>
                                        <div class="custom-fileupload mar_t5">
                                            <label> <i class="fa fa-paperclip "></i>
                                                <input type="file" class="form-control hidden" >
                                            </label>
                                        </div>
                                    </div>
                                    --}}
                                    <div class="col-md-3 col-sm-3 col-xs-3 form pad_l0"> 
                                        <input type="hidden" name="agency_hidden" id="agency_hidden" />
                                        <button id="submit_announce" name="submit_announce" class="button mar0" data-announcementstaus="Please check Recipients and Proof Message">Send</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="col-md-3 col-sm-4 col-xs-12 pad0">
                <div class="chat_userlist">
                    <h3 class="text_blue mar0 pad0 fb_300">Announcement Status</h3>
                    <p id="announcement_satus">Please carefully review intended reciepients and proof message, then press send</p>
                    <div class="text-center announcement_button">
                        <button id="pre_send" class="button" type = "button" data-announcementstaus="Please check Recipients and Proof Message" >Preview Announcement</button>
                        <button onclick="reset_announcement()" class="button" type = "button" data-announcementstaus="Page will go revert back to the starting page , all sorts go to neutral position">Reset</button>
                        <input type="hidden" value="0" name="pre_send_status" id="pre_send_status" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@include('include/footer_new') 
<script type="text/javascript">
function submit_annoucement() {
    var announce_text = $("#announce_text").val(); 
    var agency = $("#agency_hidden").val();
    var pre_send_status = $("#pre_send_status").val();
    if (announce_text == '') {
        sweetAlert("Error", "Please fill announcement", "error");
        //alert("Please fill announcement");
        $("#announce_text").focus();
        return false;
    }
    if (pre_send_status == 0) {
        sweetAlert("Error", "Please check Recipients, and Proof Message and click 'Preview Announcement' button, then click 'Send'", "error"); 
        return false;
    } 
} 

function agency_name(name) {
    $("#agency_hidden").val(name);
}

function reset_announcement() {
    $("#announce_text").val('');
    $("#announcement_satus").attr('data-announcementstaus','Please check Recipients, and Proof Message and click "Preview Announcement" button, then click "Send"');
    $("#announcement_satus").html('Please carefully review intendned reciepients and proof message, then press send');
}

$("#pre_send").click(function () {
    var announce_text=$("#announce_text").val();
    if(announce_text=='')
        sweetAlert("Error", "Please fill announcement", "error");
        //alert('Please fill announcement');
    else {
        $("#pre_send_status").val(1);
        $('#announcement_satus').html(announce_text);
        $("#submit_announce").attr('data-announcementstaus', 'Message Has Been Sent');
    }
});

//slim scroll for attachment panels --> 
$('.attachment_list').slimScroll({
    position: 'right',
    height: '145px',
    railVisible: true,
    alwaysVisible: false
});

$('.chat_area').slimScroll({
    position: 'right',
    height: '300px',
    start: 'bottom',
    railVisible: true,
    alwaysVisible: false

}); 
</script> 
<script type="text/javascript">
$(document).ready(function () {
    var maxHeight = 0;
    for (i = 1; i <= 2; i++) {
        $("#assign_box_itmes" + i).each(function () {
            $(this).find(".item_info ul li ul").each(function () {
                if ($(this).height() > maxHeight) {
                    maxHeight = $(this).height();
                }
            });
            $(this).find(".item_info ul li ul").height(maxHeight);

        });
    }
});
</script> 
<script type="text/javascript">
    $("#submit_announce").click(function(){
        var announcement_satus = $(this).attr("data-announcementstaus");
        $("#announcement_satus").html(announcement_satus);
    }); 
</script>
<link rel="stylesheet" type="text/css" href="{!! asset('emoji/css/jquery.emojipicker.css') !!}">
<script type="text/javascript" src="{!! asset('emoji/js/jquery.emojipicker.js') !!}"></script>
<link rel="stylesheet" type="text/css" href="{!! asset('emoji/css/jquery.emojipicker.a.css') !!}">
<script type="text/javascript" src="{!! asset('emoji/js/jquery.emojis.js') !!}"></script> 
<script type="text/javascript">
    $(document).ready(function(e) {
        $('#announce_text').emojiPicker({
            height: '300px',
            width: '450px'
        });
    });
</script>
<style>
    .emojiPicker { top: 320px !important;}
    .shortcode{display:none;}
    label.myLabel input[type="file"] {
        position: fixed;
        top: -1000px;
    }
    /***** Example custom styling *****/
    .myLabel {
        display: inline-block;
        padding:20px 0;
    }
    #uploadFile{
        margin: 5px;
        display: none;
        padding-left: 5px;
    }
    .emojiPickerIcon { width:30px !important; height:30px !important; background-color:#fff !important; top:1px !important; right:1px !important;}
    .msg_upload_icon{ position:absolute; right:0; bottom:0;} .msg_upload_icon label i{ font-size:21px !important;}
    .chat_box .comment-box .form-control {
        height: 60px !important; 
    } 
</style>
<script>
$(window).load(function(){
    $("#file").change( function(e) {
        sweetAlert({
            title: "Are you sure?",
            text: "Want to upload this file?",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "Yes, upload it!",
            closeOnConfirm: false
        },
        function()
        {
            $("#announce_text").val('&nbsp;');
            $("#pre_send_status").val(1);
            $("#submit_announce").click();
        });
    });
});

function remove_announcement(id) {
    sweetAlert({
        title: "Are you sure?",   
        text: "Want to delete announcement?",   
        type: "warning",   
        showCancelButton: true,   
        confirmButtonColor: "#DD6B55",   
        confirmButtonText: "Yes, Delete it!",   
        closeOnConfirm: false 
    }, 
    function()
    {
        $.ajax({
            url: '/remove_announcement', // Url to which the request is send
            type: "POST",             // Type of request to be send, called as method
            data:'aid='+id+'&_token={{csrf_token()}}', // Data sent to server, a set of key/value pairs (i.e. form fields and values) 
            success: function(data)   // A function to be called if request succeeds
            { 
                if(data=='1')  {
                    sweetAlert("Success", "Announcement Removed Successfully", "success");
                    window.location.href = "announcements";
                } else {
                    sweetAlert("Unable to Delete", "Once Admin can delete Announcements", "error");
                }
            }
        });
    });
}
</script>