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

@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid py-4">
        <div class="row mt-4">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-header col-md-auto" style="border-radius: 15px;">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h5 class="mb-0">Send Survey: {{ $survey->judul_form }} - {{ $survey->subjudul }}</h5>
                                <small class="text-muted">ID: {{ $survey->idsurvei ?? '-' }}</small>
                                @if (isset($survey->tanggal_mulai) && isset($survey->tanggal_selesai))
                                    <br><small class="text-muted">
                                        Periode: {{ \Carbon\Carbon::parse($survey->tanggal_mulai)->format('d M Y') }} -
                                        {{ \Carbon\Carbon::parse($survey->tanggal_selesai)->format('d M Y') }}
                                    </small>
                                @endif
                            </div>
                            <div>
                                <button class="btn btn-secondary btn-sm me-2" onclick="window.history.back()"
                                    style="border-radius: 10px;">
                                    <i class="fas fa-arrow-left me-1"></i> Kembali
                                </button>
                                <button id="sendAllBtn" class="btn btn-success btn-sm" style="border-radius: 10px;" disabled
                                    onclick="sendSelectedSurveys()">
                                    <i class="fas fa-paper-plane me-1"></i> Send All (<span id="selectedCount">0</span>)
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Statistics Cards -->
                <div class="row mb-3">
                    <div class="col-6 col-md-3 mb-2">
                        <div class="card border-0 shadow-sm">
                            <div class="card-body text-center py-2 px-2"
                                style="background: linear-gradient(135deg, #F44336 0%, #EF5350 100%); color: white; border-radius: 8px;">
                                <h3 class="mb-0" style="color: white;">{{ $not_sent ?? 0 }}</h3>
                                <h5 style="color: white;"><i class="fas fa-times-circle"></i> <strong>Belum Dikirim</strong>
                                </h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 col-md-3 mb-2">
                        <div class="card border-0 shadow-sm">
                            <div class="card-body text-center py-2 px-2"
                                style="background: linear-gradient(135deg, #FF9800 0%, #FFB74D 100%); color: white; border-radius: 8px;">
                                <h3 class="mb-0" style="color: white;">{{ $pending }}</h3>
                                <h5 style="color: white;"><i class="fas fa-clock"></i> <strong>Belum Mengisi</strong></h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 col-md-3 mb-2">
                        <div class="card border-0 shadow-sm">
                            <div class="card-body text-center py-2 px-2"
                                style="background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%); color: white; border-radius: 8px;">
                                <h3 class="mb-0" style="color: white;">{{ $responded }}</h3>
                                <h5 style="color: white;"><i class="fas fa-check-circle"></i> <strong>Sudah Mengisi</strong>
                                </h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 col-md-3 mb-2">
                        <div class="card border-0 shadow-sm">
                            <div class="card-body text-center py-2 px-2"
                                style="background: linear-gradient(135deg, #2196F3 0%, #64B5F6 100%); color: white; border-radius: 8px;">
                                <h3 class="mb-0" style="color: white;">{{ $total_respondents }}</h3>
                                <h5 style="color: white;"><i class="fas fa-users"></i> <strong>Total</strong></h5>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card mb-4">
                    <div class="card-header">
                        <div class="d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">Daftar Responden</h5>
                            <div class="d-flex gap-2">
                                <select class="form-select form-select-sm" id="statusFilter" style="width: 180px;">
                                    <option value="">Semua Status</option>
                                    <option value="not_sent">Belum Dikirim</option>
                                    <option value="sent">Belum Mengisi</option>
                                    <option value="completed">Sudah Mengisi</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="tabel_penerima_send" class="table table-hover mb-0 display">
                                <thead
                                    style="background: linear-gradient(135deg, #a8e6cf 0%, #88d8c0 100%); color: #2c3e50;">
                                    <tr>
                                        <th class="ps-4 py-3">
                                            <div class="form-check">
                                                <input type="checkbox" class="form-check-input" id="selectAll"
                                                    style="border: 2px solid #999999;">
                                            </div>
                                        </th>
                                        <th class="py-3">No</th>
                                        <th class="py-3">Nama</th>
                                        <th class="py-3">Email</th>
                                        <th class="py-3">Departemen</th>
                                        <th class="py-3">Jabatan</th>
                                        <th class="py-3">Status</th>
                                        <th class="py-3">Tanggal Diundang</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($respondents as $index => $respondent)
                                        <tr data-status="{{ $respondent->response_status ?? 'not_sent' }}">
                                            <td class="ps-4 py-3">
                                                @if ((isset($respondent->response_status) && $respondent->response_status === 'completed') || !isset($respondent->email) || $respondent->email === 'N/A' || empty(trim($respondent->email)))
                                                    {{-- Checkbox disembunyikan untuk responden yang sudah mengisi atau tidak punya email --}}
                                                @else
                                                    <div class="form-check">
                                                        <input type="checkbox" class="form-check-input respondent-checkbox"
                                                            value="{{ $respondent->id ?? $index }}"
                                                            style="border: 2px solid #999999;">
                                                    </div>
                                                @endif
                                            </td>
                                            <td class="py-3">{{ $index + 1 }}</td>
                                            <td class="py-3">
                                                <span class="fw-medium">{{ $respondent->nama ?? 'N/A' }}</span>
                                            </td>
                                            <td class="py-3">
                                                @if (!isset($respondent->email) || $respondent->email === 'N/A' || empty(trim($respondent->email)))
                                                    <span style="color: #dc3545; font-weight: 500;">Email tidak tersedia</span>
                                                @else
                                                    <span class="text-primary">{{ $respondent->email }}</span>
                                                @endif
                                            </td>
                                            <td class="py-3">
                                                <span
                                                    class="text-muted">{{ $respondent->nama_departemen ?? ($respondent->departemen ?? 'N/A') }}</span>
                                            </td>
                                            <td class="py-3">
                                                <span class="text-muted">{{ $respondent->jabatan ?? 'N/A' }}</span>
                                            </td>
                                            <td class="py-3">
                                                @if (isset($respondent->response_status) && $respondent->response_status === 'completed')
                                                    <span class="badge bg-success px-3 py-2">Sudah Mengisi</span>
                                                @elseif(isset($respondent->response_status) && $respondent->response_status === 'sent')
                                                    <span class="badge bg-warning px-3 py-2">Belum Mengisi</span>
                                                @else
                                                    <span class="badge bg-danger px-3 py-2">Belum Dikirim</span>
                                                @endif
                                            </td>
                                            <td class="py-3">
                                                <small class="text-muted">
                                                    {{ isset($respondent->invited_at) ? \Carbon\Carbon::parse($respondent->invited_at)->format('d M Y H:i') : 'N/A' }}
                                                </small>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="8" class="text-center py-4">
                                                <i class="fas fa-inbox fa-2x text-muted mb-2"></i>
                                                <p class="text-muted mb-0">Tidak ada responden untuk survey ini</p>
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('css')
    <style>
        .card {
            border: none;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            border-radius: 15px;
            overflow: hidden;
        }

        .table th {
            border: none;
            font-weight: 600;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .table td {
            border: none;
            vertical-align: middle;
            border-bottom: 1px solid #e9ecef;
        }

        .badge {
            font-size: 0.8rem;
            font-weight: 600;
            border-radius: 20px;
        }

        .btn-sm {
            font-size: 0.8rem;
            padding: 0.5rem 1rem;
            border-radius: 20px;
        }

        #sendAllBtn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

        .table tbody tr:hover {
            background-color: #f8f9fa;
        }

        /* Fix checkbox visibility and styling */
        .form-check-input {
            width: 1.2em;
            height: 1.2em;
            margin-top: 0;
            vertical-align: middle;
            background-color: #fff;
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            border: 2px solid #dee2e6;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            cursor: pointer;
            position: relative;
        }

        .form-check-input:checked {
            background-color: #0d6efd;
            border-color: #0d6efd;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
        }

        .form-check-input:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            background-color: #e9ecef;
        }

        .form-check-input:disabled:checked {
            background-color: #6c757d;
            border-color: #6c757d;
        }

        .form-check-input:focus {
            border-color: #86b7fe;
            outline: 0;
            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
        }

        /* DataTables custom styling */
        .dataTables_wrapper .dataTables_length,
        .dataTables_wrapper .dataTables_filter {
            padding: 10px;
        }

        .dataTables_wrapper .dataTables_info,
        .dataTables_wrapper .dataTables_paginate {
            padding: 10px;
        }
    </style>
    <!-- Animate.css untuk animasi SweetAlert -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
    <style>
        .swal2-popup.animated.bounceIn {
            animation: bounceIn 0.6s;
        }

        .swal2-confirm {
            margin-right: 10px !important;
        }
    </style>
@endpush

@push('js')
    <!-- SweetAlert2 CDN -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        var dataTable;
        var selectedCheckboxes = new Set();
        var selectAllState = false;

        $(document).ready(function() {
            dataTable = $('#tabel_penerima_send').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,
                "responsive": true,
                "pageLength": 10,
                "lengthMenu": [
                    [10, 25, 50, -1],
                    [10, 25, 50, "Semua"]
                ],
                "order": [
                    [1, 'asc']
                ],
                "columnDefs": [{
                        "orderable": false,
                        "targets": 0
                    },
                    {
                        "searchable": false,
                        "targets": 0
                    }
                ],
                "drawCallback": function(settings) {
                    // Restore checkbox states setelah pagination/draw
                    restoreCheckboxStates();
                    attachCheckboxListeners();
                    updateSendButton();
                }
            });

            $('#statusFilter').on('change', function() {
                var selectedStatus = $(this).val();

                if (selectedStatus === '') {
                    dataTable.column(6).search('').draw();
                } else {
                    var searchTerm = '';
                    switch (selectedStatus) {
                        case 'completed':
                            searchTerm = 'Sudah Mengisi';
                            break;
                        case 'sent':
                            searchTerm = 'Belum Mengisi';
                            break;
                        case 'not_sent':
                            searchTerm = 'Belum Dikirim';
                            break;
                    }
                    dataTable.column(6).search(searchTerm).draw();
                }

                updateSendButton();
            });

            attachCheckboxListeners();
        });

        // Restore checkbox states dari global Set
        function restoreCheckboxStates() {
            $('.respondent-checkbox:not(:disabled)').each(function() {
                var checkboxValue = $(this).val();
                if (selectedCheckboxes.has(checkboxValue)) {
                    $(this).prop('checked', true);
                }
            });
        }

        function attachCheckboxListeners() {
            // Select All checkbox - select/deselect ALL respondents (across all pages)
            $('#selectAll').off('change').on('change', function() {
                var isChecked = $(this).prop('checked');
                selectAllState = isChecked;

                if (isChecked) {
                    // Collect all non-disabled checkbox values from ALL rows (not just visible)
                    dataTable.rows().every(function() {
                        var row = this.node();
                        var checkbox = $(row).find('.respondent-checkbox:not(:disabled)');
                        if (checkbox.length > 0) {
                            var checkboxValue = checkbox.val();
                            selectedCheckboxes.add(checkboxValue);
                        }
                    });
                } else {
                    // Clear all selections
                    selectedCheckboxes.clear();
                }

                // Update visible checkboxes
                $('.respondent-checkbox:not(:disabled)').prop('checked', isChecked);
                updateSendButton();
            });

            // Individual checkbox change
            $('.respondent-checkbox').off('change').on('change', function() {
                var checkboxValue = $(this).val();
                
                if ($(this).prop('checked')) {
                    selectedCheckboxes.add(checkboxValue);
                } else {
                    selectedCheckboxes.delete(checkboxValue);
                    // If user unchecks any, uncheck "Select All"
                    selectAllState = false;
                    $('#selectAll').prop('checked', false);
                }

                updateSelectAllCheckbox();
                updateSendButton();
            });
        }

        // Update "Select All" checkbox based on actual selection state
        function updateSelectAllCheckbox() {
            // Count total non-disabled checkboxes in current filtered view
            var totalEligible = 0;
            var totalSelected = 0;

            dataTable.rows({search: 'applied'}).every(function() {
                var row = this.node();
                var checkbox = $(row).find('.respondent-checkbox:not(:disabled)');
                if (checkbox.length > 0) {
                    totalEligible++;
                    if (selectedCheckboxes.has(checkbox.val())) {
                        totalSelected++;
                    }
                }
            });

            $('#selectAll').prop('checked', totalEligible > 0 && totalEligible === totalSelected);
        }

        // Update send button state based on selected checkboxes (from global Set)
        function updateSendButton() {
            const sendBtn = document.getElementById('sendAllBtn');
            const selectedCount = document.getElementById('selectedCount');
            const totalSelected = selectedCheckboxes.size;

            if (totalSelected > 0) {
                sendBtn.disabled = false;
                sendBtn.classList.remove('btn-secondary');
                sendBtn.classList.add('btn-success');
            } else {
                sendBtn.disabled = true;
                sendBtn.classList.remove('btn-success');
                sendBtn.classList.add('btn-secondary');
            }

            selectedCount.textContent = totalSelected;
        }

        // Send selected surveys
        function sendSelectedSurveys() {
            if (selectedCheckboxes.size === 0) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Oops!',
                    text: 'Pilih minimal satu responden untuk mengirim survey!',
                    confirmButtonColor: '#ffc107',
                    confirmButtonText: 'OK, Mengerti'
                });
                return;
            }

            const selectedIds = Array.from(selectedCheckboxes);
            
            // Build list of selected respondents for confirmation (display all)
            let selectedRespondentsList = '';

            dataTable.rows().every(function() {
                var row = this.node();
                var checkbox = $(row).find('.respondent-checkbox:not(:disabled)');
                
                if (checkbox.length > 0 && selectedCheckboxes.has(checkbox.val())) {
                    const nama = $(row).find('td:nth-child(3)').text().trim();
                    const email = $(row).find('td:nth-child(4)').text().trim();
                    selectedRespondentsList += `<li>${nama} - ${email}</li>`;
                }
            });

            Swal.fire({
                icon: 'question',
                title: 'Konfirmasi Pengiriman Email',
                html: `
                <div style="text-align: left; margin: 20px 0;">
                    <p><strong>Survey: </strong>{{ $survey->judul_form }} - {{ $survey->subjudul }}</p>
                    <p><strong>Jumlah Responden:</strong> ${selectedCheckboxes.size} orang</p>
                    <p><strong>Akan dikirim ke:</strong></p>
                    <ul style="max-height: 300px; overflow-y: auto; text-align: left;">
                        ${selectedRespondentsList}
                    </ul>
                </div>
            `,
                showCancelButton: true,
                confirmButtonColor: '#28a745',
                cancelButtonColor: '#dc3545',
                confirmButtonText: '<i class="fas fa-paper-plane me-2"></i>Ya, Kirim Email!',
                cancelButtonText: '<i class="fas fa-times me-2"></i>Batal',
                reverseButtons: true,
                customClass: {
                    popup: 'animated bounceIn'
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    // Show loading modal popup (seperti di survey)
                    Swal.fire({
                        title: 'Mengirim Survey...',
                        text: 'Mohon tunggu sebentar',
                        allowOutsideClick: false,
                        allowEscapeKey: false,
                        showConfirmButton: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });

                    // Send AJAX request
                    fetch('{{ route('trsurvey.send-emails') }}', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute(
                                    'content')
                            },
                            body: JSON.stringify({
                                survey_id: '{{ $survey->idsurvei }}',
                                respondent_ids: selectedIds
                            })
                        })
                        .then(response => response.json())
                        .then(data => {
                            // Close loading modal first
                            Swal.close();

                            if (data.success) {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Email Berhasil Dikirim!',
                                    html: `
                                <div style="text-align: center;">
                                    <p>${data.message}</p>
                                    <div style="margin: 15px 0;">
                                        <span class="badge bg-success fs-6 me-2">
                                            <i class="fas fa-check me-1"></i>${data.data?.success_count || 0} Berhasil
                                        </span>
                                        ${data.data?.failed_count > 0 ? 
                                            `<span class="badge bg-danger fs-6">
                                                        <i class="fas fa-times me-1"></i>${data.data.failed_count} Gagal
                                                    </span>` : ''
                                        }
                                    </div>
                                </div>
                            `,
                                    confirmButtonColor: '#28a745',
                                    confirmButtonText: '<i class="fas fa-thumbs-up me-2"></i>OK',
                                    customClass: {
                                        popup: 'animated bounceIn'
                                    }
                                }).then(() => {
                                    // Refresh halaman setelah send berhasil
                                    if (data.refresh) {
                                        window.location.reload();
                                    }
                                });
                            } else {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Oops! Ada Masalah',
                                    text: data.message,
                                    confirmButtonColor: '#dc3545',
                                    confirmButtonText: 'OK, Mengerti'
                                });
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);
                            // Close loading modal on error
                            Swal.close();

                            Swal.fire({
                                icon: 'error',
                                title: 'Terjadi Kesalahan!',
                                text: 'Tidak dapat mengirim email. Silakan coba lagi.',
                                confirmButtonColor: '#dc3545',
                                confirmButtonText: 'OK'
                            });
                        })
                        .finally(() => {
                            // Update send button count after completion
                            updateSendButton();
                        });
                }
            });
        }
    </script>
@endpush