@extends('layouts.app')

@section('content')

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

    <h2>{{ $occurrence->occurrence_code }}</h2>
    <p style="color:#666;">
        {{ $occurrence->start_date }} → {{ $occurrence->end_date }}
    </p>

    <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;">

        <!-- ASSIGNED -->
        <div class="panel">
            <h3>Assigned Volunteers</h3>

            @forelse($assigned as $v)
                <div style="margin-bottom:8px;">
                    {{ $v->first_name }} {{ $v->last_name }}

                    <form method="POST"
                          action="{{ route('admin.occurrences.unassign', [$occurrence->id, $v->id]) }}"
                          style="display:inline;">
                        @csrf
                        <button style="margin-left:10px;">Remove</button>
                    </form>
                </div>
            @empty
                <p style="color:#777;">None assigned</p>
            @endforelse
        </div>

        <!-- AVAILABLE -->
        <div class="panel">
            <h3>Available Volunteers</h3>

            @foreach($available as $v)
                <div style="margin-bottom:8px;">
                    {{ $v->first_name }} {{ $v->last_name }}

                    <form method="POST"
                          action="{{ route('admin.occurrences.assign', [$occurrence->id, $v->id]) }}"
                          style="display:inline;">
                        @csrf
                        <button style="margin-left:10px;">Assign</button>
                    </form>
                </div>
            @endforeach
        </div>

    </div>

</div>

@endsection