@extends('layoutsteacher.layouts')
@section('content')
<style>
  /* Card wrapper */
  /* .student-card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    overflow: hidden;
  }
  .student-card .card-header {
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    padding: 1rem 1.5rem;
  }
  .student-card .card-header h5 {
    font-size: 1.25rem;
    color: #1e3a8a;
    margin: 0;
  }
  .student-card .card-header .form-control {
    max-width: 240px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
  }
  .student-card .card-header .btn-add {
    margin-left: .75rem;
    border-radius: 8px;
  }
  .student-card table {
    margin-bottom: 0;
  }
  .student-card thead th {
    color: #6b7280;
    font-weight: 500;
    border-bottom: none;
    background: #fafafb;
  }
  .student-card tbody tr {
    border-top: 1px solid #f3f4f6;
  }
  .student-card tbody td {
    padding: 1rem 1.5rem;
    color: #374151;
    vertical-align: middle;
  }
    */
  /* .card-footer {
    background: #fff;
    border-top: 1px solid #e5e7eb;
    text-align: center;
    padding: .75rem;
  }
  .pagination .page-link {
    border-radius: 6px;
    background: #fff;
    border: 1px solid #e5e7eb;
    color: #374151;
    margin: 0 .25rem;
  }
  .pagination .page-item.active .page-link {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #fff;
  }  */
  .table-container {
        background-color: #ffffff;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        margin-top: 20px;
    }

    .table {
    width: 100%;
    /* border-collapse: separate; */
    border-spacing: 0 12px;
    font-size: 16px;
    color: #3c3c3c;
}

.table th {
    font-weight: 600;
    color: #0D1B4C;
    font-size: 15px;
    background: none;
    border: none;
    padding-bottom: 12px;
}

.table td {
    background-color: #fff;
    padding: 16px 12px;
    vertical-align: middle;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 15px;
    color: #5a5a89;
}

.table tr {
    transition: background 0.2s;
}

.table tr:hover td {
    /* background-color: #f9faff; */
}

    /* .action-btn {
        background-color: #007bff;
        color: white;
        padding: 6px 12px;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .action-btn:hover {
        background-color: #0056b3;
    } */

    /* .add-btn {
        background-color: #00b0ff;
        color: white;
        padding: 6px 12px;
        border-radius: 4px;
        border: none;
        transition: background-color 0.3s ease;
        cursor: pointer;
    }

    .add-btn:hover {
        background-color: #0091cc;
    } */
.custom-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
}

.page-link-number {
    display: inline-block;
    margin: 0 6px;
    padding: 6px 16px;
    background-color: #26aaf7; /* สีฟ้าปุ่ม */
    color: white;
    border-radius: 6px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.page-link-number:hover {
    background-color: #0f93e1;
}

.page-link-number.active {
    background-color: #0b7dc1;
    font-weight: bold;
}

    /* .pagination {
        display: flex;
        justify-content: center;
        padding: 10px;
        list-style-type: none;
    }

    .pagination li {
        margin: 0 5px;
    }

    .pagination a {
        color: #007bff;
        text-decoration: none;
        padding: 6px 12px;
        border-radius: 4px;
        border: 1px solid #ddd;
    }

    .pagination a:hover {
        background-color: #f1f1f1;
    } */
      .modal-dialog {
        max-width: 900px;
        margin: 0 auto;
    }
.modal-header {
    border-bottom: none;
    font-weight: bold;
    font-size: 20px;
    color: #0D1B4C;
}
.modal-content {
    border-radius: 12px;
    padding: 32px;
}
.modal-body input.form-control {
    border-radius: 10px;
    border: 1px solid #e3e6ed;
    padding: 14px;
}

    .modal-title {
        font-size: 1.5rem;
        color: #1e3a8a;
    }

    .btn-close {
        font-size: 1.5rem;
        color: #1e3a8a;
        opacity: 0.7;
    }

    .modal-body {
        padding: 2rem;
    }

    .form-control {
        border-radius: 8px;
        border: 1px solid #d1d5db;
        padding: 10px 15px;
        font-size: 16px;
        margin-bottom: 1rem;
        background-color: #fff;
    }

    .form-control:focus {
        border-color: #26aaf7;
        box-shadow: 0 0 5px rgba(38, 170, 247, 0.5);
    }

    /* .btn {
        width: 100%;
        border-radius: 8px;
        padding: 12px;
        font-size: 16px;
    } */

    .btn-primary {
        background-color: #26aaf7;
        border-color: #26aaf7;
        color: #fff;
        transition: background-color 0.3s ease;
    }

    .btn-primary:hover {
        background-color: #1f94db;
    }

    .btn-secondary {
        background-color: #f8f9fa;
        border-color: #ddd;
        color: #555;
        transition: background-color 0.3s ease;
    }

    .btn-secondary:hover {
        background-color: #f1f1f1;
    }

    /* Label styling */
    .modal-body label {
        font-size: 14px;
        font-weight: 600;
        color: #333;
        margin-bottom: 8px;
        display: block;
    }

    .modal-header .icon-user {
        font-size: 50px;
        color: #26aaf7;
        margin-bottom: 1rem;
    }

    .modal-header .modal-title {
        font-weight: bold;
    }

    .modal-footer {
        display: flex;
        justify-content: flex-end;
        padding: 1rem;
    }

    .modal-footer .btn {
        font-weight: 600;
        padding: 0.6rem 2rem;
    }
    
</style>
<link href="https://unicons.iconscout.com/release/v4.0.8/css/line.css" rel="stylesheet">

<div class="container">
  <!-- <div class="card student-card"> -->
    <div class="table-container">
        <h3>รายคน</h3>
        <div class="d-flex justify-content-end align-items-center">
            
       <div class="d-flex">
        <input type="text" id="search" class="form-control w-100" placeholder="ค้นหาชื่อ นามสกุล">
        <div class="px-4"></div>
        <!-- <a href="#" class="btn btn-primary w-100 h-100" id="addstudent" style="padding: 10px 15px;" data-bs-toggle="modal" data-bs-target="#studentModal">เพิ่มผู้เรียน</a> -->

      </div>
    </div>
    
    <!-- <div class="card-body p-0"> -->
      <table class="table table-borderless align-middle mb-0">
        <thead>
          <tr>
            <th>ชื่อ-นามสกุล</th>
            <th>อีเมล</th>
            <th class="text-center">ดูรายละเอียด</th>
          </tr>
        </thead>
        <tbody>
          @foreach($students as $student)
          <tr>
            <td>{{ $student->firstname }} {{ $student->lastname }}</td>
            <td>{{ $student->email ?? '-' }}</td>
            <td class="text-center">
    <a href="#" class="text-muted"  onclick="showEnrollments({{ $student->id }})">
        <i class="uil uil-eye"></i>
    </a>
</td>
          </tr>
          @endforeach
        </tbody>
      </table>
    <!-- </div> -->
    @if ($students->lastPage() > 1)
<div class="custom-pagination text-center mt-4">
    @for ($i = 1; $i <= $students->lastPage(); $i++)
        <a href="{{ $students->url($i) }}" 
           class="page-link-number {{ $students->currentPage() == $i ? 'active' : '' }}">
            {{ $i }}
        </a>
    @endfor
</div>
@endif

<!-- Enrollments Modal -->
<div class="modal fade" id="enrollmentModal" tabindex="-1" aria-labelledby="enrollmentModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="enrollmentModalLabel">รายวิชาที่ลงทะเบียน</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="ปิด"></button>
      </div>
      <div class="modal-body">
        <table class="table">
          <thead>
            <tr>
              <th>หมวดหมู่</th>
              <th>คอร์ส</th>
               <th>สถานะ</th>
            </tr>
          </thead>
          <tbody id="enrollmentTableBody">
            <!-- JS will populate rows here -->
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
<script>
  function updateStudentTable(students) {
    const tbody = document.querySelector("tbody");
    tbody.innerHTML = '';

    if (students.length === 0) {
        tbody.innerHTML = `<tr><td colspan="3" class="text-center">ไม่พบข้อมูลผู้เรียน</td></tr>`;
        return;
    }

    students.forEach(student => {
        tbody.innerHTML += `
            <tr>
                <td>${student.firstname} ${student.lastname}</td>
                <td>${student.email ?? '-'}</td>
                <td class="text-center">
                    <a href="#" class="text-muted" onclick="showEnrollments(${student.id})">
                        <i class="uil uil-eye"></i>
                    </a>
                </td>
            </tr>
        `;
    });
}
function updatePagination(pagination) {
    const paginationContainer = document.querySelector('.custom-pagination');
    if (!paginationContainer) return;

    if (!pagination || pagination.total <= pagination.per_page) {
        paginationContainer.innerHTML = '';
        return;
    }

    let html = '';
    for (let i = 1; i <= pagination.last_page; i++) {
        html += `<a href="${pagination.path}?page=${i}" 
                   class="page-link-number ${pagination.current_page === i ? 'active' : ''}">
                   ${i}</a>`;
    }
    paginationContainer.innerHTML = html;
}

  function showEnrollments(studentId) {
    fetch(`{{ env('APP_URL') }}/api/students/${studentId}/enrolments`, {
        headers: {
            'Authorization': `Bearer ${token}`
        }
    })
    .then(res => res.json())
    .then(data => {
        const tbody = document.getElementById('enrollmentTableBody');
        tbody.innerHTML = '';

        if (data.enrolled_courses.length === 0) {
            tbody.innerHTML = `<tr><td colspan="2" class="text-center">ไม่พบข้อมูลการลงทะเบียน</td></tr>`;
        } else {
            data.enrolled_courses.forEach(course => {
                const row = `<tr>
                    <td>${course.category_name}</td>
                    <td>${course.course_name}</td>
                    <td>${course.progress ?? '-'}</td>
                </tr>`;
                tbody.innerHTML += row;
            });
        }

        // Show modal
        const modal = new bootstrap.Modal(document.getElementById('enrollmentModal'));
        modal.show();
    })
    .catch(err => {
        console.error('Error loading enrollments:', err);
        alert('ไม่สามารถโหลดข้อมูลรายวิชาได้');
    });
}
document.getElementById('search').addEventListener('input', function() {
    const searchQuery = this.value;
    
    // Trigger the API request to search students by name
    fetch(`{{ env('APP_URL')}}/api/students/search?name=${searchQuery}`, {
        method: 'GET',
        headers: {
            'Authorization': `Bearer ${token}`,
        }
    })
    .then(res => res.json())
    .then(data => {
        // Assuming 'data' contains the student results
        if (data && data.students) {
            updateStudentTable(data.students); // Function to update your table with the results
            //  if(searchQuery==''){
                    updatePagination(data.students);
            // }
        } else {
            alert('No students found.');
        }
    })
    .catch(error => {
        console.error('Error fetching data:', error);
    });
});
  </script>
@endsection