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


<!-- 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">
        <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>วันที่ลงทะเบียน</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="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">
                                <label for="age">อายุ</label>
                                <input type="number" class="form-control" id="age" name="age">
                            </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>
    const API_BASE_URL = "{{ env('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');
// }
    </script>
@endsection