@extends('admin.layouts.app')
@section('title','Volunteers')
@section('breadcrumb') <span>/</span> Volunteers @endsection

@section('content')
<div class="page-header">
    <div><h1>Volunteers</h1><p class="page-subtitle">Manage volunteer registrations and assignments</p></div>
    @if(auth()->user()->hasPermission('volunteers.create'))
    <a href="{{ route('admin.volunteers.create') }}" class="btn btn-primary"><i class="fas fa-plus me-2"></i>Add Volunteer</a>
    @endif
</div>

<!-- Stats -->
<div class="row g-3 mb-4">
    <div class="col-6 col-md-3"><div class="card p-3 text-center" style="border-top:3px solid #2563eb;"><div style="font-size:22px;font-weight:700;">{{ $stats['total'] }}</div><div style="font-size:12px;color:#64748b;">Total</div></div></div>
    <div class="col-6 col-md-3"><div class="card p-3 text-center" style="border-top:3px solid #22c55e;"><div style="font-size:22px;font-weight:700;">{{ $stats['active'] }}</div><div style="font-size:12px;color:#64748b;">Active</div></div></div>
    <div class="col-6 col-md-3"><div class="card p-3 text-center" style="border-top:3px solid #f59e0b;"><div style="font-size:22px;font-weight:700;">{{ $stats['assigned'] }}</div><div style="font-size:12px;color:#64748b;">Assigned</div></div></div>
    <div class="col-6 col-md-3"><div class="card p-3 text-center" style="border-top:3px solid #6366f1;"><div style="font-size:22px;font-weight:700;">{{ $stats['completed'] }}</div><div style="font-size:12px;color:#64748b;">Completed</div></div></div>
</div>

<!-- Filters -->
<div class="card mb-3">
    <div class="card-body py-3">
        <form method="GET" class="row g-2 align-items-end">
            <div class="col-md-3"><input type="text" name="search" class="form-control" placeholder="Name, mobile, ID..." value="{{ request('search') }}"></div>
            <div class="col-md-2">
                <select name="department_id" class="form-select">
                    <option value="">All Departments</option>
                    @foreach($departments as $id => $name)<option value="{{ $id }}" {{ request('department_id')==$id?'selected':'' }}>{{ $name }}</option>@endforeach
                </select>
            </div>
            <div class="col-md-2">
                <select name="status" class="form-select">
                    <option value="">All Status</option>
                    @foreach(['active','inactive','assigned','completed'] as $s)
                    <option value="{{ $s }}" {{ request('status')===$s?'selected':'' }}>{{ ucfirst($s) }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <select name="availability" class="form-select">
                    <option value="">All Availability</option>
                    @foreach(['full_time'=>'Full Time','part_time'=>'Part Time','weekends'=>'Weekends','on_call'=>'On Call'] as $v=>$l)
                    <option value="{{ $v }}" {{ request('availability')===$v?'selected':'' }}>{{ $l }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3 d-flex gap-2">
                <button class="btn btn-primary flex-grow-1"><i class="fas fa-search me-1"></i>Search</button>
                <a href="{{ route('admin.volunteers.index') }}" class="btn btn-outline-secondary">Reset</a>
            </div>
        </form>
    </div>
</div>

<div class="card">
    <div class="card-header d-flex align-items-center justify-content-between">
        <h6 class="mb-0 fw-700"><i class="fas fa-hands text-primary me-2"></i>All Volunteers</h6>
        <span class="badge bg-primary">{{ $volunteers->total() }}</span>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead style="background:#f8fafc;">
                    <tr>
                        <th class="ps-3">ID</th><th>Name</th><th>Mobile</th><th>Skills</th>
                        <th>Department</th><th>Project</th><th>Availability</th><th>Joined</th>
                        <th>Status</th><th class="text-center">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($volunteers as $vol)
                    <tr>
                        <td class="ps-3"><code style="font-size:11px;background:#fff7ed;padding:2px 6px;border-radius:4px;color:#9a3412;">{{ $vol->volunteer_id }}</code></td>
                        <td>
                            <div class="d-flex align-items-center gap-2">
                                @if($vol->photo)
                                <img src="{{ asset('uploads/users/'.$vol->photo) }}" width="30" height="30" style="border-radius:50%;object-fit:cover;">
                                @else
                                <div style="width:30px;height:30px;background:#fff7ed;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#ea580c;">{{ substr($vol->name,0,1) }}</div>
                                @endif
                                <div style="font-weight:600;font-size:13px;">{{ $vol->name }}</div>
                            </div>
                        </td>
                        <td style="font-size:12px;">{{ $vol->mobile }}</td>
                        <td style="font-size:11px;color:#64748b;">{{ Str::limit($vol->skills,30) ?? '—' }}</td>
                        <td style="font-size:12px;">{{ $vol->department?->name ?? '—' }}</td>
                        <td style="font-size:12px;">{{ Str::limit($vol->assignedProject?->project_title,25) ?? '—' }}</td>
                        <td><span class="badge bg-light text-dark border">{{ ucwords(str_replace('_',' ',$vol->availability)) }}</span></td>
                        <td style="font-size:12px;color:#64748b;">{{ $vol->joining_date?->format('d M Y') ?? '—' }}</td>
                        <td>
                            <span class="badge bg-{{ $vol->status==='active'?'success':($vol->status==='assigned'?'warning':($vol->status==='completed'?'primary':'secondary')) }}">
                                {{ ucfirst($vol->status) }}
                            </span>
                        </td>
                        <td class="text-center">
                            <div class="d-flex gap-1 justify-content-center">
                                <a href="{{ route('admin.volunteers.show',$vol) }}" class="btn btn-sm btn-outline-info"><i class="fas fa-eye"></i></a>
                                @if(auth()->user()->hasPermission('volunteers.edit'))
                                <a href="{{ route('admin.volunteers.edit',$vol) }}" class="btn btn-sm btn-outline-primary"><i class="fas fa-edit"></i></a>
                                @endif
                                @if(auth()->user()->hasPermission('volunteers.delete'))
                                <button class="btn btn-sm btn-outline-danger" onclick="confirmDelete('{{ route('admin.volunteers.destroy',$vol) }}','{{ $vol->name }}')"><i class="fas fa-trash"></i></button>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr><td colspan="10" class="text-center py-5 text-muted"><i class="fas fa-hands d-block mb-2" style="font-size:32px;color:#cbd5e1;"></i>No volunteers found</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
    @if($volunteers->hasPages())
    <div class="card-footer bg-white py-3">{{ $volunteers->links() }}</div>
    @endif
</div>
@endsection