@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($courses as $course)
          <tr>
            <td>{{ $course->category->name ?? '-' }}</td>
            <td>{{ $course->name }}</td>
            <td class="text-center">
                 <a href="#" class="text-muted" onclick="viewStudentsInCourse({{ $course->id }})">
                    <i class="uil uil-eye"></i>
                </a>
            </td>
          </tr>
          @endforeach
        </tbody>
      </table>
    <!-- </div> -->
    @if ($courses->lastPage() > 1)
<div class="custom-pagination text-center mt-4">
    @for ($i = 1; $i <= $courses->lastPage(); $i++)
        <a href="{{ $courses->url($i) }}" 
           class="page-link-number {{ $courses->currentPage() == $i ? 'active' : '' }}">
            {{ $i }}
        </a>
    @endfor
</div>
@endif
<!-- Students in Course Modal -->
<div class="modal fade" id="studentsModal" tabindex="-1" aria-labelledby="studentsModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="studentsModalLabel">ดูรายละเอียดรายคน</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> <!-- Add if needed -->
            </tr>
          </thead>
          <tbody id="studentsTableBody">
            <!-- Data will be inserted here -->
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<script>
    function viewStudentsInCourse(courseId) {
    fetch(`{{ env('APP_URL') }}/api/course/${courseId}/students`, {
        method: 'GET',
        headers: {
            'Authorization': `Bearer ${token}`
        }
    })
    .then(response => response.json())
    .then(result => {
        const tbody = document.getElementById('studentsTableBody');
        tbody.innerHTML = '';

        if (result.status === 'success') {
            const students = result.data;

            if (students.length === 0) {
                tbody.innerHTML = `<tr><td colspan="3" class="text-center">ไม่พบผู้เรียนในคอร์สนี้</td></tr>`;
            } else {
                students.forEach(student => {
                    tbody.innerHTML += `
                        <tr>
                            <td>${student.firstname} ${student.lastname}</td>
                            <td>${student.email ?? '-'}</td>
                            <td>${student.progress ?? '-'}</td> <!-- Add if you have it -->
                        </tr>`;
                });
            }

            // Show modal
            const modal = new bootstrap.Modal(document.getElementById('studentsModal'));
            modal.show();
        } else {
            alert('โหลดข้อมูลล้มเหลว');
        }
    })
    .catch(err => {
        console.error(err);
        alert('เกิดข้อผิดพลาดในการดึงข้อมูล');
    });
}
    </script>
@endsection