@extends('cms.layouts.app')

@section('pre-styles')
<x-cms.css-helper :select2="true" />
@endsection

@section('contents')
<!-- Hero -->
<x-cms.bread-crumb title="<i class='fa fa-plus'></i> Add Menu">
	<li class="breadcrumb-item">Cms</li>
	<li class="breadcrumb-item" aria-current="page">
		Menu
	</li>
</x-cms.bread-crumb>
<!-- END Hero -->


<!-- Page Content -->
<div class="content">
	<div class="block">
		<div class="block-content block-content-full">
			<form action="{{ route('menus.store') }}" method="post" enctype="multipart/form-data">
				@csrf

				<div class="row">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="title">Title <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="title" name="title" value="{{ old('title') }}"
                                required maxlength="100" placeholder="Title..">
                            <span class="text-danger">{{ validationError($errors->get('title')) }}</span>
                        </div>
                    </div>

                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="url">Url</label>
                            <input type="text" class="form-control" id="url" name="url" value="{{ old('url') }}"
                                maxlength="200" placeholder="Url..">
                            <span class="text-danger">{{ validationError($errors->get('url')) }}</span>
                        </div>
                    </div>

                    <div class="col-sm-3">
                        <div class="form-group">
                            <label for="name">Menu Position</label>
                            <select name="menu_position_id" class="js-select2 form-control w-100" id="val-select2"
                                data-placeholder="Choose One ...">
                                <option></option>
                                {{ generateOptions($menuPositions, 'id', 'name', old('menu_position_id')) }}
                            </select>
                        </div>
                    </div>

                    <div class="col-sm-3">
                        <div class="form-group">
                            <label for="Parent">Parent</label>
                            <select name="parent_id" class="js-select2 form-control w-100" id="Parent"
                                data-placeholder="Choose One ...">
                                <option></option>
                                {{ generateOptions($parentMenus, 'id', 'menu_title', old('parent_id')) }}
                            </select>
                        </div>
                    </div>

                    <div class="col-sm-3">
                        <div class="form-group">
                            <label for="routeGroup">Route Group</label>
                            <input type="text" class="form-control" id="routeGroup" name="route_group" value="{{ old('route_group') }}"
                                maxlength="100" placeholder="Route Group..">
                            <span class="text-danger">{{ validationError($errors->get('route_group')) }}</span>
                        </div>
                    </div>
                    
                    <div class="col-sm-3">
                        <div class="form-group">
                            <label for="display_order">Display Order</label>
                            <input type="number" class="form-control" id="display_order" name="display_order"
                                value="{{ old('display_order') }}" min=0 oninput="validity.valid||(value='');"
                                placeholder="Display Order..">
                        </div>
                    </div>
                    
                    <div class="col-sm-3">
                        <div class="form-group">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="newTab" name="open_in_new_window" value="1" checked>
                                <label class="form-check-label" for="newTab">Open New Tab</label>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="isActive" name="is_active" value="1" checked>
                            <label class="form-check-label" for="isActive">Active</label>
                        </div>
                    </div>
				</div>

				<div class="text-right">
					<a class="btn btn-danger btn-sm" href="{{ route('menus.index') }}" title=""><i
							class="fa fa-angle-double-left"></i> Cancel</a>
					<button type="submit" class="btn btn-primary btn-sm"><i class="fa fa-plus"></i> Save</button>
				</div>
			</form>
		</div>
	</div>
</div>
<!-- END Page Content -->

@endsection


@section('scripts')
<x-cms.js-helper :select2="true" />
@endsection