@extends('layouts.app')

@section('content')
<div class="container-fluid py-4">
    <div class="row justify-content-center">
        <div class="col-lg-10">
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0"><i class="bi bi-clipboard-check me-2"></i>Detail Lembar Jawab IKK - Verifikasi</h5>
                </div>
                <div class="card-body">
                    <!-- Status Badge -->
                    <div class="mb-4">
                        <label class="form-label fw-bold">Status Saat Ini:</label>
                        @if($lembarJawab->status == 'DRAFT')
                            <span class="badge bg-secondary fs-6">Draft</span>
                        @elseif($lembarJawab->status == 'DIAJUKAN')
                            <span class="badge bg-warning text-dark fs-6">Menunggu Verifikasi</span>
                        @elseif($lembarJawab->status == 'DIVERIFIKASI')
                            <span class="badge bg-success fs-6">Diverifikasi</span>
                        @elseif($lembarJawab->status == 'PERLU PERBAIKAN')
                            <span class="badge bg-danger fs-6">Perlu Perbaikan</span>
                        @endif
                    </div>

                    <!-- Information Section -->
                    <h6 class="text-primary mb-3"><i class="bi bi-info-circle me-2"></i>Informasi Umum</h6>
                    <div class="row mb-4">
                        <div class="col-md-4">
                            <label class="form-label fw-bold">OPD</label>
                            <input type="text" class="form-control" value="{{ $lembarJawab->opd }}" readonly>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-bold">Tahun</label>
                            <input type="text" class="form-control" value="{{ $lembarJawab->tahun }}" readonly>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-bold">Tanggal Diajukan</label>
                            <input type="text" class="form-control" value="{{ \Carbon\Carbon::parse($lembarJawab->created_at)->format('d/m/Y H:i') }}" readonly>
                        </div>
                    </div>

                    <hr>

                    <!-- Indicator Section -->
                    <h6 class="text-primary mb-3"><i class="bi bi-bookmark-check me-2"></i>Informasi Indikator</h6>
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label fw-bold">Kode IKK</label>
                            <input type="text" class="form-control" value="{{ $lembarJawab->kode_ikk }}" readonly>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold">Satuan</label>
                            <input type="text" class="form-control" value="{{ $lembarJawab->satuan }}" readonly>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-bold">IKK Output</label>
                        <input type="text" class="form-control" value="{{ $lembarJawab->ikk_output }}" readonly>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-bold">IKK Outcome</label>
                        <textarea class="form-control" rows="2" readonly>{{ $lembarJawab->ikk_outcome }}</textarea>
                    </div>

                    <div class="mb-4">
                        <label class="form-label fw-bold">Rumus Perhitungan</label>
                        <textarea class="form-control" rows="2" readonly>{{ $lembarJawab->rumus_perhitungan }}</textarea>
                    </div>

                    <hr>

                    <!-- Answer Section -->
                    <h6 class="text-success mb-3"><i class="bi bi-pencil-square me-2"></i>Jawaban OPD</h6>
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label fw-bold">Capaian</label>
                            <div class="input-group">
                                <input type="text" class="form-control" value="{{ $lembarJawab->capaian }}" readonly>
                                <span class="input-group-text">{{ $lembarJawab->satuan }}</span>
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-bold">Kendala / Masalah</label>
                        <textarea class="form-control" rows="4" readonly>{{ $lembarJawab->kendala }}</textarea>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-bold">Tindak Lanjut</label>
                        <textarea class="form-control" rows="4" readonly>{{ $lembarJawab->tindak_lanjut }}</textarea>
                    </div>

                    @if($lembarJawab->file_bukti)
                    <div class="mb-4">
                        <label class="form-label fw-bold">File Bukti</label>
                        <div>
                            <a href="{{ asset('storage/' . $lembarJawab->file_bukti) }}"
                               target="_blank"
                               class="btn btn-sm btn-outline-primary">
                                <i class="bi bi-download me-1"></i>Lihat/Download Bukti
                            </a>
                        </div>
                    </div>
                    @endif

                    @if($lembarJawab->catatan_verifikator)
                    <hr>
                    <h6 class="text-info mb-3"><i class="bi bi-chat-left-text me-2"></i>Catatan Verifikator Sebelumnya</h6>
                    <div class="alert alert-info">
                        <p class="mb-2"><strong>Catatan:</strong></p>
                        <p class="mb-2">{{ $lembarJawab->catatan_verifikator }}</p>
                        @if($lembarJawab->verified_at)
                        <small class="text-muted">
                            Diverifikasi pada: {{ \Carbon\Carbon::parse($lembarJawab->verified_at)->format('d/m/Y H:i') }}
                        </small>
                        @endif
                    </div>
                    @endif

                    <hr>

                    <!-- Verification Form -->
                    @if($lembarJawab->status == 'DIAJUKAN' || $lembarJawab->status == 'PERLU PERBAIKAN')
                    <h6 class="text-danger mb-3"><i class="bi bi-check2-square me-2"></i>Form Verifikasi</h6>
                    <form action="{{ route('ikk.verifikasi.verify', $lembarJawab->id) }}" method="POST">
                        @csrf
                        <div class="mb-4">
                            <label class="form-label fw-bold">Catatan Verifikator</label>
                            <textarea name="catatan"
                                      class="form-control"
                                      rows="4"
                                      placeholder="Berikan catatan verifikasi (opsional untuk disetujui, wajib untuk perbaikan)"></textarea>
                            <small class="text-muted">Catatan ini akan dilihat oleh OPD</small>
                        </div>

                        <div class="d-flex justify-content-between">
                            <a href="{{ route('ikk.verifikasi.index') }}" class="btn btn-secondary">
                                <i class="bi bi-arrow-left me-1"></i>Kembali
                            </a>
                            <div>
                                <button type="submit"
                                        name="action"
                                        value="perbaikan"
                                        class="btn btn-warning me-2"
                                        onclick="return confirm('Yakin minta perbaikan ke OPD?')">
                                    <i class="bi bi-arrow-clockwise me-1"></i>Minta Perbaikan
                                </button>
                                <button type="submit"
                                        name="action"
                                        value="verifikasi"
                                        class="btn btn-success"
                                        onclick="return confirm('Yakin verifikasi lembar jawab ini?')">
                                    <i class="bi bi-check-circle me-1"></i>Verifikasi & Setujui
                                </button>
                            </div>
                        </div>
                    </form>
                    @else
                    <div class="d-flex justify-content-between">
                        <a href="{{ route('ikk.verifikasi.index') }}" class="btn btn-secondary">
                            <i class="bi bi-arrow-left me-1"></i>Kembali
                        </a>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
