EDU/Website/NEducation/Views/Admin/CreateCourse.cshtml


@{
    ViewBag.Title = "CreateCourse";
    Layout = "~/Views/Shared/_LayoutAdmin.cshtml";
}

@using NEducation.NEduService;
@model NEducation.Models.CourseModel

<div class="content-header row">
    <div class="content-header-left col-md-6 col-xs-12 mb-1">
        <h2 class="content-header-title">Create new course</h2>
    </div>
    <div class="content-header-right breadcrumbs-right breadcrumbs-top col-md-6 col-xs-12">
        <div class="breadcrumb-wrapper col-xs-12">
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="index.html">Admin</a>
                </li>
                <li class="breadcrumb-item">
                    <a href="#">Courses</a>
                </li>
                <li class="breadcrumb-item active">
                    <a href="#">Create course</a>
                </li>
            </ol>
        </div>
    </div>
</div>
<div class="content-body">
    <!-- Basic form layout section start -->
    <section id="basic-form-layouts">
        <div class="row match-height">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title" id="basic-layout-form">Course Info</h4>
                        <a class="heading-elements-toggle"><i class="icon-ellipsis font-medium-3"></i></a>
                        <div class="heading-elements">
                            <ul class="list-inline mb-0">
                                <li><a data-action="collapse"><i class="icon-minus4"></i></a></li>
                                @*<li><a data-action="reload"><i class="icon-reload"></i></a></li>*@
                                <li><a data-action="expand"><i class="icon-expand2"></i></a></li>
                                @*<li><a data-action="close"><i class="icon-cross2"></i></a></li>*@
                            </ul>
                        </div>
                    </div>
                    <div class="card-body collapse in">
                        <div class="card-block">
                            @using (Html.BeginForm("CreateCourseAction", "Admin", FormMethod.Post, new { enctype = "multipart/form-data" }))
                            {
                                @Html.AntiForgeryToken()
                                <div class="form-body">
                                    @*<h4 class="form-section"><i class="icon-head"></i> Personal Info</h4>*@
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="name">Course Name</label>
                                                @Html.TextBoxFor(m => m.selectedCourse.name, new { @Value = Model.selectedCourse.name, @class = "form-control" })
                                                @*<input type="text" id="projectinput1" class="form-control" placeholder="First Name" name="fname">*@
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="selectedCourse">Course Type</label>
                                                @Html.DropDownListFor(model => model.selectedCourse.typeId, Model.listCourseType, new { @class = "form-control" })
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="imageAvatar">Image Avatar</label>
                                                <input type="file" name="imageAvatar" id="imageAvatar" style="width: 100%;" class="form-control" />
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="fileImage">Image Banner</label>
                                                <input type="file" name="imageBanner" id="imageBanner" style="width: 100%;" class="form-control" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="imageAvatar">Category</label>
                                                @Html.TextBoxFor(m => m.selectedCourse.category, new { @Value = Model.selectedCourse.category, @class = "form-control" })
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="fileImage">Fee</label>
                                                @Html.EditorFor(model => model.selectedCourse.fee,
                                               new { @Value = Model.selectedCourse.fee, htmlAttributes = new { @class = "form-control", @type = "number", @min = "0" } })
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="imageAvatar">Brief Description</label>
                                                @Html.TextAreaFor(m => m.selectedCourse.briefDescription, new {
                                                   rows = "5", style = "resize:none;width:100%;",
                                                   placeholder = Html.DisplayNameFor(m => m.selectedCourse.briefDescription),
                                                   @class = "form-control" })
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="imageAvatar">Detail Description</label>
                                                @Html.TextAreaFor(m => m.selectedCourse.detailDescription, new {
                                                   rows = "20", style = "resize:none;width:100%;",
                                                   placeholder = Html.DisplayNameFor(m => m.selectedCourse.detailDescription),
                                                   @class = "form-control input-lg textarea-editor"
                                           })
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-actions">
                                    <button type="button" class="btn btn-warning mr-1">
                                        <i class="icon-cross2"></i> @Html.ActionLink("Cancel", "CourseListAdmin", "Admin")
                                    </button>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="icon-check2"></i> @ViewBag.action
                                    </button>
                                </div>
                            }
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row match-height">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title" id="basic-layout-icons">Timesheet</h4>
                        <a class="heading-elements-toggle"><i class="icon-ellipsis font-medium-3"></i></a>
                        <div class="heading-elements">
                            <ul class="list-inline mb-0">
                                <li><a data-action="collapse"><i class="icon-minus4"></i></a></li>
                                <li><a data-action="reload"><i class="icon-reload"></i></a></li>
                                <li><a data-action="expand"><i class="icon-expand2"></i></a></li>
                                <li><a data-action="close"><i class="icon-cross2"></i></a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="card-body collapse in">
                        <div class="card-block">
                            <div class="card-text">
                                <p>This form shows the use of icons with form controls. Define the position of the icon using <code>has-icon-left</code> or <code>has-icon-right</code> class. Use <code>icon-*</code> class to define the icon for the form control. See Icons sections for the list of icons you can use. </p>
                            </div>
                            <form class="form">
                                <div class="form-body">
                                    <div class="form-group">
                                        <label for="timesheetinput1">Employee Name</label>
                                        <div class="position-relative has-icon-left">
                                            <input type="text" id="timesheetinput1" class="form-control" placeholder="employee name" name="employeename">
                                            <div class="form-control-position">
                                                <i class="icon-head"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="timesheetinput2">Project Name</label>
                                        <div class="position-relative has-icon-left">
                                            <input type="text" id="timesheetinput2" class="form-control" placeholder="project name" name="projectname">
                                            <div class="form-control-position">
                                                <i class="icon-briefcase4"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="timesheetinput3">Date</label>
                                        <div class="position-relative has-icon-left">
                                            <input type="date" id="timesheetinput3" class="form-control" name="date">
                                            <div class="form-control-position">
                                                <i class="icon-calendar5"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label>Rate Per Hour</label>
                                        <div class="input-group">
                                            <span class="input-group-addon">$</span>
                                            <input type="text" class="form-control" placeholder="Rate Per Hour" aria-label="Amount (to the nearest dollar)" name="rateperhour">
                                            <span class="input-group-addon">.00</span>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="timesheetinput5">Start Time</label>
                                                <div class="position-relative has-icon-left">
                                                    <input type="time" id="timesheetinput5" class="form-control" name="starttime">
                                                    <div class="form-control-position">
                                                        <i class="icon-clock5"></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="timesheetinput6">End Time</label>
                                                <div class="position-relative has-icon-left">
                                                    <input type="time" id="timesheetinput6" class="form-control" name="endtime">
                                                    <div class="form-control-position">
                                                        <i class="icon-clock5"></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="timesheetinput7">Notes</label>
                                        <div class="position-relative has-icon-left">
                                            <textarea id="timesheetinput7" rows="5" class="form-control" name="notes" placeholder="notes"></textarea>
                                            <div class="form-control-position">
                                                <i class="icon-file2"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-actions right">
                                    <button type="button" class="btn btn-warning mr-1">
                                        <i class="icon-cross2"></i> Cancel
                                    </button>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="icon-check2"></i> Save
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row match-height">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title" id="basic-layout-round-controls">Complaint Form</h4>
                        <a class="heading-elements-toggle"><i class="icon-ellipsis font-medium-3"></i></a>
                        <div class="heading-elements">
                            <ul class="list-inline mb-0">
                                <li><a data-action="collapse"><i class="icon-minus4"></i></a></li>
                                <li><a data-action="reload"><i class="icon-reload"></i></a></li>
                                <li><a data-action="expand"><i class="icon-expand2"></i></a></li>
                                <li><a data-action="close"><i class="icon-cross2"></i></a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="card-body collapse in">
                        <div class="card-block">
                            <div class="card-text">
                                <p>This is a variation to the default form control styling. In this example all the form controls has round styling. To apply round style add class <code>round</code> to any form control.</p>
                            </div>
                            <form class="form">
                                <div class="form-body">
                                    <div class="form-group">
                                        <label for="complaintinput1">Company Name</label>
                                        <input type="text" id="complaintinput1" class="form-control round" placeholder="company name" name="companyname">
                                    </div>
                                    <div class="form-group">
                                        <label for="complaintinput2">Employee Name</label>
                                        <input type="text" id="complaintinput2" class="form-control round" placeholder="employee name" name="employeename">
                                    </div>
                                    <div class="form-group">
                                        <label for="complaintinput3">Date of Complaint</label>
                                        <input type="date" id="complaintinput3" class="form-control round" name="complaintdate">
                                    </div>

                                    <div class="form-group">
                                        <label for="complaintinput4">Supervisor's Name</label>
                                        <input type="text" id="complaintinput4" class="form-control round" placeholder="supervisor name" name="supervisorname">
                                    </div>

                                    <div class="form-group">
                                        <label for="complaintinput5">Complaint Details</label>
                                        <textarea id="complaintinput5" rows="5" class="form-control round" name="complaintdetails" placeholder="details"></textarea>
                                    </div>

                                    <div class="form-group">
                                        <label for="complaintinput6">Signature</label>
                                        <input type="text" id="complaintinput6" class="form-control round" placeholder="signature" name="signature">
                                    </div>
                                </div>
                                <div class="form-actions">
                                    <button type="button" class="btn btn-warning mr-1">
                                        <i class="icon-cross2"></i> Cancel
                                    </button>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="icon-check2"></i> Save
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title" id="basic-layout-square-controls">Donation</h4>
                        <a class="heading-elements-toggle"><i class="icon-ellipsis font-medium-3"></i></a>
                        <div class="heading-elements">
                            <ul class="list-inline mb-0">
                                <li><a data-action="collapse"><i class="icon-minus4"></i></a></li>
                                <li><a data-action="reload"><i class="icon-reload"></i></a></li>
                                <li><a data-action="expand"><i class="icon-expand2"></i></a></li>
                                <li><a data-action="close"><i class="icon-cross2"></i></a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="card-body collapse in">
                        <div class="card-block">
                            <div class="card-text">
                                <p>This is another variation to the default form control styling. In this example all the form controls has square styling. To apply square style add class <code>square</code> to any form control.</p>
                            </div>
                            <form class="form">
                                <div class="form-body">
                                    <div class="form-group">
                                        <label for="donationinput1">Full Name</label>
                                        <input type="text" id="donationinput1" class="form-control square" placeholder="name" name="fullname">
                                    </div>
                                    <div class="form-group">
                                        <label for="donationinput2">Email</label>
                                        <input type="email" id="donationinput2" class="form-control square" placeholder="email" name="email">
                                    </div>
                                    <div class="form-group">
                                        <label for="donationinput3">Contact Number</label>
                                        <input type="tel" id="donationinput3" class="form-control square" name="contact">
                                    </div>
                                    <div class="form-group">
                                        <label for="donationinput4">Dontaion Type</label>
                                        <input type="text" id="donationinput4" class="form-control square" placeholder="type of donation" name="donationtype">
                                    </div>
                                    <div class="form-group">
                                        <label>Amount</label>
                                        <div class="input-group">
                                            <span class="input-group-addon">$</span>
                                            <input type="text" class="form-control square" placeholder="amount" aria-label="Amount (to the nearest dollar)" name="amount">
                                            <span class="input-group-addon">.00</span>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="donationinput7">Comments</label>
                                        <textarea id="donationinput7" rows="5" class="form-control square" name="comments" placeholder="comments"></textarea>
                                    </div>
                                </div>
                                <div class="form-actions right">
                                    <button type="button" class="btn btn-warning mr-1">
                                        <i class="icon-cross2"></i> Cancel
                                    </button>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="icon-check2"></i> Save
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row match-height">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title" id="basic-layout-form-center">Event Registration</h4>
                        <a class="heading-elements-toggle"><i class="icon-ellipsis font-medium-3"></i></a>
                        <div class="heading-elements">
                            <ul class="list-inline mb-0">
                                <li><a data-action="collapse"><i class="icon-minus4"></i></a></li>
                                <li><a data-action="reload"><i class="icon-reload"></i></a></li>
                                <li><a data-action="expand"><i class="icon-expand2"></i></a></li>
                                <li><a data-action="close"><i class="icon-cross2"></i></a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="card-body collapse in">
                        <div class="card-block">
                            <div class="card-text">
                                <p>This example shows a way to center your form in the card. Here we have used <code>col-md-6 offset-md-3</code> classes to center the form in a full width card. User can always change those classes according to width and offset requirements. This example also uses form action buttons in the center bottom position of the card.</p>
                            </div>
                            <form class="form">
                                <div class="row">
                                    <div class="col-md-6 offset-md-3">
                                        <div class="form-body">
                                            <div class="form-group">
                                                <label for="eventInput1">Full Name</label>
                                                <input type="text" id="eventInput1" class="form-control" placeholder="name" name="fullname">
                                            </div>
                                            <div class="form-group">
                                                <label for="eventInput2">Title</label>
                                                <input type="text" id="eventInput2" class="form-control" placeholder="title" name="title">
                                            </div>
                                            <div class="form-group">
                                                <label for="eventInput3">Company</label>
                                                <input type="text" id="eventInput3" class="form-control" placeholder="company" name="company">
                                            </div>
                                            <div class="form-group">
                                                <label for="eventInput4">Email</label>
                                                <input type="email" id="eventInput4" class="form-control" placeholder="email" name="email">
                                            </div>
                                            <div class="form-group">
                                                <label for="eventInput5">Contact Number</label>
                                                <input type="tel" id="eventInput5" class="form-control" name="contact" placeholder="contact number">
                                            </div>
                                            <div class="form-group">
                                                <label>Existing Customer</label>
                                                <div class="input-group">
                                                    <label class="display-inline-block custom-control custom-radio ml-1">
                                                        <input type="radio" name="customer1" class="custom-control-input">
                                                        <span class="custom-control-indicator"></span>
                                                        <span class="custom-control-description ml-0">Yes</span>
                                                    </label>
                                                    <label class="display-inline-block custom-control custom-radio">
                                                        <input type="radio" name="customer1" checked class="custom-control-input">
                                                        <span class="custom-control-indicator"></span>
                                                        <span class="custom-control-description ml-0">No</span>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-actions center">
                                    <button type="button" class="btn btn-warning mr-1">
                                        <i class="icon-cross2"></i> Cancel
                                    </button>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="icon-check2"></i> Save
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6 offset-md-3">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title" id="basic-layout-card-center">Event Registration</h4>
                        <a class="heading-elements-toggle"><i class="icon-ellipsis font-medium-3"></i></a>
                        <div class="heading-elements">
                            <ul class="list-inline mb-0">
                                <li><a data-action="collapse"><i class="icon-minus4"></i></a></li>
                                <li><a data-action="reload"><i class="icon-reload"></i></a></li>
                                <li><a data-action="expand"><i class="icon-expand2"></i></a></li>
                                <li><a data-action="close"><i class="icon-cross2"></i></a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="card-body collapse in">
                        <div class="card-block">
                            <div class="card-text">
                                <p>This example shows a ways to center your card with form. Here we have used <code>col-md-6 offset-md-3</code> classes to center the card as its not full width. User can always change those classes according to width and offset requirements. This example also uses form action buttons in the center bottom position of the card.</p>
                            </div>
                            <form class="form">
                                <div class="form-body">
                                    <div class="form-group">
                                        <label for="eventRegInput1">Full Name</label>
                                        <input type="text" id="eventRegInput1" class="form-control" placeholder="name" name="fullname">
                                    </div>
                                    <div class="form-group">
                                        <label for="eventRegInput2">Title</label>
                                        <input type="text" id="eventRegInput2" class="form-control" placeholder="title" name="title">
                                    </div>
                                    <div class="form-group">
                                        <label for="eventRegInput3">Company</label>
                                        <input type="text" id="eventRegInput3" class="form-control" placeholder="company" name="company">
                                    </div>
                                    <div class="form-group">
                                        <label for="eventRegInput4">Email</label>
                                        <input type="email" id="eventRegInput4" class="form-control" placeholder="email" name="email">
                                    </div>
                                    <div class="form-group">
                                        <label for="eventRegInput5">Contact Number</label>
                                        <input type="tel" id="eventRegInput5" class="form-control" name="contact" placeholder="contact number">
                                    </div>
                                    <div class="form-group">
                                        <label>Existing Customer</label>
                                        <div class="input-group">
                                            <label class="display-inline-block custom-control custom-radio ml-1">
                                                <input type="radio" name="customer" class="custom-control-input">
                                                <span class="custom-control-indicator"></span>
                                                <span class="custom-control-description ml-0">Yes</span>
                                            </label>
                                            <label class="display-inline-block custom-control custom-radio">
                                                <input type="radio" name="customer" checked class="custom-control-input">
                                                <span class="custom-control-indicator"></span>
                                                <span class="custom-control-description ml-0">No</span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-actions center">
                                    <button type="button" class="btn btn-warning mr-1">
                                        <i class="icon-cross2"></i> Cancel
                                    </button>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="icon-check2"></i> Save
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- // Basic form layout section end -->
</div>


<link href="~/Content/editor/summernote.css" rel="stylesheet">
<script type="text/javascript" src="~/Content/editor/summernote.js"></script>
<script type="text/javascript" src="~/Content/editor/script-custom-editor.js"></script>