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

@section('content')
    <style>
        .custom-table {
            border: 1px solid #dee2e6;
        }
        .custom-table th, .custom-table td {
            border: 1px solid #dee2e6 !important;
            vertical-align: middle !important;
            white-space: normal !important;
            word-wrap: break-word;
        }
        .custom-table thead th {
            border-bottom: 2px solid #dee2e6 !important;
            background-color: #f8f9fa;
            color: #344767;
            text-transform: uppercase;
            font-size: 0.85rem;
            font-weight: 600;
        }
        .info-table th, .info-table td {
            padding: 0.4rem 0 !important;
            vertical-align: top;
            color: #344767;
        }
        .info-table td:first-child {
            font-weight: 600;
        }
    </style>
    @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-between">
                        <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>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-4">
        {{-- 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-6">
                                <table class="table table-borderless info-table">
                                    <tr>
                                        <td width="35%">ID Sidak</td>
                                        <td width="5%">:</td>
                                        <td>{{ $sidak->id_sidak_katering }}</td>
                                    </tr>
                                    <tr>
                                        <td>Nama Katering</td>
                                        <td>:</td>
                                        <td>{{ $sidak->nama_catering }}</td>
                                    </tr>
                                    <tr>
                                        <td>Tanggal Sidak</td>
                                        <td>:</td>
                                        <td>{{ date('d-m-Y', strtotime($sidak->tanggal_sidak)) }}</td>
                                    </tr>
                                </table>
                            </div>
                            <div class="col-md-6">
                                <table class="table table-borderless info-table">
                                    <tr>
                                        <td width="35%">Auditor</td>
                                        <td width="5%">:</td>
                                        <td>{{ $sidak->auditor }}</td>
                                    </tr>
                                    <tr>
                                        <td>Hasil Penilaian</td>
                                        <td>:</td>
                                        <td>{{ number_format($sidak->hasil_penilaian, 2) }}</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Detail Pertanyaan --}}
        <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">
                        @foreach ($pertanyaans->groupBy('kategori_pertanyaan') as $kategori => $questions)
                            <div class="mb-4">
                                <h6 class="bg-light p-2">{{ $kategori }}</h6>
                                <div class="table-responsive">
                                    <table class="table table-hover table-bordered custom-table">
                                        <thead class="thead-light">
                                            <tr>
                                                <th width="5%" class="text-center">No</th>
                                                <th width="35%">Pertanyaan</th>
                                                <th width="20%">Penilaian</th>
                                                <th width="10%" class="text-center">Nilai</th>
                                                <th width="15%" class="text-center">Temuan</th>
                                                <th width="15%" class="text-center">Setelah Sidak</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($questions as $index => $pertanyaan)
                                                <tr>
                                                    <td class="text-center">{{ $loop->iteration }}</td>
                                                    <td>{{ $pertanyaan->pertanyaan }}</td>
                                                    <td>{{ $pertanyaan->penilaian }}</td>
                                                    <td class="text-center">{{ $pertanyaan->bobot }}</td>
                                                    <td class="text-center">
                                                        @if ($pertanyaan->file_gambar_temuan && (int) $pertanyaan->bobot === 1)
                                                            <div class="mb-2">
                                                                <img src="{{ asset('storage/temuan/' . $pertanyaan->file_gambar_temuan) }}"
                                                                    class="img-thumbnail"
                                                                    style="max-height: 80px; max-width: 120px; cursor: pointer;"
                                                                    onclick="showFullImage(this.src, '{{ $pertanyaan->pertanyaan }}')"
                                                                    alt="Temuan">
                                                            </div>
                                                        @else
                                                            <span class="text-muted">-</span>
                                                        @endif
                                                    </td>
                                                    <td class="text-center">
                                                        @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; cursor: pointer;"
                                                                    onclick="showFullImageAfterSidak(this.src, '{{ $pertanyaan->pertanyaan }}')"
                                                                    alt="Temuan">
                                                            </div>
                                                        @else
                                                            <span class="text-muted">-</span>
                                                        @endif
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </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();
        }

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