@extends('layouts.app')

@section('content')

<div class="main">

    <!-- HEADER -->
    <div class="hero">
        <h1>{{ $occurrence->occurrence_code }}</h1>
        <p>
            {{ $occurrence->start_date }} → {{ $occurrence->end_date }}
        </p>
    </div>

    <a href="{{ route('admin.outreach.events.index') }}"
       style="display:inline-block;margin-bottom:15px;color:#2563eb;">
        ← Back to Outreach
    </a>

    @php
        $assignedCount = $assigned->count();
        $required = $rolesRequired->sum('required_count');

        $percent = $required > 0 ? min(100, ($assignedCount / $required) * 100) : 0;

        $assignedRoles = $assignedRoles ?? [];

        if (!isset($assignedRoles) || empty($assignedRoles)) {
            $assignedRoles = [];
            foreach ($assigned as $v) {
                foreach ($rolesMap[$v->id] ?? [] as $r) {
                    $assignedRoles[$r->role] = ($assignedRoles[$r->role] ?? 0) + 1;
                }
            }
        }

        $status = match (true) {
            $assignedCount < $required => 'understaffed',
            $assignedCount == $required => 'full',
            default => 'over',
        };
    @endphp

    <!-- ================= TOP ================= -->
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:1100px;margin-bottom:20px;">

        <!-- ROLE REQUIREMENTS -->
        <div class="panel">
            <h3>Role Requirements</h3>

            @forelse($rolesRequired as $r)
                @php
                    $current = $assignedRoles[$r->role] ?? 0;
                    $remaining = $r->required_count - $current;
                @endphp

                <div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #eee;font-size:13px;">
                    <strong>{{ $r->role }}</strong>
                    <span>
                        {{ $current }} / {{ $r->required_count }}
                        <small style="color:#666;">
                            ({{ $remaining > 0 ? $remaining . ' needed' : 'filled' }})
                        </small>
                    </span>
                </div>
            @empty
                <p style="color:#777;">No role requirements defined</p>
            @endforelse

            <!-- ADD ROLE -->
            <form method="POST"
                  action="{{ route('admin.occurrences.roles.store', $occurrence->id) }}"
                  style="display:flex;gap:8px;margin-top:10px;">
                @csrf

                <input name="role" placeholder="Role"
                       style="flex:1;padding:6px;border:1px solid #ddd;border-radius:6px;">

                <input name="required_count" type="number"
                       style="width:70px;padding:6px;border:1px solid #ddd;border-radius:6px;">

                <button style="background:#2563eb;color:white;border:none;padding:6px 10px;border-radius:6px;">
                    +
                </button>
            </form>
        </div>

        <!-- CAPACITY -->
        <div class="panel">
            <h3>Capacity</h3>

            <div style="font-size:15px;margin-bottom:10px;">
                <strong>{{ $assignedCount }}</strong> /
                <strong>{{ $required }}</strong>
            </div>

            <div style="height:8px;background:#eee;border-radius:5px;overflow:hidden;margin-bottom:10px;">
                <div style="
                    width:{{ $percent }}%;
                    height:100%;
                    background:
                        {{ $status == 'understaffed' ? '#dc2626' :
                           ($status == 'full' ? '#16a34a' : '#f59e0b') }};
                "></div>
            </div>

            <small>Status:
                <strong>{{ ucfirst($status) }}</strong>
            </small>
        </div>

    </div>

    <!-- ================= TABLES ================= -->
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:1100px;">

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

            @forelse($assigned as $v)
                <div style="padding:10px 0;border-bottom:1px solid #eee;">
                    <strong>{{ $v->first_name }} {{ $v->last_name }}</strong>

                    <div style="margin-top:4px;">
                        @foreach($rolesMap[$v->id] ?? [] as $r)
                            <span style="background:#eef2ff;padding:3px 6px;border-radius:4px;font-size:11px;">
                                {{ $r->role }}
                            </span>
                        @endforeach
                    </div>

                    <form method="POST"
                          action="{{ route('admin.occurrences.unassign', [$occurrence->id, $v->id]) }}">
                        @csrf
                        <button style="margin-top:5px;background:#dc2626;color:white;border:none;padding:4px 8px;border-radius:4px;font-size:11px;">
                            Remove
                        </button>
                    </form>
                </div>
            @empty
                <p style="color:#777;">No volunteers assigned</p>
            @endforelse
        </div>

        <!-- AVAILABLE -->
        <div class="panel">
            <h3>Volunteer Pool</h3>

            @forelse($available as $v)
                <div style="padding:10px 0;border-bottom:1px solid #eee;">
                    <strong>{{ $v->first_name }} {{ $v->last_name }}</strong>

                    <div style="margin-top:4px;">
                        @foreach($rolesMap[$v->id] ?? [] as $r)
                            <span style="background:#f1f5f9;padding:3px 6px;border-radius:4px;font-size:11px;">
                                {{ $r->role }}
                            </span>
                        @endforeach
                    </div>

                    <form method="POST"
                          action="{{ route('admin.occurrences.assign', [$occurrence->id, $v->id]) }}">
                        @csrf
                        <button style="margin-top:5px;background:#16a34a;color:white;border:none;padding:4px 8px;border-radius:4px;font-size:11px;">
                            Assign
                        </button>
                    </form>
                </div>
            @empty
                <p style="color:#777;">No available volunteers</p>
            @endforelse
        </div>

    </div>

</div>

@endsection