@extends('layouts.app')

@section('content')

<div style="max-width:1100px; margin:auto;">

    <!-- HEADER -->
    <div style="margin-bottom:20px;">

        <h1 style="font-size:26px; font-weight:600;">
            Outreach & Medical Camps
        </h1>

        <p style="color:#666;">
            Manage outreach sites and medical events
        </p>

    </div>

    <!-- BACK -->
    <div style="margin-bottom:20px;">

        <a href="{{ route('admin.outreach.index') }}"
           style="
                color:#2563eb;
                text-decoration:none;
           ">

            ← Back to Outreach

        </a>

    </div>

    <!-- TABLE -->
    <div class="panel">

        @if($events->isEmpty())

            <div style="
                padding:30px;
                text-align:center;
                color:#777;
            ">

                <div style="
                    font-size:40px;
                    margin-bottom:10px;
                ">
                    📭
                </div>

                <div>
                    No outreach sites or medical camps yet
                </div>

            </div>

        @else

        <div style="overflow-x:auto;">

            <table style="
                width:100%;
                border-collapse:collapse;
                font-size:14px;
            ">

                <!-- HEAD -->
                <thead style="background:#f8fafc;">

                    <tr>

                        <th style="padding:12px; text-align:left;">
                            Name
                        </th>

                        <th style="padding:12px; text-align:left;">
                            Code
                        </th>

                        <th style="padding:12px; text-align:left;">
                            Type
                        </th>

                        <th style="padding:12px; text-align:left;">
                            District
                        </th>

                        <th style="padding:12px; text-align:left;">
                            Duration
                        </th>

                        <th style="padding:12px; text-align:left;">
                        </th>

                    </tr>

                </thead>

                <!-- BODY -->
                <tbody>

                    @foreach($events as $e)

                        <tr style="border-top:1px solid #eee;">

                            <!-- NAME -->
                            <td style="padding:12px;">

                                <div style="font-weight:600;">
                                    {{ $e->name }}
                                </div>

                            </td>

                            <!-- CODE -->
                            <td style="
                                padding:12px;
                                font-family:monospace;
                                color:#555;
                            ">

                                {{ $e->occurrence_code ?? '—' }}

                            </td>

                            <!-- TYPE -->
                            <td style="padding:12px;">

                                <span style="
                                    padding:4px 10px;
                                    border-radius:20px;
                                    font-size:12px;
                                    font-weight:500;
                                    background:#e0f2fe;
                                    color:#075985;
                                ">

                                    Outreach Event

                                </span>

                            </td>

                            <!-- DISTRICT -->
                            <td style="
                                padding:12px;
                                color:#444;
                            ">

                                {{ $e->district ?? '—' }}

                            </td>

                            <!-- DURATION -->
                            <td style="
                                padding:12px;
                                color:#555;
                            ">

                                {{ \Carbon\Carbon::parse($e->start_date)->format('d M Y') }}

                                @if($e->end_date)

                                    → {{ \Carbon\Carbon::parse($e->end_date)->format('d M Y') }}

                                @else

                                    <span style="color:#999;">
                                        (Ongoing)
                                    </span>

                                @endif

                            </td>

                            <!-- ACTION -->
                            <td style="padding:12px;">

                                <a href="{{ route('admin.occurrences.show', $e->id) }}"
                                   style="
                                        background:#2563eb;
                                        color:white;
                                        padding:6px 12px;
                                        border-radius:6px;
                                        text-decoration:none;
                                        font-size:13px;
                                        display:inline-block;
                                   ">

                                    Open

                                </a>

                            </td>

                        </tr>

                    @endforeach

                </tbody>

            </table>

        </div>

        @endif

    </div>

</div>

@endsection