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

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Detail Ceklist Genba'])

    <!-- Tombol Aksi -->
    <div class="card shadow-lg mx-4 mb-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        <button type="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 pb-4">
        <!-- Informasi Umum -->
        <div class="card shadow-sm border-0 mb-4">
            <div class="card-header bg-primary py-2">
                <h6 class="mb-0 text-white">Informasi Umum</h6>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-4">
                        <label class="form-label">Tanggal Genba</label>
                        <p class="form-control-plaintext">{{ $header->tanggal }}</p>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Area</label>
                        <p class="form-control-plaintext">{{ $header->area }}</p>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">PIC Area</label>
                        @php
                            $picName = $pic->firstWhere('nik', $header->pic)->name ?? '-';
                        @endphp
                        <p class="form-control-plaintext">{{ $picName }}</p>

                    </div>
                </div>
            </div>
        </div>

        <!-- Checklist -->
        @foreach ($kategori as $kat)
            <div class="card shadow-sm border-0 mb-3">
                <div class="card-header bg-primary py-2">
                    <h6 class="mb-0 text-white">{{ $kat->name }}</h6>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-sm align-middle table-bordered mb-0">
                            <thead class="table-secondary">
                                <tr>
                                    <th style="width: 35%">Pertanyaan</th>
                                    <th style="width: 15%">Jawaban</th>
                                    <th style="width: 25%">Catatan</th>
                                    <th style="width: 25%">Temuan</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($detail[$kat->value] ?? [] as $d)
                                    <tr>
                                        <td class="text-wrap">{{ $d->pertanyaan_name }}</td>
                                        <td>{{ $d->jawaban_name ?? '-' }}</td>
                                        <td>{{ $d->catatan ?? '-' }}</td>
                                        <td class="text-center">
                                            @if ($d->temuan)
                                                <img src="{{ asset('storage/' . $d->temuan) }}" alt="Temuan"
                                                    class="rounded shadow-sm"
                                                    style="width: 120px; height: 90px; object-fit: cover;">
                                            @else
                                                <img src="{{ asset('/storage/noimage.png') }}" alt="No Image"
                                                    class="rounded shadow-sm"
                                                    style="width: 120px; height: 90px; object-fit: cover;">
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        @endforeach

        <!-- Kesimpulan & Tindak Lanjut -->
        <div class="card shadow-sm border-0 mt-4">
            <div class="card-header bg-primary py-2">
                <h6 class="mb-0 text-white">Kesimpulan & Tindak Lanjut</h6>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <label class="form-label">Kesimpulan</label>
                    <p class="form-control-plaintext">{!! nl2br(e($header->kesimpulan ?? '-')) !!}</p>
                </div>
                <div class="mb-3">
                    <label class="form-label">Tindak Lanjut</label>
                    <p class="form-control-plaintext">{!! nl2br(e($header->tindak_lanjut ?? '-')) !!}</p>
                </div>
            </div>
        </div>

    </div>
@endsection

@push('js')
    <style>
        .table td {
            white-space: normal !important;
            /* biar teks bisa kebawah */
            word-wrap: break-word;
            /* pecah kalau kepanjangan */
        }
    </style>
@endpush