@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="section-first">
        <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 execute --}}
                            <button type="button" class="btn btn-primary mb-0" id="btn-execute">
                                <i class="fas fa-bolt me-1"></i>
                                <span class="font-weight-bold">Execute</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br>

    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div id="survey-filter-section">
                        @csrf
                        <div class="card-body">
                            <p class="text-uppercase text-sm">Filter Report Survey</p>
                            <hr class="horizontal dark mt-0">
                            <div class="row">
                                <!-- ID Survey -->
                                <div class="col-lg-4">
                                    <div class="row mb-3 align-items-center">
                                        <div class="col-lg-4">
                                            <label for="inputID" class="form-label mb-0">ID Survey</label>
                                        </div>
                                        <div class="col-lg-8">
                                            <div class="input-group">
                                                <input type="text" class="form-control upper" id="survey-id"
                                                    name="survey-id" placeholder="Cari ID Survey" readonly>
                                                <input type="hidden" name="dept" id="dept" value="{{ $dept }}">
                                                <span class="input-group-text bg-primary text-light"
                                                    style="border-color:#d2d6da; border-left:3px solid #d2d6da; cursor: pointer;"
                                                    id="btn-cari-survey">
                                                    <i class="fas fa-search"></i>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div id="survey-details-section" style="display: none;">
                            <hr class="horizontal dark">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <p><strong>Judul Form:</strong> <span id="detail-judul"></span></p>
                                        <p><strong>Jenis:</strong> <span id="detail-jenis"></span></p>
                                        <p><strong>Departemen:</strong> <span id="detail-dept"></span></p>
                                    </div>
                                    <div class="col-md-6">
                                        <p><strong>Subjudul:</strong> <span id="detail-subjudul"></span></p>
                                        <p><strong>Tanggal Mulai:</strong> <span id="detail-tanggal-mulai"></span></p>
                                        <p><strong>Tanggal Selesai:</strong> <span id="detail-tanggal-selesai"></span></p>
                                    </div>
                                </div>

                                <div id="filter-repetisi" class="row mt-3" style="display: none;">
                                    <div class="col-md-4">
                                        <label class="form-label">Pilih Periode:</label>
                                        <select class="form-select" id="periode-filter" name="periode-filter">
                                            <option value="current">Survey ini</option>
                                            <option value="year">Per Tahun</option>
                                            <option value="3years">Perbandingan 3 Tahun</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal --}}
    <div class="modal fade" id="surveyListModal" tabindex="-1" aria-labelledby="surveyListModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="surveyListModalLabel">Pilih Survey</h5>
                    <button type="button" class="btn-close text-muted" data-bs-dismiss="modal" aria-label="Close">X</button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table class="table table-hover" id="survey_list_table">
                            <thead style="background-color: #00b7bd4f;">
                                <tr>
                                    <th>Action</th>
                                    <th>ID Survey</th>
                                    <th>Form ID</th>
                                    <th>Judul</th>
                                    <th>Subjudul</th>
                                    <th>Tanggal Mulai</th>
                                    <th>Tanggal Selesai</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody id="survey-tbody">
                                <!-- AJAX -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function () {
            var selectedSurveyData = null;

            if (Swal.isVisible()) {
                Swal.close();
            }

            $('#btn-cari-survey, #survey-id').click(function (e) {
                e.preventDefault();
                loadSurveyList();
            });

            function loadSurveyList() {
                var dept = $('#dept').val();

                console.log('Department value:', dept);

                Swal.fire({
                    title: 'Memuat Data Survey...',
                    text: 'Mohon tunggu sebentar',
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    showConfirmButton: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });

                $.ajax({
                    url: "{{ URL::to('/') }}/rpsurvey/getsurveylist",
                    type: 'POST',
                    dataType: "JSON",
                    data: {
                        departemen: dept,
                        _token: $('meta[name="csrf-token"]').attr('content')
                    },
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function (response) {
                        Swal.close();

                        if (response.success) {
                            displaySurveyList(response.data);
                            setTimeout(function () {
                                $('#surveyListModal').modal('show');
                            }, 100);
                        } else {
                            $('#survey-tbody').html('<tr><td colspan="8" class="text-center text-danger">Gagal memuat data</td></tr>');
                            setTimeout(function () {
                                $('#surveyListModal').modal('show');
                            }, 100);
                        }
                    },
                    error: function (xhr) {
                        Swal.close();

                        console.error('Error:', xhr);

                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'Terjadi kesalahan saat memuat data survey',
                            confirmButtonColor: '#dc3545'
                        });
                    }
                });
            }

            function displaySurveyList(surveys) {
                var tbody = $('#survey-tbody');
                tbody.empty();

                if (surveys.length === 0) {
                    tbody.html('<tr><td colspan="8" class="text-center">Tidak ada data survey</td></tr>');
                    return;
                }

                $.each(surveys, function (index, survey) {
                    var statusBadge = '';
                    if (survey.status === 'selesai') {
                        statusBadge = '<span class="badge bg-success">Selesai</span>';
                    } else if (survey.status === 'proses') {
                        statusBadge = '<span class="badge bg-warning">Proses</span>';
                    } else {
                        statusBadge = '<span class="badge bg-secondary">Entri</span>';
                    }

                    var row = `
                        <tr>
                            <td>
                                <button type="button" class="btn btn-primary btn-sm btn-select-survey" 
                                    data-idsurvei="${survey.idsurvei}"
                                    data-form-id="${survey.form_id}"
                                    data-judul="${survey.judul_form}"
                                    data-jenis="${survey.jenis}"
                                    data-dept="${survey.departemen}"
                                    data-nama-dept="${survey.nama_departemen}"
                                    data-subjudul="${survey.subjudul}"
                                    data-mulai="${survey.tanggal_mulai}"
                                    data-selesai="${survey.tanggal_selesai}"
                                    data-created-at="${survey.created_at}">
                                    <i class="fas fa-check"></i> Pilih
                                </button>
                            </td>
                            <td>${survey.idsurvei}</td>
                            <td>${survey.form_id}</td>
                            <td>${survey.judul_form}</td>
                            <td>${survey.subjudul}</td>
                            <td>${survey.tanggal_mulai}</td>
                            <td>${survey.tanggal_selesai}</td>
                            <td>${statusBadge}</td>
                        </tr>`;
                    tbody.append(row);
                });

                if ($.fn.DataTable.isDataTable('#survey_list_table')) {
                    $('#survey_list_table').DataTable().destroy();
                }

                $('#survey_list_table').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)"
                    },
                    "pageLength": 10,
                    "ordering": true
                });
            }

            $(document).on('click', '.btn-select-survey', function () {
                selectedSurveyData = {
                    idsurvei: $(this).data('idsurvei'),
                    form_id: $(this).data('form-id'),
                    judul_form: $(this).data('judul'),
                    jenis: $(this).data('jenis'),
                    departemen: $(this).data('dept'),
                    nama_departemen: $(this).data('nama-dept'),
                    nama_departemen: $(this).data('nama-dept'),
                    subjudul: $(this).data('subjudul'),
                    tanggal_mulai: $(this).data('mulai'),
                    tanggal_selesai: $(this).data('selesai'),
                    created_at: $(this).data('created-at')
                };

                displaySurveyDetails(selectedSurveyData);
                $('#surveyListModal').modal('hide');
            });

            function displaySurveyDetails(survey) {
                $('#survey-id').val(survey.idsurvei);
                $('#detail-judul').text(survey.judul_form);
                $('#detail-jenis').text(survey.jenis === 'R' ? 'Repetisi' : 'Sekali');
                $('#detail-dept').text(survey.nama_departemen || survey.nama_departemen || survey.departemen);
                $('#detail-subjudul').text(survey.subjudul);
                $('#detail-tanggal-mulai').text(survey.tanggal_mulai);
                $('#detail-tanggal-selesai').text(survey.tanggal_selesai);

                if (survey.jenis === 'R') {
                    $('#filter-repetisi').show();
                } else {
                    $('#filter-repetisi').hide();
                }

                $('#survey-details-section').show();
            }

            $('#btn-execute').click(function (e) {
                e.preventDefault();
                e.stopPropagation();

                if (!selectedSurveyData || !selectedSurveyData.idsurvei) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Peringatan',
                        text: 'Silakan pilih survey terlebih dahulu!',
                        confirmButtonColor: '#3085d6'
                    });
                    return false;
                }

                const periodeFilter = $('#periode-filter').length && $('#periode-filter').val();
                const isRepetisi = selectedSurveyData.jenis === 'R';

                if (isRepetisi && !periodeFilter) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Peringatan',
                        text: 'Silakan pilih periode terlebih dahulu!',
                        confirmButtonColor: '#3085d6'
                    });
                    return false;
                }

                sessionStorage.setItem('isLoadingResult', 'true');
                sessionStorage.setItem('loadingStartTime', Date.now().toString());

                Swal.fire({
                    title: 'Memuat Data Survey...',
                    text: 'Mohon tunggu, sedang memproses data...',
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    allowEnterKey: false,
                    showConfirmButton: false,
                    showCancelButton: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });

                const surveyId = periodeFilter === '3years' || periodeFilter === 'year' ? selectedSurveyData.form_id : selectedSurveyData.idsurvei;
                const postData = {
                    _token: $('meta[name="csrf-token"]').attr('content'),
                    periode_filter: periodeFilter || 'current',
                };

                if (periodeFilter === '3years' || periodeFilter === 'year') {
                    const tanggalMulai = selectedSurveyData.tanggal_mulai;
                    const surveyYear = parseInt(tanggalMulai.split('-')[0]);
                    postData.reference_year = surveyYear;

                    console.log('Selected Survey ID:', selectedSurveyData.idsurvei);
                    console.log('tanggal_mulai:', tanggalMulai);
                    console.log('Reference Year being sent:', surveyYear);
                }

                $.ajax({
                    url: "{{ URL::to('/') }}/rpsurvey/result/" + surveyId,
                    type: 'POST',
                    data: postData,
                    dataType: 'json',
                    timeout: 60000,
                    success: function (response) {
                        if (response.success) {
                            const form = $('<form>', {
                                'method': 'POST',
                                'action': response.redirect_url
                            });

                            form.append($('<input>', {
                                'type': 'hidden',
                                'name': '_token',
                                'value': $('meta[name="csrf-token"]').attr('content')
                            }));

                            $.each(response.data, function (key, value) {
                                form.append($('<input>', {
                                    'type': 'hidden',
                                    'name': key,
                                    'value': value
                                }));
                            });

                            $('body').append(form);
                            form.submit();

                            setTimeout(function () {
                                if (Swal.isVisible()) {
                                    Swal.close();
                                }
                            }, 8000);
                        } else {
                            sessionStorage.removeItem('isLoadingResult');
                            sessionStorage.removeItem('loadingStartTime');

                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: response.message || 'Terjadi kesalahan saat memuat data',
                                confirmButtonColor: '#dc3545'
                            });
                        }
                    },
                    error: function (xhr, status, error) {
                        sessionStorage.removeItem('isLoadingResult');
                        sessionStorage.removeItem('loadingStartTime');

                        let errorMessage = 'Terjadi kesalahan saat memuat data';

                        if (status === 'timeout') {
                            errorMessage = 'Request timeout. Silakan coba lagi.';
                        } else if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMessage = xhr.responseJSON.message;
                        } else if (xhr.responseText) {
                            errorMessage = 'Error: ' + error;
                        }

                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: errorMessage,
                            confirmButtonColor: '#dc3545'
                        });

                        console.error('AJAX Error:', {
                            status: status,
                            error: error,
                            response: xhr.responseText
                        });
                    }
                });
            });
        });
    </script>
@endsection

@push('js')
    <script src="./assets/js/plugins/chartjs.min.js"></script>
@endpush