@extends('layouts.app')

@section('content')
<div class="row p-4">
    {{-- Add Department Form --}}
    <div class="col-md-4">
        <div class="card">
            <div class="card-header">Add Department</div>
            <div class="card-body">
                <form method="POST" action="{{ route('departments.store') }}">
                    @csrf
                    <div class="mb-3">
                        <label>Department Name</label>
                        <input type="text" name="name" class="form-control" placeholder="Enter department name" required>
                    </div>
                    <button type="submit" class="btn btn-primary">Add</button>
                </form>
            </div>
        </div>
    </div>

    {{-- Departments Table --}}
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">All Department Posts</div>
            <div class="card-body">
                <table class="table table-striped" id="departmentsTable">
                    <thead>
                        <tr>
                            <th>Department</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($departments as $dept)
                            <tr>
                                <td>{{ $dept->name }}</td>
                                <td>
                                    <button class="btn btn-sm btn-info edit-btn" data-id="{{ $dept->id }}">Edit</button>
                                    <a href="{{ route('departments.show', $dept->id) }}" class="btn btn-sm btn-success">Details</a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>

                <div class="mt-2">
                    {{ $departments->links() }}
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Edit Modal --}}
<div class="modal fade" id="editDepartmentModal" tabindex="-1" aria-labelledby="editDepartmentModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <form method="POST" id="editDepartmentForm">
      @csrf
      @method('PUT')
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="editDepartmentModalLabel">Edit Department</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="mb-3">
            <label for="editDepartmentName" class="form-label">Department Name</label>
            <input type="text" name="name" id="editDepartmentName" class="form-control" required>
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-primary">Update</button>
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        </div>
      </div>
    </form>
  </div>
</div>
@endsection

@section('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
    $('.edit-btn').click(function () {
        const deptId = $(this).data('id');

        $.get(`/departments/${deptId}/edit`, function (data) {
            $('#editDepartmentName').val(data.name);
            $('#editDepartmentForm').attr('action', `/departments/${deptId}`);
            $('#editDepartmentModal').modal('show');
        });
    });
});
</script>
@endsection