@extends('admin.admin_dashboard')
@section('customcss')

<!-- Datatable -->
<link href="{{asset('../asset/vendor/datatables/css/jquery.dataTables.min.css')}}" rel="stylesheet">
<!-- Custom Stylesheet -->
<link href="{{asset('../asset/vendor/jquery-nice-select/css/nice-select.css"')}}" rel="stylesheet">
@endsection

@section('admin')

<div class="content-body">
  <div class="container-fluid">

    @if(session('success'))
      <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    <div class="row">

      <!-- ========== CARD 1 : Create Comments ========== -->
      <div class="col-xl-6 mb-4">
        <div class="card shadow-sm">
          <div class="card-header bg-primary text-white">
            <h5 class="mb-0">Set Your Comments For Progress</h5>
          </div>
          <div class="card-body">
            <form action="{{ route('admin.faculty-comments.store') }}" method="POST">
              @csrf
              <div class="mb-3">
                <label class="form-label fw-bold">Select Commentator:</label>
                <select name="role" class="form-select" required>
                  <option value="">Select one...</option>
                  @foreach($roles as $role)
                    <option value="{{ $role }}">{{ $role }}</option>
                  @endforeach
                </select>
              </div>

              <table class="table table-bordered align-middle text-center">
                <thead class="table-success">
                  <tr>
                    <th>Start Grade</th>
                    <th>End Grade</th>
                    <th>Comments</th>
                    <th>Action</th>
                  </tr>
                </thead>
                <tbody id="commentRows">
                  <tr>
                    <td><input type="number" step="0.01" min="0" max="5" name="comments[0][grade_from]" class="form-control" required></td>
                    <td><input type="number" step="0.01" min="0" max="5" name="comments[0][grade_to]" class="form-control" required></td>
                    <td><textarea name="comments[0][text]" class="form-control" rows="1" required></textarea></td>
                    <td>
                      <button type="button" class="btn btn-sm btn-danger" onclick="deleteRow(this)" style="visibility: hidden;">
                        <i class="fa fa-trash"></i>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>

              <button type="button" id="addRow" class="btn btn-warning btn-sm">
                <i class="fa fa-plus"></i> Add Row
              </button>

              <div class="mt-3 text-end">
                <button type="submit" class="btn btn-primary">Save</button>
              </div>
            </form>
          </div>
        </div>
      </div>

      <!-- ========== CARD 2 : Comment List ========== -->
      <div class="col-xl-6 mb-4">
        <div class="card shadow-sm">
          <div class="card-header bg-secondary text-white">
            <h5 class="mb-0">Existing Comments List</h5>
          </div>
          <div class="card-body">
            <div class="table-responsive">
              <table id="example" class="display" style="min-width: auto;">
              
                <thead class="table-primary">
                  <tr>
                    <th>#</th>
                    <th>Role</th>
                    <th>Grade Range</th>
                    <th>Comment</th>
                    <th>Action</th>
                  </tr>
                </thead>
                <tbody>
                  @forelse($comments as $key=>$c)
                    <tr>
                      <td>{{ $key+1 }}</td>
                      <td>{{ $c->role }}</td>
                      <td>{{ $c->grade_from }} – {{ $c->grade_to }}</td>
                      <td>{{ $c->comment }}</td>
                      <td>
                        <form action="{{ route('admin.faculty-comments.destroy', $c->id) }}" method="POST" onsubmit="return confirm('Delete this comment?')">
                          @csrf
                          @method('DELETE')
                          <button type="submit" class="btn btn-sm btn-danger">
                            <i class="fa fa-trash"></i>
                          </button>
                        </form>
                      </td>
                    </tr>
                  @empty
                    <tr><td colspan="5" class="text-center text-muted">No comments added yet.</td></tr>
                  @endforelse
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>

    </div>

  </div>
</div>

<script>
  let rowIndex = 1;
  
  document.getElementById('addRow').addEventListener('click', function() {
    const tableBody = document.getElementById('commentRows');
    const newRow = `
      <tr>
        <td><input type="number" step="0.01" min="0" max="5" name="comments[${rowIndex}][grade_from]" class="form-control" required></td>
        <td><input type="number" step="0.01" min="0" max="5" name="comments[${rowIndex}][grade_to]" class="form-control" required></td>
        <td><textarea name="comments[${rowIndex}][text]" class="form-control" rows="1" required></textarea></td>
        <td>
          <button type="button" class="btn btn-sm btn-danger" onclick="deleteRow(this)">
            <i class="fa fa-trash"></i>
          </button>
        </td>
      </tr>`;
    tableBody.insertAdjacentHTML('beforeend', newRow);
    rowIndex++;
    updateRowIndices();
  });

  function deleteRow(btn) {
    const tableBody = document.getElementById('commentRows');
    const rows = tableBody.querySelectorAll('tr');
    
    // Don't delete if only one row remains
    if (rows.length <= 1) {
      alert('At least one row is required.');
      return;
    }
    
    btn.closest('tr').remove();
    updateRowIndices();
  }

  function updateRowIndices() {
    const tableBody = document.getElementById('commentRows');
    const rows = tableBody.querySelectorAll('tr');
    
    rows.forEach((row, index) => {
      row.querySelector('input[name*="grade_from"]').name = `comments[${index}][grade_from]`;
      row.querySelector('input[name*="grade_to"]').name = `comments[${index}][grade_to]`;
      row.querySelector('textarea[name*="text"]').name = `comments[${index}][text]`;
    });
    
    rowIndex = rows.length;
  }
</script>

@endsection

@section('customjs')

<!-- Datatable -->
<script src="{{asset('../asset/vendor/datatables/js/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('../asset/js/plugins-init/datatables.init.js')}}"></script>

<script src="{{asset('../asset/vendor/jquery-nice-select/js/jquery.nice-select.min.js')}}"></script>
@endsection