@extends('layouts.app')
@section('title', 'Lihat Borang D3')
@section('page_title', '📋 Borang D3 - Borang Laporan Kemalangan (Mangsa Lebih Dari Seorang)')
@section('back_url', route('d3.index'))

@push('styles')
    <style>
        .info-card {
            background: #fff;
            border-radius: 12px;
            border: 1px solid #eee;
            padding: 20px 24px;
            margin-bottom: 16px;
        }

        .section-title {
            font-size: 12px;
            font-weight: 600;
            color: #fff;
            background: #2d4a1e;
            padding: 6px 14px;
            border-radius: 6px;
            margin-bottom: 16px;
            display: inline-block;
        }

        .info-row {
            display: flex;
            padding: 8px 0;
            border-bottom: 1px solid #f5f5f5;
            font-size: 13px;
        }

        .info-row:last-child {
            border-bottom: none;
        }

        .info-label {
            width: 220px;
            color: #888;
            flex-shrink: 0;
        }

        .info-value {
            color: #1a1a1a;
            flex: 1;
        }
    </style>
@endpush

@section('content')

    <div class="d-flex justify-content-end mb-4">
        <a href="{{ route('d3.pdf', $borangd3) }}"
            style="background:#e53935;color:white;border-radius:8px;padding:9px 18px;font-size:13px;text-decoration:none;">
            📄 Export PDF
        </a>
    </div>

    <div class="info-card">
        <span class="section-title">📋 Maklumat Pelapor</span>
        <div class="info-row"><span class="info-label">Nama Pelapor</span><span
                class="info-value">{{ $borangd3->nama_pelapor }}</span></div>
        <div class="info-row"><span class="info-label">Program</span><span class="info-value">{{ $borangd3->program }}</span>
        </div>
        <div class="info-row"><span class="info-label">Tarikh</span><span class="info-value">{{ $borangd3->tarikh }}</span>
        </div>
    </div>

    <div class="info-card">
        <span class="section-title">👤 Maklumat Mangsa 1</span>
        <div class="info-row"><span class="info-label">Nama Penuh</span><span
                class="info-value">{{ $borangd3->mangsa1 }}</span></div>
        <div class="info-row"><span class="info-label">No Kad Pengenalan</span><span
                class="info-value">{{ $borangd3->kp1 }}</span></div>
        <div class="info-row"><span class="info-label">Tahap Kecederaan</span><span
                class="info-value">{{ $borangd3->cedera1 }}</span></div>
    </div>

    <div class="info-card">
        <span class="section-title">👥 Maklumat Mangsa 2</span>
        <div class="info-row"><span class="info-label">Nama Penuh</span><span
                class="info-value">{{ $borangd3->mangsa2 ?? '-' }}</span></div>
        <div class="info-row"><span class="info-label">No Kad Pengenalan</span><span
                class="info-value">{{ $borangd3->kp2 ?? '-' }}</span></div>
        <div class="info-row"><span class="info-label">Tahap Kecederaan</span><span
                class="info-value">{{ $borangd3->cedera2 ?? '-' }}</span></div>
    </div>

    <div class="info-card">
        <span class="section-title">⚠️ Maklumat Kemalangan</span>
        <div class="info-row"><span class="info-label">Jenis Kemalangan</span><span
                class="info-value">{{ $borangd3->jenis_kemalangan }}</span></div>
        <div class="info-row"><span class="info-label">Lokasi</span><span class="info-value">{{ $borangd3->lokasi }}</span>
        </div>
        <div class="info-row"><span class="info-label">Waktu</span><span class="info-value">{{ $borangd3->waktu }}</span>
        </div>
        <div class="info-row"><span class="info-label">Punca</span><span class="info-value">{{ $borangd3->punca }}</span>
        </div>
        <div class="info-row"><span class="info-label">Tindakan / Penambahbaikan</span><span
                class="info-value">{{ $borangd3->tindakan }}</span></div>
    </div>

@endsection