@extends('layouts.app')

@section('content')
   <h1>Departments</h1>
   <hr>
   <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12">
             <h3>Add new department</h3>
             <form method="POST" action="{{ route('departments.store') }}">
                     {{ csrf_field() }}
                         <div class="form-row">
                            <label for="name" class="col-sm-2 col-form-label">Department Name</label>
                             <div class="form-group">
                                 <input type="text" class="form-control"  name="name">
                             </div>
                             <div class="form-group">
                                 <button type="submit" class="btn btn-primary ml-1">Submit</button>
                             </div>

                         </div>

             </form>
        </div>

    </div>
    <hr>
   <div class="row">
       <div class="col-12">
            <table style="text-align: center;box-shadow: 0px 0px 10px lightgray;"  class="table table-bordered table-hover ">
                    <thead style="background-color:  rgb(80, 120, 131); color: white;font-size: 14px;">
                        <tr>
                                <th>#</th>
                                <th>Department Name</th>
                        </tr>
                    </thead>
                    @foreach ($departments as $department)
                    <tr>
                        <td>{{ $department->id }}</td>
                        <td>{{ $department->name }}</td>

                    </tr>
                    @endforeach
            </table>
       </div>

   </div>
   <hr>




@endsection