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

@section('content')
    @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-body">
                        <h5 class="mb-3">Filter</h5>
                        <form id="filterForm">
                            <div class="row g-3 mb-3">
                                <div class="col-lg-3 col-md-6">
                                    <label for="date_from" class="form-label small mb-1">Tanggal Mulai</label>
                                    <input type="date" class="form-control form-control-sm" id="date_from" name="date_from" 
                                           value="{{ request('date_from') }}">
                                </div>
                                <div class="col-lg-3 col-md-6">
                                    <label for="date_to" class="form-label small mb-1">Tanggal Akhir</label>
                                    <input type="date" class="form-control form-control-sm" id="date_to" name="date_to"
                                           value="{{ request('date_to') }}">
                                </div>
                                <div class="col-lg-3 col-md-6">
                                    <label for="kategori" class="form-label small mb-1">Kategori</label>
                                    <select class="form-select form-select-sm" id="kategori" name="kategori">
                                        <option value="">Semua</option>
                                        <option value="once" {{ request('kategori') == 'once' ? 'selected' : '' }}>Sekali</option>
                                        <option value="repetisi" {{ request('kategori') == 'repetisi' ? 'selected' : '' }}>Repetisi</option>
                                    </select>
                                </div>
                                <div class="col-lg-3 col-md-6">
                                    <label for="status" class="form-label small mb-1">Status</label>
                                    <select class="form-select form-select-sm" id="status" name="status">
                                        <option value="">Semua</option>
                                        <option value="entri" {{ request('status') == 'entri' ? 'selected' : '' }}>Entri</option>
                                        <option value="proses" {{ request('status') == 'proses' ? 'selected' : '' }}>Proses</option>
                                        <option value="selesai" {{ request('status') == 'selesai' ? 'selected' : '' }}>Selesai</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-12">
                                    <button type="submit" class="btn btn-primary btn-sm" id="btnSearch">
                                        <i class="fas fa-search"></i> Cari
                                    </button>
                                    <button type="button" class="btn btn-secondary btn-sm ms-2" id="btnClear">
                                        <i class="fas fa-times"></i> Clear
                                    </button>
                                </div>
                            </div>
                        </form>
                        
                        <div id="activeFilters" class="mt-2" style="display: none;">
                            <div class="d-flex align-items-center gap-2">
                                <small class="text-muted fw-bold">Filter Aktif:</small>
                                <div id="filterBadges" class="d-flex flex-wrap gap-1">
                                    <!-- Badges will be inserted here by JavaScript -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card mb-4">
                    <div class="card-header col-md-auto">
                        <h5 class="mb-0">List Survey</h5>
                    </div>
                    <div class="col">
                        {{-- alert --}}
                        @include('components.alert')
                    </div>
                    <div class="row px-4 py-2">
                        <div class="col-lg">
                            <div class="nav-wrapper">
                                {{-- check authorize add --}}
                                @if ($authorize->add == '1')
                                    {{-- button add --}}
                                    <button class="btn btn-primary mb-0"
                                        onclick="window.location='{{ URL::to($url_menu . '/add') }}'"><i
                                            class="fas fa-plus me-1"> </i><span class="font-weight-bold">Tambah</button>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="row px-4 py-2">
                        <div class="table-responsive">
                            <table class="table display" id="list_{{ $dmenu }}">
                                <thead class="thead-light" style="background-color: #00b7bd4f;">
                                    <tr>
                                        <th>Action</th>
                                        <th>Judul</th>
                                        <th>Jenis</th>
                                        <th>Repetisi</th>
                                        <th>Progress</th>
                                        <th>Dibuat</th>
                                        <th>Tanggal Mulai</th>
                                        <th>Tanggal Selesai</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($list_survei as $survei)
                                        <tr>
                                            <td class="text-sm font-weight-normal">
                                                <div class="btn-group">
                                                    <button class="btn btn-primary btn-sm mb-0 px-3" type="button"
                                                        title="View Data"
                                                        onclick="window.location='{{ url($url_menu . '/show' . '/' . $survei->idsurvei) }}'">
                                                        <i class="fas fa-eye"></i><span class="font-weight-bold"> View
                                                    </button>
                                                    <button type="button"
                                                        class="btn btn-sm btn-primary mb-0 px-3 dropdown-toggle dropdown-toggle-split"
                                                        data-bs-toggle="dropdown" aria-expanded="false">
                                                        <span class="visually-hidden">Toggle Dropdown</span>
                                                    </button>
                                                    <ul class="dropdown-menu">
                                                        @if ($authorize->edit == '1' && $survei->status == 'entri')
                                                            <li>
                                                                <hr class="dropdown-divider">
                                                            </li>
                                                            <button type="button"
                                                                class="btn btn-sm btn-warning mx-2 mb-0 w-90"
                                                                title="Edit Data"
                                                                onclick="window.location='{{ url($url_menu . '/edit' . '/' . $survei->idsurvei) }}'">
                                                                <i class="fas fa-edit"></i><span class="font-weight-bold"> Edit
                                                            </button>
                                                        @endif

                                                        @if ($authorize->edit == '1' && $survei->status != 'selesai')
                                                            <li>
                                                                <hr class="dropdown-divider">
                                                            </li>
                                                            <button type="button"
                                                                class="btn btn-sm btn-info mx-2 mb-0 w-90"
                                                                title="Send Survey"
                                                                onclick="window.location='{{ url('/trsurvey/send/' . $survei->idsurvei) }}'">
                                                                <i class="fas fa-paper-plane"></i><span class="font-weight-bold"> Send
                                                            </button>
                                                            <li>
                                                                <hr class="dropdown-divider">
                                                            </li>
                                                            <button type="button"
                                                                class="btn btn-sm btn-success mx-2 mb-0 w-90"
                                                                title="End Survey"
                                                                onclick="endSurvey('{{ $survei->idsurvei }}', '{{ $survei->judul_form }} - {{ $survei->subjudul }}')">
                                                                <i class="fas fa-stop"></i><span class="font-weight-bold"> End
                                                            </button>
                                                        @endif

                                                        @if ($survei->status == 'selesai' || $survei->status == 'proses')
                                                            <li>
                                                                <hr class="dropdown-divider">
                                                            </li>
                                                            <button type="button"
                                                                class="btn btn-sm btn-success mx-2 mb-0 w-90"
                                                                title="View Report"
                                                                onclick="window.location='{{ url('/rpsurvey/result/' . $survei->idsurvei) }}'">
                                                                <i class="fas fa-file-alt"></i><span class="font-weight-bold"> Report
                                                            </button>
                                                        @endif
                                                        @if ($authorize->edit == '1' && $survei->status == 'entri')
                                                            <li><hr class="dropdown-divider"></li>
                                                            
                                                            <form action="{{ url('/trsurvey/delete') }}"
                                                                method="POST" 
                                                                style="display: inline">
                                                                @csrf
                                                                @method('DELETE')
                                                                
                                                                <input type="hidden" name="id" value="{{ encrypt($survei->idsurvei) }}">
                                                                
                                                                <button type="submit"
                                                                        class="btn btn-sm btn-danger mx-2 mb-0 w-90"
                                                                        title="Delete Survey"
                                                                        onclick="return deleteSurvey(event, '{{ $survei->judul_form }} - {{ $survei->subjudul }}', 'Hapus')">
                                                                    <i class="fas fa-trash"></i>
                                                                    <span class="font-weight-bold"> Delete</span>
                                                                </button>
                                                            </form>
                                                        @endif                                                                                                     
                                                        <li>
                                                            <hr class="dropdown-divider">
                                                        </li>
                                                    </ul>
                                                </div>
                                            </td>
                                            <td style="max-width: 250px; min-width: 250px;">
                                                <div style="max-width: 250px; word-wrap: break-word; overflow-wrap: break-word; white-space: normal; line-height: 1.4;">
                                                    <strong>{{ $survei->judul_form }}</strong> - {{ $survei->subjudul }}
                                                </div>
                                            </td>
                                            <td>
                                                {{ $survei->form_jenis == 'O' ? 'Sekali' : 'Repetisi' }}
                                            </td>
                                            <td>
                                                {{ $survei->form_jenis == 'R' ? $survei->repetisi_ke : '-' }}
                                            </td>
                                            <td style="min-width: 180px;" data-order="{{ $survei->response_rate }}">
                                                <div class="d-flex flex-column">
                                                    <div class="d-flex justify-content-between align-items-center mb-1">
                                                        <small class="text-muted">Response Rate</small>
                                                        <small class="fw-bold text-{{ $survei->response_rate >= 80 ? 'success' : ($survei->response_rate >= 50 ? 'warning' : 'danger') }}">
                                                            {{ number_format($survei->response_rate, 1) }}%
                                                        </small>
                                                    </div>
                                                    <div class="progress" style="height: 10px;">
                                                        <div class="progress-bar progress-bar-striped {{ $survei->response_rate >= 80 ? 'bg-success' : ($survei->response_rate >= 50 ? 'bg-warning' : 'bg-danger') }}" 
                                                             role="progressbar" 
                                                             style="width: {{ $survei->response_rate }}%;" 
                                                             aria-valuenow="{{ $survei->response_rate }}" 
                                                             aria-valuemin="0" 
                                                             aria-valuemax="100">
                                                        </div>
                                                    </div>
                                                    <small class="text-muted mt-1" style="font-size: 0.75rem;">
                                                        {{ $survei->responded }} dari {{ $survei->total_respondents }} responden
                                                    </small>
                                                </div>
                                            </td>
                                            <td data-order="{{ strtotime($survei->created_at) }}">
                                                {{ date('Y-m-d', strtotime($survei->created_at)) }}
                                            </td>
                                            <td>
                                                {{ $survei->tanggal_mulai }}
                                            </td>
                                            <td>
                                                {{ $survei->tanggal_selesai }}
                                            </td>
                                            <td>
                                                <span
                                                    class="badge bg-{{ 
                                                                            $survei->status == 'entri' ? 'secondary' : ($survei->status == 'proses' ? 'warning' : 'success') }}">
                                                    {{ ucfirst($survei->status) }}
                                                </span>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Konfirmasi Akhiri Survey -->
    <div class="modal fade" id="endSurveyModal" tabindex="-1" aria-labelledby="endSurveyModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="endSurveyModalLabel">
                        <i class="fas fa-exclamation-triangle text-warning"></i> Konfirmasi Akhiri Survey
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div id="endSurveyForm">
                    <input type="hidden" id="endSurveyId" value="">
                    <div class="modal-body">
                        <p><strong>Apakah Anda yakin ingin mengakhiri survey ini?</strong></p>
                        <p id="surveyEndDetails" class="text-muted mb-3"></p>
                        <div class="alert alert-warning" role="alert">
                            <i class="fas fa-info-circle"></i>
                            <strong>Perhatian:</strong> Survey yang sudah diakhiri tidak dapat diisi lagi oleh responden.
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                        <button type="button" class="btn btn-danger" id="btnConfirmEndSurvey">
                            <i class="fas fa-stop"></i> Ya, Akhiri Survey
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('css')
    <style>
        /* Progress bar styling */
        .progress {
            background-color: #e9ecef;
            border-radius: 0.25rem;
            overflow: hidden;
        }

        .progress-bar {
            transition: width 0.6s ease;
        }

        /* Table cell vertical alignment */
        #list_{{ $dmenu }} td {
            vertical-align: middle;
        }

        /* Ensure minimum width for progress column */
        #list_{{ $dmenu }} td:nth-child(5) {
            min-width: 180px;
        }

        /* Filter section styling */
        #filterSection {
            transition: all 0.3s ease;
        }

        #activeFilters small {
            white-space: nowrap;
        }

        #filterBadges .badge {
            font-size: 0.75rem;
            padding: 0.35rem 0.65rem;
        }

        .form-label.small {
            font-weight: 600;
            color: #344767;
        }

        .btn-sm {
            padding: 0.375rem 0.75rem;
            font-size: 0.875rem;
        }
    </style>
@endpush

@push('js')
    <script>
        let surveyTable;

        $(document).ready(function () {
            // Initialize DataTable
            initializeDataTable();

            // Show initial filter badges if any
            updateFilterBadges();

            // Handle filter form submission
            $('#filterForm').on('submit', function(e) {
                e.preventDefault();
                applyFilters();
            });

            // Handle clear button
            $('#btnClear').on('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                clearFilters();
            });

            // Auto-filter on select change
            $('#kategori, #status').on('change', function() {
                applyFilters();
            });
        });

        function initializeDataTable() {
            if ($.fn.DataTable.isDataTable('#list_{{ $dmenu }}')) {
                $('#list_{{ $dmenu }}').DataTable().destroy();
            }

            surveyTable = $('#list_{{ $dmenu }}').DataTable({
                "order": [],
                "columnDefs": [
                    { "orderable": false, "targets": [0] },
                    { "width": "180px", "targets": 4 }, 
                    { "type": "num", "targets": [4, 5] },
                    { "orderSequence": ["desc", "asc"], "targets": "_all" } 
                ],
                "language": {
                    "url": "//cdn.datatables.net/plug-ins/1.10.24/i18n/Indonesian.json"
                },
                "pageLength": 10,
                "autoWidth": false
            });
        }

        function applyFilters() {
            const dateFrom = $('#date_from').val();
            const dateTo = $('#date_to').val();
            const kategori = $('#kategori').val();
            const status = $('#status').val();

            // Show loading state
            $('#btnSearch').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Loading...');

            // Build URL with parameters
            const url = new URL(window.location.href.split('?')[0]);
            if (dateFrom) url.searchParams.set('date_from', dateFrom);
            if (dateTo) url.searchParams.set('date_to', dateTo);
            if (kategori) url.searchParams.set('kategori', kategori);
            if (status) url.searchParams.set('status', status);

            // Fetch filtered data
            $.ajax({
                url: url.toString(),
                type: 'GET',
                success: function(response) {
                    // Extract table body from response
                    const parser = new DOMParser();
                    const doc = parser.parseFromString(response, 'text/html');
                    const newTableBody = $(doc).find('#list_{{ $dmenu }} tbody').html();

                    // Update table
                    surveyTable.destroy();
                    $('#list_{{ $dmenu }} tbody').html(newTableBody);
                    initializeDataTable();

                    // Update filter badges
                    updateFilterBadges();

                    // Reset button
                    $('#btnSearch').prop('disabled', false).html('<i class="fas fa-search"></i> Search');
                },
                error: function() {
                    alert('Terjadi kesalahan saat memfilter data');
                    $('#btnSearch').prop('disabled', false).html('<i class="fas fa-search"></i> Search');
                }
            });
        }

        function clearFilters() {
            // Clear all filter inputs
            $('#date_from').val('');
            $('#date_to').val('');
            $('#kategori').val('');
            $('#status').val('');
            
            // Hide filter badges immediately
            $('#activeFilters').hide();
            
            // Show loading state
            $('#btnClear').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Clearing...');
            
            // Get base URL without parameters
            const baseUrl = window.location.href.split('?')[0];
            
            // Fetch all data without filters
            $.ajax({
                url: baseUrl,
                type: 'GET',
                success: function(response) {
                    // Extract table body from response
                    const parser = new DOMParser();
                    const doc = parser.parseFromString(response, 'text/html');
                    const newTableBody = $(doc).find('#list_{{ $dmenu }} tbody').html();

                    // Update table
                    surveyTable.destroy();
                    $('#list_{{ $dmenu }} tbody').html(newTableBody);
                    initializeDataTable();

                    // Reset button
                    $('#btnClear').prop('disabled', false).html('<i class="fas fa-times"></i> Clear');
                },
                error: function() {
                    alert('Terjadi kesalahan saat menghapus filter');
                    $('#btnClear').prop('disabled', false).html('<i class="fas fa-times"></i> Clear');
                }
            });
        }

        function updateFilterBadges() {
            const dateFrom = $('#date_from').val();
            const dateTo = $('#date_to').val();
            const kategori = $('#kategori').val();
            const status = $('#status').val();

            let badges = '';
            let hasFilters = false;

            if (dateFrom && dateTo) {
                hasFilters = true;
                badges += `<span class="badge bg-info text-white">
                    <i class="fas fa-calendar me-1"></i>
                    ${formatDate(dateFrom)} - ${formatDate(dateTo)}
                </span>`;
            } else if (dateFrom) {
                hasFilters = true;
                badges += `<span class="badge bg-info text-white">
                    <i class="fas fa-calendar me-1"></i>
                    Dari: ${formatDate(dateFrom)}
                </span>`;
            } else if (dateTo) {
                hasFilters = true;
                badges += `<span class="badge bg-info text-white">
                    <i class="fas fa-calendar me-1"></i>
                    Sampai: ${formatDate(dateTo)}
                </span>`;
            }

            if (kategori) {
                hasFilters = true;
                const kategoriText = kategori === 'once' ? 'Sekali' : 'Repetisi';
                badges += `<span class="badge bg-primary text-white">
                    <i class="fas fa-tag me-1"></i>
                    ${kategoriText}
                </span>`;
            }

            if (status) {
                hasFilters = true;
                const statusColor = status === 'entri' ? 'secondary' : (status === 'proses' ? 'warning' : 'success');
                const statusText = status.charAt(0).toUpperCase() + status.slice(1);
                badges += `<span class="badge bg-${statusColor} text-white">
                    <i class="fas fa-circle me-1"></i>
                    ${statusText}
                </span>`;
            }

            if (hasFilters) {
                $('#activeFilters').show();
                $('#filterBadges').html(badges);
            } else {
                $('#activeFilters').hide();
            }
        }

        function formatDate(dateString) {
            const date = new Date(dateString);
            const months = ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'];
            return `${date.getDate()} ${months[date.getMonth()]} ${date.getFullYear()}`;
        }

        function endSurvey(surveyId, surveyTitle) {
            // Set survey ID to hidden input
            document.getElementById('endSurveyId').value = surveyId;

            // Update modal content  
            document.getElementById('surveyEndDetails').innerHTML =
                `<strong>Survey:</strong> ${surveyTitle}<br>` +
                `<strong>Status:</strong> Akan diubah menjadi "Selesai"<br>` +
                `<strong>Tanggal Selesai:</strong> ${new Date().toLocaleDateString('id-ID')}`;

            // Show modal
            const modal = new bootstrap.Modal(document.getElementById('endSurveyModal'));
            modal.show();
        }

        // Handle confirm button click
        $('#btnConfirmEndSurvey').on('click', function() {
            const surveyId = $('#endSurveyId').val();
            const button = $(this);
            
            // Disable button and show loading
            button.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Memproses...');
            
            // Close modal first
            $('#endSurveyModal').modal('hide');
            
            // Show loading with SweetAlert
            Swal.fire({
                title: 'Mengakhiri Survey...',
                text: 'Mohon tunggu sebentar',
                allowOutsideClick: false,
                allowEscapeKey: false,
                showConfirmButton: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });
            
            // Send AJAX request using fetch
            fetch("{{ URL::to('/trsurvey/end') }}/" + surveyId, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            })
            .then(response => {
                // Check if response is ok
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(data => {
                console.log('Response data:', data);
                
                // Close loading modal
                Swal.close();
                
                if (data.success) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil!',
                        text: data.message || 'Survey berhasil diakhiri',
                        confirmButtonColor: '#28a745',
                        confirmButtonText: '<i class="fas fa-check me-2"></i>OK'
                    }).then(() => {
                        // Reload page to refresh data
                        window.location.reload();
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal!',
                        text: data.message || 'Terjadi kesalahan saat mengakhiri survey',
                        confirmButtonColor: '#dc3545',
                        confirmButtonText: 'OK'
                    });
                    
                    // Re-enable button
                    button.prop('disabled', false).html('<i class="fas fa-stop"></i> Ya, Akhiri Survey');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                
                // Close loading modal
                Swal.close();
                
                Swal.fire({
                    icon: 'error',
                    title: 'Terjadi Kesalahan!',
                    text: 'Tidak dapat mengakhiri survey. Silakan coba lagi. Error: ' + error.message,
                    confirmButtonColor: '#dc3545',
                    confirmButtonText: 'OK'
                });
                
                // Re-enable button
                button.prop('disabled', false).html('<i class="fas fa-stop"></i> Ya, Akhiri Survey');
            });
        });
    function deleteSurvey(event, name, msg) {
        event.preventDefault(); 
        
        Swal.fire({
            title: 'Konfirmasi Hapus Survey',
            html: `
                <p><strong>Apakah Anda yakin ingin ${msg.toLowerCase()} survey ini?</strong></p>
                <p class="text-muted">${name}</p>
                <div class="alert alert-danger mt-3" role="alert">
                    <i class="fas fa-exclamation-circle"></i>
                    <strong>Peringatan:</strong> Survey yang dihapus <u>tidak dapat dikembalikan</u>.
                </div>
            `,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: `<i class="fas fa-trash"></i> Ya, ${msg}`,
            cancelButtonText: '<i class="fas fa-times"></i> Batal',
            confirmButtonColor: '#dc3545',
            cancelButtonColor: '#6c757d',
            reverseButtons: true
        }).then((result) => {
            if (result.isConfirmed) {
                Swal.fire({
                    title: 'Menghapus Survey...',
                    text: 'Mohon tunggu sebentar',
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    showConfirmButton: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });
                event.target.closest('form').submit();
            }
        });
    }
    </script>
@endpush