@extends('admin.dashboard')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2><i class="bi bi-clipboard-data"></i> รายการข้อมูลคำขอรับบริการ</h2>
    <div class="d-flex gap-2">
        <button class="btn btn-success btn-sm">
            <i class="bi bi-file-earmark-excel"></i> Excel
        </button>
        <button class="btn btn-warning btn-sm">
            <i class="bi bi-clock"></i> วันเวลาล่าสุด
        </button>
    </div>
</div>

<!-- Search and Filter -->
<div class="row mb-3">
    <div class="col-md-6">
        <div class="input-group">
            <span class="input-group-text">ค้นหา:</span>
            <input type="text" class="form-control" placeholder="ค้นหาข้อมูลคำขอรับบริการ...">
        </div>
    </div>
    <div class="col-md-6">
        <div class="d-flex justify-content-end">
            <span class="text-muted" id="serviceRequestCount">กำลังโหลดข้อมูล...</span>
        </div>
    </div>
</div>

<!-- Service Requests Table -->
<div class="card">
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover">
                <thead class="table-light">
                    <tr>
                        <th>ลำดับ</th>
                        <th>วันที่</th>
                        <th>รหัสคำขอ</th>
                        <th>รหัสงาน</th>
                        <th>ชื่อหน่วยงาน</th>
                        <th>ผลิตภัณฑ์ (ชื่อ/รุ่น)</th>
                        <th>ประเภทผลิตภัณฑ์</th>
                        <th>รายการทดสอบ</th>
                        <th>จัดการ</th>
                    </tr>
                </thead>
                <tbody id="serviceRequestsTableBody">
                    <tr>
                        <td colspan="9" class="text-center">
                            <i class="bi bi-hourglass-split"></i> กำลังโหลดข้อมูล...
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Send Survey Modal -->
<div class="modal fade" id="sendSurveyModal" tabindex="-1" aria-labelledby="sendSurveyModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title" id="sendSurveyModalLabel">
                    <i class="bi bi-send"></i> ส่งแบบประเมินความพึงพอใจ
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- Service Request Information -->
                <div class="row mb-4">
                    <div class="col-12">
                        <h6 class="text-primary border-bottom pb-2">
                            <i class="bi bi-info-circle"></i> ข้อมูลคำขอรับบริการ
                        </h6>
                    </div>
                </div>
                
                <div class="row mb-3">
                    <div class="col-md-6">
                        <label class="form-label fw-bold">รหัสคำขอ:</label>
                        <p class="form-control-plaintext" id="requestCode">R63-010</p>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-bold">ชื่อหน่วยงาน:</label>
                        <p class="form-control-plaintext" id="agencyName">กลุ่มวิจัยอุปกรณ์สเปกโทรสโกปีและเซนเซอร์</p>
                    </div>
                </div>
                
                <div class="row mb-3">
                    <div class="col-md-6">
                        <label class="form-label fw-bold">ผลิตภัณฑ์ (ชื่อ/รุ่น):</label>
                        <p class="form-control-plaintext" id="productName">SRAN NetApprove รุ่น NG200</p>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-bold">ประเภทผลิตภัณฑ์:</label>
                        <p class="form-control-plaintext" id="productType">Computer Log Systems</p>
                    </div>
                </div>
                
                <div class="row mb-4">
                    <div class="col-12">
                        <label class="form-label fw-bold">รายการทดสอบ:</label>
                        <p class="form-control-plaintext" id="testItems">การทำงานเชิงหน้าที่ (Functional suitability)</p>
                    </div>
                </div>

                <!-- Survey Selection -->
                <div class="row mb-4">
                    <div class="col-12">
                        <h6 class="text-primary border-bottom pb-2">
                            <i class="bi bi-question-circle"></i> เลือกแบบประเมินที่ต้องการส่ง
                        </h6>
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-12">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="select-all" id="selectAllSurveys">
                            <label class="form-check-label fw-bold" for="selectAllSurveys">
                                เลือกทั้งหมด
                            </label>
                        </div>
                    </div>
                </div>

                <div class="row" id="surveysList">
                    <!-- Surveys will be loaded here dynamically -->
                    <div class="col-12 text-center">
                        <i class="bi bi-hourglass-split"></i> กำลังโหลดแบบประเมิน...
                    </div>
                </div>





                <!-- Expiration Days Selection -->
                <div class="row mb-4">
                    <div class="col-12">
                        <h6 class="text-primary border-bottom pb-2">
                            <i class="bi bi-clock-history"></i> ตั้งค่าวันหมดอายุ
                        </h6>
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-md-6">
                        <label for="expirationDays" class="form-label fw-bold">
                            วันหมดอายุ (วัน) <span class="text-danger">*</span>
                        </label>
                        <input 
                            type="number" 
                            class="form-control" 
                            id="expirationDays" 
                            name="expiration_days" 
                            value="{{ config('survey.expiration_days', 7) }}" 
                            min="1" 
                            max="365" 
                            required
                        >
                        <div class="form-text">
                            จำนวนวันที่แบบประเมินจะหมดอายุหลังจากส่งให้ผู้ใช้
                            <br>
                            <small class="text-muted">ค่าเริ่มต้น: {{ config('survey.expiration_days', 7) }} วัน</small>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-bold">ตัวอย่างวันหมดอายุ:</label>
                        <p class="form-control-plaintext" id="expirationPreview">
                            <span class="" id="expirationDatePreview">
                                {{ now()->addDays(config('survey.expiration_days', 7))->setTime(23, 59, 0)->format('d/m/Y H:i') }} น. 
                            </span>
                        </p>
                    </div>
                </div>

                <!-- User Selection -->
                <!-- Recipients Selection -->
                <div class="row mb-4">
                    <div class="col-12">
                        <h6 class="text-primary border-bottom pb-2">
                            <i class="bi bi-people"></i> เลือกผู้รับแบบประเมิน
                        </h6>
                    </div>
                </div>

                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h6 class="mb-0">รายชื่อผู้ใช้ในหน่วยงาน <span id="recipientAgency">กลุ่มวิจัยอุปกรณ์สเปกโทรสโกปีและเซนเซอร์</span></h6>
                            </div>
                            <div class="card-body">
                                <div class="row" id="usersList">
                                    <!-- Users will be loaded here dynamically -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="bi bi-x-circle"></i> ยกเลิก
                </button>
                <button type="button" class="btn btn-primary" id="sendSurveyBtn" disabled data-service-id="">
                    <i class="bi bi-send"></i> ส่งแบบประเมิน
                </button>
            </div>
        </div>
    </div>
</div>

<script>
// โหลดข้อมูลตารางเมื่อหน้าเว็บโหลดเสร็จ
document.addEventListener('DOMContentLoaded', function() {
    loadServiceRequests();
});

// ฟังก์ชันโหลดข้อมูล service requests
async function loadServiceRequests() {
    try {
        const response = await fetch('/admin/service-requests-api', {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        });
        
        if (!response.ok) {
            throw new Error('ไม่สามารถดึงข้อมูลได้');
        }
        const result = await response.json();
        
        if (result.success && result.data) {
            updateServiceRequestsTable(result.data);
            updateServiceRequestCount(result.total || result.data.length);
        } else {
            throw new Error(result.error || 'เกิดข้อผิดพลาดในการดึงข้อมูล');
        }
        
    } catch (error) {
        console.error('Error loading service requests:', error);
        showTableError('เกิดข้อผิดพลาดในการโหลดข้อมูล: ' + error.message);
    }
}

// ฟังก์ชันอัปเดตตาราง service requests
function updateServiceRequestsTable(serviceRequests) {
    const tbody = document.getElementById('serviceRequestsTableBody');
    tbody.innerHTML = '';
    
    if (serviceRequests.length === 0) {
        tbody.innerHTML = '<tr><td colspan="9" class="text-center text-muted">ไม่มีข้อมูลคำขอรับบริการ</td></tr>';
        return;
    }
    
    serviceRequests.forEach((service, index) => {
        const row = document.createElement('tr');
        row.innerHTML = `
            <td>${index + 1}</td>
            <td>${formatDate(service.Date_Service)}</td>
            <td><strong>${service.ServiceRequestID || 'ไม่ระบุ'}</strong></td>
            <td>${service.J_Number || '-'}</td>
            <td>${service.Agency_Name || 'ไม่ระบุ'}</td>
            <td>${service.Model_Name || 'ไม่ระบุ'}</td>
            <td>${service.product_name || service.product_type || 'ไม่ระบุ'}</td>
            <td>${service.product_type || 'ไม่ระบุ'}</td>
            <td>${service.Feature || service.Details || 'ไม่ระบุ'}</td>
            <td>
                <div class="btn-group" role="group">
                    <button class="btn btn-sm btn-outline-primary" title="ดูรายละเอียด">
                        <i class="bi bi-eye"></i>
                    </button>
                    <button class="btn btn-sm btn-outline-success" title="ล็อค">
                        <i class="bi bi-lock"></i>
                    </button>
                    <button class="btn btn-sm btn-outline-warning" title="เอกสาร">
                        <i class="bi bi-folder"></i>
                    </button>
                    <button class="btn btn-sm btn-outline-info" title="แก้ไข">
                        <i class="bi bi-pencil"></i>
                    </button>
                    <button class="btn btn-sm btn-outline-secondary" title="ส่งแบบประเมิน" data-bs-toggle="modal" data-bs-target="#sendSurveyModal" data-service-id="${service.Service_ID}">
                        <i class="bi bi-send"></i>
                    </button>
                </div>
            </td>
        `;
        tbody.appendChild(row);
    });
}

// ฟังก์ชันอัพเดทจำนวนรายการ
function updateServiceRequestCount(total) {
    const countElement = document.getElementById('serviceRequestCount');
    if (countElement) {
        countElement.textContent = `แสดง ${total} รายการ`;
    }
}

// ฟังก์ชันแสดงข้อผิดพลาดในตาราง
function showTableError(message) {
    const tbody = document.getElementById('serviceRequestsTableBody');
    tbody.innerHTML = `<tr><td colspan="9" class="text-center text-danger"><i class="bi bi-exclamation-triangle"></i> ${message}</td></tr>`;
    
    // อัพเดทจำนวนเป็น 0
    updateServiceRequestCount(0);
}

// ฟังก์ชันจัดรูปแบบวันที่
function formatDate(dateString) {
    if (!dateString) return 'ไม่ระบุ';
    
    const date = new Date(dateString);
    const day = date.getDate().toString().padStart(2, '0');
    const month = (date.getMonth() + 1).toString().padStart(2, '0');
    const year = date.getFullYear() + 543; // แปลงเป็น พ.ศ.
    
    return `${day}/${month}/${year}`;
}

// Handle modal show event
document.addEventListener('DOMContentLoaded', function() {
    const modalElement = document.getElementById('sendSurveyModal');
    if (modalElement) {
        modalElement.addEventListener('show.bs.modal', function (event) {
            const button = event.relatedTarget;
            if (button) {
                const serviceId = button.getAttribute('data-service-id') || button.dataset.serviceId;
                
                if (serviceId) {
                    // ตั้งค่า service ID ในปุ่มส่ง
                    const sendBtn = document.getElementById('sendSurveyBtn');
                    if (sendBtn) {
                        sendBtn.setAttribute('data-service-id', serviceId);
                    }
                    
                    // แสดง loading
                    showLoading();
                    
                    // ดึงข้อมูลจาก API
                    fetchServiceRequestData(serviceId);
                    
                    // ดึงข้อมูลแบบประเมิน
                    loadSurveys();
                }
            }
        });
    }
});

// ฟังก์ชันแสดง loading
function showLoading() {
    document.getElementById('requestCode').textContent = 'กำลังโหลด...';
    document.getElementById('agencyName').textContent = 'กำลังโหลด...';
    document.getElementById('productName').textContent = 'กำลังโหลด...';
    document.getElementById('productType').textContent = 'กำลังโหลด...';
    document.getElementById('testItems').textContent = 'กำลังโหลด...';
    document.getElementById('recipientAgency').textContent = 'กำลังโหลด...';
    
    // แสดง loading ใน users list
    const usersList = document.getElementById('usersList');
    usersList.innerHTML = '<div class="col-12 text-center"><i class="bi bi-hourglass-split"></i> กำลังโหลดข้อมูลผู้ใช้...</div>';
    
    // แสดง loading ใน surveys list
    const surveysList = document.getElementById('surveysList');
    surveysList.innerHTML = '<div class="col-12 text-center"><i class="bi bi-hourglass-split"></i> กำลังโหลดแบบประเมิน...</div>';
}

// ฟังก์ชันดึงข้อมูลจาก API
async function fetchServiceRequestData(serviceId) {
    try {
        const response = await fetch(`/admin/service-requests/${serviceId}`, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        });
        
        if (!response.ok) {
            throw new Error('ไม่สามารถดึงข้อมูลได้');
        }
        
        const data = await response.json();
        
        // ตรวจสอบว่า API ส่งข้อมูลสำเร็จหรือไม่
        if (!data.success) {
            throw new Error(data.error || 'เกิดข้อผิดพลาดในการดึงข้อมูล');
        }
        
        // อัปเดตข้อมูลคำขอรับบริการ
        updateServiceRequestInfo(data.serviceRequest);
        
        // อัปเดตข้อมูลหน่วยงาน
        updateAgencyInfo(data.agency);
        
        // รีเซ็ตฟอร์มก่อนโหลดข้อมูล
        resetForm();
        
        // โหลดข้อมูลผู้ใช้
        loadUsers(data.users);
        
    } catch (error) {
        console.error('Error fetching service request data:', error);
        showError('เกิดข้อผิดพลาดในการดึงข้อมูล: ' + error.message);
    }
}

// ฟังก์ชันอัปเดตข้อมูลคำขอรับบริการ
function updateServiceRequestInfo(serviceRequest) {
    document.getElementById('requestCode').textContent = serviceRequest.ServiceRequestID || 'ไม่ระบุ';
    document.getElementById('agencyName').textContent = serviceRequest.Agency_Name || 'ไม่ระบุ';
    document.getElementById('productName').textContent = serviceRequest.Model_Name || 'ไม่ระบุ';
    document.getElementById('productType').textContent = serviceRequest.Feature || 'ไม่ระบุ';
    document.getElementById('testItems').textContent = serviceRequest.Details || 'ไม่ระบุ';
}

// ฟังก์ชันอัปเดตข้อมูลหน่วยงาน
function updateAgencyInfo(agency) {
    if (agency && agency.name) {
        document.getElementById('recipientAgency').textContent = agency.name;
    } else {
        document.getElementById('recipientAgency').textContent = 'ไม่ระบุ';
    }
}

// ฟังก์ชันแสดงข้อผิดพลาด
function showError(message) {
    document.getElementById('requestCode').textContent = 'เกิดข้อผิดพลาด';
    document.getElementById('agencyName').textContent = 'เกิดข้อผิดพลาด';
    document.getElementById('productName').textContent = 'เกิดข้อผิดพลาด';
    document.getElementById('productType').textContent = 'เกิดข้อผิดพลาด';
    document.getElementById('testItems').textContent = 'เกิดข้อผิดพลาด';
    document.getElementById('recipientAgency').textContent = 'เกิดข้อผิดพลาด';
    
    const usersList = document.getElementById('usersList');
    usersList.innerHTML = `<div class="col-12 text-center text-danger"><i class="bi bi-exclamation-triangle"></i> ${message}</div>`;
    
    const surveysList = document.getElementById('surveysList');
    surveysList.innerHTML = `<div class="col-12 text-center text-danger"><i class="bi bi-exclamation-triangle"></i> เกิดข้อผิดพลาดในการโหลดแบบประเมิน</div>`;
}

// Load users function
function loadUsers(users) {
    const usersList = document.getElementById('usersList');
    usersList.innerHTML = '';
    
    if (!users || users.length === 0) {
        usersList.innerHTML = '<div class="col-12 text-center text-muted"><i class="bi bi-exclamation-circle"></i> ไม่พบผู้ใช้ในหน่วยงานนี้</div>';
        return;
    }
    
    users.forEach(user => {
        const userDiv = document.createElement('div');
        userDiv.className = 'col-md-4 mb-2';
        
        // กำหนด icon ตาม role
        let roleIcon = 'bi-person-circle';
        let roleColor = 'text-primary';
        let roleText = '';
        
        if (user.role === 'admin' || user.role === 'superadmin') {
            roleIcon = 'bi-shield-check';
            roleColor = 'text-danger';
            roleText = 'ผู้ดูแลระบบ';
        } else if (user.role === 'consult') {
            roleIcon = 'bi-person-gear';
            roleColor = 'text-warning';
            roleText = 'ที่ปรึกษา';
        } else {
            roleText = 'ผู้ใช้';
        }
        
        userDiv.innerHTML = `
            <div class="form-check">
                <input class="form-check-input user-checkbox" type="checkbox" value="${user.id}" id="user-${user.id}" ${user.isDefault ? 'checked' : ''}>
                <label class="form-check-label" for="user-${user.id}">
                    <div class="d-flex align-items-center">
                        <i class="bi ${roleIcon} ${roleColor} me-2"></i>
                        <div>
                            <div class="fw-bold">${user.name}</div>
                            <small class="text-muted">${user.email}</small>
                            <div class="mt-1">
                                ${user.isDefault ? '<span class="badge bg-success me-1">ผู้สร้างคำขอ</span>' : ''}
                                <span class="badge bg-secondary">${roleText}</span>
                            </div>
                        </div>
                    </div>
                </label>
            </div>
        `;
        usersList.appendChild(userDiv);
    });
}

// ฟังก์ชันโหลดข้อมูลแบบประเมิน
async function loadSurveys() {
    try {
        const response = await fetch('/admin/surveys-api', {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        });
        
        if (!response.ok) {
            throw new Error('ไม่สามารถดึงข้อมูลแบบประเมินได้');
        }
        
        const data = await response.json();
        
        if (data.success) {
            updateSurveysList(data.data);
        } else {
            throw new Error(data.error || 'เกิดข้อผิดพลาดในการดึงข้อมูลแบบประเมิน');
        }
        
    } catch (error) {
        console.error('Error loading surveys:', error);
        showSurveysError('เกิดข้อผิดพลาดในการโหลดข้อมูลแบบประเมิน: ' + error.message);
    }
}

// ฟังก์ชันอัปเดตรายการแบบประเมิน
function updateSurveysList(surveys) {
    const surveysList = document.getElementById('surveysList');
    surveysList.innerHTML = '';
    
    if (surveys.length === 0) {
        surveysList.innerHTML = '<div class="col-12 text-center text-muted"><i class="bi bi-exclamation-circle"></i> ไม่มีแบบประเมินที่ใช้งานได้</div>';
        return;
    }
    
    surveys.forEach((survey, index) => {
        const surveyDiv = document.createElement('div');
        surveyDiv.className = 'col-md-6';
        surveyDiv.innerHTML = `
            <div class="form-check mb-3">
                <input class="form-check-input survey-checkbox" type="checkbox" value="${survey.id}" id="survey-${survey.id}">
                <label class="form-check-label" for="survey-${survey.id}">
                    <strong>${survey.name}</strong>
                    <br><small class="text-muted">${survey.description || 'ไม่มีคำอธิบาย'} - ${survey.question_count} คำถาม</small>
                </label>
            </div>
        `;
        surveysList.appendChild(surveyDiv);
    });
    
    // เพิ่ม event listeners สำหรับ survey checkboxes ใหม่
    addSurveyEventListeners();
}

// ฟังก์ชันแสดงข้อผิดพลาดในรายการแบบประเมิน
function showSurveysError(message) {
    const surveysList = document.getElementById('surveysList');
    surveysList.innerHTML = `<div class="col-12 text-center text-danger"><i class="bi bi-exclamation-triangle"></i> ${message}</div>`;
}

// ฟังก์ชันเพิ่ม event listeners สำหรับ survey checkboxes
function addSurveyEventListeners() {
    document.querySelectorAll('.survey-checkbox').forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            const allCheckboxes = document.querySelectorAll('.survey-checkbox');
            const checkedCheckboxes = document.querySelectorAll('.survey-checkbox:checked');
            const selectAllCheckbox = document.getElementById('selectAllSurveys');
            
            if (checkedCheckboxes.length === allCheckboxes.length) {
                selectAllCheckbox.checked = true;
            } else {
                selectAllCheckbox.checked = false;
            }
            updateSendButton();
        });
    });
}

// Handle individual user checkbox change - จำกัดการเลือกเพียงอันเดียว
document.addEventListener('change', function(e) {
    if (e.target.classList.contains('user-checkbox')) {
        // ถ้าเลือก checkbox นี้
        if (e.target.checked) {
            // ยกเลิกการเลือก checkbox อื่นๆ ทั้งหมด
            document.querySelectorAll('.user-checkbox').forEach(checkbox => {
                if (checkbox !== e.target) {
                    checkbox.checked = false;
                }
            });
        }
        
        updateSendButton();
    }
});



// Reset form function
function resetForm() {
    // Reset survey checkboxes
    document.querySelectorAll('.survey-checkbox').forEach(checkbox => {
        checkbox.checked = false;
    });
    document.getElementById('selectAllSurveys').checked = false;
    
    // Reset user checkboxes (but don't clear the users list)
    document.querySelectorAll('.user-checkbox').forEach(checkbox => {
        checkbox.checked = false;
    });
    
    // Reset select all users checkbox if exists
    const selectAllUsersElement = document.getElementById('selectAllUsers');
    if (selectAllUsersElement) {
        selectAllUsersElement.checked = false;
    }
    
    // Reset surveys list to loading state
    document.getElementById('surveysList').innerHTML = '<div class="col-12 text-center"><i class="bi bi-hourglass-split"></i> กำลังโหลดแบบประเมิน...</div>';
    
    // Reset send button
    document.getElementById('sendSurveyBtn').disabled = true;
}

// Handle select all surveys
document.getElementById('selectAllSurveys').addEventListener('change', function() {
    const checkboxes = document.querySelectorAll('.survey-checkbox');
    checkboxes.forEach(checkbox => {
        checkbox.checked = this.checked;
    });
    updateSendButton();
});

// Note: Individual survey checkbox event listeners are now handled in addSurveyEventListeners()

// Handle select all users - ตรวจสอบว่า element มีอยู่จริงก่อน
const selectAllUsersElement = document.getElementById('selectAllUsers');
if (selectAllUsersElement) {
    selectAllUsersElement.addEventListener('change', function() {
        const checkboxes = document.querySelectorAll('.user-checkbox');
        checkboxes.forEach(checkbox => {
            checkbox.checked = this.checked;
        });
        updateSendButton();
    });
}

// Handle individual user checkbox change
document.addEventListener('change', function(e) {
    if (e.target.classList.contains('user-checkbox')) {
        const allCheckboxes = document.querySelectorAll('.user-checkbox');
        const checkedCheckboxes = document.querySelectorAll('.user-checkbox:checked');
        const selectAllCheckbox = document.getElementById('selectAllUsers');
        
        // ตรวจสอบว่า selectAllUsers checkbox มีอยู่จริงก่อน
        if (selectAllCheckbox) {
            if (checkedCheckboxes.length === allCheckboxes.length) {
                selectAllCheckbox.checked = true;
            } else {
                selectAllCheckbox.checked = false;
            }
        }
        
        updateSendButton();
    }
});



// Update send button state
function updateSendButton() {
    const selectedSurveys = document.querySelectorAll('.survey-checkbox:checked');
    const selectedUsers = document.querySelectorAll('.user-checkbox:checked');
    const sendBtn = document.getElementById('sendSurveyBtn');
    
    if (selectedSurveys.length > 0 && selectedUsers.length > 0) {
        sendBtn.disabled = false;
    } else {
        sendBtn.disabled = true;
    }
}

// อัปเดตตัวอย่างวันหมดอายุเมื่อเปลี่ยนค่า
const expirationDaysInput = document.getElementById('expirationDays');
const defaultDays = {{ config('survey.expiration_days', 7) }};

function updateExpirationPreview() {
    if (expirationDaysInput) {
        const days = parseInt(expirationDaysInput.value) || defaultDays;
        const expirationDate = new Date();
        expirationDate.setDate(expirationDate.getDate() + days);
        
        // ตั้งค่าเวลาเป็น 23:59 เสมอ
        expirationDate.setHours(23, 59, 0, 0);
        
        // Format: DD/MM/YYYY HH:MM
        const day = String(expirationDate.getDate()).padStart(2, '0');
        const month = String(expirationDate.getMonth() + 1).padStart(2, '0');
        const year = expirationDate.getFullYear();
        const hours = String(expirationDate.getHours()).padStart(2, '0');
        const minutes = String(expirationDate.getMinutes()).padStart(2, '0');
        
        const formattedDate = `${day}/${month}/${year} ${hours}:${minutes} น.`;
        
        const previewElement = document.getElementById('expirationDatePreview');
        if (previewElement) {
            previewElement.textContent = formattedDate;
        }
    }
}

if (expirationDaysInput) {
    expirationDaysInput.addEventListener('input', updateExpirationPreview);
    // อัปเดตเมื่อโหลดหน้า
    updateExpirationPreview();
}

// Handle send survey button
document.getElementById('sendSurveyBtn').addEventListener('click', async function() {
    const selectedSurveys = document.querySelectorAll('.survey-checkbox:checked');
    const selectedUsers = document.querySelectorAll('.user-checkbox:checked');
    
    if (selectedSurveys.length === 0) {
        alert('กรุณาเลือกแบบประเมินที่ต้องการส่ง');
        return;
    }
    
    if (selectedUsers.length === 0) {
        alert('กรุณาเลือกผู้รับแบบประเมิน');
        return;
    }
    
    const surveyIds = Array.from(selectedSurveys).map(checkbox => checkbox.value);
    const customerIds = Array.from(selectedUsers).map(checkbox => checkbox.value);
    const serviceRequestId = document.getElementById('sendSurveyBtn').getAttribute('data-service-id');
    
    try {
        // Disable button and show loading
        this.disabled = true;
        this.innerHTML = '<i class="bi bi-hourglass-split"></i> กำลังส่ง...';
        
        // ดึงค่าวันหมดอายุจาก input
        const expirationDaysInput = document.getElementById('expirationDays');
        const defaultExpirationDays = {{ config('survey.expiration_days', 7) }};
        const expirationDays = expirationDaysInput ? (parseInt(expirationDaysInput.value) || defaultExpirationDays) : defaultExpirationDays;
        
        const response = await fetch('/admin/send-survey', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify({
                service_request_id: serviceRequestId,
                survey_ids: surveyIds,
                customer_ids: customerIds,
                expiration_days: expirationDays
            })
        });
        
        const data = await response.json();
        
        if (data.success) {
            if (data.invitations_count > 0) {
                alert(`ส่งแบบประเมินเรียบร้อยแล้ว!\n\nจำนวนแบบประเมินที่ส่ง: ${data.invitations_count}`);
            } else {
                alert('แบบประเมินที่เลือกได้ถูกส่งให้ผู้ใช้เหล่านี้แล้ว\n\nไม่มีการส่งแบบประเมินเพิ่มเติม');
            }
            
            // Close modal
            const modal = bootstrap.Modal.getInstance(document.getElementById('sendSurveyModal'));
            modal.hide();
        } else {
            alert('เกิดข้อผิดพลาด: ' + data.error);
        }
        
    } catch (error) {
        console.error('Error sending survey:', error);
        alert('เกิดข้อผิดพลาดในการส่งแบบประเมิน');
    } finally {
        // Reset button
        this.disabled = false;
        this.innerHTML = '<i class="bi bi-send"></i> ส่งแบบประเมิน';
    }
});
</script>
@endsection