@extends('layouts.app')

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

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

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

        .form-label {
            font-size: 13px;
            color: #444;
            font-weight: 500;
        }

        .form-control,
        .form-select {
            font-size: 13px;
            border-radius: 8px;
            border: 1px solid #ddd;
        }

        .btn-submit {
            background: #3a6b20;
            color: white;
            border: none;
            border-radius: 8px;
            padding: 12px 32px;
            font-size: 14px;
            font-weight: 600;
        }
    </style>
@endpush

@section('content')

    @if ($errors->any())
        <div class="alert alert-danger">
            <ul class="mb-0">
                @foreach ($errors->all() as $e)
                    <li>{{ $e }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form method="POST" action="{{ route('d3.store') }}" style="max-width:900px;">
        @csrf

        <div class="card-section">
            <span class="section-title">📋 Maklumat Pelapor</span>

            <div class="row g-3">
                <div class="col-md-6">
                    <label class="form-label">Nama Pelapor</label>
                    <input type="text" name="nama_pelapor" class="form-control" value="{{ old('nama_pelapor') }}"
                        required>
                </div>

                <div class="col-md-6">
                    <label class="form-label">Program</label>
                    <input type="text" name="program" class="form-control" value="{{ old('program') }}" required>
                </div>

                <div class="col-md-6">
                    <label class="form-label">Tarikh</label>
                    <input type="date" name="tarikh" class="form-control" value="{{ old('tarikh') }}" required>
                </div>
            </div>
        </div>

        <div class="card-section">
            <span class="section-title">👤 Maklumat Mangsa 1</span>

            <div class="row g-3">
                <div class="col-md-6">
                    <label class="form-label">Nama Penuh</label>
                    <input type="text" name="mangsa1" class="form-control" value="{{ old('mangsa1') }}" required>
                </div>

                <div class="col-md-6">
                    <label class="form-label">No Kad Pengenalan</label>
                    <input type="text" name="kp1" class="form-control" value="{{ old('kp1') }}">
                </div>

                <div class="col-md-6">
                    <label class="form-label">Tahap Kecederaan</label>
                    <select name="cedera1" class="form-select" required>
                        <option value="">-- Pilih --</option>
                        <option value="Cedera Ringan">Cedera Ringan</option>
                        <option value="Cedera Sederhana">Cedera Sederhana</option>
                        <option value="Cedera Parah">Cedera Parah</option>
                        <option value="Meninggal Dunia">Meninggal Dunia</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="card-section">
            <span class="section-title">👥 Maklumat Mangsa 2</span>

            <div class="row g-3">
                <div class="col-md-6">
                    <label class="form-label">Nama Penuh</label>
                    <input type="text" name="mangsa2" class="form-control" value="{{ old('mangsa2') }}">
                </div>

                <div class="col-md-6">
                    <label class="form-label">No Kad Pengenalan</label>
                    <input type="text" name="kp2" class="form-control" value="{{ old('kp2') }}">
                </div>

                <div class="col-md-6">
                    <label class="form-label">Tahap Kecederaan</label>
                    <select name="cedera2" class="form-select">
                        <option value="">-- Pilih --</option>
                        <option value="Cedera Ringan">Cedera Ringan</option>
                        <option value="Cedera Sederhana">Cedera Sederhana</option>
                        <option value="Cedera Parah">Cedera Parah</option>
                        <option value="Meninggal Dunia">Meninggal Dunia</option>
                    </select>
                </div>
            </div>
        </div>

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

            <div class="row g-3">
                <div class="col-md-6">
                    <label class="form-label">Jenis Kemalangan</label>
                    <input type="text" name="jenis_kemalangan" class="form-control" value="{{ old('jenis_kemalangan') }}"
                        required>
                </div>

                <div class="col-md-6">
                    <label class="form-label">Lokasi</label>
                    <input type="text" name="lokasi" class="form-control" value="{{ old('lokasi') }}" required>
                </div>

                <div class="col-md-6">
                    <label class="form-label">Waktu</label>
                    <input type="time" name="waktu" class="form-control" value="{{ old('waktu') }}" required>
                </div>

                <div class="col-12">
                    <label class="form-label">Punca Kemalangan / Kecederaan</label>
                    <textarea name="punca" rows="4" class="form-control" required>{{ old('punca') }}</textarea>
                </div>

                <div class="col-12">
                    <label class="form-label">Tindakan / Penambahbaikan</label>
                    <textarea name="tindakan" rows="4" class="form-control" required>{{ old('tindakan') }}</textarea>
                </div>
            </div>
        </div>

        <div class="d-flex gap-3 mb-5">
            <button type="submit" class="btn-submit">
                💾 Simpan Borang D3
            </button>

            <a href="{{ route('d3.index') }}" class="btn btn-outline-secondary">
                Batal
            </a>
        </div>

    </form>

@endsection