@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')
    @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 position-relative end-0 d-flex justify-content-start gap-2">
                        <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</span>
                        </button>
                        @if ($authorize->edit == '1')
                            <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</span>
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-4">
        <form role="form" method="POST" action="{{ url($url_menu . '/' . encrypt($sidak->id_sidak_katering)) }}"
            id="{{ $dmenu }}-form" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            {{-- Info Sidak --}}
            <div class="row mb-4">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header pb-0">
                            <h6 class="mb-0">Informasi Sidak Katering</h6>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="id_catering">Nama Katering</label>
                                        <select class="form-select @error('id_catering') is-invalid @enderror"
                                            name="id_catering">
                                            <option value="">Pilih Katering</option>
                                            @foreach ($katerings as $katering)
                                                <option value="{{ $katering->id_catering }}"
                                                    {{ $sidak->id_catering == $katering->id_catering ? 'selected' : '' }}>
                                                    {{ $katering->nama_catering }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('id_catering')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="tanggal_sidak">Tanggal Sidak</label>
                                        <input type="date"
                                            class="form-control @error('tanggal_sidak') is-invalid @enderror"
                                            name="tanggal_sidak" value="{{ $sidak->tanggal_sidak }}">
                                        @error('tanggal_sidak')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="auditor">Auditor</label>
                                        <input type="text" class="form-control @error('auditor') is-invalid @enderror"
                                            name="auditor" value="{{ $sidak->auditor }}">
                                        @error('auditor')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Detail Penilaian --}}
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header pb-0">
                            <h6 class="mb-0">Detail Penilaian</h6>
                        </div>
                        <div class="card-body">
                            <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 style="width: 50px;" class="text-center">No</th>
                                                <th style="width: 35%">{{ $kategori }}</th>
                                                <th style="width: 15%">Penilaian</th>
                                                <th style="width: 15%">Temuan</th>
                                                @if ($authorize->idroles == 'genadv')
                                                    <th style="width: 15%">Setelah Sidak</th>
                                                @endif
                                                <th style="width: 15%">SP</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($questions as $index => $pertanyaan)
                                                <tr>
                                                    <td class="text-center">{{ $loop->iteration }}</td>
                                                    <td>
                                                        <div class="question-cell">{{ $pertanyaan->pertanyaan }}</div>
                                                    </td>
                                                    <td>

                                                        @if ($authorize->idroles == 'genadv')
                                                            <select class="form-select form-select-sm penilaian-select"
                                                                name="penilaian[{{ $pertanyaan->id_pertanyaan }}]"
                                                                data-row="{{ $pertanyaan->id_pertanyaan }}" disabled>
                                                                <option value="">Pilih Nilai</option>
                                                                @foreach ($penilaians as $nilai)
                                                                    <option value="{{ $nilai->id }}"
                                                                        data-nilai="{{ $nilai->bobot }}"
                                                                        {{ $pertanyaan->id_penilaian == $nilai->id ? 'selected' : '' }}>
                                                                        {{ $nilai->bobot }} - {{ $nilai->penilaian }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                            <input type="hidden"
                                                                name="penilaian[{{ $pertanyaan->id_pertanyaan }}]"
                                                                value="{{ $pertanyaan->id_penilaian }}">
                                                        @else
                                                            <select class="form-select form-select-sm penilaian-select"
                                                                name="penilaian[{{ $pertanyaan->id_pertanyaan }}]"
                                                                data-row="{{ $pertanyaan->id_pertanyaan }}">
                                                                <option value="">Pilih Nilai</option>
                                                                @foreach ($penilaians as $nilai)
                                                                    <option value="{{ $nilai->id }}"
                                                                        data-nilai="{{ $nilai->bobot }}"
                                                                        {{ $pertanyaan->id_penilaian == $nilai->id ? 'selected' : '' }}>
                                                                        {{ $nilai->bobot }} - {{ $nilai->penilaian }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                        @endif
                                                    </td>
                                                    <td>
                                                        <div class="upload-container"
                                                            id="upload-{{ $pertanyaan->id_pertanyaan }}"
                                                            style="{{ !isset($pertanyaan->id_penilaian) || $penilaians->firstWhere('id', $pertanyaan->id_penilaian)?->bobot >= 3 ? 'display:none;' : '' }}">
                                                            @if ($pertanyaan->file_gambar_temuan)
                                                                <div class="mb-2">
                                                                    <img src="{{ asset('storage/temuan/' . $pertanyaan->file_gambar_temuan) }}"
                                                                        class="img-thumbnail"
                                                                        style="max-height: 80px; max-width: 120px;"
                                                                        onclick="showFullImage(this.src, '{{ $pertanyaan->pertanyaan }}')">
                                                                </div>
                                                            @endif
                                                            <input type="file" class="form-control form-control-sm"
                                                                name="temuan[{{ $pertanyaan->id_pertanyaan }}]"
                                                                accept="image/*">
                                                        </div>
                                                    </td>
                                                    @if ($authorize->idroles == 'genadv')
                                                        <td>
                                                            <div class="upload-container"
                                                                id="after-upload-{{ $pertanyaan->id_pertanyaan }}"
                                                                style="{{ !isset($pertanyaan->id_penilaian) || $penilaians->firstWhere('id', $pertanyaan->id_penilaian)?->bobot >= 3 ? 'display:none;' : '' }}">
                                                                @if ($pertanyaan->after_sidak_photo)
                                                                    <div class="mb-2">
                                                                        <img src="{{ asset('storage/after_sidak_photo/' . $pertanyaan->after_sidak_photo) }}"
                                                                            class="img-thumbnail"
                                                                            style="max-height: 80px; max-width: 120px;"
                                                                            onclick="showFullImage(this.src, '{{ $pertanyaan->pertanyaan }}')">
                                                                    </div>
                                                                @endif
                                                                <input type="file" class="form-control form-control-sm"
                                                                    name="after_sidak_photo[{{ $pertanyaan->id_pertanyaan }}]"
                                                                    accept="image/*">
                                                            </div>
                                                        </td>
                                                    @endif
                                                    <td>
                                                        <div class="sp-container"
                                                            id="sp-{{ $pertanyaan->id_pertanyaan }}"
                                                            style="{{ !isset($pertanyaan->id_penilaian) || $penilaians->firstWhere('id', $pertanyaan->id_penilaian)?->bobot >= 3 ? 'display:none;' : '' }}">
                                                            <div class="form-check">
                                                                <input class="form-check-input" type="radio"
                                                                    name="surat_peringatan[{{ $pertanyaan->id_pertanyaan }}]"
                                                                    value="ya"
                                                                    {{ $pertanyaan->has_sp ? 'checked' : '' }}>
                                                                <label class="form-check-label">Ya</label>
                                                            </div>
                                                            <div class="form-check">
                                                                <input class="form-check-input" type="radio"
                                                                    name="surat_peringatan[{{ $pertanyaan->id_pertanyaan }}]"
                                                                    value="tidak"
                                                                    {{ !$pertanyaan->has_sp ? 'checked' : '' }}>
                                                                <label class="form-check-label">Tidak</label>
                                                            </div>
                                                        </div>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>

    {{-- Modal untuk tampilan gambar penuh --}}
    <div class="modal fade" id="imageModal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="imageModalLabel">Gambar Temuan</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <img id="modalImage" src="" alt="Gambar Temuan" style="max-width: 100%; max-height: 80vh;">
                </div>
            </div>
        </div>
    </div>

    <script>
        function showFullImage(imgSrc, pertanyaan) {
            const modal = new bootstrap.Modal(document.getElementById('imageModal'));
            document.getElementById('modalImage').src = imgSrc;
            document.getElementById('imageModalLabel').textContent = 'Gambar Temuan - ' + pertanyaan;
            modal.show();
        }

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

            // Validasi form
            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;
            }

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

            // Show confirmation dialog
            Swal.fire({
                title: 'Konfirmasi Update',
                text: 'Apakah Anda yakin ingin menyimpan perubahan?',
                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 Perubahan',
                        html: 'Mohon tunggu...',
                        allowOutsideClick: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });

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

        function showHideColumns(select) {
            const nilai = select.options[select.selectedIndex]?.getAttribute('data-nilai');
            const row = select.closest('tr');
            const uploadContainer = row.querySelector('#upload-' + select.getAttribute('data-row'));
            const afterUploadContainer = row.querySelector('#after-upload-' + select.getAttribute('data-row'));
            const spContainer = row.querySelector('#sp-' + select.getAttribute('data-row'));

            if (nilai && parseFloat(nilai) < 2) {
                // Show containers
                if (uploadContainer) uploadContainer.style.display = '';
                if (afterUploadContainer) afterUploadContainer.style.display = '';
                if (spContainer) spContainer.style.display = '';
            } else {
                // Hide containers and clear values
                if (uploadContainer) {
                    uploadContainer.style.display = 'none';
                    const fileInput = uploadContainer.querySelector('input[type="file"]');
                    if (fileInput) fileInput.value = '';
                }
                if (afterUploadContainer) {
                    afterUploadContainer.style.display = 'none';
                    const fileInput = afterUploadContainer.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);
                }
            }
        }

        // Add event listeners to all penilaian selects
        document.addEventListener('DOMContentLoaded', function() {
            const penilaianSelects = document.querySelectorAll('.penilaian-select');

            penilaianSelects.forEach(select => {
                // Set initial state
                showHideColumns(select);

                // Add change event listener
                select.addEventListener('change', function() {
                    showHideColumns(this);
                });
            });
        });
    </script>
@endsection