@extends('layouts.admin')

@section('title', 'Event Participants')

@section('content')
<div class="row g-3 mb-3">
    <div class="col-md-8">
        <h2 class="mb-2 text-body-emphasis">Event Participants</h2>
        <p class="text-body-tertiary lh-sm">{{ $event->title ?? 'Event' }} - Manage participants and attendance</p>
    </div>
    <div class="col-md-4 d-flex justify-content-end">
        <div class="btn-group" role="group">
            <a href="{{ route('admin.events.index') }}" class="btn btn-phoenix-secondary">
                <span class="fas fa-arrow-left me-2"></span>Back to Events
            </a>
            <button class="btn btn-phoenix-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                <span class="fas fa-plus me-2"></span>Add Participant
            </button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#addParticipantModal">
                    <span class="fas fa-user-plus me-2"></span>Individual Registration
                </a></li>
                <li><a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#bulkAddModal">
                    <span class="fas fa-users me-2"></span>Bulk Registration
                </a></li>
            </ul>
        </div>
    </div>
</div>

<!-- Event Info Card -->
<div class="row g-3 mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <div class="row align-items-center">
                    <div class="col-lg-8">
                        <div class="d-flex align-items-center">
                            <div class="avatar avatar-xl me-3">
                                <div class="avatar-name rounded-circle bg-primary-subtle text-primary">
                                    <span class="fas fa-calendar fs-3"></span>
                                </div>
                            </div>
                            <div>
                                <h4 class="mb-1">{{ $event->title ?? 'Event Title' }}</h4>
                                <p class="text-body-tertiary mb-1">{{ $event->description ?? 'No description available' }}</p>
                                <div class="d-flex align-items-center">
                                    <span class="badge badge-phoenix badge-phoenix-info me-2">{{ $event->type ?? 'Training' }}</span>
                                    <span class="text-body-tertiary fs-9">
                                        <span class="fas fa-calendar-day me-1"></span>
                                        {{ $event->start_date ? $event->start_date->format('M d, Y') : 'Date TBD' }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="row g-2">
                            <div class="col-6">
                                <div class="text-center">
                                    <h3 class="mb-0 text-primary">{{ $participantCount ?? '0' }}</h3>
                                    <p class="text-body-tertiary mb-0 fs-9">Registered</p>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="text-center">
                                    <h3 class="mb-0 text-success">{{ $attendanceCount ?? '0' }}</h3>
                                    <p class="text-body-tertiary mb-0 fs-9">Attended</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Participants List -->
<div class="row g-3">
    <div class="col-12">
        <div class="card">
            <div class="card-header border-bottom bg-body">
                <div class="row align-items-center">
                    <div class="col">
                        <h6 class="mb-0">Participants List</h6>
                    </div>
                    <div class="col-auto">
                        <div class="d-flex align-items-center">
                            <div class="search-box me-3">
                                <form class="position-relative">
                                    <input class="form-control search-input search" type="search" placeholder="Search participants..." aria-label="Search" />
                                    <span class="fas fa-search search-box-icon"></span>
                                </form>
                            </div>
                            <div class="btn-group" role="group">
                                <button class="btn btn-phoenix-primary btn-sm" type="button" data-bs-toggle="modal" data-bs-target="#attendanceModal">
                                    <span class="fas fa-check me-2"></span>Mark Attendance
                                </button>
                                <button class="btn btn-phoenix-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown">
                                    <span class="fas fa-download me-2"></span>Export
                                </button>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="#"><span class="fas fa-file-excel me-2"></span>Excel</a></li>
                                    <li><a class="dropdown-item" href="#"><span class="fas fa-file-pdf me-2"></span>PDF</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-body p-0">
                @if($participants->isNotEmpty())
                <div class="table-responsive scrollbar">
                    <table class="table table-sm fs-9 mb-0">
                        <thead>
                            <tr>
                                <th class="border-top border-translucent ps-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="selectAll">
                                    </div>
                                </th>
                                <th class="sort border-top border-translucent" data-sort="participant">Participant</th>
                                <th class="sort border-top border-translucent" data-sort="belt">Belt Level</th>
                                <th class="sort border-top border-translucent" data-sort="registration">Registration Date</th>
                                <th class="sort border-top border-translucent" data-sort="payment">Payment Status</th>
                                <th class="sort border-top border-translucent" data-sort="attendance">Attendance</th>
                                <th class="sort border-top border-translucent pe-3">Actions</th>
                            </tr>
                        </thead>
                        <tbody class="list">
                            @foreach($participants as $participant)
                            <tr class="hover-actions-trigger btn-reveal-trigger position-static">
                                <td class="ps-3">
                                    <div class="form-check">
                                        <input class="form-check-input participant-checkbox" type="checkbox" value="{{ $participant->id }}">
                                    </div>
                                </td>
                                <td class="participant align-middle">
                                    <div class="d-flex align-items-center">
                                        <div class="avatar avatar-s me-2">
                                            <div class="avatar-name rounded-circle bg-primary-subtle text-primary">
                                                <span class="fw-medium">{{ substr($participant->user->name ?? 'P', 0, 1) }}</span>
                                            </div>
                                        </div>
                                        <div>
                                            <h6 class="mb-0 fw-semibold">{{ $participant->user->name ?? 'Participant Name' }}</h6>
                                            <p class="text-body-tertiary mb-0 fs-9">{{ $participant->user->email ?? 'No email' }}</p>
                                        </div>
                                    </div>
                                </td>
                                <td class="belt align-middle">
                                    <span class="badge badge-phoenix badge-phoenix-info">{{ $participant->belt_level ?? 'White Belt' }}</span>
                                </td>
                                <td class="registration align-middle">
                                    <span class="text-body-tertiary">{{ $participant->created_at->format('M d, Y') }}</span>
                                </td>
                                <td class="payment align-middle">
                                    @if($participant->payment_status == 'paid')
                                        <span class="badge badge-phoenix badge-phoenix-success">Paid</span>
                                    @elseif($participant->payment_status == 'pending')
                                        <span class="badge badge-phoenix badge-phoenix-warning">Pending</span>
                                    @else
                                        <span class="badge badge-phoenix badge-phoenix-danger">Unpaid</span>
                                    @endif
                                </td>
                                <td class="attendance align-middle">
                                    @if($participant->attended)
                                        <span class="badge badge-phoenix badge-phoenix-success">
                                            <span class="fas fa-check me-1"></span>Present
                                        </span>
                                    @else
                                        <span class="badge badge-phoenix badge-phoenix-secondary">
                                            <span class="fas fa-times me-1"></span>Absent
                                        </span>
                                    @endif
                                </td>
                                <td class="align-middle white-space-nowrap pe-3">
                                    <div class="btn-reveal-trigger position-static">
                                        <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal" type="button" data-bs-toggle="dropdown">
                                            <span class="fas fa-ellipsis-h fs-10"></span>
                                        </button>
                                        <div class="dropdown-menu dropdown-menu-end py-2">
                                            <a class="dropdown-item" href="{{ route('admin.users.show', $participant->user_id) }}">
                                                <span class="fas fa-user me-2"></span>View Profile
                                            </a>
                                            @if(!$participant->attended)
                                            <a class="dropdown-item text-success" href="#" onclick="markAttendance({{ $participant->id }})">
                                                <span class="fas fa-check me-2"></span>Mark Present
                                            </a>
                                            @else
                                            <a class="dropdown-item text-warning" href="#" onclick="unmarkAttendance({{ $participant->id }})">
                                                <span class="fas fa-undo me-2"></span>Mark Absent
                                            </a>
                                            @endif
                                            <div class="dropdown-divider"></div>
                                            <form method="POST" action="{{ route('admin.events.participants.remove', [$event->id ?? 1, $participant->id]) }}" class="d-inline">
                                                @csrf
                                                @method('DELETE')
                                                <button class="dropdown-item text-danger" type="submit" onclick="return confirm('Remove participant from event?')">
                                                    <span class="fas fa-user-minus me-2"></span>Remove
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                @else
                <div class="text-center py-5">
                    <span class="fas fa-users text-muted" style="font-size: 3rem;"></span>
                    <p class="text-muted mt-3">No participants registered yet</p>
                    <button class="btn btn-phoenix-primary" data-bs-toggle="modal" data-bs-target="#addParticipantModal">
                        <span class="fas fa-user-plus me-2"></span>Add First Participant
                    </button>
                </div>
                @endif
            </div>
            @if($participants->isNotEmpty())
            <div class="card-footer border-top d-flex justify-content-between align-items-center py-2">
                <div>
                    <span class="text-body-tertiary">Showing {{ $participants->count() }} participants</span>
                </div>
                <div>
                    {{ $participants->links() }}
                </div>
            </div>
            @endif
        </div>
    </div>
</div>

<!-- Add Participant Modal -->
<div class="modal fade" id="addParticipantModal" tabindex="-1" aria-labelledby="addParticipantModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addParticipantModalLabel">Add Participant</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="POST" action="{{ route('admin.events.participants.add', $event->id ?? 1) }}">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="user_id" class="form-label">Select User</label>
                        <select class="form-select" id="user_id" name="user_id" required>
                            <option value="">Choose a user...</option>
                            @foreach($availableUsers ?? [] as $user)
                            <option value="{{ $user->id }}">{{ $user->name }} ({{ $user->email }})</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="belt_level" class="form-label">Belt Level</label>
                        <select class="form-select" id="belt_level" name="belt_level">
                            <option value="White Belt">White Belt</option>
                            <option value="Yellow Belt">Yellow Belt</option>
                            <option value="Orange Belt">Orange Belt</option>
                            <option value="Green Belt">Green Belt</option>
                            <option value="Blue Belt">Blue Belt</option>
                            <option value="Brown Belt">Brown Belt</option>
                            <option value="Black Belt">Black Belt</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="payment_status" class="form-label">Payment Status</label>
                        <select class="form-select" id="payment_status" name="payment_status">
                            <option value="pending">Pending</option>
                            <option value="paid">Paid</option>
                            <option value="unpaid">Unpaid</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="send_notification" name="send_notification" checked>
                            <label class="form-check-label" for="send_notification">
                                Send registration confirmation email
                            </label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-phoenix-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-phoenix-primary">Add Participant</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Attendance Modal -->
<div class="modal fade" id="attendanceModal" tabindex="-1" aria-labelledby="attendanceModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="attendanceModalLabel">Mark Attendance</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="POST" action="{{ route('admin.events.participants.attendance', $event->id ?? 1) }}">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Select participants to mark as present:</label>
                        <div class="max-height-300 scrollbar">
                            @foreach($participants ?? [] as $participant)
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="attended[]" value="{{ $participant->id }}" 
                                       id="attendance_{{ $participant->id }}" {{ $participant->attended ? 'checked' : '' }}>
                                <label class="form-check-label" for="attendance_{{ $participant->id }}">
                                    {{ $participant->user->name ?? 'Participant' }}
                                </label>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-phoenix-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-phoenix-primary">Update Attendance</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
// Select all checkbox functionality
document.getElementById('selectAll').addEventListener('change', function() {
    const checkboxes = document.querySelectorAll('.participant-checkbox');
    checkboxes.forEach(checkbox => {
        checkbox.checked = this.checked;
    });
});

// Individual attendance functions
function markAttendance(participantId) {
    if (confirm('Mark this participant as present?')) {
        // AJAX call to mark attendance
        fetch(`/admin/events/{{ $event->id ?? 1 }}/participants/${participantId}/attend`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Content-Type': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            }
        });
    }
}

function unmarkAttendance(participantId) {
    if (confirm('Mark this participant as absent?')) {
        // AJAX call to unmark attendance
        fetch(`/admin/events/{{ $event->id ?? 1 }}/participants/${participantId}/unattend`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Content-Type': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            }
        });
    }
}
</script>
@endsection