@model RegisterModel
@{
    ViewBag.Title = "Course Registration";
    ViewBag.MetaKeywords = "Registration,Course,admission,guidance,tajweed,quran,grammer,arabic";
    ViewBag.MetaDescription = "Course registration learn arabic understand quran tajweed arabic grammer";
}

<div id="register-message" class="gdlr-core-pbf-wrapper" style="padding: 115px 0px 40px 0px;display:none">
    <div class="gdlr-core-pbf-background-wrap" style="background-color: #f3f3f3 ;"></div>
    <div class="gdlr-core-pbf-wrapper-content gdlr-core-js ">
        <div class="gdlr-core-pbf-wrapper-container clearfix gdlr-core-container">
            <div class="gdlr-core-pbf-column gdlr-core-column-60 gdlr-core-column-first">
                <div class="gdlr-core-pbf-column-content-margin gdlr-core-js ">
                    <div class="gdlr-core-pbf-column-content clearfix gdlr-core-js " style="max-width: 760px ;">
                        <div class="gdlr-core-pbf-element">
                            <div class="gdlr-core-title-item gdlr-core-item-pdb clearfix  gdlr-core-center-align gdlr-core-title-item-caption-bottom gdlr-core-item-pdlr" style="padding-bottom: 60px ;">
                                <div class="gdlr-core-title-item-title-wrap clearfix">
                                    <h3 class="gdlr-core-title-item-title gdlr-core-skin-title " style="font-size: 39px ;">You are successfully registered in the course</h3>
                                </div><span class="gdlr-core-title-item-caption gdlr-core-info-font gdlr-core-skin-caption" style="font-size: 19px ;font-style: normal ;text-transform: uppercase ;">Thank you.</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="register-form">
    @using (Ajax.BeginForm("Index", "Register", new AjaxOptions { HttpMethod = "POST", OnSuccess = "OnSuccess" }, new { id = "search-form" }))
    {
        <div class="gdlr-core-pbf-wrapper " style="padding: 115px 0px 40px 0px;">
            <div class="gdlr-core-pbf-background-wrap" style="background-color: #f3f3f3 ;"></div>
            <div class="gdlr-core-pbf-wrapper-content gdlr-core-js ">
                <div class="gdlr-core-pbf-wrapper-container clearfix gdlr-core-container">
                    <div class="gdlr-core-pbf-column gdlr-core-column-60 gdlr-core-column-first">
                        <div class="gdlr-core-pbf-column-content-margin gdlr-core-js ">
                            <div class="gdlr-core-pbf-column-content clearfix gdlr-core-js " style="max-width: 760px ;">
                                <div class="gdlr-core-pbf-element">
                                    <div class="gdlr-core-title-item gdlr-core-item-pdb clearfix  gdlr-core-center-align gdlr-core-title-item-caption-bottom gdlr-core-item-pdlr" style="padding-bottom: 60px ;">
                                        <div class="gdlr-core-title-item-title-wrap clearfix">
                                            <h3 class="gdlr-core-title-item-title gdlr-core-skin-title " style="font-size: 39px ;">Register for the course</h3>
                                        </div>
                                        <span class="gdlr-core-title-item-caption gdlr-core-info-font gdlr-core-skin-caption" style="font-size: 19px ;font-style: normal ;text-transform: uppercase ;">and we will get back to you.</span>
                                    </div>
                                </div>
                                <div class="gdlr-core-pbf-element">
                                    <div class="gdlr-core-contact-form-7-item gdlr-core-item-pdlr gdlr-core-item-pdb ">
                                        <div role="form" class="wpcf7" id="wpcf7-f1979-p1964-o1" lang="en-US" dir="ltr">
                                            <div class="screen-reader-response"></div>
                                            <div class="quform-elements">
                                                <div class="quform-element">
                                                    <p>
                                                        Select Course (required)
                                                        <br>
                                                        <span class="wpcf7-form-control-wrap course">
                                                            @Html.DropDownListFor(m => m.CourseId, Model.CourseList, "Select Course", new { @class = "input1" })
                                                            @Html.ValidationMessageFor(m => m.CourseId)
                                                        </span>
                                                    </p>
                                                </div>
                                                <div class="quform-element">
                                                    <p>
                                                        Select Class (required)
                                                        <br>
                                                        <span class="wpcf7-form-control-wrap course">
                                                            @Html.DropDownListFor(m => m.ClassId, new SelectList(""), "Select Class", new { @class = "input1" })
                                                            @Html.ValidationMessageFor(m => m.ClassId)
                                                        </span>
                                                    </p>
                                                </div>
                                                <div class="quform-element">
                                                    <p>
                                                        First Name (required)
                                                        <br>
                                                        <span class="wpcf7-form-control-wrap first-name">
                                                            @Html.TextBoxFor(m => m.FirstName, new { @class = "input1", @aria_required = "true", @aria_invalid = "false" })
                                                            @Html.ValidationMessageFor(m => m.FirstName)
                                                        </span>
                                                    </p>
                                                </div>
                                                <div class="quform-element">
                                                    <p>
                                                        Last Name(required)
                                                        <br>
                                                        <span class="wpcf7-form-control-wrap last-name">
                                                            @Html.TextBoxFor(m => m.LastName, new { @class = "input1", @aria_required = "true", @aria_invalid = "false" })
                                                            @Html.ValidationMessageFor(m => m.LastName)
                                                        </span>
                                                    </p>
                                                </div>
                                                <div class="quform-element">
                                                    <p>
                                                        Father/Guardian Name(required)
                                                        <br>
                                                        <span class="wpcf7-form-control-wrap your-email">
                                                            @Html.TextBoxFor(m => m.FatherName, new { @class = "input1", @aria_required = "true", @aria_invalid = "false" })
                                                            @Html.ValidationMessageFor(m => m.FatherName)
                                                        </span>
                                                    </p>
                                                </div>
                                                <div class="quform-element">
                                                    <p>
                                                        Gender (required)
                                                        <br>
                                                        <span class="wpcf7-form-control-wrap your-email">
                                                            @Html.DropDownListFor(m => m.Gender, Model.GenderList, "Select Gender", new { @class = "input1" })
                                                            @Html.ValidationMessageFor(m => m.Gender)
                                                        </span>
                                                    </p>
                                                </div>
                                                <div class="quform-element">
                                                    <p>
                                                        Your Email (required)
                                                        <br>
                                                        <span class="wpcf7-form-control-wrap your-email">
                                                            @Html.TextBoxFor(m => m.Email, new { @class = "input1"})
                                                            @Html.ValidationMessageFor(m => m.Email)
                                                        </span>
                                                    </p>
                                                </div>
                                                <div class="quform-element">
                                                    <p>
                                                        Phone/Mobile (required)
                                                        <br>
                                                        <span class="wpcf7-form-control-wrap your-email">
                                                            @Html.TextBoxFor(m => m.Phone, new { @class = "input1", @aria_required = "true", @aria_invalid = "false" })
                                                            @Html.ValidationMessageFor(m => m.Phone)
                                                            @Html.ValidationMessage("FormError")
                                                        </span>
                                                    </p>
                                                    <p><b>Please enter WhatsApp number so you can get the notification.</b></p>
                                                </div>
                                                <div class="quform-element">
                                                    <p>
                                                        CNIC/Passport Number (required)
                                                        <br>
                                                        <span class="wpcf7-form-control-wrap your-email">
                                                            @Html.TextBoxFor(m => m.CNIC, new { @class = "input1", @aria_required = "true", @aria_invalid = "false" })
                                                            @Html.ValidationMessageFor(m => m.CNIC)
                                                        </span>
                                                    </p>
                                                </div>
                                                <div class="quform-element">
                                                    <p>
                                                        Address (required)
                                                        <br>
                                                        <span class="wpcf7-form-control-wrap your-email">
                                                            @Html.TextBoxFor(m => m.Address, new { @class = "input1", @aria_required = "true", @aria_invalid = "false" })
                                                            @Html.ValidationMessageFor(m => m.Address)
                                                        </span>
                                                    </p>
                                                </div>
                                                <div class="quform-element">
                                                    <p>
                                                        Date of Brith (required)
                                                        <br>
                                                        <span class="wpcf7-form-control-wrap your-email">
                                                            @Html.TextBoxFor(m => m.DateofBrith, new { @class = "input1 datepicker", @aria_required = "true", @aria_invalid = "false" })
                                                            @Html.ValidationMessageFor(m => m.DateofBrith)

                                                        </span>
                                                    </p>
                                                </div>
                                                <div class="quform-element">
                                                    <p>
                                                        Education (required)
                                                        <br>
                                                        <span class="wpcf7-form-control-wrap your-email">
                                                            @Html.TextAreaFor(m => m.Education, new { @class = "input1", @aria_required = "true", @aria_invalid = "false" })
                                                            @Html.ValidationMessageFor(m => m.Education)
                                                        </span>
                                                    </p>
                                                </div>
                                                <p>
                                                    <div class="quform-submit">
                                                        <div class="quform-submit-inner">
                                                            <button type="submit" class="submit-button"><span>REGISTER</span></button>
                                                        </div>
                                                        <div class="quform-loading-wrap"><span class="quform-loading"></span></div>
                                                    </div>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    }
</div>



@*else
{
    <div class="gdlr-core-pbf-wrapper " style="padding: 115px 0px 40px 0px;">
        <div class="gdlr-core-pbf-background-wrap" style="background-color: #f3f3f3;"></div>
        <div class="gdlr-core-pbf-wrapper-content gdlr-core-js ">
            <div class="gdlr-core-pbf-wrapper-container clearfix gdlr-core-container">
                <div class="gdlr-core-pbf-column gdlr-core-column-60 gdlr-core-column-first">
                    <div class="gdlr-core-pbf-column-content-margin gdlr-core-js ">
                        <div class="gdlr-core-pbf-column-content clearfix gdlr-core-js " style="max-width: 760px ;">
                            <div class="gdlr-core-pbf-element">
                                <div class="gdlr-core-title-item gdlr-core-item-pdb clearfix  gdlr-core-center-align gdlr-core-title-item-caption-bottom gdlr-core-item-pdlr" style="padding-bottom: 60px ;">
                                    <div class="gdlr-core-title-item-title-wrap clearfix">
                                        <h3 class="gdlr-core-title-item-title gdlr-core-skin-title " style="font-size: 30px ;">Registeration are closed for now</h3>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
}*@

@section Scripts {
    <script>  
        $(function () {
            $(".datepicker").datepicker({
                dateFormat: "mm/dd/yy",
                changeMonth: true,
                changeYear: true,
            });

            $("#CourseId").change(function () {
                var courseId = $(this).val();
                $.ajax({
                    type: "get",
                    url: "@Url.Action("GetClasses", "Register")",
                    data: { "id" : courseId },
                    contentType: "html",
                    success: function (response) {
                        $("#ClassId").empty();
                        $("#ClassId").append(response);
                    }
                });
            });
        });

        function OnSuccess(data) {
            if (data.success === true) {
                $('#register-message').show();
                $('#register-form').hide();
            }
            else {
                $('#register-message').hide();
                $('#register-form').show();
            }
        }
    </script>
}