@extends('layouts.app')

@section('content')

<div class="main">

    <!-- HERO -->
    <div class="hero">
        <h1>Volunteers</h1>
        <p>Review and approve volunteer applications.</p>
    </div>

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

        <!-- SUCCESS -->
        @if(session('success'))
            <div style="margin-bottom:15px;padding:10px;background:#d1fae5;color:#065f46;border-radius:6px;">
                {{ session('success') }}
            </div>
        @endif

        <!-- FILTERS -->
        <form method="GET" style="display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:15px;">

            <select name="area" style="padding:8px;border:1px solid #ddd;border-radius:6px;">
                <option value="">All Areas</option>
                <option value="medical" {{ ($filters['area'] ?? '') == 'medical' ? 'selected' : '' }}>Medical</option>
                <option value="education" {{ ($filters['area'] ?? '') == 'education' ? 'selected' : '' }}>Education</option>
                <option value="economic" {{ ($filters['area'] ?? '') == 'economic' ? 'selected' : '' }}>Economic</option>
            </select>

            <select name="status" style="padding:8px;border:1px solid #ddd;border-radius:6px;">
                <option value="">All Status</option>
                <option value="pending" {{ ($filters['status'] ?? '') == 'pending' ? 'selected' : '' }}>Pending</option>
                <option value="approved" {{ ($filters['status'] ?? '') == 'approved' ? 'selected' : '' }}>Approved</option>
                <option value="rejected" {{ ($filters['status'] ?? '') == 'rejected' ? 'selected' : '' }}>Rejected</option>
            </select>

            <input 
                name="role" 
                value="{{ $filters['role'] ?? '' }}" 
                placeholder="Role (e.g WASH)" 
                style="padding:8px;border:1px solid #ddd;border-radius:6px;"
            >

            <button style="background:black;color:white;border:none;border-radius:6px;">
                Apply
            </button>

            <a href="{{ route('admin.outreach.volunteers.index') }}" 
               style="background:#e5e7eb;border-radius:6px;display:flex;align-items:center;justify-content:center;text-decoration:none;color:black;">
                Reset
            </a>

        </form>

        <!-- ACTIVE FILTERS -->
        @if(!empty(array_filter($filters)))
            <div style="margin-bottom:10px;font-size:12px;">
                @foreach($filters as $key => $value)
                    @if($value)
                        <span style="background:#eee;padding:4px 8px;border-radius:4px;margin-right:5px;">
                            {{ ucfirst($key) }}: {{ $value }}
                        </span>
                    @endif
                @endforeach
            </div>
        @endif

        <!-- TABLE -->
        <div style="overflow-x:auto;">
            <table style="width:100%;border-collapse:collapse;">

                <thead style="background:#f3f4f6;">
                    <tr>
                        <th style="padding:10px;text-align:left;">Name</th>
                        <th style="padding:10px;">Area</th>
                        <th style="padding:10px;">Roles</th>
                        <th style="padding:10px;">Specialty</th>
                        <th style="padding:10px;">Status</th>
                        <th style="padding:10px;">Actions</th>
                    </tr>
                </thead>

                <tbody>
                    @foreach($volunteers as $v)
                        <tr style="border-top:1px solid #eee;">

                            <td style="padding:10px;">
                                {{ $v->first_name }} {{ $v->last_name }}<br>
                                <small style="color:#666;">{{ $v->phone }}</small>
                            </td>

                            <td style="padding:10px;text-transform:capitalize;">
                                {{ $v->area }}
                            </td>

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

                            <td style="padding:10px;">
                                {{ $v->specialty }}
                            </td>

                            <td style="padding:10px;">
                                <span style="
                                    padding:4px 8px;
                                    border-radius:4px;
                                    font-size:12px;
                                    background:
                                        {{ $v->status == 'approved' ? '#bbf7d0' :
                                           ($v->status == 'rejected' ? '#fecaca' : '#fde68a') }};
                                ">
                                    {{ $v->status }}
                                </span>
                            </td>

                            <td style="padding:10px;">

                                @if($v->status == 'pending')
                                    <div style="display:flex;gap:5px;">

                                        <form method="POST" action="{{ route('admin.outreach.volunteers.approve', $v->id) }}">
                                            @csrf
                                            <button style="background:#16a34a;color:white;padding:4px 8px;border:none;border-radius:4px;font-size:11px;">
                                                Approve
                                            </button>
                                        </form>

                                        <form method="POST" action="{{ route('admin.outreach.volunteers.reject', $v->id) }}">
                                            @csrf
                                            <button style="background:#dc2626;color:white;padding:4px 8px;border:none;border-radius:4px;font-size:11px;">
                                                Reject
                                            </button>
                                        </form>

                                    </div>
                                @else
                                    <span style="font-size:11px;color:#666;">
                                        {{ ucfirst($v->status) }}
                                    </span>
                                @endif

                            </td>

                        </tr>
                    @endforeach
                </tbody>

            </table>
        </div>

        <!-- PAGINATION -->
        <div style="margin-top:15px;">
            {{ $volunteers->links() }}
        </div>

    </div>

</div>

@endsection