@extends('layouts.cmsapp')

@section('cms_content')

<div class="main-content">

    <div class="row">
        <div class="col-lg-8">
            <h1 class="page-title">Add Menu</h1>
            <ol class="breadcrumb breadcrumb-2">
                <li>
                    <a href="{{ route('home') }}"><i class="fa fa-home"></i> Home</a>
                </li>
                <li class="active"><strong>Add Menu</strong></li>
            </ol>
        </div>

        <div class="col-lg-4">
            <a href="{{ route('menu.index') }}" class="btn btn-success pull-right">
                View Menus
            </a>
        </div>
    </div>

    <div class="line-dashed"></div>

    @if (session('error'))
        <div class="alert alert-danger">{{ session('error') }}</div>
    @endif

    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-body">

                    <form method="POST" action="{{ route('menu.store') }}" class="form-horizontal">
                        @csrf

                        {{-- Menu Title --}}
                        <div class="form-group">
                            <label class="col-sm-2 control-label">Menu Title</label>
                            <div class="col-sm-6">
                                <input type="text" name="menu_title" class="form-control" required>
                            </div>
                        </div>

                        {{-- Menu Type (TEXT) --}}
                        <div class="form-group">
                            <label class="col-sm-2 control-label">Menu Type</label>
                            <div class="col-sm-6">
                                <input type="text" name="menu_type"
                                       class="form-control"
                                       placeholder="about, academics, research"
                                       required>
                            </div>
                        </div>

                        {{-- Location --}}
                        <div class="form-group">
                            <label class="col-sm-2 control-label">Location</label>
                            <div class="col-sm-3">
                                <select name="location" class="form-control" required>
                                    <option value="">Select</option>
                                    <option value="header">Header Menu</option>
                                    <option value="top">Top Navbar</option>
                                </select>
                            </div>
                        </div>

                        {{-- Route (Nullable) --}}
                        <div class="form-group">
                            <label class="col-sm-2 control-label">Route</label>
                            <div class="col-sm-6">
                                <input type="text" name="route"
                                       class="form-control"
                                       placeholder="pages.view or leave empty">
                            </div>
                        </div>

                        {{-- Icon (Optional) --}}
                        <div class="form-group">
                            <label class="col-sm-2 control-label">Icon</label>
                            <div class="col-sm-6">
                                <input type="text" name="icon"
                                       class="form-control"
                                       placeholder="fa fa-book (optional)">
                            </div>
                        </div>

                        {{-- Priority --}}
                        <div class="form-group">
                            <label class="col-sm-2 control-label">Priority</label>
                            <div class="col-sm-2">
                                <input type="number" name="priority" class="form-control" required>
                            </div>
                        </div>
{{-- Has Dropdown --}}
<div class="form-group">
    <label class="col-sm-2 control-label">Has Dropdown</label>
    <div class="col-sm-6">
        <label>
            <input type="checkbox" name="has_dropdown" value="1">
            Yes, this menu has dropdown items
        </label>
    </div>
</div>

                        <div class="form-group">
                            <div class="col-sm-4 col-sm-offset-2">
                                <button type="submit" class="btn btn-primary">
                                    Save Menu
                                </button>
                            </div>
                        </div>

                    </form>

                </div>
            </div>
        </div>
    </div>

</div>

@endsection