{{-- 
    Send Survey Modal Component - Standalone Version
    สำหรับใช้ใน ServTrack
    
    วิธีการใช้งาน:
    1. Include component นี้ในหน้า Service Requests ของ ServTrack
    2. Include JavaScript file: public/js/send-survey-modal.js
    3. Initialize modal ด้วย JavaScript
    
    ตัวอย่าง:
        @include('components.send-survey-modal-standalone')
        <script src="{{ asset('js/send-survey-modal.js') }}"></script>
        <script>
            const modal = new SendSurveyModal({
                apiBaseUrl: '{{ config("survey-integration.api_base_url") }}',
                csrfToken: document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            });
        </script>
--}}
<!-- 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">-</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">-</p>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-bold">ประเภทผลิตภัณฑ์:</label>
                        <p class="form-control-plaintext" id="productType">-</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">-</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">
                    <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="7" 
                            min="1" 
                            max="365" 
                            required
                        >
                        <div class="form-text">
                            จำนวนวันที่แบบประเมินจะหมดอายุหลังจากส่งให้ผู้ใช้
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-bold">ตัวอย่างวันหมดอายุ:</label>
                        <p class="form-control-plaintext" id="expirationPreview">
                            <span id="expirationDatePreview">-</span>
                        </p>
                    </div>
                </div>

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