@extends('layouts.app')
@section('title', 'Upcoming Events')
@section('breadcrumb')<span class="text-white">Upcoming Events</span>@endsection

@section('content')
<div x-data="{ showModal: false }">

<div class="flex items-center justify-between mb-6">
    <div>
        <h1 class="mb-1">Upcoming Events</h1>
        <p class="text-slate-400">Add role-specific events that appear on staff dashboards.</p>
    </div>
    <button @click="showModal = true" class="btn btn-primary">
        <i class="fas fa-plus"></i> Add Event
    </button>
</div>

@if(session('success'))
<div class="card p-4 mb-4 border-green-600 bg-green-900/20 text-green-300 flex items-center gap-2">
    <i class="fas fa-check-circle"></i> {{ session('success') }}
</div>
@endif

<div class="card overflow-hidden">
    <div class="overflow-x-auto">
        <table class="w-full">
            <thead>
                <tr class="text-xs text-slate-400 uppercase border-b border-slate-700">
                    <th class="px-5 py-3 text-left">Event Name</th>
                    <th class="px-5 py-3 text-left">Start Date</th>
                    <th class="px-5 py-3 text-left">End Date</th>
                    <th class="px-5 py-3 text-left">Visible To Roles</th>
                    <th class="px-5 py-3 text-left">Added By</th>
                    <th class="px-5 py-3 text-left">Status</th>
                    <th class="px-5 py-3"></th>
                </tr>
            </thead>
            <tbody>
                @forelse($events as $event)
                @php
                    $isActive   = $event->start_date->lte(now()) && $event->end_date->gte(now());
                    $isUpcoming = $event->start_date->gt(now());
                    $isPast     = $event->end_date->lt(now());
                @endphp
                <tr class="table-row">
                    <td class="px-5 py-3">
                        <div class="text-sm font-medium text-white">{{ $event->name }}</div>
                    </td>
                    <td class="px-5 py-3 text-sm text-slate-300">{{ $event->start_date->format('d M Y') }}</td>
                    <td class="px-5 py-3 text-sm text-slate-300">{{ $event->end_date->format('d M Y') }}</td>
                    <td class="px-5 py-3">
                        <div class="flex flex-wrap gap-1">
                            @foreach($event->roles as $role)
                            <span class="text-xs bg-blue-900/40 text-blue-300 border border-blue-800 rounded px-1.5 py-0.5">{{ str_replace('_', ' ', $role) }}</span>
                            @endforeach
                        </div>
                    </td>
                    <td class="px-5 py-3 text-sm text-slate-400">{{ $event->creator?->name ?? '—' }}</td>
                    <td class="px-5 py-3">
                        @if($isPast)
                        <span class="badge badge-gray text-xs">Past</span>
                        @elseif($isActive)
                        <span class="badge badge-green text-xs">Active</span>
                        @else
                        <span class="badge badge-blue text-xs">Upcoming</span>
                        @endif
                    </td>
                    <td class="px-5 py-3">
                        <form method="POST" action="{{ route('upcoming-events.destroy', $event) }}"
                              onsubmit="return confirm('Delete this event?')">
                            @csrf @method('DELETE')
                            <button type="submit" class="text-slate-500 hover:text-red-400 text-sm">
                                <i class="fas fa-trash"></i>
                            </button>
                        </form>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="7" class="px-5 py-12 text-center text-slate-500">
                        <i class="fas fa-calendar-plus text-3xl mb-3 block opacity-20"></i>
                        No events yet. Click "Add Event" to create one.
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

{{-- Create Event Modal --}}
<div x-show="showModal"
     class="fixed inset-0 z-50 flex items-center justify-center bg-black/60"
     style="display:none">
    <div class="card p-6 w-full max-w-lg mx-4 max-h-[90vh] overflow-y-auto">
        <div class="flex items-center justify-between mb-4">
            <h3>Add Upcoming Event</h3>
            <button @click="showModal = false" class="text-slate-400 hover:text-white">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <form method="POST" action="{{ route('upcoming-events.store') }}">
            @csrf
            <div class="space-y-4">
                <div>
                    <label class="flex items-center gap-1">Event Name <span class="text-red-400">*</span></label>
                    <input type="text" name="name" class="input" required
                           placeholder="e.g. Company Picnic, Safety Training Day"
                           value="{{ old('name') }}">
                </div>

                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="flex items-center gap-1">Start Date <span class="text-red-400">*</span></label>
                        <input type="date" name="start_date" class="input" required
                               value="{{ old('start_date') }}">
                    </div>
                    <div>
                        <label class="flex items-center gap-1">End Date <span class="text-red-400">*</span></label>
                        <input type="date" name="end_date" class="input" required
                               value="{{ old('end_date') }}">
                    </div>
                </div>

                <div>
                    <label class="flex items-center gap-1 mb-2">
                        Visible To Roles <span class="text-red-400">*</span>
                        <span class="text-xs text-slate-500 ml-2">(select at least one)</span>
                    </label>
                    <div class="grid grid-cols-2 gap-2 p-4 rounded-lg bg-slate-800/50 border border-slate-700">
                        @foreach($roles as $role)
                        <label class="flex items-center gap-2 cursor-pointer">
                            <input type="checkbox" name="roles[]" value="{{ $role->name }}"
                                   class="rounded border-slate-600 bg-slate-700 text-blue-500 focus:ring-blue-500"
                                   {{ in_array($role->name, old('roles', [])) ? 'checked' : '' }}>
                            <span class="text-sm text-slate-300">{{ $role->display_name }}</span>
                        </label>
                        @endforeach
                    </div>
                    @error('roles')
                    <p class="text-xs text-red-400 mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div class="flex gap-3 pt-2">
                    <button type="submit" class="btn btn-primary flex-1">
                        <i class="fas fa-plus"></i> Create Event
                    </button>
                    <button type="button" @click="showModal = false" class="btn btn-secondary flex-1">
                        Cancel
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

</div>
@endsection