@extends('layouts.app')
@section('title', 'Lihat Borang D2')
@section('page_title', '📋 Borang D2 - Borang Laporan Kemalangan')
@section('back_url', route('d2.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('d2.pdf', $borangd2) }}"
            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 Program</span>

        <div class="info-row"><span class="info-label">Program</span><span class="info-value">{{ $borangd2->program }}</span>
        </div>
        <div class="info-row"><span class="info-label">Tarikh</span><span class="info-value">{{ $borangd2->tarikh }}</span>
        </div>
    </div>

    <div class="info-card">
        <span class="section-title">👤 Bahagian A: Maklumat Mangsa</span>

        <div class="info-row"><span class="info-label">Nama Penuh</span><span
                class="info-value">{{ $borangd2->nama_penuh }}</span></div>
        <div class="info-row"><span class="info-label">No Kad Pengenalan</span><span
                class="info-value">{{ $borangd2->no_kp }}</span></div>
        <div class="info-row"><span class="info-label">Alamat</span><span class="info-value">{{ $borangd2->alamat }}</span>
        </div>
        <div class="info-row"><span class="info-label">Tahap Kecederaan</span><span
                class="info-value">{{ $borangd2->tahap_kecederaan }}</span></div>
        <div class="info-row"><span class="info-label">Kecederaan</span><span
                class="info-value">{{ $borangd2->kecederaan }}</span></div>
        <div class="info-row"><span class="info-label">Tindakan Diambil</span><span
                class="info-value">{{ $borangd2->tindakan }}</span></div>
    </div>

    <div class="info-card">
        <span class="section-title">⚠️ Bahagian B: Maklumat Kemalangan</span>

        <div class="info-row"><span class="info-label">Jenis Kemalangan</span><span
                class="info-value">{{ $borangd2->jenis_kemalangan }}</span></div>
        <div class="info-row"><span class="info-label">Lokasi</span><span class="info-value">{{ $borangd2->lokasi }}</span>
        </div>
        <div class="info-row"><span class="info-label">Waktu</span><span class="info-value">{{ $borangd2->waktu }}</span>
        </div>
        <div class="info-row"><span class="info-label">Punca</span><span class="info-value">{{ $borangd2->punca }}</span>
        </div>
        <div class="info-row"><span class="info-label">Tindakan / Penambahbaikan</span><span
                class="info-value">{{ $borangd2->tindakan_penambahbaikan }}</span></div>
    </div>

@endsection