@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        {{-- button back --}}
                        <button class="btn btn-secondary mb-0" onclick="window.location='{{ url($url_menu) }}'">
                            <i class="fas fa-circle-left me-1"></i>
                            <span class="font-weight-bold">Kembali</span>
                        </button>

                        {{-- Edit button - only show if status is 'entri' and user has edit permission --}}
                        @if($authorize->edit == '1' && $survey->status == 'entri')
                            <button class="btn btn-warning mb-0 ms-2"
                                onclick="window.location='{{ url($url_menu . '/edit/' . $survey->idsurvei) }}'">
                                <i class="fas fa-edit me-1"></i>
                                <span class="font-weight-bold">Edit</span>
                            </button>
                        @endif

                        {{-- Send button - only show if status is 'entri' or 'proses' and user has edit permission --}}
                        @if($authorize->edit == '1' && ($survey->status == 'entri' || $survey->status == 'proses'))
                            <button class="btn btn-primary mb-0 ms-2"
                                onclick="window.location='{{ url('/trsurvey/send/' . $survey->idsurvei) }}'">
                                <i class="fas fa-paper-plane me-1"></i>
                                <span class="font-weight-bold">Send</span>
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-4">
        <div class="row">
            {{-- Main Survey Details Card --}}
            <div class="col-md-6">
                <div class="card mb-4">
                    <div class="card-body">
                        <h5 class="mb-3">Detail Survey</h5>
                        <p class="text-muted mb-3">Informasi lengkap survey:</p>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">ID Survey:</label>
                                <input type="text" class="form-control bg-light" value="{{ $survey->idsurvei }}" disabled>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Jenis:</label>
                                <input type="text" class="form-control bg-light"
                                    value="{{ $survey->jenis == 'R' ? 'Repetisi' : 'Once' }}" disabled>
                            </div>
                        </div>

                        @if($survey->jenis == 'R')
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Repetisi Ke:</label>
                                    <input type="text" class="form-control bg-light" value="{{ $survey->repetisi_ke }}"
                                        disabled>
                                </div>
                            </div>
                        @endif

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Judul Survey:</label>
                                <input type="text" class="form-control bg-light" value="{{ $survey->judul_form }}" disabled>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Subjudul Survey:</label>
                                <input type="text" class="form-control bg-light" value="{{ $survey->subjudul }}" disabled>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Tanggal Mulai:</label>
                                <input type="text" class="form-control bg-light"
                                    value="{{ \Carbon\Carbon::parse($survey->tanggal_mulai)->format('d M Y') }}" disabled>
                            </div>
                            
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Tanggal Selesai:</label>
                                <input type="text" class="form-control bg-light"
                                    value="{{ \Carbon\Carbon::parse($survey->tanggal_selesai)->format('d M Y') }}" disabled>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Status:</label>
                                <input type="text" class="form-control bg-light" value="{{ ucfirst($survey->status) }}"
                                    disabled>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Deskripsi:</label>
                            <div class="form-control bg-light" style="min-height: 100px; overflow-y: auto;">
                                {!! $survey->deskripsi !!}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Recipients Card --}}
            <div class="col-md-6">
                <div class="card mb-4">
                    <div class="card-body">
                        <h5 class="mb-3">Penerima Survey:</h5>

                        <div class="mb-4">
                            <label class="form-label">Filter Status:</label>
                            <select class="form-select" id="status-filter">
                                <option value="semua">Semua</option>
                                <option value="belum_dikirim">Belum Dikirim</option>
                                <option value="belum_diisi">Belum Diisi</option>
                                <option value="sudah_diisi">Sudah Diisi</option>
                            </select>
                        </div>

                        <div class="row px-3 py-2">
                            <div style="max-height: 436px; overflow-y: auto;" class="table-responsive">
                                <table class="table display" id="list_penerima">
                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th scope="col">Aksi</th>
                                            <th scope="col">Status</th>
                                            <th scope="col">Nama</th>
                                            <th scope="col">Departemen</th>
                                            <th scope="col">Tanggal Dikirim</th>
                                            <th scope="col">Tanggal Submit</th>
                                        </tr>
                                    </thead>
                                    <tbody id="penerima-table-body">
                                        {{-- Data will be loaded via AJAX --}}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {{-- Questions Container --}}
            <div class="col-md-12" id="questions-container">
                <h5 class="mb-3">Daftar Pertanyaan</h5>
                @foreach($pertanyaan as $index => $question)
                        <div class="col-md-12 mb-4">
                            <div class="card">
                                <div class="card-body">
                                    <div class="mb-3">
                                        <h5 class="mb-0">
                                            Pertanyaan {{ $index + 1 }}
                                            @if($question['required'])
                                                <span style="color: #dc3545; font-size: 0.9rem; font-weight: normal;">*</span>
                                            @endif
                                        </h5>
                                    </div>
                                    <hr class="horizontal dark mt-0 mb-3">

                                    <div class="row">
                                        <div class="col-md-8">
                                            @if($question['jenis'] != 'group_linear_scale')
                                            <div class="mb-4">
                                                <label class="form-label">Soal:</label>
                                                <div class="form-control bg-light" style="min-height: 60px;">
                                                    {!! $question['soal'] !!}
                                                </div>
                                            </div>
                                            @endif

                                            {{-- Question Options Display --}}
                                            <div id="question-options-{{ $question['id'] }}">
                                                @if($question['jenis'] == 'pilihan_text')
                                                    <div class="mb-2">
                                                        @foreach($question['opsi'] as $opsi)
                                                            <div class="d-flex align-items-center mb-2">
                                                                <input type="radio" class="form-check-input me-2" disabled>
                                                                <input type="text" class="form-control bg-light" value="{{ $opsi }}"
                                                                    disabled>
                                                            </div>
                                                        @endforeach
                                                        <div class="border-top pt-3">
                                                            <div class="form-check mb-2">
                                                                <input class="form-check-input" type="checkbox" {{ $question['alasan_required'] ? 'checked' : '' }} disabled>
                                                                <label class="form-check-label">
                                                                    Text wajib diisi
                                                                </label>
                                                            </div>
                                                            <textarea class="form-control bg-light" placeholder="Text" rows="2"
                                                                disabled></textarea>
                                                        </div>
                                                    </div>

                                                @elseif($question['jenis'] == 'checkbox')
                                                    <div class="mb-2">
                                                        @foreach($question['opsi'] as $opsi)
                                                            <div class="d-flex align-items-center mb-2">
                                                                <input type="checkbox" class="form-check-input me-2" disabled>
                                                                <input type="text" class="form-control bg-light" value="{{ $opsi }}"
                                                                    disabled>
                                                            </div>
                                                        @endforeach
                                                    </div>

                                                @elseif($question['jenis'] == 'text')
                                                    <div class="mb-2">
                                                        <input type="text" class="form-control bg-light" placeholder="Jawaban Teks"
                                                            disabled>
                                                    </div>

                                                @elseif($question['jenis'] == 'linear_scale')
                                                    <div class="mb-2">
                                                        @if(isset($question['nama_label']))
                                                        <div class="row mb-3">
                                                            <div class="col-md-12">
                                                                <label class="form-label fw-bold">Label:</label>
                                                                <input type="text" class="form-control bg-light"
                                                                    value="{{ $question['nama_label'] }}"
                                                                    disabled>
                                                            </div>
                                                        </div>
                                                        @endif
                                                        
                                                        @if(isset($question['kata_negatif']) && isset($question['kata_positif']))
                                                        <div class="mt-3 text-center">
                                                            <small class="text-muted">
                                                                <strong>Peview: </strong>
                                                                1: Sangat {{ $question['kata_negatif'] }} |
                                                                2: {{ $question['kata_negatif'] }} |
                                                                3: Sedang |
                                                                4: {{ $question['kata_positif'] }} |
                                                                5: Sangat {{ $question['kata_positif'] }}
                                                            </small>
                                                        </div>
                                                        @endif
                                                    </div>

                                                @elseif($question['jenis'] == 'group_linear_scale')
    <div class="mb-4">
        <label class="form-label fw-bold">Nama Group:</label>
        <div class="form-control bg-light" style="min-height: 60px;">
            {!! $question['soal'] !!}
        </div>
    </div>
    
    <div class="mb-2">
        @if(isset($question['vendors']) && count($question['vendors']) > 0)
        <div class="mb-3">
            <label class="form-label fw-bold">Vendor/Object:</label>
            <div class="d-flex flex-wrap gap-2">
                @foreach($question['vendors'] as $index => $vendor)
                <span class="badge bg-primary">{{ $index + 1 }}. {{ is_array($vendor) ? $vendor['label'] : $vendor }}</span>
                @endforeach
            </div>
        </div>
        @endif
        
        @if(isset($question['questions']) && count($question['questions']) > 0)
        <div class="mb-3">
            <label class="form-label fw-bold">Pertanyaan:</label>
            <div class="list-group">
                @foreach($question['questions'] as $index => $q)
                <div class="list-group-item">
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <strong>{{ $index + 1 }}.</strong> {{ is_array($q) ? $q['label'] : (is_object($q) ? $q->label : $q) }}
                        </div>
                        @if(isset($q['nama_label']))
                        <span class="badge bg-info">{{ $q['nama_label'] }}</span>
                        @endif
                    </div>
                    @if(isset($q['kata_positif']) && isset($q['kata_negatif']))
                    <small class="text-muted d-block mt-1">
                        <i class="fas fa-tags me-1"></i>
                        1: Sangat {{ $q['kata_negatif'] }} | 
                        2: {{ $q['kata_negatif'] }} | 
                        3: Sedang | 
                        4: {{ $q['kata_positif'] }} | 
                        5: Sangat {{ $q['kata_positif'] }}
                    </small>
                    @endif
                </div>
                @endforeach
            </div>
        </div>
        @endif
    </div>
                                                @endif
                                            </div>
                                        </div>

                                        <div class="col-md-4">
                                            <label class="form-label">Tipe Pertanyaan:</label>
                                            <input type="text" class="form-control bg-light" value="{{ 
                                                $question['jenis'] == 'pilihan_text' ? 'Pilihan + Text' :
                                                ($question['jenis'] == 'checkbox' ? 'Checkbox' :
                                                ($question['jenis'] == 'text' ? 'Text' : 
                                                ($question['jenis'] == 'linear_scale' ? 'Linear Scale' : 'Group Linear Scale')))}}" disabled>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                @endforeach
            </div>
        </div>
        
         {{-- Response Modal --}}
        <div class="modal fade" id="responseModal" tabindex="-1" aria-labelledby="responseModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-xl modal-dialog-scrollable">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="responseModalLabel">Detail Jawaban Survey</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body" id="responseModalBody">
                        <div class="text-center py-5">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                            <p class="mt-3">Memuat data...</p>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                    </div>
                </div>
            </div>
        </div>
        
    </div>

    <script>
        var penerimaTable;
        var surveyId = "{{ $survey->idsurvei }}";

        $(document).ready(function () {
            // Initialize DataTable
            penerimaTable = $('#list_penerima').DataTable({
                "language": {
                    "search": "Cari :",
                    "lengthMenu": "Tampilkan _MENU_ baris",
                    "zeroRecords": "Maaf - Data tidak ada",
                    "info": "Halaman _PAGE_ dari _PAGES_",
                    "infoEmpty": "Tidak ada data",
                    "infoFiltered": "(pencarian dari _MAX_ data)",
                    "paginate": {
                        "first": "Pertama",
                        "last": "Terakhir",
                        "next": "Selanjutnya",
                        "previous": "Sebelumnya"
                    }
                },
                "destroy": true,
                "ordering": true,
                "searching": true,
                "paging": false,
                "info": false,
                "autoWidth": false,
                "order": [[0, 'asc']]
            });

            // Load initial data
            loadRecipients('semua');

            // Status Filter
            $('#status-filter').on('change', function () {
                var status = $(this).val();
                loadRecipients(status);
            });
        });

        function viewResponseModal(surveyId, userId) {
    console.log('Loading response for:', surveyId, userId); // Debug log
    
    // Show modal
    $('#responseModal').modal('show');
    
    // Reset modal body to loading state
    $('#responseModalBody').html(`
        <div class="text-center py-5">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
            <p class="mt-3">Memuat data...</p>
        </div>
    `);

    // Load response data via AJAX
    $.ajax({
        url: "{{ url('trsurvey/response') }}/" + surveyId + "/" + userId,
        type: 'GET',
        dataType: 'JSON',
        success: function(response) {
            console.log('Response received:', response); // Debug log
            
            if (response.success) {
                $('#responseModalBody').html(response.html);
            } else {
                $('#responseModalBody').html(`
                    <div class="alert alert-danger">
                        <i class="fas fa-exclamation-circle me-2"></i>
                        ${response.message || 'Gagal memuat data'}
                    </div>
                `);
            }
        },
        error: function(xhr, status, error) {
            console.error('Error details:', {
                status: xhr.status,
                statusText: xhr.statusText,
                responseText: xhr.responseText,
                error: error
            }); // Debug log
            
            let errorMessage = 'Terjadi kesalahan saat memuat data';
            
            if (xhr.responseJSON && xhr.responseJSON.message) {
                errorMessage = xhr.responseJSON.message;
            } else if (xhr.responseText) {
                try {
                    const errorData = JSON.parse(xhr.responseText);
                    errorMessage = errorData.message || errorMessage;
                } catch (e) {
                    console.error('Failed to parse error response:', e);
                }
            }
            
            $('#responseModalBody').html(`
                <div class="alert alert-danger">
                    <i class="fas fa-exclamation-circle me-2"></i>
                    ${errorMessage}
                    <br><small class="text-muted">Status: ${xhr.status}</small>
                </div>
            `);
        }
    });
}

        function loadRecipients(status) {
            $.ajax({
                url: "{{ url('trsurvey/filterpenerima') }}",
                type: 'POST',
                dataType: 'JSON',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    survey_id: surveyId,
                    status: status
                },
                beforeSend: function () {
                    penerimaTable.clear().draw();
                    $('#penerima-table-body').html('<tr><td colspan="6" class="text-center"><div class="spinner-border spinner-border-sm" role="status"></div> Loading...</td></tr>');
                },
                success: function (response) {
                    penerimaTable.clear();

                    if (response.recipients && response.recipients.length > 0) {
                        response.recipients.forEach(function (recipient) {
                            var statusBadge = '';
                            if (recipient.waktu_kirim === null) {
                                statusBadge = '<span class="badge bg-danger">Belum Dikirim</span>';
                            } else if (recipient.waktu_submit === null) {
                                statusBadge = '<span class="badge bg-warning">Belum Diisi</span>';
                            } else {
                                statusBadge = '<span class="badge bg-success">Sudah Diisi</span>';
                            }

                            var actionButton = '';
if (recipient.waktu_kirim !== null && recipient.waktu_submit !== null) {
    actionButton = '<button class="btn btn-success btn-sm px-2" onclick="viewResponseModal(\'' + surveyId + '\', \'' + recipient.id + '\')"><i class="fas fa-eye"></i> Detail</button>';
} else {
    actionButton = '<button class="btn btn-secondary btn-sm px-2" disabled><i class="fas fa-eye"></i> Detail</button>';
}

                            var rowData = [
                                actionButton,
                                statusBadge,
                                recipient.nama,
                                recipient.nama_departemen || recipient.departemen,
                                recipient.waktu_kirim_formatted || '-',
                                recipient.waktu_submit_formatted || '-'
                            ];

                            penerimaTable.row.add(rowData);
                        });
                    }

                    penerimaTable.draw();
                },
                error: function (xhr, status, error) {
                    console.error('Error loading recipients:', error);
                    penerimaTable.clear();
                    $('#penerima-table-body').html('<tr><td colspan="6" class="text-center text-danger">Error loading data</td></tr>');
                }
            });
        }

        
    </script>
@endsection