 Server : Apache/2 System : Linux server-15-235-50-60 5.15.0-164-generic #174-Ubuntu SMP Fri Nov 14 20:25:16 UTC 2025 x86_64 User : gositeme ( 1004) PHP Version : 8.2.29 Disable Function : exec,system,passthru,shell_exec,proc_close,proc_open,dl,popen,show_source,posix_kill,posix_mkfifo,posix_getpwuid,posix_setpgid,posix_setsid,posix_setuid,posix_setgid,posix_seteuid,posix_setegid,posix_uname Directory : /home/gositeme/domains/soundstudiopro.com/private_html/ |
<?php
session_start();
require_once 'config/database.php';
// Set page variables for header
$current_page = 'events';
$page_title = 'Music Events - SoundStudioPro';
$page_description = 'Discover upcoming music events, workshops, and live performances. Join the SoundStudioPro community and never miss a beat.';
include 'includes/header.php';
$pdo = getDBConnection();
$user_id = $_SESSION['user_id'] ?? null;
// Get filter parameters
$event_type = $_GET['type'] ?? '';
$date_filter = $_GET['date'] ?? '';
$location_filter = $_GET['location'] ?? '';
$search_query = $_GET['search'] ?? '';
// Build query
$where_conditions = ["e.status = 'published'"];
$params = [];
if ($event_type) {
$where_conditions[] = "e.event_type = ?";
$params[] = $event_type;
}
if ($date_filter) {
switch ($date_filter) {
case 'today':
$where_conditions[] = "DATE(e.start_date) = CURDATE()";
break;
case 'week':
$where_conditions[] = "e.start_date BETWEEN NOW() AND DATE_ADD(NOW(), INTERVAL 7 DAY)";
break;
case 'month':
$where_conditions[] = "e.start_date BETWEEN NOW() AND DATE_ADD(NOW(), INTERVAL 1 MONTH)";
break;
}
}
if ($location_filter) {
$where_conditions[] = "(e.location LIKE ? OR e.venue_name LIKE ?)";
$params[] = "%$location_filter%";
$params[] = "%$location_filter%";
}
if ($search_query) {
$where_conditions[] = "(e.title LIKE ? OR e.description LIKE ?)";
$params[] = "%$search_query%";
$params[] = "%$search_query%";
}
$where_clause = implode(' AND ', $where_conditions);
// Get events
$events_query = "
SELECT
e.*,
u.name as creator_name,
u.profile_image as creator_image,
COUNT(DISTINCT ea.user_id) as attendee_count,
COUNT(DISTINCT el.user_id) as like_count,
COUNT(DISTINCT ec.id) as comment_count,
CASE WHEN ea2.user_id IS NOT NULL THEN ea2.status ELSE NULL END as user_rsvp_status
FROM events e
JOIN users u ON e.creator_id = u.id
LEFT JOIN event_attendees ea ON e.id = ea.event_id AND ea.status = 'attending'
LEFT JOIN event_likes el ON e.id = el.event_id
LEFT JOIN event_comments ec ON e.id = ec.event_id
LEFT JOIN event_attendees ea2 ON e.id = ea2.event_id AND ea2.user_id = ?
WHERE $where_clause
GROUP BY e.id
ORDER BY e.is_featured DESC, e.start_date ASC
LIMIT 50
";
$stmt = $pdo->prepare($events_query);
$stmt->execute(array_merge([$user_id], $params));
$events = $stmt->fetchAll();
// Get event categories
$categories_query = "SELECT * FROM event_categories ORDER BY name";
$categories = $pdo->query($categories_query)->fetchAll();
// Helper functions
function formatEventDate($start_date, $end_date) {
$start = new DateTime($start_date);
$end = new DateTime($end_date);
if ($start->format('Y-m-d') === $end->format('Y-m-d')) {
return $start->format('M j, Y') . ' at ' . $start->format('g:i A');
} else {
return $start->format('M j, Y g:i A') . ' - ' . $end->format('M j, Y g:i A');
}
}
function getEventTypeIcon($event_type) {
$icons = [
'live_music' => 'fas fa-music',
'workshop' => 'fas fa-graduation-cap',
'networking' => 'fas fa-users',
'release_party' => 'fas fa-champagne-glasses',
'battle' => 'fas fa-trophy',
'open_mic' => 'fas fa-microphone',
'studio_session' => 'fas fa-record-vinyl',
'other' => 'fas fa-calendar'
];
return $icons[$event_type] ?? 'fas fa-calendar';
}
function getEventTypeColor($event_type) {
$colors = [
'live_music' => '#667eea',
'workshop' => '#48bb78',
'networking' => '#ed8936',
'release_party' => '#9f7aea',
'battle' => '#f56565',
'open_mic' => '#38b2ac',
'studio_session' => '#ed64a6',
'other' => '#a0aec0'
];
return $colors[$event_type] ?? '#a0aec0';
}
// Group events by date for calendar view
$events_by_date = [];
foreach ($events as $event) {
$date = date('Y-m-d', strtotime($event['start_date']));
if (!isset($events_by_date[$date])) {
$events_by_date[$date] = [];
}
$events_by_date[$date][] = $event;
}
?>
<div class="events-calendar-container">
<!-- Hero Section -->
<section class="events-hero">
<div class="hero-background">
<div class="hero-pattern"></div>
</div>
<div class="hero-content">
<div class="hero-text">
<h1 class="hero-title">Music Events</h1>
<p class="hero-subtitle">Join the SoundStudioPro community for exclusive music events, workshops, and live performances</p>
<div class="hero-stats">
<div class="stat">
<span class="stat-number"><?= count($events) ?></span>
<span class="stat-label">Upcoming Events</span>
</div>
<div class="stat">
<span class="stat-number"><?= count($categories) ?></span>
<span class="stat-label">Event Types</span>
</div>
</div>
</div>
<div class="hero-actions">
<button class="btn btn-primary" onclick="showCreateEventModal()">
<i class="fas fa-plus"></i>
Create Event
</button>
<button class="btn btn-secondary" onclick="toggleFilters()">
<i class="fas fa-filter"></i>
Filter Events
</button>
</div>
</div>
</section>
<!-- Main Content -->
<div class="events-main">
<!-- Sidebar -->
<aside class="events-sidebar">
<div class="sidebar-content">
<!-- Search -->
<div class="search-section">
<h3>Find Events</h3>
<form method="GET" class="search-form">
<div class="search-input">
<i class="fas fa-search"></i>
<input type="text" name="search" placeholder="Search music events..." value="<?= htmlspecialchars($search_query) ?>">
</div>
</form>
</div>
<!-- Categories -->
<div class="categories-section">
<h3>Event Types</h3>
<div class="category-list">
<a href="?" class="category-item <?= empty($event_type) ? 'active' : '' ?>">
<i class="fas fa-calendar"></i>
<span>All Events</span>
</a>
<?php foreach ($categories as $category): ?>
<a href="?type=<?= strtolower(str_replace(' ', '_', $category['name'])) ?>"
class="category-item <?= $event_type === strtolower(str_replace(' ', '_', $category['name'])) ? 'active' : '' ?>">
<i class="<?= $category['icon'] ?>" style="color: <?= $category['color'] ?>"></i>
<span><?= $category['name'] ?></span>
</a>
<?php endforeach; ?>
</div>
</div>
<!-- Date Filters -->
<div class="date-filters">
<h3>Time Period</h3>
<div class="date-options">
<a href="?date=today" class="date-option <?= $date_filter === 'today' ? 'active' : '' ?>">
<i class="fas fa-calendar-day"></i>
Today
</a>
<a href="?date=week" class="date-option <?= $date_filter === 'week' ? 'active' : '' ?>">
<i class="fas fa-calendar-week"></i>
This Week
</a>
<a href="?date=month" class="date-option <?= $date_filter === 'month' ? 'active' : '' ?>">
<i class="fas fa-calendar-alt"></i>
This Month
</a>
<a href="?" class="date-option <?= empty($date_filter) ? 'active' : '' ?>">
<i class="fas fa-calendar"></i>
All Time
</a>
</div>
</div>
</div>
</aside>
<!-- Events Content -->
<main class="events-content">
<!-- Events Header -->
<div class="events-header">
<h2>SoundStudioPro Events</h2>
<div class="events-count"><?= count($events) ?> events found</div>
</div>
<!-- Events Grid -->
<div class="events-calendar">
<?php if (empty($events)): ?>
<div class="no-events">
<div class="no-events-icon">
<i class="fas fa-calendar-times"></i>
</div>
<h3>No events found</h3>
<p>Try adjusting your filters or create the first event!</p>
<button class="btn btn-primary" onclick="showCreateEventModal()">
<i class="fas fa-plus"></i>
Create Event
</button>
</div>
<?php else: ?>
<?php foreach ($events_by_date as $date => $day_events): ?>
<div class="calendar-day">
<div class="day-header">
<div class="day-date">
<span class="day-number"><?= date('j', strtotime($date)) ?></span>
<span class="day-month"><?= date('M', strtotime($date)) ?></span>
</div>
<div class="day-info">
<h3><?= date('l', strtotime($date)) ?></h3>
<p><?= count($day_events) ?> event<?= count($day_events) !== 1 ? 's' : '' ?></p>
</div>
</div>
<div class="day-events">
<?php foreach ($day_events as $event): ?>
<div class="event-card" data-event-id="<?= $event['id'] ?>">
<?php if ($event['is_featured']): ?>
<div class="featured-badge">
<i class="fas fa-star"></i>
Featured
</div>
<?php endif; ?>
<div class="event-image">
<?php if ($event['cover_image']): ?>
<img src="<?= htmlspecialchars($event['cover_image']) ?>" alt="<?= htmlspecialchars($event['title']) ?>">
<?php else: ?>
<div class="event-placeholder">
<i class="<?= getEventTypeIcon($event['event_type']) ?>"></i>
</div>
<?php endif; ?>
<div class="event-type-badge" style="background: <?= getEventTypeColor($event['event_type']) ?>">
<i class="<?= getEventTypeIcon($event['event_type']) ?>"></i>
</div>
</div>
<div class="event-content">
<div class="event-header">
<h3 class="event-title"><?= htmlspecialchars($event['title']) ?></h3>
<div class="event-time">
<i class="fas fa-clock"></i>
<?= date('g:i A', strtotime($event['start_date'])) ?>
</div>
</div>
<p class="event-description"><?= htmlspecialchars(substr($event['description'], 0, 120)) ?>...</p>
<div class="event-meta">
<?php if ($event['location']): ?>
<div class="event-location">
<i class="fas fa-map-marker-alt"></i>
<?= htmlspecialchars($event['location']) ?>
</div>
<?php endif; ?>
<div class="event-creator">
<i class="fas fa-user"></i>
by <a href="/artist_profile.php?id=<?= $event['creator_id'] ?>"><?= htmlspecialchars($event['creator_name']) ?></a>
</div>
</div>
<div class="event-stats">
<div class="stat-item">
<i class="fas fa-users"></i>
<span><?= $event['attendee_count'] ?></span>
</div>
<div class="stat-item">
<i class="fas fa-heart"></i>
<span><?= $event['like_count'] ?></span>
</div>
<div class="stat-item">
<i class="fas fa-comment"></i>
<span><?= $event['comment_count'] ?></span>
</div>
</div>
<div class="event-actions">
<?php if ($user_id): ?>
<button class="btn btn-primary btn-sm" onclick="rsvpEvent(<?= $event['id'] ?>, 'attending')"
<?= $event['user_rsvp_status'] === 'attending' ? 'disabled' : '' ?>>
<i class="fas fa-check"></i>
<?= $event['user_rsvp_status'] === 'attending' ? 'Attending' : 'Attend' ?>
</button>
<button class="btn btn-outline btn-sm" onclick="likeEvent(<?= $event['id'] ?>)">
<i class="fas fa-heart"></i>
Like
</button>
<button class="btn btn-outline btn-sm" onclick="showEventDetails(<?= $event['id'] ?>)">
<i class="fas fa-eye"></i>
Details
</button>
<?php else: ?>
<a href="/auth/login_new.php" class="btn btn-primary btn-sm">
<i class="fas fa-sign-in-alt"></i>
Login to Attend
</a>
<?php endif; ?>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
</main>
</div>
</div>
<!-- Create Event Modal -->
<div id="createEventModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h2><i class="fas fa-plus"></i> Create New Event</h2>
<button class="close-btn" onclick="closeModal('createEventModal')">×</button>
</div>
<form id="createEventForm" class="event-form">
<div class="form-group">
<label>Event Title *</label>
<input type="text" name="title" required placeholder="Enter event title">
</div>
<div class="form-group">
<label>Event Type *</label>
<select name="event_type" required>
<option value="">Select event type</option>
<option value="live_music">Live Music</option>
<option value="workshop">Workshop</option>
<option value="networking">Networking</option>
<option value="release_party">Release Party</option>
<option value="battle">Battle</option>
<option value="open_mic">Open Mic</option>
<option value="studio_session">Studio Session</option>
<option value="other">Other</option>
</select>
</div>
<div class="form-group">
<label>Description *</label>
<textarea name="description" required placeholder="Describe your event..."></textarea>
</div>
<div class="form-row">
<div class="form-group">
<label>Start Date & Time *</label>
<input type="datetime-local" name="start_date" required>
</div>
<div class="form-group">
<label>End Date & Time *</label>
<input type="datetime-local" name="end_date" required>
</div>
</div>
<div class="form-group">
<label>Location</label>
<input type="text" name="location" placeholder="Event location">
</div>
<div class="form-group">
<label>Venue Name</label>
<input type="text" name="venue_name" placeholder="Venue name">
</div>
<div class="form-group">
<label>Address</label>
<textarea name="address" placeholder="Full address"></textarea>
</div>
<div class="form-row">
<div class="form-group">
<label>Max Attendees</label>
<input type="number" name="max_attendees" placeholder="Leave empty for unlimited">
</div>
<div class="form-group">
<label>Ticket Price</label>
<input type="number" name="ticket_price" step="0.01" placeholder="0.00 for free" id="ticket_price_input">
</div>
</div>
<div class="form-group" id="fee_payment_option_group" style="display: none;">
<label><?= t('event_pricing.fee_options.form_label') ?></label>
<div class="fee-option-toggle">
<label class="fee-option-radio">
<input type="radio" name="organizer_absorbs_fees" value="0" checked>
<div class="radio-content">
<span class="radio-title"><?= t('event_pricing.fee_options.attendee_pays.title') ?></span>
<span class="radio-desc"><?= t('event_pricing.fee_options.attendee_pays.subtitle') ?></span>
</div>
</label>
<label class="fee-option-radio">
<input type="radio" name="organizer_absorbs_fees" value="1">
<div class="radio-content">
<span class="radio-title"><?= t('event_pricing.fee_options.organizer_absorbs.title') ?></span>
<span class="radio-desc"><?= t('event_pricing.fee_options.organizer_absorbs.subtitle') ?></span>
</div>
</label>
</div>
<div class="fee-preview" id="fee_preview" style="margin-top: 1rem; padding: 1rem; background: rgba(102, 126, 234, 0.1); border-radius: 8px; display: none;">
<div class="fee-preview-content"></div>
</div>
</div>
<div class="form-actions">
<button type="button" class="btn btn-secondary" onclick="closeModal('createEventModal')">Cancel</button>
<button type="submit" class="btn btn-primary">Create Event</button>
</div>
</form>
</div>
</div>
<style>
/* SoundStudioPro Events Container */
.events-calendar-container {
min-height: 100vh;
background: var(--bg-primary);
color: var(--text-primary);
}
/* Hero Section */
.events-hero {
position: relative;
padding: 6rem 0 4rem;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
overflow: hidden;
}
.hero-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.hero-pattern {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse"><path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(102,126,234,0.1)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
opacity: 0.3;
}
.hero-content {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr auto;
gap: 3rem;
align-items: center;
}
.hero-title {
font-size: 3.5rem;
font-weight: 800;
margin-bottom: 1rem;
background: var(--gradient-primary);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-subtitle {
font-size: 1.3rem;
color: var(--text-secondary);
margin-bottom: 2rem;
max-width: 500px;
}
.hero-stats {
display: flex;
gap: 3rem;
margin-bottom: 2rem;
}
.stat {
text-align: center;
}
.stat-number {
display: block;
font-size: 2.5rem;
font-weight: 700;
color: var(--primary);
line-height: 1;
}
.stat-label {
font-size: 0.9rem;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.hero-actions {
display: flex;
flex-direction: column;
gap: 1rem;
}
/* Main Content Layout */
.events-main {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
display: grid;
grid-template-columns: 300px 1fr;
gap: 3rem;
margin-top: 3rem;
}
/* Sidebar */
.events-sidebar {
background: var(--bg-card);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
padding: 2rem;
height: fit-content;
position: sticky;
top: 2rem;
}
.sidebar-content h3 {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 1rem;
color: var(--text-primary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.search-section {
margin-bottom: 2rem;
}
.search-input {
position: relative;
}
.search-input i {
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
color: var(--text-secondary);
}
.search-input input {
width: 100%;
padding: 1rem 1rem 1rem 3rem;
background: var(--bg-glass);
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
color: var(--text-primary);
font-size: 0.9rem;
}
.categories-section {
margin-bottom: 2rem;
}
.category-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.category-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
border-radius: var(--radius-md);
text-decoration: none;
color: var(--text-secondary);
transition: all var(--transition-normal);
font-size: 0.9rem;
}
.category-item:hover {
background: var(--bg-glass);
color: var(--text-primary);
}
.category-item.active {
background: var(--gradient-primary);
color: white;
}
.date-filters {
margin-bottom: 2rem;
}
.date-options {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.date-option {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
border-radius: var(--radius-md);
text-decoration: none;
color: var(--text-secondary);
transition: all var(--transition-normal);
font-size: 0.9rem;
}
.date-option:hover {
background: var(--bg-glass);
color: var(--text-primary);
}
.date-option.active {
background: var(--gradient-primary);
color: white;
}
/* Events Content */
.events-content {
min-height: 600px;
}
.events-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--border-light);
}
.events-header h2 {
font-size: 2rem;
font-weight: 700;
background: var(--gradient-primary);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.events-count {
color: var(--text-secondary);
font-size: 0.9rem;
}
/* Events Grid */
.events-calendar {
display: flex;
flex-direction: column;
gap: 2rem;
}
.calendar-day {
background: var(--bg-card);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
overflow: hidden;
}
.day-header {
display: flex;
align-items: center;
gap: 1.5rem;
padding: 1.5rem 2rem;
background: var(--bg-glass);
border-bottom: 1px solid var(--border-light);
}
.day-date {
display: flex;
flex-direction: column;
align-items: center;
min-width: 60px;
}
.day-number {
font-size: 2rem;
font-weight: 700;
color: var(--primary);
line-height: 1;
}
.day-month {
font-size: 0.8rem;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.day-info h3 {
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 0.25rem;
}
.day-info p {
color: var(--text-secondary);
font-size: 0.9rem;
}
.day-events {
padding: 1.5rem 2rem;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 1.5rem;
}
/* Event Cards */
.event-card {
background: var(--bg-glass);
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
overflow: hidden;
transition: all var(--transition-normal);
position: relative;
}
.event-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-glow);
border-color: var(--border-accent);
}
.featured-badge {
position: absolute;
top: 1rem;
right: 1rem;
background: linear-gradient(135deg, #ffd700, #ffed4e);
color: #000;
padding: 0.4rem 0.8rem;
border-radius: var(--radius-full);
font-size: 0.7rem;
font-weight: 600;
z-index: 10;
}
.event-image {
position: relative;
height: 150px;
overflow: hidden;
}
.event-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.event-placeholder {
width: 100%;
height: 100%;
background: var(--gradient-primary);
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: white;
}
.event-type-badge {
position: absolute;
bottom: 0.75rem;
left: 0.75rem;
color: white;
padding: 0.4rem 0.8rem;
border-radius: var(--radius-full);
font-size: 0.7rem;
font-weight: 600;
}
.event-content {
padding: 1.5rem;
}
.event-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 1rem;
}
.event-title {
font-size: 1.2rem;
font-weight: 600;
color: var(--text-primary);
margin: 0;
flex: 1;
}
.event-time {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--text-secondary);
font-size: 0.8rem;
white-space: nowrap;
margin-left: 1rem;
}
.event-description {
color: var(--text-secondary);
margin-bottom: 1rem;
line-height: 1.5;
font-size: 0.9rem;
}
.event-meta {
margin-bottom: 1rem;
}
.event-meta > div {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
color: var(--text-secondary);
font-size: 0.8rem;
}
.event-meta a {
color: var(--primary);
text-decoration: none;
}
.event-meta a:hover {
text-decoration: underline;
}
.event-stats {
display: flex;
gap: 1rem;
margin-bottom: 1rem;
padding: 0.75rem;
background: var(--bg-glass);
border-radius: var(--radius-md);
}
.stat-item {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.8rem;
color: var(--text-secondary);
}
.event-actions {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
/* Buttons */
.btn {
padding: 0.75rem 1.25rem;
border: none;
border-radius: var(--radius-md);
font-weight: 600;
cursor: pointer;
transition: all var(--transition-normal);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
}
.btn-sm {
padding: 0.5rem 1rem;
font-size: 0.8rem;
}
.btn-primary {
background: var(--gradient-primary);
color: white;
}
.btn-primary:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-glow);
}
.btn-secondary {
background: var(--bg-glass);
color: var(--text-primary);
border: 1px solid var(--border-light);
}
.btn-secondary:hover {
background: var(--primary);
color: white;
transform: translateY(-1px);
}
.btn-outline {
background: transparent;
color: var(--text-secondary);
border: 1px solid var(--border-light);
}
.btn-outline:hover {
color: var(--text-primary);
border-color: var(--primary);
transform: translateY(-1px);
}
/* No Events */
.no-events {
text-align: center;
padding: 4rem 2rem;
background: var(--bg-card);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
}
.no-events-icon {
font-size: 4rem;
color: var(--text-secondary);
margin-bottom: 1.5rem;
}
.no-events h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
color: var(--text-primary);
}
.no-events p {
color: var(--text-secondary);
margin-bottom: 2rem;
}
/* Modal */
.modal {
display: none;
position: fixed;
z-index: 10000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: var(--bg-overlay);
backdrop-filter: blur(10px);
}
.modal-content {
background: var(--bg-secondary);
margin: 5% auto;
padding: 0;
border-radius: var(--radius-lg);
width: 90%;
max-width: 600px;
max-height: 90vh;
overflow-y: auto;
border: 1px solid var(--border-light);
}
.modal-header {
padding: 2rem;
border-bottom: 1px solid var(--border-light);
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-header h2 {
color: var(--text-primary);
margin: 0;
}
.close-btn {
background: none;
border: none;
color: var(--text-secondary);
font-size: 2rem;
cursor: pointer;
padding: 0;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
}
.close-btn:hover {
color: var(--text-primary);
}
/* Form Styles */
.event-form {
padding: 2rem;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
color: var(--text-primary);
font-weight: 600;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 1rem;
background: var(--bg-glass);
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
color: var(--text-primary);
font-size: 1rem;
}
.form-group textarea {
min-height: 100px;
resize: vertical;
}
.fee-option-toggle {
display: flex;
flex-direction: column;
gap: 1rem;
}
.fee-option-radio {
display: flex;
align-items: center;
padding: 1rem;
background: rgba(255, 255, 255, 0.05);
border: 2px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
}
.fee-option-radio:hover {
background: rgba(102, 126, 234, 0.1);
border-color: rgba(102, 126, 234, 0.3);
}
.fee-option-radio input[type="radio"] {
margin-right: 1rem;
width: 20px;
height: 20px;
cursor: pointer;
}
.fee-option-radio input[type="radio"]:checked + .radio-content .radio-title {
color: #667eea;
font-weight: 700;
}
.fee-option-radio input[type="radio"]:checked ~ .radio-content .radio-title {
color: #667eea;
font-weight: 700;
}
.fee-option-radio:has(input[type="radio"]:checked),
.fee-option-radio input[type="radio"]:checked + .radio-content {
background: rgba(102, 126, 234, 0.15);
border-color: #667eea;
}
/* Fallback for browsers that don't support :has() */
.fee-option-radio input[type="radio"]:checked {
accent-color: #667eea;
}
.radio-content {
flex: 1;
display: flex;
flex-direction: column;
}
.radio-title {
font-weight: 600;
color: var(--text-primary);
margin-bottom: 0.25rem;
}
.radio-desc {
font-size: 0.85rem;
color: var(--text-secondary);
}
.fee-preview {
font-size: 0.9rem;
}
.form-actions {
display: flex;
gap: 1rem;
justify-content: flex-end;
margin-top: 2rem;
}
/* Responsive Design */
@media (max-width: 1024px) {
.events-main {
grid-template-columns: 1fr;
gap: 2rem;
}
.events-sidebar {
position: static;
order: 2;
}
.hero-content {
grid-template-columns: 1fr;
text-align: center;
}
.hero-actions {
flex-direction: row;
justify-content: center;
}
}
@media (max-width: 768px) {
.hero-title {
font-size: 2.5rem;
}
.hero-stats {
justify-content: center;
gap: 2rem;
}
.day-events {
grid-template-columns: 1fr;
}
.form-row {
grid-template-columns: 1fr;
}
.event-header {
flex-direction: column;
align-items: flex-start;
}
.event-time {
margin-left: 0;
margin-top: 0.5rem;
}
}
</style>
<script>
// Modal functions
function showCreateEventModal() {
document.getElementById('createEventModal').style.display = 'block';
}
function closeModal(modalId) {
document.getElementById(modalId).style.display = 'none';
}
// Close modal when clicking outside
window.onclick = function(event) {
if (event.target.classList.contains('modal')) {
event.target.style.display = 'none';
}
}
// Event functions
function rsvpEvent(eventId, status) {
if (!<?= $user_id ? 'true' : 'false' ?>) {
if (window.ajaxNavigation) {
window.ajaxNavigation.navigateToPage('/auth/login_new.php');
} else {
window.location.href = '/auth/login_new.php';
}
return;
}
fetch('/api_events.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
action: 'rsvp',
event_id: eventId,
status: status
})
})
.then(response => response.json())
.then(data => {
if (data.success) {
location.reload();
} else {
alert('Error: ' + data.message);
}
})
.catch(error => {
console.error('Error:', error);
alert('An error occurred. Please try again.');
});
}
function likeEvent(eventId) {
if (!<?= $user_id ? 'true' : 'false' ?>) {
if (window.ajaxNavigation) {
window.ajaxNavigation.navigateToPage('/auth/login_new.php');
} else {
window.location.href = '/auth/login_new.php';
}
return;
}
fetch('/api_events.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
action: 'like',
event_id: eventId
})
})
.then(response => response.json())
.then(data => {
if (data.success) {
location.reload();
} else {
alert('Error: ' + data.message);
}
})
.catch(error => {
console.error('Error:', error);
alert('An error occurred. Please try again.');
});
}
function showEventDetails(eventId) {
window.location.href = `/event_details.php?id=${eventId}`;
}
// Create event form
document.getElementById('createEventForm').addEventListener('submit', function(e) {
e.preventDefault();
const formData = new FormData(this);
const data = Object.fromEntries(formData);
fetch('/api_events.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
action: 'create',
...data
})
})
.then(response => response.json())
.then(data => {
if (data.success) {
closeModal('createEventModal');
location.reload();
} else {
alert('Error: ' + data.message);
}
})
.catch(error => {
console.error('Error:', error);
alert('An error occurred. Please try again.');
});
});
// Auto-submit search form
document.querySelector('.search-form input').addEventListener('input', function() {
if (this.value.length > 2 || this.value.length === 0) {
setTimeout(() => {
this.form.submit();
}, 500);
}
});
// Fee payment option toggle
const ticketPriceInput = document.getElementById('ticket_price_input');
const feeOptionGroup = document.getElementById('fee_payment_option_group');
const feePreview = document.getElementById('fee_preview');
if (ticketPriceInput && feeOptionGroup) {
// Show on page load if there's already a value
const initialPrice = parseFloat(ticketPriceInput.value) || 0;
if (initialPrice > 0) {
feeOptionGroup.style.display = 'block';
updateFeePreview(initialPrice);
}
ticketPriceInput.addEventListener('input', function() {
const price = parseFloat(this.value) || 0;
if (price > 0) {
feeOptionGroup.style.display = 'block';
updateFeePreview(price);
} else {
feeOptionGroup.style.display = 'none';
if (feePreview) feePreview.style.display = 'none';
}
});
// Update preview when option changes
document.querySelectorAll('input[name="organizer_absorbs_fees"]').forEach(radio => {
radio.addEventListener('change', function() {
const price = parseFloat(ticketPriceInput.value) || 0;
if (price > 0) {
updateFeePreview(price);
}
});
});
}
function updateFeePreview(ticketPrice) {
if (!feePreview) return;
const checkedRadio = document.querySelector('input[name="organizer_absorbs_fees"]:checked');
if (!checkedRadio) return;
const organizerAbsorbs = checkedRadio.value === '1';
// Calculate fees (simplified - using Pro plan as example)
const serviceFeePercent = 2.0;
const fixedFee = 0.99;
const processingPercent = 2.9;
const serviceFee = (ticketPrice * (serviceFeePercent / 100)) + fixedFee;
const processingFee = ticketPrice * (processingPercent / 100);
const totalFees = serviceFee + processingFee;
let attendeePays, organizerReceives;
if (organizerAbsorbs) {
attendeePays = ticketPrice;
organizerReceives = Math.max(0, ticketPrice - totalFees); // Ensure non-negative
} else {
attendeePays = ticketPrice + totalFees;
organizerReceives = ticketPrice;
}
feePreview.style.display = 'block';
const previewContent = feePreview.querySelector('.fee-preview-content');
if (previewContent) {
previewContent.innerHTML = `
<div style="font-size: 0.9rem; color: #a0aec0; margin-bottom: 0.5rem; font-weight: 600;">💰 Fee Preview:</div>
<div style="display: flex; justify-content: space-between; margin-bottom: 0.25rem; font-size: 0.9rem;">
<span>Attendee pays:</span>
<strong style="color: #667eea;">$${attendeePays.toFixed(2)}</strong>
</div>
<div style="display: flex; justify-content: space-between; color: #48bb78; font-size: 0.9rem;">
<span>You receive:</span>
<strong>$${organizerReceives.toFixed(2)}</strong>
</div>
`;
}
}
</script>
<?php include 'includes/footer.php'; ?>