File: /home/workzeni/stream-flix.workzenix.com/resources/views/admin/pages/mv-request/index.blade.php
@extends('admin.index')
@section('title','Movie Request')
@section('style')
<!-- Requests Page Specific Styles -->
<style>
.requests-container {
display: flex;
flex-direction: column;
gap: var(--spacing-lg);
}
.request-item {
background: var(--glass-bg);
backdrop-filter: blur(20px);
border: 1px solid var(--glass-border);
border-radius: var(--border-radius-lg);
padding: var(--spacing-lg);
transition: var(--transition-fast);
}
.request-item:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.request-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--spacing-lg);
}
.request-user {
display: flex;
align-items: center;
gap: var(--spacing-md);
}
.user-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--gradient-primary);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 600;
font-size: 1.1rem;
}
.user-info {
display: flex;
flex-direction: column;
}
.user-name {
font-weight: 500;
color: var(--text-primary);
font-size: 1rem;
}
.user-contact {
font-size: 0.85rem;
color: var(--text-muted);
}
.request-meta {
display: flex;
align-items: center;
gap: var(--spacing-md);
}
.request-date {
font-size: 0.85rem;
color: var(--text-muted);
}
.request-content {
margin-bottom: var(--spacing-lg);
}
.movie-request {
background: rgba(255, 255, 255, 0.02);
border-radius: var(--border-radius-md);
padding: var(--spacing-lg);
}
.movie-title {
font-size: 1.2rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: var(--spacing-md);
}
.movie-details {
display: flex;
gap: var(--spacing-lg);
margin-bottom: var(--spacing-md);
}
.detail-item {
display: flex;
align-items: center;
gap: var(--spacing-sm);
font-size: 0.9rem;
color: var(--text-secondary);
}
.detail-item i {
color: var(--accent-secondary);
font-size: 0.8rem;
}
.movie-notes {
font-size: 0.9rem;
color: var(--text-secondary);
line-height: 1.5;
}
.movie-notes strong {
color: var(--text-primary);
}
.rejection-reason {
margin-top: var(--spacing-md);
padding: var(--spacing-md);
background: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.2);
border-radius: var(--border-radius-sm);
font-size: 0.9rem;
color: #ef4444;
}
.rejection-reason strong {
color: #ef4444;
}
.request-actions {
display: flex;
gap: var(--spacing-md);
justify-content: flex-end;
}
@media (max-width: 768px) {
.request-header {
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-md);
}
.request-meta {
align-self: flex-end;
}
.movie-details {
flex-direction: column;
gap: var(--spacing-sm);
}
.request-actions {
justify-content: flex-start;
flex-wrap: wrap;
}
}
</style>
@endsection
@section('content')
<div class="content-area">
<!-- Page Actions -->
<div class="d-flex justify-content-between align-items-center mb-xl">
<div>
<h2 style="color: var(--text-primary); margin: 0;">User Movie Requests</h2>
<p style="color: var(--text-muted); margin: 0;">Review and manage movie requests from users</p>
</div>
<div class="d-flex gap-md">
<button class="btn btn-outline" onclick="markAllAsRead()">
<i class="fas fa-check-double"></i>
Mark All Read
</button>
<button class="btn btn-accent" onclick="exportRequests()">
<i class="fas fa-download"></i>
Export
</button>
</div>
</div>
<!-- Request Stats -->
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--spacing-lg); margin-bottom: var(--spacing-xl);">
<div class="stat-card">
<div class="stat-header">
<div class="stat-icon" style="background: var(--gradient-primary);">
<i class="fas fa-inbox"></i>
</div>
<div class="stat-trend up">
<i class="fas fa-arrow-up"></i>
23%
</div>
</div>
<div class="stat-value">127</div>
<div class="stat-label">Total Requests</div>
<div class="stat-description">All time requests</div>
</div>
<div class="stat-card">
<div class="stat-header">
<div class="stat-icon" style="background: var(--gradient-accent);">
<i class="fas fa-clock"></i>
</div>
<div class="stat-trend up">
<i class="fas fa-arrow-up"></i>
12%
</div>
</div>
<div class="stat-value">24</div>
<div class="stat-label">Pending</div>
<div class="stat-description">Awaiting review</div>
</div>
<div class="stat-card">
<div class="stat-header">
<div class="stat-icon" style="background: var(--gradient-success);">
<i class="fas fa-check-circle"></i>
</div>
<div class="stat-trend up">
<i class="fas fa-arrow-up"></i>
18%
</div>
</div>
<div class="stat-value">89</div>
<div class="stat-label">Approved</div>
<div class="stat-description">Movies added</div>
</div>
<div class="stat-card">
<div class="stat-header">
<div class="stat-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
<i class="fas fa-times-circle"></i>
</div>
<div class="stat-trend down">
<i class="fas fa-arrow-down"></i>
5%
</div>
</div>
<div class="stat-value">14</div>
<div class="stat-label">Rejected</div>
<div class="stat-description">Not available</div>
</div>
</div>
<!-- Filters -->
<div class="card mb-xl">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center">
<div class="d-flex gap-md align-items-center">
<div class="form-group mb-0">
<select class="form-control" style="width: 120px;">
<option>All Status</option>
<option>Pending</option>
<option>Approved</option>
<option>Rejected</option>
</select>
</div>
<div class="form-group mb-0">
<select class="form-control" style="width: 150px;">
<option>All Languages</option>
<option>English</option>
<option>Hindi</option>
<option>Spanish</option>
<option>French</option>
</select>
</div>
<div class="form-group mb-0">
<input type="text" class="form-control table-search" placeholder="Search requests..." style="width: 250px;">
</div>
</div>
<div class="d-flex gap-md align-items-center">
<span style="color: var(--text-muted); font-size: 0.9rem;">127 requests total</span>
</div>
</div>
</div>
</div>
<!-- Requests List -->
<div class="requests-container">
<!-- Request Item -->
<div class="request-item">
<div class="request-header">
<div class="request-user">
<div class="user-avatar">SJ</div>
<div class="user-info">
<div class="user-name">Sarah Johnson</div>
<div class="user-contact">sarah.johnson@email.com • +1234567890</div>
</div>
</div>
<div class="request-meta">
<span class="request-date">2 hours ago</span>
<span class="badge badge-warning">Pending</span>
</div>
</div>
<div class="request-content">
<div class="movie-request">
<h4 class="movie-title">Spider-Man: Across the Spider-Verse</h4>
<div class="movie-details">
<span class="detail-item">
<i class="fas fa-language"></i>
English
</span>
<span class="detail-item">
<i class="fas fa-calendar"></i>
Requested today
</span>
</div>
<div class="movie-notes">
<strong>Additional Notes:</strong> Looking for the latest Spider-Man animated movie. Heard it's amazing!
</div>
</div>
</div>
<div class="request-actions">
<button class="btn btn-sm btn-success" onclick="approveRequest(1)">
<i class="fas fa-check"></i>
Approve
</button>
<button class="btn btn-sm btn-outline" onclick="rejectRequest(1)">
<i class="fas fa-times"></i>
Reject
</button>
<button class="btn btn-sm btn-ghost" onclick="contactUser(1)">
<i class="fas fa-envelope"></i>
Contact
</button>
</div>
</div>
<!-- Request Item -->
<div class="request-item">
<div class="request-header">
<div class="request-user">
<div class="user-avatar" style="background: var(--gradient-accent);">MC</div>
<div class="user-info">
<div class="user-name">Mike Chen</div>
<div class="user-contact">mike.chen@email.com • +1234567891</div>
</div>
</div>
<div class="request-meta">
<span class="request-date">5 hours ago</span>
<span class="badge badge-success">Approved</span>
</div>
</div>
<div class="request-content">
<div class="movie-request">
<h4 class="movie-title">Oppenheimer</h4>
<div class="movie-details">
<span class="detail-item">
<i class="fas fa-language"></i>
English
</span>
<span class="detail-item">
<i class="fas fa-calendar"></i>
Requested yesterday
</span>
</div>
<div class="movie-notes">
<strong>Additional Notes:</strong> Christopher Nolan's latest biographical thriller about J. Robert Oppenheimer.
</div>
</div>
</div>
<div class="request-actions">
<button class="btn btn-sm btn-ghost" disabled>
<i class="fas fa-check"></i>
Approved
</button>
<button class="btn btn-sm btn-ghost" onclick="viewMovie(8)">
<i class="fas fa-eye"></i>
View Movie
</button>
</div>
</div>
<!-- Request Item -->
<div class="request-item">
<div class="request-header">
<div class="request-user">
<div class="user-avatar" style="background: var(--gradient-success);">AL</div>
<div class="user-info">
<div class="user-name">Alex Lee</div>
<div class="user-contact">alex.lee@email.com • +1234567892</div>
</div>
</div>
<div class="request-meta">
<span class="request-date">1 day ago</span>
<span class="badge badge-warning">Pending</span>
</div>
</div>
<div class="request-content">
<div class="movie-request">
<h4 class="movie-title">John Wick: Chapter 4</h4>
<div class="movie-details">
<span class="detail-item">
<i class="fas fa-language"></i>
Hindi
</span>
<span class="detail-item">
<i class="fas fa-calendar"></i>
Requested 1 day ago
</span>
</div>
<div class="movie-notes">
<strong>Additional Notes:</strong> Would love to watch the latest John Wick movie with Hindi dubbing.
</div>
</div>
</div>
<div class="request-actions">
<button class="btn btn-sm btn-success" onclick="approveRequest(3)">
<i class="fas fa-check"></i>
Approve
</button>
<button class="btn btn-sm btn-outline" onclick="rejectRequest(3)">
<i class="fas fa-times"></i>
Reject
</button>
<button class="btn btn-sm btn-ghost" onclick="contactUser(3)">
<i class="fas fa-envelope"></i>
Contact
</button>
</div>
</div>
<!-- Request Item -->
<div class="request-item">
<div class="request-header">
<div class="request-user">
<div class="user-avatar" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">EM</div>
<div class="user-info">
<div class="user-name">Emma Martinez</div>
<div class="user-contact">emma.martinez@email.com • +1234567893</div>
</div>
</div>
<div class="request-meta">
<span class="request-date">2 days ago</span>
<span class="badge badge-danger">Rejected</span>
</div>
</div>
<div class="request-content">
<div class="movie-request">
<h4 class="movie-title">Avatar: The Way of Water</h4>
<div class="movie-details">
<span class="detail-item">
<i class="fas fa-language"></i>
Spanish
</span>
<span class="detail-item">
<i class="fas fa-calendar"></i>
Requested 2 days ago
</span>
</div>
<div class="movie-notes">
<strong>Additional Notes:</strong> James Cameron's sequel to Avatar. Would prefer Spanish dubbing.
</div>
<div class="rejection-reason">
<strong>Rejection Reason:</strong> Licensing restrictions prevent us from adding this title at the moment.
</div>
</div>
</div>
<div class="request-actions">
<button class="btn btn-sm btn-ghost" disabled>
<i class="fas fa-times"></i>
Rejected
</button>
<button class="btn btn-sm btn-ghost" onclick="contactUser(4)">
<i class="fas fa-envelope"></i>
Contact
</button>
</div>
</div>
</div>
<!-- Load More -->
<div class="text-center mt-xl">
<button class="btn btn-outline" onclick="loadMoreRequests()">
<i class="fas fa-plus"></i>
Load More Requests
</button>
</div>
</div>
<!-- Requests Page Specific JavaScript -->
<script>
// Request management functions
function approveRequest(id) {
if (confirm('Are you sure you want to approve this movie request?')) {
// Simulate API call
setTimeout(() => {
window.adminPanel.showNotification('Movie request approved successfully!', 'success');
// Update UI
updateRequestStatus(id, 'approved');
}, 500);
}
}
function rejectRequest(id) {
const reason = prompt('Please provide a reason for rejection:');
if (reason) {
// Simulate API call
setTimeout(() => {
window.adminPanel.showNotification('Movie request rejected', 'success');
// Update UI
updateRequestStatus(id, 'rejected', reason);
}, 500);
}
}
function contactUser(id) {
// Open email client or show contact modal
window.adminPanel.showNotification('Opening email client...', 'info');
}
function updateRequestStatus(id, status, reason = '') {
// Update the request item UI
const requestItem = document.querySelector(`[data-request-id="${id}"]`);
if (requestItem) {
const badge = requestItem.querySelector('.badge');
const actions = requestItem.querySelector('.request-actions');
// Update badge
badge.className = `badge badge-${status === 'approved' ? 'success' : 'danger'}`;
badge.textContent = status.charAt(0).toUpperCase() + status.slice(1);
// Update actions
if (status === 'approved') {
actions.innerHTML = `
<button class="btn btn-sm btn-ghost" disabled>
<i class="fas fa-check"></i>
Approved
</button>
<button class="btn btn-sm btn-ghost" onclick="viewMovie(${id})">
<i class="fas fa-eye"></i>
View Movie
</button>
`;
} else if (status === 'rejected') {
actions.innerHTML = `
<button class="btn btn-sm btn-ghost" disabled>
<i class="fas fa-times"></i>
Rejected
</button>
<button class="btn btn-sm btn-ghost" onclick="contactUser(${id})">
<i class="fas fa-envelope"></i>
Contact
</button>
`;
// Add rejection reason
if (reason) {
const movieRequest = requestItem.querySelector('.movie-request');
const rejectionDiv = document.createElement('div');
rejectionDiv.className = 'rejection-reason';
rejectionDiv.innerHTML = `<strong>Rejection Reason:</strong> ${reason}`;
movieRequest.appendChild(rejectionDiv);
}
}
}
}
function markAllAsRead() {
if (confirm('Mark all requests as read?')) {
window.adminPanel.showNotification('All requests marked as read', 'success');
}
}
function exportRequests() {
window.adminPanel.showNotification('Exporting requests...', 'info');
// Simulate export
setTimeout(() => {
window.adminPanel.showNotification('Requests exported successfully!', 'success');
}, 2000);
}
function loadMoreRequests() {
window.adminPanel.showNotification('Loading more requests...', 'info');
// Simulate loading
setTimeout(() => {
window.adminPanel.showNotification('No more requests to load', 'info');
}, 1000);
}
function viewMovie(id) {
window.adminPanel.showNotification(`Opening movie details for ID: ${id}`, 'info');
}
</script>
@endsection