@extends('layouts.admin')

@section('title', __('Events Management'))

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">{{ __('Events Management') }}</h1>
            <p class="mb-0 text-muted">{{ __('Manage your events, registrations, and analytics') }}</p>
        </div>
        <a href="{{ route('admin.events.create', ['locale' => app()->getLocale()]) }}" class="btn btn-primary">
            <i class="fas fa-plus"></i> {{ __('Create New Event') }}
        </a>
    </div>

    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                {{ __('Total Events') }}
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['total'] ?? 0 }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-calendar-alt fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                {{ __('Ongoing Events') }}
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['ongoing'] ?? 0 }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-play fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-info shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                {{ __('Upcoming Events') }}
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['upcoming'] ?? 0 }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-clock fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-warning shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                {{ __('Completed Events') }}
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['completed'] ?? 0 }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-check-circle fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">{{ __('Quick Actions') }}</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3">
                            <a href="{{ route('admin.events.index', ['locale' => app()->getLocale(), 'status' => 'active']) }}" class="btn btn-outline-success btn-block mb-2">
                                <i class="fas fa-eye"></i> {{ __('Active Events') }}
                            </a>
                        </div>
                        <div class="col-md-3">
                            <a href="{{ route('admin.events.index', ['locale' => app()->getLocale(), 'is_featured' => '1']) }}" class="btn btn-outline-warning btn-block mb-2">
                                <i class="fas fa-star"></i> {{ __('Featured Events') }}
                            </a>
                        </div>
                        <div class="col-md-3">
                            <a href="{{ route('admin.events.analytics', ['locale' => app()->getLocale()]) }}" class="btn btn-outline-primary btn-block mb-2">
                                <i class="fas fa-chart-bar"></i> {{ __('Analytics') }}
                            </a>
                        </div>
                        <div class="col-md-3">
                            <a href="{{ route('admin.events.index', ['locale' => app()->getLocale()]) }}" class="btn btn-outline-info btn-block mb-2">
                                <i class="fas fa-list"></i> {{ __('All Events') }}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Events List -->
    <div class="card shadow mb-4">
        <div class="card-header py-3 d-flex justify-content-between align-items-center">
            <h6 class="m-0 font-weight-bold text-primary">{{ __('Recent Events') }}</h6>
            <div class="d-flex align-items-center">
                @include('admin.events.partials.filters')
                <a href="{{ route('admin.events.index', ['locale' => app()->getLocale()]) }}" class="btn btn-sm btn-secondary ml-2">
                    <i class="fas fa-redo"></i> {{ __('Reset Filters') }}
                </a>
            </div>
        </div>
        <div class="card-body">
            @if($recentEvents->count() > 0)
                <div class="table-responsive">
                    <table class="table table-bordered table-hover" id="eventsTable">
                        <thead class="thead-light">
                            <tr>
                                <th>{{ __('Title') }}</th>
                                <th>{{ __('Type') }}</th>
                                <th>{{ __('Start Date') }}</th>
                                <th>{{ __('Status') }}</th>
                                <th>{{ __('Featured') }}</th>
                                <th>{{ __('Registrations') }}</th>
                                <th>{{ __('Actions') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($recentEvents as $event)
                                <tr>
                                    <td>
                                        <div>
                                            <strong>{{ $event->title_en ?? $event->title_ar }}</strong>
                                            @if($event->is_featured)
                                                <span class="badge badge-warning ml-1">{{ __('Featured') }}</span>
                                            @endif
                                        </div>
                                        @if($event->short_description_en || $event->short_description_ar)
                                            <small class="text-muted">{{ Str::limit($event->short_description_en ?? $event->short_description_ar, 50) }}</small>
                                        @endif
                                    </td>
                                    <td>
                                        <span class="badge badge-info">{{ $event->event_type }}</span>
                                        @if($event->is_online)
                                            <span class="badge badge-success ml-1">{{ __('Online') }}</span>
                                        @else
                                            <span class="badge badge-secondary ml-1">{{ __('Offline') }}</span>
                                        @endif
                                    </td>
                                    <td>
                                        <div>{{ $event->start_datetime->format('M d, Y H:i') }}</div>
                                        <small class="text-muted">{{ $event->start_datetime->timezone($event->timezone)->format('T') }}</small>
                                    </td>
                                    <td>
                                        @include('admin.events.partials.status-badge', ['status' => $event->status])
                                    </td>
                                    <td>
                                        <a href="#" class="toggle-featured" data-id="{{ $event->id }}" data-featured="{{ $event->is_featured }}" data-url="{{ route('admin.events.toggleFeatured', ['locale' => app()->getLocale(), 'event' => $event->id]) }}">
                                            <i class="fas {{ $event->is_featured ? 'fa-star text-warning' : 'fa-star-o text-muted' }}"></i>
                                        </a>
                                    </td>
                                    <td>
                                        <span class="badge badge-primary">{{ $event->registrations()->count() }}</span>
                                        @if($event->max_attendees)
                                            <small class="text-muted">/ {{ $event->max_attendees }}</small>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="btn-group btn-group-sm">
                                            <a href="{{ route('admin.events.show', $event) }}" class="btn btn-info" title="{{ __('View') }}">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            <a href="{{ route('admin.events.edit', $event) }}" class="btn btn-warning" title="{{ __('Edit') }}">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                            <form action="{{ route('admin.events.destroy', $event) }}" method="POST" class="d-inline delete-form">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-danger" title="{{ __('Delete') }}">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <!-- View All Link -->
                <div class="mt-3 text-center">
                    <a href="{{ route('admin.events.index', ['locale' => app()->getLocale()]) }}" class="btn btn-outline-primary">
                        <i class="fas fa-list"></i> {{ __('View All Events') }}
                    </a>
                </div>
            @else
                <div class="text-center py-5">
                    <i class="fas fa-calendar-times fa-3x text-muted mb-3"></i>
                    <h5 class="text-muted">{{ __('No events found') }}</h5>
                    <p class="text-muted">{{ __('Get started by creating your first event.') }}</p>
                    <a href="{{ route('admin.events.create', ['locale' => app()->getLocale()]) }}" class="btn btn-primary">{{ __('Create Event') }}</a>
                </div>
            @endif
        </div>
    </div>
</div>
@endsection

@push('styles')
<link href="https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap4.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet">
@endpush

@push('scripts')
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

<script>
$(document).ready(function() {
    // CSRF setup for all AJAX requests
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    });

    // Delete form confirmation
    $('.delete-form').on('submit', function(e) {
        if (!confirm('{{ __("Are you sure you want to delete this event?") }}')) {
            e.preventDefault();
        }
    });

    // Toggle featured
    $('.toggle-featured').on('click', function(e) {
        e.preventDefault();
        const $link = $(this);
        const id = $link.data('id');
        const isFeatured = $link.data('featured');

        $.ajax({
            url: $link.data('url'),
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                if (response.success) {
                    const icon = $link.find('i');
                    if (response.is_featured) {
                        icon.removeClass('fa-star-o text-muted').addClass('fa-star text-warning');
                    } else {
                        icon.removeClass('fa-star text-warning').addClass('fa-star-o text-muted');
                    }
                    $link.data('featured', response.is_featured);
                    showToast(response.message);
                }
            },
            error: function(xhr, status, error) {
                console.error('Error:', error);
                showToast('{{ __("Failed to update featured status") }}', 'error');
            }
        });
    });

    function showToast(message, type = 'success') {
        // Remove existing toasts
        $('.alert.position-fixed').alert('close');

        const toast = $(`
            <div class="alert alert-${type} alert-dismissible fade show position-fixed" style="top: 20px; right: 20px; z-index: 9999;" role="alert">
                ${message}
                <button type="button" class="close" data-dismiss="alert" aria-label="{{ __('Close') }}">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        `);
        $('body').append(toast);

        // Auto-close after 5 seconds
        setTimeout(() => {
            toast.alert('close');
        }, 5000);
    }

    // Initialize Flatpickr for date filters if present
    @if(isset($filters) && isset($filters['date_from']))
        flatpickr('#date_from', {
            dateFormat: "Y-m-d",
            defaultDate: "{{ $filters['date_from'] }}"
        });
    @endif
});
</script>
@endpush