@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
<style>
    .table-question {
        table-layout: fixed;
        border-collapse: separate;
        /* Ganti dari collapse ke separate */
        border-spacing: 0;
        /* Hilangkan jarak antar sel */
        width: 100%;
    }

    .table-question th,
    .table-question td {
        border: 1px solid #dee2e6 !important;
        /* Pakai !important untuk override Bootstrap */
        padding: 0.75rem;
    }

    .table-question thead th {
        background-color: rgb(190, 190, 190);
        font-weight: bold;
        border-bottom: 2px solid #dee2e6 !important;
    }

    .question-cell {
        white-space: normal;
        word-wrap: break-word;
        line-height: 1.5;
        padding: 15px;
    }
</style>


{{-- section content --}}
@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="history.back()"><i class="fas fa-circle-left me-1">
                            </i><span class="font-weight-bold">Kembali</button>
                        {{-- check authorize add --}}
                        @if ($authorize->add == '1')
                            {{-- button save --}}
                            <button class="btn btn-primary mb-0" onclick="event.preventDefault(); validateAndSubmit();"><i
                                    class="fas fa-floppy-disk me-1"> </i><span class="font-weight-bold">Simpan</button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <form role="form" method="POST" action="{{ URL::to($url_menu) }}" id="{{ $dmenu }}-form"
                        enctype="multipart/form-data">
                        @csrf
                        <div class="card-body">
                            <p class="text-uppercase text-sm">Insert {{ $title_menu }}</p>
                            <hr class="horizontal dark mt-0">
                            <!-- Header Form -->
                            <div class="row mb-4">
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="katering_id" class="form-label">Pilih Katering</label>
                                        <select class="form-select" name="id_catering">
                                            <option value="">Pilih Katering</option>
                                            @foreach ($katerings as $katering)
                                                <option value="{{ $katering->id_catering }}"
                                                    {{ old('id_catering') == $katering->id_catering ? 'selected' : '' }}>
                                                    {{ $katering->nama_catering }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('katering_id')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="auditor" class="form-label">Auditor</label>
                                        <input type="text" class="form-control @error('auditor') is-invalid @enderror"
                                            name="auditor" id="auditor">
                                        @error('auditor')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="tanggal_sidak" class="form-label">Tanggal SIDAK</label>
                                        <input type="date"
                                            class="form-control @error('tanggal_sidak') is-invalid @enderror"
                                            name="tanggal_sidak" id="tanggal_sidak">
                                        @error('tanggal_sidak')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <!-- Table Penilaian -->
                            <div class="table-responsive">
                                @foreach ($pertanyaans->groupBy('kategori_pertanyaan') as $kategori => $questions)
                                    <table class="table table-bordered mb-4 table-question">
                                        <thead class="table-light">
                                            <tr>
                                                <th width="5%" class="text-center">No</th>
                                                <th width="35%">{{ $kategori }}</th>
                                                <th width="30%">Penilaian</th>
                                                <th width="20%">Temuan</th>
                                                <th width="10%">SP</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($questions as $index => $pertanyaan)
                                                <tr>
                                                    <td class="text-center align-middle">{{ $loop->iteration }}</td>
                                                    <td class="align-middle">
                                                        <div class="question-cell">
                                                            {{ $pertanyaan->pertanyaan }}
                                                        </div>
                                                    </td>
                                                    <td class="align-middle">
                                                        <select class="form-select penilaian-select"
                                                            name="penilaian[{{ $pertanyaan->id }}]"
                                                            data-row="{{ $pertanyaan->id }}">
                                                            <option value="">Pilih Nilai</option>
                                                            @foreach ($penilaians as $nilai)
                                                                <option value="{{ $nilai->id }}"
                                                                    data-nilai="{{ $nilai->bobot }}">
                                                                    {{ $nilai->bobot }} - {{ $nilai->penilaian }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </td>
                                                    <td class="align-middle">
                                                        <div class="upload-container" id="upload-{{ $pertanyaan->id }}"
                                                            style="display: none;">
                                                            <input type="file" class="form-control"
                                                                name="temuan[{{ $pertanyaan->id }}]" accept="image/*">
                                                            <small class="text-muted">Upload foto temuan</small>
                                                        </div>
                                                    </td>
                                                    <td class="align-middle">
                                                        <div class="sp-container" id="sp-{{ $pertanyaan->id }}"
                                                            style="display: none;">
                                                            <div class="form-check">
                                                                <input class="form-check-input sp-radio" type="radio"
                                                                    name="surat_peringatan[{{ $pertanyaan->id }}]"
                                                                    value="ya" id="sp-ya-{{ $pertanyaan->id }}"
                                                                    data-pertanyaan="{{ $pertanyaan->id }}">
                                                                <label class="form-check-label"
                                                                    for="sp-ya-{{ $pertanyaan->id }}">
                                                                    Ya
                                                                </label>
                                                            </div>
                                                            <div class="form-check">
                                                                <input class="form-check-input sp-radio" type="radio"
                                                                    name="surat_peringatan[{{ $pertanyaan->id }}]"
                                                                    value="tidak" id="sp-tidak-{{ $pertanyaan->id }}">
                                                                <label class="form-check-label"
                                                                    for="sp-tidak-{{ $pertanyaan->id }}">
                                                                    Tidak
                                                                </label>
                                                            </div>
                                                        </div>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                @endforeach
                            </div>

                            <hr class="horizontal dark">
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>


    <script>
        // Define functions and variables in global scope
        let form;
        let penilaianSelects;

        function validateAndSubmit() {
            let isValid = true;
            let errorMessages = [];
            let hasAnyPenilaian = false;

            // Basic validations
            const kateringSelect = document.querySelector('select[name="id_catering"]');
            if (!kateringSelect.value) {
                errorMessages.push('Pilih katering terlebih dahulu');
                isValid = false;
            }

            const auditorInput = document.querySelector('input[name="auditor"]');
            if (!auditorInput.value.trim()) {
                errorMessages.push('Nama auditor harus diisi');
                isValid = false;
            }

            const tanggalInput = document.querySelector('input[name="tanggal_sidak"]');
            if (!tanggalInput.value) {
                errorMessages.push('Tanggal sidak harus diisi');
                isValid = false;
            }

            // Check penilaian validations
            penilaianSelects.forEach(select => {
                if (select.value) {
                    hasAnyPenilaian = true;
                    const nilai = select.options[select.selectedIndex].getAttribute('data-nilai');
                    const rowId = select.getAttribute('data-row');
                    const uploadContainer = document.getElementById(`upload-${rowId}`);
                    const spContainer = document.getElementById(`sp-${rowId}`);

                    // Only validate if nilai <= 2 and containers exist
                    if (nilai && parseFloat(nilai) < 2 && uploadContainer && spContainer) {
                        const fileInput = uploadContainer.querySelector('input[type="file"]');
                        const spRadios = spContainer.querySelectorAll('input[type="radio"]');
                        const spSelected = Array.from(spRadios).some(radio => radio.checked);

                        if (!fileInput.files.length || !spSelected) {
                            const pertanyaan = select.closest('tr').querySelector('.question-cell')
                                ?.textContent.trim() || 'Pertanyaan';
                            errorMessages.push(
                                `Lengkapi file temuan dan SP untuk: ${pertanyaan.substring(0, 50)}...`
                            );
                            isValid = false;
                        }
                    }

                    // Show containers when nilai <= 2
                    if (nilai && parseFloat(nilai) < 2) {
                        if (uploadContainer) uploadContainer.style.display = 'block';
                        if (spContainer) spContainer.style.display = 'block';
                    } else {
                        if (uploadContainer) uploadContainer.style.display = 'none';
                        if (spContainer) spContainer.style.display = 'none';
                    }
                }
            });

            if (!hasAnyPenilaian) {
                errorMessages.push('Minimal isi satu penilaian');
                isValid = false;
            }

            if (!isValid) {
                Swal.fire({
                    title: 'Error!',
                    html: errorMessages.join('<br>'),
                    icon: 'error',
                    confirmButtonText: 'OK'
                });
                return false;
            }

            // Show confirmation dialog
            Swal.fire({
                title: 'Konfirmasi Simpan',
                text: 'Data akan disimpan sebagai draft. Lanjutkan?',
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya, Simpan!',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Show loading state
                    Swal.fire({
                        title: 'Menyimpan Data',
                        html: 'Mohon tunggu...',
                        allowOutsideClick: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });

                    // Submit form
                    const form = document.getElementById('{{ $dmenu }}-form');
                    form.submit();
                }
            });
        }

        function showHideContainers(select) {
            const rowId = select.getAttribute('data-row');
            const nilai = select.options[select.selectedIndex]?.getAttribute('data-nilai');
            const uploadContainer = document.getElementById(`upload-${rowId}`);
            const spContainer = document.getElementById(`sp-${rowId}`);

            if (nilai && parseFloat(nilai) < 2) {
                if (uploadContainer) uploadContainer.style.display = 'block';
                if (spContainer) {
                    spContainer.style.display = 'block';
                    // Set default radio button 'tidak'
                    const spTidakRadio = spContainer.querySelector('input[value="tidak"]');
                    if (spTidakRadio) {
                        spTidakRadio.checked = true;
                    }
                }
            } else {
                if (uploadContainer) {
                    uploadContainer.style.display = 'none';
                    const fileInput = uploadContainer.querySelector('input[type="file"]');
                    if (fileInput) fileInput.value = '';
                }
                if (spContainer) {
                    spContainer.style.display = 'none';
                    const radios = spContainer.querySelectorAll('input[type="radio"]');
                    radios.forEach(radio => radio.checked = false);
                }
            }
        }

        function handleSpRadioChange(radio) {
            const rowId = radio.getAttribute('data-pertanyaan');
            const row = radio.closest('tr');
            const penilaianSelect = row.querySelector('.penilaian-select');
            const nilai = penilaianSelect.options[penilaianSelect.selectedIndex]?.getAttribute('data-nilai');

            // Jika nilai <= 2, otomatis set SP ke 'ya'
            if (parseFloat(nilai) < 2) {
                const spYaRadio = row.querySelector('input[value="ya"]');
                if (spYaRadio) {
                    spYaRadio.checked = true;
                }
            }
        }

        document.addEventListener('DOMContentLoaded', function() {
            // Initialize global variables
            form = document.getElementById('{{ $dmenu }}-form');
            penilaianSelects = document.querySelectorAll('.penilaian-select');

            // Setup submit button
            const submitButton = document.querySelector('.btn-primary');
            if (submitButton) {
                submitButton.removeAttribute('onclick');
                submitButton.addEventListener('click', function(e) {
                    e.preventDefault();
                    validateAndSubmit();
                });
            }

            // Setup penilaian selects
            penilaianSelects.forEach(select => {
                select.addEventListener('change', function() {
                    showHideContainers(this);
                });
            });

            document.querySelectorAll('.sp-radio').forEach(radio => {
                radio.addEventListener('change', function() {
                    handleSpRadioChange(this);
                });
            });
        });
    </script>
@endsection