@model AsianPaints.Web.Models.ExtraOrdinary
@{
    ViewBag.Title = "GET YOUR FREE KIT";
    Layout = "~/Views/Shared/_LayoutForExtraOrdinary.cshtml";
    //Layout = "~/Views/Shared/_LayoutForStencil.cshtml";
}

<script src="~/Scripts/modernizr.custom.js"></script>
<!-- Roll Hoer for Image -->
<script src="~/Scripts/toucheffects.js"></script>
<script src="~/Scripts/responsive-slider.js"></script>
<link href="~/Content/css/custom.css" rel="stylesheet" />

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Content/Notification/jquery.noty.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/Notification/default.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/Notification/notification.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/Notification/inline.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/Notification/center.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/Notification/top.js")" type="text/javascript"></script>

<div id="body">
    <section class=" main-content clear-fix">
        <div class="content-wrapper">

            <div class="jumbotron royle_product" style="background-color: #d4aa65; padding-top: 1px;">
                <div class="container">
                    <div class="col-md-5" style="text-align: right;">
                        <img src="https://asianpaints.com/royale/extraordinaryContent/Order_kit.png" style="width: 80%; margin-top: -12%;"
                            class="mg-responsive" alt="order kit">
                    </div>
                    <div class="col-md-7">
                        <div class="col-md-10" style="text-align: center;padding-top: 20px;">
                            Fill in your details to order your complimentary copy.
                        
                        </div>
                        <div class="col-md-12" >
                            <img src="https://asianpaints.com/royale/extraordinaryContent/images/line.png" style="width: 84%;margin-bottom: 10px;">
                        </div>

                      @*<form class="clearfix" role="form" method="post">*@
                            <div class="form-group clearfix">
                                <label for="inputEmail3" class="col-sm-2 control-label">Name </label>
                                <div class="col-sm-8">
                                    @*<input type="text" class="form-control" id="inputEmail3" placeholder="Full Name ">*@
                                    @Html.TextBoxFor(m => m.Name,new { @class = "form-control" ,id = "Name"})
                                    @Html.ValidationMessageFor(m => m.Name)
                                </div>
                            </div>
                            <div class="form-group clearfix">
                                <label for="inputPassword3" class="col-sm-2 control-label">Mobile </label>
                                <div class="col-sm-8">
                                    @*<input type="text" class="form-control" id="inputPassword3" placeholder="Mobile No ">*@
                                    @Html.TextBoxFor(m => m.Mobile, new { @class = "form-control", id = "Mobile" })
                                    @Html.ValidationMessageFor(m => m.Mobile)
                                </div>
                            </div>
                            <div class="form-group clearfix">
                                <label for="inputPassword3" class="col-sm-2 control-label">Email Id </label>
                                <div class="col-sm-8">
                                    @*<input type="email" class="form-control" id="inputPassword3" placeholder="Email Id">*@
                                    @Html.TextBoxFor(m => m.EmailId, new { @class = "form-control", id = "EmailId" })
                                    @Html.ValidationMessageFor(m => m.EmailId)
                                </div>
                            </div>

                            <div class="form-group clearfix" style="display: none;">
                                <label for="inputPassword3" class="col-sm-2 control-label">State </label>
                                <div class="col-sm-8">
                                    @*@Html.TextAreaFor(m => m.Address, new { placeholder="Address",@class="form-control"})*@
                                    <select class="form-control" onchange="onStateSelect(this)">
                                        <option>Select State..</option>
                                        @foreach (var state in Model.States)
                                        { 
                                            <option value="@state.ID">@state.StateName</option>
                                        }
                                    </select>
                                    <input type="hidden" value="" name="State" id="stateId" />
                                    @*@Html.ValidationMessageFor(m => m.Address)*@
                                </div>
                            </div>
                            <div class="form-group clearfix" style="display: none;">
                                <label for="inputPassword3" class="col-sm-2 control-label">City<sup><small>*</small></sup> </label>
                                <div class="col-sm-8">
                                    @*@Html.TextAreaFor(m => m.Address, new { placeholder="Address",@class="form-control"})*@
                                    <select id="cityList" class="form-control" name="City">
                                        @*   @foreach (var state in Model.Cities)
                        { 
                            <option value="@state.CityName">@state.CityName</option>
                        }*@
                                    </select>
                                    @*@Html.ValidationMessageFor(m => m.Address)*@
                                </div>
                            </div>

                            <div class="form-group clearfix">
                                <label for="inputPassword3" class="col-sm-2 control-label">Address </label>
                                <div class="col-sm-8">
                                    @Html.TextAreaFor(m => m.Address, new { @class = "form-control", id = "Address" })
                                    @Html.ValidationMessageFor(m => m.Address)
                                </div>
                            </div>
                            <div class="form-group clearfix" style="display: none;">
                                <label for="inputPassword3" class="col-sm-2 control-label">Pin Code </label>
                                <div class="col-sm-8">
                                    @Html.TextBoxFor(m => m.Pincode, new { placeholder = "Pin Code ", @class = "form-control" })
                                    @Html.ValidationMessageFor(m => m.Pincode)
                                </div>
                            </div>
                            <div class="form-group clearfix">
                                <div class="col-sm-offset-2 col-sm-6">
                                    <input type="submit" onclick="Save();" style="background-color: transparent; border: 2px solid; float: right;"
                                        value="Order now">
                                </div>
                            </div>
                        @*</form>*@
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

<script>
    $(document).ready(function () {
        initStencilPage();
    });
    function initStencilPage() {
        var newHeigh = (window.innerHeight - 130);
        var elm = $(".content-wrapper.get-kit-background");
        if (newHeigh > elm.height()) {
            elm.height((newHeigh + "px"));
        }
    }
    function onStateSelect(elm) {

        $("#stateId").val(elm.options[elm.selectedIndex].text);
        $.ajax({
            //url: "GetCitiesByStateId",
            url: '@Url.Action("GetCitiesByStateId", "extraordinary")',
            data: { "stateId": elm.value },
            success: function (result) {

                var options = "<option>Select City..</option>";
                for (var i = 0; i < result.length; i++) {
                    options += "<option value='" + result[i].CityName + "'>" + result[i].CityName + "</option>";
                }
                $("#cityList").html("").html(options);

            },
            error: function () {
                $("#cityList").html("").html("");
            }
        });
    }

    function Save() {
        var data1 = {

            "Name": $("#Name").val(),
            "Mobile": $("#Mobile").val(),
            "EmailId": $("#EmailId").val(),
            "Address": $("#Address").val(),
        };
        var m = '@Html.Raw(Json.Encode(Model))';
        $.ajax({
            type: "Post",
            url: '@Url.Action("ExtraOrdinary", "extraordinary")',
            data: data1,
            success: function (result) {
                if (result == "success") {
                    $("#Name").val('');
                    $("#Mobile").val('');
                    $("#EmailId").val('');
                    $("#Address").val('');
                    message('notificationUp', 'success', 'Thank you for ordering Asian Paints Royale Kit.');
                } else {
                    message('notificationUp', 'error', 'Please provide correct data.');
                }
            },
            error: function () {
                message('notificationUp', 'error', 'Please provide correct data.');
            }
        });
    }
</script>
