@extends('layouts.app')

@section('title', 'Borang D3')
@section('page_title', '📋 Borang D3 - Laporan Kemalangan (Mangsa Lebih Dari Seorang)')
@section('back_url', route('borang.index'))

@section('content')

    @if (session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    <div class="d-flex justify-content-end mb-4">
        <a href="{{ route('d3.create') }}"
            style="background:#3a6b20;color:white;border-radius:8px;padding:9px 18px;font-size:13px;text-decoration:none;">
            + Borang Baru
        </a>
    </div>

    @if ($borangd3->isEmpty())

        <div class="text-center py-5 text-muted">
            <p style="font-size:40px">📋</p>
            <p>Tiada Borang D3 lagi. Klik <strong>+ Borang Baru</strong> untuk mula.</p>
        </div>
    @else
        <div style="background:#fff;border-radius:12px;border:1px solid #eee;overflow:hidden;">
            <table class="table table-hover mb-0">
                <thead style="background:#2d4a1e;color:white;">
                    <tr>
                        <th style="padding:12px 16px;">#</th>
                        <th style="padding:12px 16px;">Nama Pelapor</th>
                        <th style="padding:12px 16px;">Program</th>
                        <th style="padding:12px 16px;">Tarikh</th>
                        <th style="padding:12px 16px;">Lokasi</th>
                        <th style="padding:12px 16px;">Tindakan</th>
                    </tr>
                </thead>

                <tbody>
                    @foreach ($borangd3 as $i => $form)
                        <tr>
                            <td style="padding:12px 16px;">
                                {{ $i + 1 }}
                            </td>

                            <td style="padding:12px 16px;">
                                {{ $form->nama_pelapor }}
                            </td>

                            <td style="padding:12px 16px;">
                                {{ $form->program }}
                            </td>

                            <td style="padding:12px 16px;">
                                {{ $form->tarikh }}
                            </td>

                            <td style="padding:12px 16px;">
                                {{ $form->lokasi }}
                            </td>

                            <td style="padding:12px 16px;vertical-align:middle;">
                                <div class="d-flex gap-2">
                                    <a href="{{ route('d3.show', $form) }}" class="btn btn-sm btn-outline-success">👁
                                        Lihat</a>
                                    <a href="{{ route('d3.pdf', $form) }}" class="btn btn-sm btn-outline-danger">📄
                                        PDF</a>
                                    <form action="{{ route('d3.destroy', $form->id) }}" method="POST"
                                        style="display:inline;"
                                        onsubmit="return confirm('Adakah anda pasti ingin memadam data ini?')">

                                        @csrf
                                        @method('DELETE')

                                        <button class="btn btn-danger btn-sm">
                                            🗑 Padam
                                        </button>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>

            </table>
        </div>

    @endif

@endsection