@extends('admin.layouts.admin')
@section('content')
<!-- Page Content-->
<div class="page-content-tab">
    <div class="container-fluid">
        <!-- Page-Title -->
        <div class="row">
            <div class="col-sm-12">
                <div class="page-title-box">  
                    <div class="float-right">
						<ol class="breadcrumb">
							<li class="breadcrumb-item">
								<a href="javascript:void(0);">Setting</a>
							</li>
							<li class="breadcrumb-item">
								<a href="/admin/organogram">Organogram</a>
							</li>
							<li class="breadcrumb-item active">Create Organogram</li>
						</ol>
					</div>
                    <h4 class="page-title">Create Organogram</h4>
                </div>
                <!--end page-title-box-->
            </div>
            <!--end col-->
        </div>
        <!--end row-->
        <!-- end page title end breadcrumb -->
        <div class="row">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-body">
                        <form method="POST" action="{{ url('admin/organogram/store') }}" class="row g-3 needs-validation" novalidate>
                        @csrf                            
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="department_id" class="mb-2 text-bold-600 text-uppercase">Department<span class="text-danger">*</span> </label>
                                    <select class="form-control required select2" name="department_id" aria-required="true" id="department_id"  required>
                                        <option>Select Department</option>    
                                        @foreach($departments as $department)
                                        <option value="{{ $department->id ?? '' }}">{{ $department->name ?? '' }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="title" class="mb-2 text-bold-600 text-uppercase">Name<span class="text-danger">*</span> </label>
                                    <input type="text" class="form-control required" name="title" aria-required="true" id="title"  required>
                                    
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="serial" class="mb-2 text-bold-600 text-uppercase">Serial<span class="text-danger">*</span> </label>
                                    <input type="text" class="form-control required" name="serial" aria-required="true" id="serial"  required>
                                    
                                </div>
                            </div>

                            <div class="col-12">
                                <button class="btn btn-primary" type="submit">Create Organogram</button>
                            </div>
                        </form>

                    </div><!--end card-body-->
                </div><!--end card-->
            </div><!--end col-->
        </div><!--end row-->
    </div>
    <!-- container -->
    <footer class="footer text-center text-sm-left">
        &copy; 2021 SSL Wireless <span class="text-muted d-none d-sm-inline-block float-right">Design and Developed by <a href="#">SSL Wireless</a></span>
    </footer>
    <!--end footer-->
</div>
<!-- end page content -->
@endsection