<%- include('../partials/head.ejs') %>
    <!--
`body` tag options:

  Apply one or more of the following classes to to the body tag
  to get the desired effect

  * sidebar-collapse
  * sidebar-mini
-->

    <body class="hold-transition sidebar-mini">
        <div class="wrapper">
            <!-- Navbar -->
            <%- include('../partials/navigation.ejs') %>
                <!-- /.navbar -->

                <!-- Main Sidebar Container -->

                <%- include('../partials/sidebar.ejs') %>
                    <div class="pt-20">
                        <% if(errors.length> 0){ %>
                            <div class="alert alert-danger">
                                <% errors.forEach(function(error){ %>
                                    <% if(error !='' ){ %>
                                        <p>
                                            <%= error %>
                                        </p>
                                        <% }}); %>
                            </div>
                            <% } %>
                                <% if(success.length> 0){ %>
                                    <div class="alert alert-success">
                                        <p>
                                            <%=success %>
                                        </p>
                                    </div>
                                    <% } %>
                    </div>
                    <!-- Content Wrapper. Contains page content -->
                    <div class="content-wrapper">
                        <!-- Content Header (Page header) -->
                        <div class="content-header">
                            <div class="container-fluid">
                                <div class="row mb-2">
                                    <div class="col-sm-6">
                                        <h1 class="m-0">SubCategories</h1>
                                    </div><!-- /.col -->
                                    <div class="col-sm-6">
                                        <ol class="breadcrumb float-sm-right">
                                            <li class="breadcrumb-item"><a href="/admin">Home</a></li>
                                            <li class="breadcrumb-item"><a href="/admin/subcategories">SubCategories</a></li>
                                            <li class="breadcrumb-item active">Create</li>
                                        </ol>
                                    </div><!-- /.col -->
                                </div><!-- /.row -->
                            </div><!-- /.container-fluid -->
                        </div>
                        <!-- /.content-header -->

                        <!-- Main content -->
                        <div class="content">
                            <div class="container-fluid">
                                <div class="row">
                                    <div class="col-lg-12">
                                        <form name="edit_subcategory" method="POST">
                                            <div class="card">
                                                <div class="card-header">
                                                    <h3 class="card-title">Create Subcategory</h3>
                                                </div>
                                                <div class="card-body">
                                                    <div class="form-group">
                                                        <label for="subcategory_category">Category</label>
                                                        <select class="form-control" name="category_id"
                                                            id="subcategory_category">
                                                            <option value="">Select Category</option>
                                                            <% categories.length> 0 ? categories.forEach((itm,i) => { %>
                                                                <option key="<%= i %>" value="<%= itm.id %>" <%=(form
                                                                    !=null) ? form.category_id==itm.id ? 'selected' : ''
                                                                    : '' %>>
                                                                    <%= itm.name %>
                                                                </option>
                                                                <% }) : "" %>
                                                        </select>
                                                        <% if(validationError.length> 0){ %>
                                                            <% for(var i=0; i< validationError.length; i++) { let
                                                                obj=validationError[i]; if ("category_id" in obj) { %>
                                                                <div class="col-sm-12 text-danger p-0">
                                                                    <%= validationError[i].category_id %>
                                                                </div>
                                                        <% }}} %>
                                                    </div> 
                                                    <div class="form-group">
                                                        <label for="subcategory_name">SubCategory Name</label>
                                                        <input  type="text" class="form-control" name="name" 
                                                            value="<%= (form != null) ? form.name : '' %>"
                                                            id="subcategory_name" />
                                                        <% if(validationError.length> 0){ %>
                                                            <% for(var i=0; i< validationError.length; i++) { let
                                                                obj=validationError[i]; if ("name" in obj) { %>
                                                                <div class="col-sm-12 text-danger p-0">
                                                                    <%= validationError[i].name %>
                                                                </div>
                                                        <% }}} %>
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="description">Description</label>
                                                        <textarea  type="text" class="form-control" name="description" rows="5"
                                                         id="description" placeholder="write description ..."><%= (form != null) ? form.description : '' %></textarea>
                                                        <% if(validationError.length> 0){ %>
                                                            <% for(var i=0; i< validationError.length; i++) { let
                                                                obj=validationError[i]; if ("description" in obj) {
                                                                %>
                                                                <div class="col-sm-12 text-danger p-0">
                                                                    <%= validationError[i].description %>
                                                                </div>
                                                        <% }}} %>
                                                    </div>

                                                </div>
                                                <div class="card-footer">
                                                    <button type="submit" class="btn btn-primary">Submit</button>
                                                    <a href="/admin/subcategories" class="ml-2 btn btn-warning">Cancel</a>

                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    <!-- /.col-md-6 -->
                                </div>
                                <!-- /.row -->
                            </div>
                            <!-- /.container-fluid -->
                        </div>
                        <!-- /.content -->
                    </div>
                    <!-- /.content-wrapper -->

                    <!-- Control Sidebar -->
                    <aside class="control-sidebar control-sidebar-dark">
                        <!-- Control sidebar content goes here -->
                    </aside>
                    <!-- /.control-sidebar -->

                    <!-- Main Footer -->

        </div>
        <!-- ./wrapper -->

        <!--  SCRIPTS -->

        <!-- jQuery -->

        <%- include('../partials/scripts.ejs') %>

    </body>