@extends('layouts.admin')

@section('title', 'Mall Events - ' . $mall->name)

@section('content')
<!-- Page Header -->
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h1 class="h3 mb-1 text-gray-800 font-weight-bold">{{ $mall->name }} - Events Management</h1>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="{{ url('/admin') }}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ route('admin.malls.index') }}">Malls</a></li>
                <li class="breadcrumb-item"><a href="{{ route('admin.malls.show', $mall) }}">{{ $mall->name }}</a></li>
                <li class="breadcrumb-item active" aria-current="page">Events</li>
            </ol>
        </nav>
    </div>
    <div>
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addEventModal">
            <i class="bi bi-plus me-1"></i>
            Add New Event
        </button>
        <a href="{{ route('admin.malls.show', $mall) }}" class="btn btn-outline-secondary ms-2">
            <i class="bi bi-arrow-left me-1"></i>
            Back to Mall
        </a>
    </div>
</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'] }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="bi bi-calendar-event 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">Upcoming</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['upcoming'] }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="bi bi-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-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">This Month</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['this_month'] }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="bi bi-calendar-month 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</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['completed'] }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="bi bi-check-circle fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Search and Filter -->
<div class="card shadow mb-4">
    <div class="card-header py-3">
        <h6 class="m-0 font-weight-bold text-primary">Search & Filter Events</h6>
    </div>
    <div class="card-body">
        <form method="GET" action="{{ route('admin.malls.events', $mall) }}" class="row g-3">
            <div class="col-md-3">
                <label for="search" class="form-label">Search Events</label>
                <input type="text" class="form-control" id="search" name="search" 
                       value="{{ request('search') }}" placeholder="Event name, organizer...">
            </div>
            <div class="col-md-2">
                <label for="type" class="form-label">Event Type</label>
                <select class="form-select" id="type" name="type">
                    <option value="">All Types</option>
                    <option value="promotion" {{ request('type') == 'promotion' ? 'selected' : '' }}>Promotion</option>
                    <option value="entertainment" {{ request('type') == 'entertainment' ? 'selected' : '' }}>Entertainment</option>
                    <option value="exhibition" {{ request('type') == 'exhibition' ? 'selected' : '' }}>Exhibition</option>
                    <option value="festival" {{ request('type') == 'festival' ? 'selected' : '' }}>Festival</option>
                    <option value="conference" {{ request('type') == 'conference' ? 'selected' : '' }}>Conference</option>
                    <option value="workshop" {{ request('type') == 'workshop' ? 'selected' : '' }}>Workshop</option>
                    <option value="other" {{ request('type') == 'other' ? 'selected' : '' }}>Other</option>
                </select>
            </div>
            <div class="col-md-2">
                <label for="status" class="form-label">Status</label>
                <select class="form-select" id="status" name="status">
                    <option value="">All Status</option>
                    <option value="planned" {{ request('status') == 'planned' ? 'selected' : '' }}>Planned</option>
                    <option value="confirmed" {{ request('status') == 'confirmed' ? 'selected' : '' }}>Confirmed</option>
                    <option value="ongoing" {{ request('status') == 'ongoing' ? 'selected' : '' }}>Ongoing</option>
                    <option value="completed" {{ request('status') == 'completed' ? 'selected' : '' }}>Completed</option>
                    <option value="cancelled" {{ request('status') == 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                </select>
            </div>
            <div class="col-md-2">
                <label for="date_from" class="form-label">From Date</label>
                <input type="date" class="form-control" id="date_from" name="date_from" value="{{ request('date_from') }}">
            </div>
            <div class="col-md-2">
                <label for="date_to" class="form-label">To Date</label>
                <input type="date" class="form-control" id="date_to" name="date_to" value="{{ request('date_to') }}">
            </div>
            <div class="col-md-1 d-flex align-items-end">
                <button type="submit" class="btn btn-primary w-100">
                    <i class="bi bi-search"></i>
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Events Table -->
<div class="card shadow mb-4">
    <div class="card-header py-3">
        <h6 class="m-0 font-weight-bold text-primary">Events</h6>
    </div>
    <div class="card-body">
        @if($events->count() > 0)
        <div class="table-responsive">
            <table class="table table-bordered" width="100%" cellspacing="0">
                <thead>
                    <tr>
                        <th>Event Info</th>
                        <th>Date & Time</th>
                        <th>Location</th>
                        <th>Organizer</th>
                        <th>Status</th>
                        <th>Attendees</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($events as $event)
                    <tr>
                        <td>
                            <div class="font-weight-bold">{{ $event->event_name }}</div>
                            <small class="text-muted">{{ ucfirst(str_replace('_', ' ', $event->event_type)) }}</small>
                            @if($event->event_description)
                                <br><small class="text-secondary">{{ Str::limit($event->event_description, 50) }}</small>
                            @endif
                        </td>
                        <td>
                            <div>{{ \Carbon\Carbon::parse($event->start_datetime)->format('M j, Y') }}</div>
                            <small class="text-muted">
                                {{ \Carbon\Carbon::parse($event->start_datetime)->format('g:i A') }} - 
                                {{ \Carbon\Carbon::parse($event->end_datetime)->format('g:i A') }}
                            </small>
                        </td>
                        <td>
                            <div>{{ $event->event_location }}</div>
                            @if($event->store)
                                <small class="text-muted">{{ $event->store->store_name }}</small>
                            @endif
                        </td>
                        <td>
                            <div>{{ $event->organizer_name }}</div>
                            @if($event->organizer_contact)
                                <small class="text-muted">{{ $event->organizer_contact }}</small>
                            @endif
                        </td>
                        <td>
                            @php
                                $statusColors = [
                                    'planned' => 'secondary',
                                    'confirmed' => 'primary',
                                    'ongoing' => 'warning',
                                    'completed' => 'success',
                                    'cancelled' => 'danger'
                                ];
                                $statusColor = $statusColors[$event->event_status] ?? 'secondary';
                            @endphp
                            <span class="badge bg-{{ $statusColor }}">{{ ucfirst($event->event_status) }}</span>
                        </td>
                        <td>
                            @if($event->max_attendees)
                                <div>{{ $event->actual_attendees ?? 0 }} / {{ $event->max_attendees }}</div>
                                <small class="text-muted">{{ round((($event->actual_attendees ?? 0) / $event->max_attendees) * 100) }}% full</small>
                            @else
                                <div>{{ $event->actual_attendees ?? 0 }}</div>
                                <small class="text-muted">No limit</small>
                            @endif
                        </td>
                        <td>
                            <div class="btn-group btn-group-sm">
                                <button type="button" class="btn btn-outline-primary" onclick="editEvent({{ $event->id }})">
                                    <i class="bi bi-pencil"></i>
                                </button>
                                <button type="button" class="btn btn-outline-danger" onclick="deleteEvent({{ $event->id }})">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        
        <!-- Pagination -->
        <div class="d-flex justify-content-center">
            {{ $events->links() }}
        </div>
        @else
        <div class="text-center py-4">
            <i class="bi bi-calendar-event" style="font-size: 48px; color: #e0e0e0;"></i>
            <h5 class="mt-3">No Events Found</h5>
            <p class="text-muted">There are no events in this mall yet.</p>
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addEventModal">
                <i class="bi bi-plus"></i> Add Your First Event
            </button>
        </div>
        @endif
    </div>
</div>

<!-- Add Event Modal -->
<div class="modal fade" id="addEventModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add New Event</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ route('admin.malls.events.store', $mall) }}">
                @csrf
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-md-8">
                            <label for="event_name" class="form-label">Event Name *</label>
                            <input type="text" class="form-control" id="event_name" name="event_name" required>
                        </div>
                        <div class="col-md-4">
                            <label for="event_type" class="form-label">Event Type *</label>
                            <select class="form-select" id="event_type" name="event_type" required>
                                <option value="">Select Type</option>
                                <option value="promotion">Promotion</option>
                                <option value="entertainment">Entertainment</option>
                                <option value="exhibition">Exhibition</option>
                                <option value="festival">Festival</option>
                                <option value="conference">Conference</option>
                                <option value="workshop">Workshop</option>
                                <option value="other">Other</option>
                            </select>
                        </div>
                        <div class="col-12">
                            <label for="event_description" class="form-label">Event Description</label>
                            <textarea class="form-control" id="event_description" name="event_description" rows="3"></textarea>
                        </div>
                        <div class="col-md-6">
                            <label for="start_datetime" class="form-label">Start Date & Time *</label>
                            <input type="datetime-local" class="form-control" id="start_datetime" name="start_datetime" required>
                        </div>
                        <div class="col-md-6">
                            <label for="end_datetime" class="form-label">End Date & Time *</label>
                            <input type="datetime-local" class="form-control" id="end_datetime" name="end_datetime" required>
                        </div>
                        <div class="col-md-8">
                            <label for="event_location" class="form-label">Event Location *</label>
                            <input type="text" class="form-control" id="event_location" name="event_location" required placeholder="e.g., Central Court, Food Court, Store 123">
                        </div>
                        <div class="col-md-4">
                            <label for="event_status" class="form-label">Status *</label>
                            <select class="form-select" id="event_status" name="event_status" required>
                                <option value="planned">Planned</option>
                                <option value="confirmed">Confirmed</option>
                                <option value="ongoing">Ongoing</option>
                                <option value="completed">Completed</option>
                                <option value="cancelled">Cancelled</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="organizer_name" class="form-label">Organizer Name *</label>
                            <input type="text" class="form-control" id="organizer_name" name="organizer_name" required>
                        </div>
                        <div class="col-md-6">
                            <label for="organizer_contact" class="form-label">Organizer Contact</label>
                            <input type="text" class="form-control" id="organizer_contact" name="organizer_contact" placeholder="Phone or Email">
                        </div>
                        <div class="col-md-4">
                            <label for="max_attendees" class="form-label">Max Attendees</label>
                            <input type="number" class="form-control" id="max_attendees" name="max_attendees" min="1">
                        </div>
                        <div class="col-md-4">
                            <label for="registration_fee" class="form-label">Registration Fee ($)</label>
                            <input type="number" step="0.01" class="form-control" id="registration_fee" name="registration_fee" min="0">
                        </div>
                        <div class="col-md-4">
                            <label for="actual_attendees" class="form-label">Actual Attendees</label>
                            <input type="number" class="form-control" id="actual_attendees" name="actual_attendees" min="0">
                        </div>
                        <div class="col-12">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="free_event" name="free_event" value="1">
                                <label class="form-check-label" for="free_event">
                                    This is a free event
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Create Event</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
function editEvent(eventId) {
    // Placeholder for edit functionality
    alert('Edit event functionality will be implemented');
}

function deleteEvent(eventId) {
    if (confirm('Are you sure you want to delete this event?')) {
        // Create a form and submit it for deletion
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = `/admin/malls/{{ $mall->id }}/events/${eventId}`;
        
        const csrfToken = document.createElement('input');
        csrfToken.type = 'hidden';
        csrfToken.name = '_token';
        csrfToken.value = '{{ csrf_token() }}';
        
        const methodInput = document.createElement('input');
        methodInput.type = 'hidden';
        methodInput.name = '_method';
        methodInput.value = 'DELETE';
        
        form.appendChild(csrfToken);
        form.appendChild(methodInput);
        document.body.appendChild(form);
        form.submit();
    }
}

// Set default datetime to current time + 1 hour
document.addEventListener('DOMContentLoaded', function() {
    const now = new Date();
    now.setHours(now.getHours() + 1);
    const defaultDateTime = now.toISOString().slice(0, 16);
    document.getElementById('start_datetime').value = defaultDateTime;
    
    const endTime = new Date(now);
    endTime.setHours(endTime.getHours() + 2);
    document.getElementById('end_datetime').value = endTime.toISOString().slice(0, 16);
});
</script>
@endsection