@extends('layoutsteacher.layouts')
@section('title', 'ข้อมูลผู้เรียน')
@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>


<!-- Add this to <head> -->
<link href="https://unicons.iconscout.com/release/v4.0.8/css/line.css" rel="stylesheet">

<div class="container my-5">
  <!-- <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 gap-3 align-items-stretch">
    <input type="text" id="search" class="form-control flex-fill" placeholder="ค้นหาชื่อ นามสกุล" style="height:50px;">

    <a href="#" class="btn btn-primary d-flex align-items-center justify-content-center"
       id="copylinkstudent"
       data-bs-toggle="modal" data-bs-target="#copylinkModal"
       style="min-width: 200px;padding: 10px 15px;height:50px">
        สร้างลิงก์สมัครผู้เรียน
    </a>

    <a href="#" class="btn btn-primary d-flex align-items-center justify-content-center"
       id="addstudent"
       data-bs-toggle="modal" data-bs-target="#studentModal"
       style="min-width: 150px;padding: 10px 15px;height:50px">
        เพิ่มผู้เรียน
    </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>วันที่ลงทะเบียน</th>
            <th>วันที่ใช้งานล่าสุด</th>
            <th class="text-center">ดูรายละเอียด</th>
          </tr>
        </thead>
        <tbody>
            @if (!empty($students))
                  @foreach($students as $student)
          <tr>
            <td>{{ $student->firstname }} {{ $student->lastname }}</td>
            <td>{{ $student->email ?? '-' }}</td>
            <td>{{ $student->created_at->format('d/m/Y') }}</td>
            <td>{{ $student->updated_at->format('d/m/Y') }}</td>
            <td class="text-center">
            <a href="#" class="text-muted" data-bs-toggle="modal" data-bs-target="#studentModal" onclick="editStudent({{ $student->id }})">
                <i class="uil uil-eye"></i>
            </a>
        </td>
          </tr>
         
          @endforeach
               
            @endif

        </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

<!-- Modal -->
<div class="modal fade" id="copylinkModal" tabindex="-1" aria-labelledby="copylinkModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">ลิงก์สมัครผู้เรียน</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="ปิด"></button>
      </div>
      <div class="modal-body">
        <p>กดปุ่มเพื่อคัดลอกลิงก์สมัครผู้เรียน:</p>
        <input type="text" id="linkToCopy" class="form-control" readonly />
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="copyLinkConfirm">คัดลอกลิงก์</button>
      </div>
    </div>
  </div>
</div>


<!-- Modal -->
<div class="modal fade" id="studentModal" tabindex="-1" aria-labelledby="studentModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="studentModalLabel">เพิ่มผู้เรียน</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="studentForm" method="POST" enctype="multipart/form-data" data-mode="create">
                    @csrf

                    <!-- Dropdown for selecting input method -->
                    <div class="form-group mb-3" id="inputOptionWrapper">
                        <label for="inputOption">เลือกวิธีการเพิ่มข้อมูล</label>
                        <select class="form-select" id="inputOption" required>
                            <option value="manual">กรอกข้อมูลด้วยมือ</option>
                            <option value="upload">อัปโหลดไฟล์ (XLSX)</option>
                        </select>
                    </div>

                    <!-- Manual input form (default) -->
                    <div id="manualInput" class="d-block">
                        <div class="d-flex">
                            <div class="form-group w-100">
                                <label for="firstname">ชื่อ</label>
                                <input type="text" class="form-control" id="firstname" name="firstname" required>
                            </div>
                            <div class="px-3"></div>
                            <div class="form-group w-100">
                                <label for="lastname">นามสกุล</label>
                                <input type="text" class="form-control" id="lastname" name="lastname" required>
                            </div>
                        </div>
                        <div class="d-flex">
                            <div class="form-group w-100">
                                <label for="email">อีเมล</label>
                                <input type="email" class="form-control" id="email" name="email">
                            </div>
                            <div class="px-3"></div>
                            <div class="form-group w-100">
                                <label for="phone">เบอร์โทรศัพท์</label>
                                <input type="text" class="form-control" id="phone" name="phone">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="username">ชื่อผู้ใช้</label>
                            <input type="text" class="form-control" id="username" name="username" required>
                        </div>
                        <div class="d-flex">
                            <div class="form-group w-100">
                                <label for="password">รหัสผ่าน</label>
                                <input type="password" class="form-control" id="password" name="password" required>
                            </div>
                            <div class="px-3"></div>
                            <div class="form-group w-100">
                                <label for="confirmpassword">ยืนยันรหัสผ่าน</label>
                                <input type="password" class="form-control" id="confirmpassword" name="confirmpassword" required>
                            </div>
                        </div>
                        <div class="d-flex">
                            <div class="form-group w-100 me-3">
                                <label for="age">ช่วงอายุ</label>
                                <select class="form-control" id="age" name="age">
                                    <option value="" disabled selected>-- เลือกช่วงอายุ --</option>
                                    <option value="1">ต่ำกว่า 12 ปี</option>
                                    <option value="2">12 - 17 ปี</option>
                                    <option value="3">18 - 24 ปี</option>
                                    <option value="4">25 - 34 ปี</option>
                                    <option value="5">35 - 44 ปี</option>
                                    <option value="6">45 ปีขึ้นไป</option>
                                </select>
                            </div>
                            <div class="px-3"></div>
                            <div class="form-group w-100">
                                <label for="lineid">Line ID</label>
                                <input type="text" class="form-control" id="lineid" name="lineid">
                            </div>
                        </div>
                    </div>

                    <!-- File upload form (hidden by default) -->
                    <div id="fileUpload" class="d-none">
                        <div class="mb-3">
                            <label for="file" class="form-label">อัปโหลดไฟล์ (XLSX)</label>
                            <input type="file" class="form-control" id="file" name="file" accept=".xlsx, .xls" />
                        </div>
                    </div>

                    <button type="submit" class="btn btn-primary w-100 mt-3">บันทึก</button>
                </form>
            </div>
        </div>
    </div>
</div>


  <!-- </div> -->
</div>
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const copyBtn = document.getElementById('copylinkstudent');
        const copyConfirmBtn = document.getElementById('copyLinkConfirm');
        const linkInput = document.getElementById('linkToCopy');

        const token = localStorage.getItem('token');
        if (!token) return;

        // Parse JWT token
        const parseJwt = (token) => {
            try {
                const base64Url = token.split('.')[1];
                const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
                const jsonPayload = decodeURIComponent(atob(base64).split('').map(function (c) {
                    return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
                }).join(''));
                return JSON.parse(jsonPayload);
            } catch (e) {
                console.error('Failed to parse JWT:', e);
                return null;
            }
        };

        const payload = parseJwt(token);
        const teacherId = payload?.sub;
        if (!teacherId) return;

        const registerUrl = `{{ config('app.url') }}/student/register?teacher_id=${teacherId}`;

        // Set value to input
        if (linkInput) {
            linkInput.value = registerUrl;
        }

        // Copy when clicking confirm button
        copyConfirmBtn?.addEventListener('click', () => {
            if (!linkInput) return;

            linkInput.select();
            linkInput.setSelectionRange(0, 99999); // for mobile devices

            try {
                const success = document.execCommand('copy');
                if (success) {
                    alert('คัดลอกลิงก์สำเร็จ');
                } else {
                    alert('ไม่สามารถคัดลอกลิงก์ได้');
                }
            } catch (err) {
                alert('เกิดข้อผิดพลาดในการคัดลอกลิงก์');
            }
        });
    });
</script>




<script>
    const API_BASE_URL = "{{ config('app.url') }}";
    document.getElementById('addstudent').addEventListener('click',function () { 
         const form = document.getElementById('studentForm');

        // Set mode to edit
        form.dataset.mode = 'create';
        form.reset();
     });
document.getElementById('inputOption').addEventListener('change', function() {
    const selectedOption = this.value;
    if (selectedOption === 'manual') {
        document.getElementById('manualInput').classList.remove('d-none');
        document.getElementById('manualInput').classList.add('d-block');
        document.getElementById('fileUpload').classList.remove('d-block');
        document.getElementById('fileUpload').classList.add('d-none');

         document.getElementById('firstname').setAttribute('required', 'required');
        document.getElementById('lastname').setAttribute('required', 'required');
           document.getElementById('username').setAttribute('required', 'required');
                document.getElementById('password').setAttribute('required', 'required');
                document.getElementById('confirmpassword').setAttribute('required', 'required');
    } else {
        document.getElementById('fileUpload').classList.remove('d-none');
        document.getElementById('fileUpload').classList.add('d-block');
        document.getElementById('manualInput').classList.remove('d-block');
        document.getElementById('manualInput').classList.add('d-none');
          document.getElementById('firstname').removeAttribute('required');
                document.getElementById('lastname').removeAttribute('required');
                document.getElementById('username').removeAttribute('required');
                document.getElementById('password').removeAttribute('required');
                document.getElementById('confirmpassword').removeAttribute('required');
    }
});
document.getElementById('search').addEventListener('input', function() {
    const searchQuery = this.value;
    
    // Trigger the API request to search students by name
    fetch(`${API_BASE_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);
    });
});
function editStudent(studentId) {
    // Fetch student data using the studentId
    const form = document.getElementById('studentForm');

        // Set mode to edit
        form.dataset.mode = 'edit';
    fetch(`${API_BASE_URL}/api/students/${studentId}`, {
        method: 'GET',
        headers: {
            'Authorization': `Bearer ${localStorage.getItem('token')}`, // Assuming you are using a JWT token
            'X-CSRF-TOKEN': '{{ csrf_token() }}'  // Include CSRF token for security
        }
    })
    .then(response => response.json())
    .then(data => {
        // If data is received, populate the modal fields
        if (data.student) {
            const student = data.student;
            document.getElementById('firstname').value = student.firstname;
            document.getElementById('lastname').value = student.lastname;
            document.getElementById('email').value = student.email;
            document.getElementById('phone').value = student.phone;
            document.getElementById('username').value = student.username;
            document.getElementById('age').value = student.age;
            document.getElementById('lineid').value = student.lineid;
             document.getElementById('inputOptionWrapper').style.display = 'none';
               document.getElementById('password').removeAttribute('required');
                document.getElementById('confirmpassword').removeAttribute('required');
                document.getElementById('password').value ='';
                document.getElementById('confirmpassword').value ='';
        }
    })
    .catch(error => {
        console.error('Error fetching student data:', error);
    });
}
function updateStudentTable(students) {
        const tableBody = document.querySelector('table tbody');
        tableBody.innerHTML = ''; // Clear the table before populating with new results

        students.forEach(student => {
            const row = document.createElement('tr');
            row.innerHTML = `
                <td>${student.firstname} ${student.lastname}</td>
                <td>${student.email ?? '-'}</td>
                <td>${new Date(student.created_at).toLocaleDateString()}</td>
                <td>${new Date(student.updated_at).toLocaleDateString()}</td>
                <td class="text-center">
                    <a href="#" class="text-muted" data-bs-toggle="modal" data-bs-target="#studentModal" onclick="editStudent(${student.id})">
                        <i class="uil uil-eye"></i>
                    </a>
                </td>
            `;
            tableBody.appendChild(row);
        });
  updatePagination(students);  // Update pagination controls
}

// Function to update the pagination controls
function updatePagination(students) {
    const paginationContainer = document.querySelector('.custom-pagination');
    paginationContainer.innerHTML = '';  // Clear the existing pagination controls

    // Previous button
    if (students.current_page > 1) {
        const prevButton = document.createElement('a');
        prevButton.href = '#';
        prevButton.textContent = 'Previous';
        prevButton.onclick = () => fetchStudents(students.current_page - 1);
        paginationContainer.appendChild(prevButton);
    }

    // Page numbers
    for (let i = 1; i <= students.last_page; i++) {
        const pageLink = document.createElement('a');
        pageLink.href = '#';
        pageLink.textContent = i;
        if (students.current_page === i) {
            pageLink.classList.add('active');  // Highlight the current page
        }
        pageLink.onclick = () => fetchStudents(i);
        paginationContainer.appendChild(pageLink);
    }

    // Next button
    if (students.current_page < students.last_page) {
        const nextButton = document.createElement('a');
        nextButton.href = '#';
        nextButton.textContent = 'Next';
        nextButton.onclick = () => fetchStudents(students.current_page + 1);
        paginationContainer.appendChild(nextButton);
    }
}
//     const token = localStorage.getItem('token');
//         console.log('Token:', token);
//        if (token) {
//     fetch(`${API_BASE_URL}/students`, {
//         method: 'GET',
//         headers: {
//             'Authorization': 'Bearer ' + token,  // Send the token as Bearer token
//             'Content-Type': 'application/json',
//         }
//     })
//     .then(response => {
//         console.log('Response:', response);
//         if (!response.ok) {
//             throw new Error('Unauthorized');
//         }
//         return response.json();
//     })
//     .then(data => {
//         console.log(data);  // Handle your student data here
//     })
//     .catch(error => {
//         console.error('Error:', error);  // Handle errors like unauthorized or fetch errors
//     });
// } else {
//     console.log('No token found in localStorage');
// }
 document.addEventListener('DOMContentLoaded', function () {
    const form = document.getElementById('studentForm');

        if (!form) {
            console.warn('❗ Form with id="studentForm" not found.');
            return;
        }
         document.getElementById('studentForm').addEventListener('submit', function(e) {
        e.preventDefault();
         
        const form = e.target;
        const formData = new FormData(form);
        const option = document.getElementById('inputOption').value; // Get the selected option
        const mode = form.dataset.mode || 'create'; // Optional: set data-mode="create" or "edit" on the form
        const password = document.getElementById('password').value.trim();
        const confirm = document.getElementById('confirmpassword').value.trim();
        let title = 'เพิ่มผู้เรียนสำเร็จ';
        if (mode == 'edit') {
            title = 'แก้ไขผู้เรียนสำเร็จ';
        }
        // ✅ FRONTEND PASSWORD VALIDATION
         if (mode === 'create') {
            if (!password || !confirm) {
                Swal.fire('แจ้งเตือน', 'กรุณากรอกรหัสผ่านและยืนยันรหัสผ่าน', 'warning');
                return;
            }
            if (password.length < 8) {
                Swal.fire('แจ้งเตือน', 'รหัสผ่านต้องมีอย่างน้อย 8 ตัวอักษร', 'warning');
                return;
            }
            if (password !== confirm) {
                Swal.fire('แจ้งเตือน', 'รหัสผ่านและยืนยันรหัสผ่านไม่ตรงกัน', 'warning');
                return;
            }
        }
        if (mode === 'edit') {
            if (password || confirm) {
                if (password.length < 8) {
                    Swal.fire('แจ้งเตือน', 'รหัสผ่านต้องมีอย่างน้อย 8 ตัวอักษร', 'warning');
                    return;
                }
                if (password !== confirm) {
                    Swal.fire('แจ้งเตือน', 'รหัสผ่านและยืนยันรหัสผ่านไม่ตรงกัน', 'warning');
                    return;
                }
            }
        }
            // If file upload is selected, append the file to FormData
            if (option === 'upload') {
                const fileInput = document.getElementById('file');
                if (fileInput.files.length > 0) {
                    formData.append('file', fileInput.files[0]);
                }
              
            }
            formData.append('mode', mode);
        // Convert FormData to JSON
//         const jsonData = {};
//         formData.forEach((value, key) => {
//             jsonData[key] = value;
//         });
// console.log(jsonData);
        fetch(`{{ config('app.url') }}/api/students`, {
            method: 'POST',
            headers: {
                // 'Content-Type': 'application/json',
                'Authorization': `Bearer ${token}`,
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: formData
        })
        .then(res => res.json())
        .then(data => {
            if (data.message === 'Students uploaded successfully!' || data.student) {
              
                Swal.fire({
                    icon: 'success',
                    title: title,
                    // timer: 1200,
                    showConfirmButton: true
                }).then(() => {
                    form.reset();
                    bootstrap.Modal.getInstance(document.getElementById('studentModal')).hide();
                    location.reload();
                });
            } else {
                Swal.fire({
                    icon: 'error',
                    title: 'เกิดข้อผิดพลาด',
                    text: data.message || ''
                });
                console.log(data);
            }
        })
        .catch(err => {
            console.error('Fetch error:', err);
            alert('เกิดข้อผิดพลาดในการเชื่อมต่อ');
        });
    });
});
    </script>
@endsection