File: //home/workzeni/stream-flix.workzenix.com/resources/views/admin/pages/movie/index.blade.php
@extends('admin.index')
@section('title', 'Movie')
@section('style')
<style>
.badge {
font-weight: 500;
padding: 4px 8px;
border-radius: 4px;
}
.bg-warning {
--bs-bg-opacity: 1;
background-color: rgb(246 186 4) !important;
}
</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;">Movies Library</h2>
<p style="color: var(--text-muted); margin: 0;">Manage your movie collection</p>
</div>
<div class="d-flex gap-md">
<button class="btn btn-outline">
<i class="fas fa-download"></i>
Export
</button>
<a class="btn btn-primary" href="{{ route('movie.create') }}">
<i class="fas fa-plus"></i>
Add Movie
</a>
</div>
</div>
<!-- Filters & Stats -->
<div class="card mb-xl">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center mb-lg">
<div class="d-flex gap-md align-items-center">
<div class="form-group mb-0">
<select class="form-control" style="width: 150px;">
<option>All Categories</option>
<option>Action</option>
<option>Drama</option>
<option>Comedy</option>
<option>Thriller</option>
<option>Sci-Fi</option>
</select>
</div>
<div class="form-group mb-0">
<select class="form-control" style="width: 120px;">
<option>All Status</option>
<option>Active</option>
<option>Inactive</option>
<option>Draft</option>
</select>
</div>
<div class="form-group mb-0">
<input type="text" class="form-control table-search" placeholder="Search movies..."
style="width: 250px;">
</div>
</div>
<div class="d-flex gap-md align-items-center">
<span style="color: var(--text-muted); font-size: 0.9rem;">245 movies total</span>
<div class="form-group mb-0">
<select class="form-control" style="width: 100px;">
<option>10</option>
<option>25</option>
<option>50</option>
<option>100</option>
</select>
</div>
</div>
</div>
<!-- Quick Stats -->
<div
style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--spacing-lg);">
<div class="text-center">
<div style="font-size: 1.5rem; font-weight: 600; color: var(--accent-secondary);">245</div>
<div style="font-size: 0.8rem; color: var(--text-muted);">Total Movies</div>
</div>
<div class="text-center">
<div style="font-size: 1.5rem; font-weight: 600; color: #10b981;">198</div>
<div style="font-size: 0.8rem; color: var(--text-muted);">Active</div>
</div>
<div class="text-center">
<div style="font-size: 1.5rem; font-weight: 600; color: #f59e0b;">32</div>
<div style="font-size: 0.8rem; color: var(--text-muted);">Inactive</div>
</div>
<div class="text-center">
<div style="font-size: 1.5rem; font-weight: 600; color: var(--accent-primary);">15</div>
<div style="font-size: 0.8rem; color: var(--text-muted);">Draft</div>
</div>
</div>
</div>
</div>
<!-- Movies Table -->
<div class="table-container">
<table class="table" data-table="movie" data-per-page="10">
<thead>
<tr>
<th data-sort="poster">Thumbnail</th>
<th data-sort="title">Title</th>
<th data-sort="genre">Genre</th>
<th data-sort="year">Year</th>
<th data-sort="duration">Duration</th>
<th data-sort="rating">Rating</th>
<th data-sort="views">Views</th>
<th data-sort="status">Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
@php
function formatDuration($minutes)
{
if (!$minutes) {
return '';
}
if (!is_numeric($minutes)) {
return $minutes;
}
$h = floor($minutes / 60);
$m = $minutes % 60;
return "{$h}h {$m}m";
}
function formatViews($views)
{
if (!is_numeric($views)) {
return $views;
}
if ($views >= 1_000_000_000) {
return round($views / 1_000_000_000, 1) . 'B';
} elseif ($views >= 1_000_000) {
return round($views / 1_000_000, 1) . 'M';
} elseif ($views >= 1_000) {
return round($views / 1_000, 1) . 'K';
} else {
return $views;
}
}
@endphp
@foreach ($movies as $movie)
<tr>
<td>
<img src="{{ asset('uploads/thumbnail/' . $movie->thumbnail_image) }}"
alt="{{ $movie->name }}"
style="width: 40px; height: 60px; object-fit: cover; border-radius: 4px;">
</td>
<td>
<div style="font-weight: 500; color: var(--text-primary);">{{ $movie->name }}</div>
<div style="font-size: 0.8rem; color: var(--text-muted);">{{ $movie->language->name }}</div>
</td>
<td>{{ $movie->category->name }}</td>
<td>{{ $movie->year }}</td>
<td>{{ formatDuration($movie->duration) }}</td>
<td>
<span class="badge bg-warning text-dark me-2">{{ $movie->rating }} IMDb</span>
</td>
<td>{{ formatViews($movie->views) }}</td>
<td>
<span class="badge {{ $movie->status == 'active' ? 'badge-success' : 'badge-warning' }}">
{{ ucfirst($movie->status) }}
</span>
</td>
<td>
<div class="d-flex gap-sm">
<a class="btn btn-sm btn-outline" style="background: white; color: black;" href="{{ route('movie.edit', $movie->id) }}">
<i class="fas fa-edit"></i>
</a>
<button class="btn btn-sm btn-outline" data-tooltip="View"
onclick="viewMovie({{ $movie->id }})">
<i class="fas fa-eye"></i>
</button>
<button class="btn btn-sm btn-outline" data-tooltip="Delete"
onclick="deleteMovie({{ $movie->id }})">
<i class="fas fa-trash"></i>
</button>
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
<!-- Pagination -->
<div class="pagination-container"></div>
</div>
</div>
<!-- Add Movie Modal -->
<div class="modal-overlay" id="addMovieModal">
<div class="modal" style="max-width: 600px;">
<div class="modal-header">
<h3 class="modal-title">Add New Movie</h3>
<button class="modal-close">
<i class="fas fa-times"></i>
</button>
</div>
<div class="modal-body">
<form data-form="add-movie">
{{-- <div style="display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-lg);"> --}}
<div class="form-group">
<label class="form-label">Movie Title *</label>
<input type="text" class="form-control" name="title" placeholder="Enter movie title" required>
</div>
{{-- <div class="form-group">
<label class="form-label">Director</label>
<input type="text" class="form-control" name="director"
placeholder="Enter director name">
</div>
</div> --}}
<div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--spacing-lg);">
<div class="form-group">
<label class="form-label">Release Year *</label>
<input type="number" class="form-control" name="year" placeholder="2024" min="1900"
max="2030" required>
</div>
<div class="form-group">
<label class="form-label">Duration (minutes)</label>
<input type="number" class="form-control" name="duration" placeholder="120"
min="1">
</div>
<div class="form-group">
<label class="form-label">Rating</label>
<input type="number" class="form-control" name="rating" placeholder="8.5" min="0"
max="10" step="0.1">
</div>
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-lg);">
<div class="form-group">
<label class="form-label">Genre *</label>
<select class="form-control" name="category_id" required>
<option value="">Select Genre</option>
add category loop send category_id
</select>
</div>
<div class="form-group">
<label class="form-label">Language *</label>
<select class="form-control" name="language_id" required>
<option value="">Select Language</option>
add language loop send language_id
</select>
</div>
</div>
<div class="form-group">
<label class="form-label">Description</label>
<textarea class="form-control form-textarea" name="description" placeholder="Enter movie description"
rows="4"></textarea>
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
<div class="form-group">
<label class="form-label">Thumbnail Image</label>
<input type="file" class="form-control file-upload" data-type="image"
name="thumbnail_image">
<div class="preview-container mt-2"></div>
</div>
<div class="form-group">
<label class="form-label">Video File</label>
<input type="file" class="form-control file-upload" data-type="video" name="movie_url">
<div class="preview-container mt-2"></div>
</div>
</div>
<div class="form-group">
<label class="form-label">Status</label>
<select class="form-control" name="status">
<option value="active">Active</option>
<option value="inactive">Inactive</option>
<option value="draft">Draft</option>
</select>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline modal-close">Cancel</button>
<button type="submit" class="btn btn-primary" form="addMovieForm">
<i class="fas fa-save"></i>
Save Movie
</button>
</div>
</div>
</div>
<!-- Edit Movie Modal -->
<div class="modal-overlay" id="editMovieModal">
<div class="modal" style="max-width: 600px;">
<div class="modal-header">
<h3 class="modal-title">Edit Movie</h3>
<button class="modal-close">
<i class="fas fa-times"></i>
</button>
</div>
<div class="modal-body">
<form data-form="edit-movie">
<input type="hidden" name="id">
{{-- <div style="display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-lg);"> --}}
<div class="form-group">
<label class="form-label">Movie Title *</label>
<input type="text" class="form-control" name="title" placeholder="Enter movie title"
required>
</div>
{{-- </div> --}}
<div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--spacing-lg);">
<div class="form-group">
<label class="form-label">Release Year *</label>
<input type="number" class="form-control" name="year" placeholder="2024" min="1900"
max="2030" required>
</div>
<div class="form-group">
<label class="form-label">Duration (minutes)</label>
<input type="number" class="form-control" name="duration" placeholder="120"
min="1">
</div>
<div class="form-group">
<label class="form-label">Rating</label>
<input type="number" class="form-control" name="rating" placeholder="8.5" min="0"
max="10" step="0.1">
</div>
</div>
<select class="form-control" name="category_id" required>
<option value="">Select Genre</option>
@foreach ($categories as $category)
<option value="{{ $category->id }}">{{ $category->name }}</option>
@endforeach
</select>
<select class="form-control" name="language_id" required>
<option value="">Select Language</option>
@foreach ($languages as $language)
<option value="{{ $language->id }}">{{ $language->name }}</option>
@endforeach
</select>
<div class="form-group">
<label class="form-label">Description</label>
<textarea class="form-control form-textarea" name="description" placeholder="Enter movie description"
rows="4"></textarea>
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
<div class="form-group">
<label class="form-label">Thumbnail Image</label>
<input type="file" class="form-control file-upload" data-type="image"
name="thumbnail_image">
<div class="preview-container mt-2"></div>
</div>
<div class="form-group">
<label class="form-label">Video File</label>
<input type="file" class="form-control file-upload" data-type="video" name="movie_url">
<div class="preview-container mt-2"></div>
</div>
</div>
<div class="form-group">
<label class="form-label">Status</label>
<select class="form-control" name="status">
<option value="active">Active</option>
<option value="inactive">Inactive</option>
<option value="draft">Draft</option>
</select>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline modal-close">Cancel</button>
<button type="submit" class="btn btn-primary" form="editMovieForm">
<i class="fas fa-save"></i>
Update Movie
</button>
</div>
</div>
</div>
<!-- Movies Page Specific JavaScript -->
@endsection