@extends('layouts.mainlayout')
@section('title', 'Department')
@section('main')
<!-- Single item selection -->
<div class="card">
    <div class="card-header header-elements-inline">
        <h5 class="card-title icon-tree7 font-weight-bold"> Departments</h5>
        @if(auth()->user()->can('Edit Departments module'))
        <button class="icon-plus2 btn btn-success" onclick="AddNewDepartmentForm()">Add New</button>@endif
    </div>
        <table class="table datatable-select-single">
        <thead>
            <tr>
                <th>Department Name</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($departments as $department)
                <tr>
                    <td>{{ $department->department}}</td>
                    <td><div class="row">
                        @if(auth()->user()->can('Edit Departments module'))
                        <button class="icon-pencil7" style="color:#3699FF !important;" onclick="editDepartmentForm({{$department}})"></button>@endif
                        @if(auth()->user()->can('Delete Departments module'))
                        <form method="Post" action="{{route('department.destroy',$department->id)}}"  onsubmit="return confirmDelete();">
                            @method('DELETE')
                            @csrf
                            &nbsp; &nbsp;<button type="submit" class="icon-bin" style="color:#dc3545 !important;"></button>

                        </form> @endif </div>
                    </td>

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

<!-- Modal -->
<div class="modal fade" id="departmentEditModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

    <div class="modal-dialog" role="document">
    <form class="form-validate-jquery" id="modal-form" method="POST" @if(isset($department)) action="{{ route('department.update', $department) }}" @endif>
    <input type="hidden" name="_method" value="PATCH"/>
    <input type="hidden" class="form-control" type="number" name="id" id="edit-department-id"/>
    @csrf
      <div class="modal-content">
        <fieldset class="mb-3">
        <div class="modal-header">
          <h5 class="modal-title" id="edit-department-form"></h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>

        <div class="modal-body">
            <div class="form-group row">
                <label class="col-form-label col-lg-3">Department Name</label>
                <div class="col-lg-9">
                    <input class="form-control" type="text" name="department" id="edit-department-name" width="100%" maxlength="190" required placeholder="Department Name"  autofocus />
                </div>
            </div>
        </div>
        </fieldset>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-primary">Save changes</button>
        </div>
      </div>
      </form>
    </div>

  </div>


  <div class="modal fade" id="addNewDepartmentEditModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

    <div class="modal-dialog" role="document">
    <form class="form-validate-jquery" id="modal-form" method="POST" action="{{ route('department.store') }}" >
    <input type="hidden" name="_method" value="POST"/>

    @csrf
      <div class="modal-content">
        <fieldset class="mb-3">
        <div class="modal-header">
          <h5 class="modal-title" id="add-department-form"></h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
            <div class="form-group row">
                <label class="col-form-label col-lg-3">Department Name</label>
                <div class="col-lg-9">
                    <input class="form-control" type="text" name="department" maxlength="190" width="100%" required placeholder="Department Name"  autofocus />
                </div>
            </div>
        </div>
        </fieldset>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-primary">Save</button>
        </div>
      </div>
      </form>
    </div>

  </div>

<!--/Single item selection -->
@endsection

@section('js')
  <script>
  function editDepartmentForm(department){
        $('#departmentEditModal').modal({
            show: true
        });
        $('#edit-department-form').text('Edit Department Form');
        $('#edit-department-name').val(department.department);
        $('#edit-department-id').val(department.id);

    }

    function AddNewDepartmentForm(){
        $('#addNewDepartmentEditModal').modal({
            show: true
        });
        $('#add-department-form').text('New Add Department Form');

    }
function confirmDelete() {
    var r = confirm("Are you sure, you want to delete this Department?");
    if (r == false) {
        return false;
    } else {
        return true;
    }
}
  </script>
@endsection