@model DormXpress.ViewModels.DormitoryViewViewModel

@{
    ViewBag.Title = Model.DormitoryInformation.Rows[0]["Address"] + " | DormXpress.com";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<style>
    body {
        background: rgb(233, 235, 238);
    }
</style>

<div class="container-fluid" style="margin-top: 20px;">
    <div class="row">
        <div class="col-md-8 col-xs-12">

            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">Dormitory information</h4>
                </div>
                <div class="panel-body">

                    <div class="form-group">
                        <div id="GoogleMaps" style="height: 500px; max-width: inherit;"></div>
                    </div>
                    <hr/>
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="form-group">
                                <label style="color: cornflowerblue">@Model.DormitoryInformation.Rows[0]["Address"]</label>
                                <p>
                                    posted on @Model.DormitoryInformation.Rows[0]["PostDate"] in <strong>Room</strong>
                                </p>
                            </div>
                            <div class="form-group">
                                <p style="white-space: pre-line">
                                    @Model.DormitoryInformation.Rows[0]["Description"]
                                </p>
                            </div>
                        </div>
                    </div>
                    <hr style="margin-bottom: 3px" />
                </div>


                <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAp_GkAczL2VGgNGlw-M89nc4UINioGD5c&callback=initMap"></script>

                <script>
                    var AddressInfo = '<div id="content">' +
                        '<p><b>@Model.DormitoryInformation.Rows[0]["Address"]</b></p>' +
                        '</div>';

                    var infowindow = new google.maps.InfoWindow({
                        content: AddressInfo
                    });

                    function initialize() {
                        var myLatlng = new google.maps.LatLng(@Model.DormitoryInformation.Rows[0]["Latitude"], @Model.DormitoryInformation.Rows[0]["Longitude"]);
                        var mapOptions = {
                            zoom: 17,
                            center: myLatlng
                        }
                        var map = new google.maps.Map(document.getElementById("GoogleMaps"), mapOptions);

                        var marker = new google.maps.Marker({
                            position: myLatlng,
                        });

                        marker.setMap(map);
                        infowindow.open(map, marker);

                        marker.addListener('click', function() {
                            infowindow.open(map, marker);
                        });
                    }
                    google.maps.event.addDomListener(window, 'load', initialize);
                </script>


            </div>
        </div>
        <div class="col-md-4 col-xs-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">Profile view</h4>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="centerblock">
                                <img src="~/Images/User/image.png" class="user" />
                            </div>
                            <p></p>
                            <div class="centerblock">
                                <label>@Model.DormitoryInformation.Rows[0]["FirstName"] @Model.DormitoryInformation.Rows[0]["LastName"]</label>
                            </div>
                            <div class="centerblock">
                                <p style="font-size: 13px; color: #A8A8A8"><span class="glyphicon glyphicon-envelope"></span> @Model.DormitoryInformation.Rows[0]["Email"]</p>
                            </div>
                            <div class="centerblock">
                                <p style="font-size: 13px; color: #A8A8A8"><span class="glyphicon glyphicon-earphone"></span> @Model.DormitoryInformation.Rows[0]["ContactNo"]</p>
                            </div>
                        </div>
                    </div>
                    <hr />

                    <div class="row">
                        <div class="col-xs-10 col-xs-offset-1">
                            @using (Html.BeginForm("Reserve", "Reservation", FormMethod.Post))
                            {
                                <div class="form-group">

                                    @if (Session["Usertype"] == (object) 2)
                                    {
                                        <label class="centerblock" style="margin-bottom: 20px">Request for a reservation?</label>
                                        @Html.TextAreaFor(m => m.Reserve.Message, new { @class="form-control", style="min-height: 100px; max-width: inherit", placeholder="Write your message..." })
                                        @Html.ValidationMessageFor(m => m.Reserve.Message)
                                        <button type="submit" class=" form-control btn btn-success" style="margin-top: 12px">Submit</button>
                                    }
                                    else if (Session["Usertype"] != null)
                                    {

                                    }
                                    else
                                    {
                                        <label class="centerblock" style="margin-bottom: 20px">Request for a reservation?</label>
                                        <div class="centerblock">
                                            <p style="text-align: center">You're not logged in to request for a reservation.</p>
                                        </div>
                                        <div class="centerblock">
                                            <a href="/Login?redirecttocontroller=Dormitory&redirecttoaction=View&id=@Model.ID"><strong>Click here to log in.</strong></a>
                                        </div>
                                        <div class="centerblock">
                                            <h5>Don't have an account? <a href="/Register"><strong>Register here.</strong></a></h5>
                                        </div>
                                    }
                                </div>
                            }
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

@section scripts
{
    @Scripts.Render("~/bundles/jqueryval")
}