@extends('admin_html.layouts.main')

@section('content')
<div class="container-fluid">
                <div class="row ">
                    <div class="col-lg-12">
                        <div class="card">

                            <div class="card-header d-flex align-items-center justify-content-between">
                                <h5 class="card-title mb-0"> <i class="fa fa-list"></i> &nbsp; Add New Menu </h5>
                                <div class="card-tools">
                                    <button type="button" class="btn btn-tool" data-card-widget="collapse"
                                        title="Collapse">
                                        <i class="fas fa-minus"></i>
                                    </button>
                                    <button type="button" class="btn btn-tool">
                                        <a href="./menu.html" class="btn btn-info btn-sm"><i class="mdi mdi-plus"></i>
                                            <i class="fa fa-arrow-left"></i> Back</a>
                                    </button>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="col-md-11">

                                    <div class="form-group row mb-3">
                                        <label for="" class="col-sm-2 col-form-label">Menu Title <code>*</code>
                                        </label>
                                        <div class="col-sm-6">
                                            <input type="text" id="title" value="" name="m_title"
                                                class="form-control form-control-lg">
                                        </div>
                                    </div>
                                    <div class="form-group row mb-3">
                                        <label for="alias" class="col-sm-2 col-form-label">Menu Alias <code>*</code>
                                        </label>
                                        <div class="col-sm-6">
                                            <input type="text" id="alias" value="" name="m_alias"
                                                class="form-control form-control-sm">
                                        </div>
                                    </div>
                                    <div class="form-group row mb-3">
                                        <label for="" class="col-sm-2 col-form-label">Link Menu With
                                            <code>*</code></label>
                                        <div class="col-sm-6">
                                            <div role="tabpanel" id="tabs">
                                                <!-- Nav tabs -->
                                                <ul class="nav nav-tabs" id="custom-content-below-tab" role="tablist">
                                                    <li class="nav-item">
                                                        <a class="nav-link active" id="article_tab" data-toggle="tab"
                                                            href="#article" role="tab" aria-controls="article"
                                                            aria-selected="true">Article</a>
                                                    </li>
                                                    <li class="nav-item">
                                                        <a class="nav-link" id="category_tab" data-toggle="tab"
                                                            href="#category" role="tab" aria-controls="category"
                                                            aria-selected="false">Category</a>
                                                    </li>
                                                    <li class="nav-item">
                                                        <a class="nav-link" id="external_tab" data-toggle="tab"
                                                            href="#external" role="tab" aria-controls="external"
                                                            aria-selected="false">External</a>
                                                    </li>
                                                </ul>

                                                <!-- Tab panes -->
                                                <div class="tab-content mt-2" id="custom-content-below-tabContent">
                                                    <div class="tab-pane fade active show" id="article" role="tabpanel"
                                                        aria-labelledby="article_tab">
                                                        <select name="plink" class="form-control">
                                                            <option value="">Select Article</option>
                                                            <option value="about-us">About Us</option>
                                                            <option value="australia">Australia</option>
                                                        </select>
                                                    </div>
                                                    <div class="tab-pane fade" id="category" role="tabpanel"
                                                        aria-labelledby="category_tab">
                                                        <select name="clink" class="form-control">
                                                            <option value="">Select Category</option>
                                                            <option value="blog">Blog</option>
                                                            <option value="home">Home</option>
                                                            <option value="new-page">New Page</option>
                                                            <option value="service">Service</option>
                                                            <option value="study-abroad">Study Abroad</option>
                                                            <option value="video-gallery">Video Gallery</option>
                                                        </select>
                                                    </div>
                                                    <div class="tab-pane fade" id="external" role="tabpanel"
                                                        aria-labelledby="external_tab">
                                                        <input type="text" name="elink" placeholder="http://"
                                                            class="form-control">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row mb-3">
                                        <label for="m_type" class="col-sm-2 col-form-label">Menu Type <code>*</code>
                                        </label>
                                        <div class="col-sm-3">
                                            <select name="m_type" id="menuType" class="form-control">
                                                <option value="">Select Type</option>
                                                <option selected="" value="1"> Main Menu </option>
                                                <option value="7"> Quick Link </option>
                                            </select>
                                        </div>
                                        <label class="col-sm-2 col-form-label">Template <code>*</code>
                                        </label>
                                        <div class="col-sm-3">
                                            <select name="m_template" class="form-control">
                                                <option selected="" value="default">Default View</option>
                                                <option value="frontpage">Frontpage View</option>
                                                <option value="list">List View</option>
                                                <option value="gallary">Gallary View</option>
                                                <option value="blog">Blog View</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group row mb-3">
                                        <label class="col-sm-2 col-form-label">Parent <code>*</code>
                                        </label>
                                        <div class="col-sm-3">
                                            <select name="parent" id="parent" class="form-control">
                                                <option data-parent="Root" value="Root">No Parent (Root)</option>
                                                <option data-parent="Root" value="5">About Us</option>
                                                <option data-parent="27" value="33">Australia</option>
                                                <option data-parent="Root" value="18">Blog</option>
                                                <option data-parent="Root" value="4">Contact</option>
                                            </select>
                                        </div>
                                        <label class="col-sm-2 col-form-label">Ordering <code>*</code>
                                        </label>
                                        <div class="col-sm-3">
                                            <select name="m_order" id="order" class="form-control">
                                                <option value="">Select Order</option>
                                                <option value="1">Home</option>
                                                <option value="2">About Us</option>
                                                <option value="7">Blog</option>
                                                <option value="8">Contact</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group row mb-3">
                                        <label class="col-sm-2 col-form-label">Assign Category </label>
                                        <div class="col-sm-6">
                                            <textarea name="m_showcat" cols="40" rows="10" class="form-control"
                                                style="height:80px" spellcheck="false"></textarea>
                                        </div>
                                    </div>
                                    <div class="form-group row mb-3">
                                        <label class="col-sm-2 col-form-label">Menu Status <code>*</code>
                                        </label>
                                        <div class="col-sm-6">
                                            <select name="m_status" class="form-control">
                                                <option selected="" value="active"> Active </option>
                                                <option value="inactive"> Inactive </option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer">
                                <div class="offset-md-3 col-sm-9">
                                    <button type="submit" name="submit" class="btn btn-success">Save </button>
                                    &nbsp;&nbsp;
                                    <button name="submit" value="save-n-exit" type="submit" class="btn btn-primary">Save
                                        &amp; Exit</button>
                                    &nbsp;&nbsp;
                                    <a href="#" class="btn btn-warning">Cancel</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
@endsection('content')