@extends('layouts.app')

@section('content')


<div class="layout-wrapper layout-content-navbar">
    <div class="layout-container">
      <!-- Menu -->

      @include('includes.sidebar')
      <!-- / Menu -->

      <!-- Layout container -->
      <div class="layout-page">
        <!-- Navbar -->

        @include('includes.header')

        <!-- / Navbar -->

        <!-- Content wrapper -->
        <div class="content-wrapper">
            <!-- Content -->
            {{-- @dd($contents) --}}
            <div class="container-xxl flex-grow-1 container-p-y">
              <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light">Home /</span> Departments 
                <br/><br/><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#backDropModal"> Add Department </button></h4>

              <!-- Modal -->
              <div class="modal fade" id="backDropModal" data-bs-backdrop="static" tabindex="-1">
                <div class="modal-dialog">
                  <form class="modal-content" method="post" action="{{ route('department.store') }}">
                    @csrf
                    <div class="modal-header">
                      <h5 class="modal-title" id="backDropModalTitle">New Department</h5>
                      <button
                        type="button"
                        class="btn-close"
                        data-bs-dismiss="modal"
                        aria-label="Close"
                      ></button>
                    </div>
                    <div class="modal-body">
                      <div class="row">
                        <div class="col mb-3">
                          <label for="nameBackdrop" class="form-label">Name</label>
                          <input
                            type="text"
                            id="nameBackdrop"
                            class="form-control"
                            name="name"
                            required
                            placeholder="Enter Name"
                          />
                        </div>
                      </div>
                      <div class="row">
                        <div class="col mb-3">
                          <label for="nameBackdrop" class="form-label">Description</label>
                          <textarea
                            id="emailBackdrop"
                            name="description"
                            class="form-control"
                            placeholder="Enter Description"
                          ></textarea>
                        </div>
                      </div>
                      
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                        Close
                      </button>
                      <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                  </form>
                </div>
              </div>
              
              <!-- Examples -->
              <div class="row mb-5">
                {{-- @dd($departments) --}}
                <div class="card">
                  <h5 class="card-header">Departments</h5>
                  <div class="table-responsive text-nowrap">
                    <table class="table">
                      <thead>
                        <tr>
                          <th scope="col">#</th>
                          <th scope="col">Name</th>
                          <th scope="col">Description</th>
                          <th scope="col">Action</th>
                        </tr>
                      </thead>
                      @if(!empty($departments) && $departments->count())
                      {{-- @dd($departments) --}}
                          @php $sn=1;   @endphp
                          @foreach($departments as $key => $value)
                            <tbody>
                              <tr class="col-md-12 col-lg-12 mb-12">
                                <td>{{$sn}}</td>
                                <td class="card-title">{{$value->name}}</td>
                                <td class="card-text">{{$value->description}}</td>
                                <td>Edit</td>
                                  
                              </tr>
                            </tbody>
                            @php $sn++;   @endphp
                          @endforeach
                      @else
                        <tbody>
                          <tr class="col-md-12 col-lg-12 mb-12">
                            <td class="card-title" colspan="3">No Department Yet</td>
                                
                          </tr>
                        </tbody>
                      @endif
                    </table>
                  </div>
                </div>
              </div>
              <!-- Examples -->

             
              <!--/ Card layout -->
            </div>
            
            <!-- / Content -->

            <!-- Footer -->
            @include('includes.footer')
            <!-- / Footer -->

            <div class="content-backdrop fade"></div>
        </div>
        <!-- Content wrapper -->
      </div>
      <!-- / Layout page -->
    </div>

    <!-- Overlay -->
    <div class="layout-overlay layout-menu-toggle"></div>
</div>
@endsection