@extends('layouts.app')

@section('title', 'Media Management')

@section('nav-items')
    <li><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
    <li><a href="{{ route('admin.users.index') }}">Users</a></li>
    <li><a href="{{ route('admin.divisions.index') }}">Divisions</a></li>
    <li><a href="{{ route('admin.logos.index') }}">Logos</a></li>
    <li><a href="{{ route('admin.company-profiles.index') }}">Company Profile</a></li>
    <li><a href="{{ route('admin.customer-download-requests.index') }}">Download Requests</a></li>
    <li><a href="{{ route('admin.marketing-requests.index') }}">Marketing Requests</a></li>
    <li><a href="{{ route('admin.media.index') }}" style="color: var(--primary);">Media</a></li>
@endsection

@section('styles')
<style>
    .filters {
        background: white;
        padding: 1.5rem;
        border-radius: 12px;
        margin-bottom: 1.5rem;
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
        align-items: end;
    }

    .filter-group {
        flex: 1;
        min-width: 150px;
    }

    .filter-group label {
        display: block;
        font-size: 0.875rem;
        font-weight: 500;
        margin-bottom: 0.5rem;
        color: var(--gray-700);
    }

    .filter-group select {
        width: 100%;
        padding: 0.625rem 0.875rem;
        border: 1px solid var(--gray-300);
        border-radius: 8px;
        font-size: 0.875rem;
    }

    .media-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 1.5rem;
    }

    .media-card {
        background: white;
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid var(--gray-200);
        transition: all 0.2s;
    }

    .media-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    .media-preview {
        width: 100%;
        height: 200px;
        background: var(--gray-100);
        position: relative;
        overflow: hidden;
    }

    .media-preview img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .media-preview video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .media-icon {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--gray-400);
    }

    .media-badge {
        position: absolute;
        top: 0.75rem;
        right: 0.75rem;
        padding: 0.25rem 0.75rem;
        border-radius: 6px;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        background: rgba(0,0,0,0.7);
        color: white;
    }

    .media-content {
        padding: 1.25rem;
    }

    .media-title {
        font-size: 1rem;
        font-weight: 600;
        color: var(--gray-900);
        margin-bottom: 0.5rem;
    }

    .media-description {
        font-size: 0.875rem;
        color: var(--gray-600);
        line-height: 1.5;
        margin-bottom: 0.75rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .media-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-bottom: 0.75rem;
        font-size: 0.75rem;
        color: var(--gray-500);
    }

    .media-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-bottom: 0.75rem;
    }

    .tag {
        padding: 0.25rem 0.5rem;
        background: rgba(227, 27, 35, 0.1);
        color: var(--primary);
        border-radius: 4px;
        font-size: 0.75rem;
        font-weight: 500;
    }

    .media-user {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 1rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid var(--gray-200);
    }

    .user-avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--primary);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 0.75rem;
    }

    .user-info {
        flex: 1;
    }

    .user-name {
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--gray-900);
    }

    .user-date {
        font-size: 0.75rem;
        color: var(--gray-500);
    }

    .media-actions {
        display: flex;
        gap: 0.5rem;
    }

    .btn-sm {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
        border-radius: 6px;
        border: none;
        cursor: pointer;
        font-weight: 500;
        transition: all 0.2s;
        text-decoration: none;
        display: inline-block;
        flex: 1;
        text-align: center;
    }

    .btn-success {
        background: var(--success);
        color: white;
    }

    .btn-success:hover {
        background: #047857;
    }

    .btn-danger {
        background: var(--error);
        color: white;
    }

    .btn-danger:hover {
        background: #b91c1c;
    }

    .btn-secondary {
        background: var(--gray-100);
        color: var(--gray-700);
    }

    .btn-secondary:hover {
        background: var(--gray-200);
    }

    .status-badge {
        padding: 0.25rem 0.75rem;
        border-radius: 6px;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        display: inline-block;
        margin-bottom: 0.5rem;
    }

    .status-pending {
        background: rgba(245, 158, 11, 0.1);
        color: var(--warning);
    }

    .status-approved {
        background: rgba(5, 150, 105, 0.1);
        color: var(--success);
    }

    .empty-state {
        text-align: center;
        padding: 4rem 2rem;
        color: var(--gray-500);
        background: white;
        border-radius: 12px;
    }

    @media (max-width: 768px) {
        .media-grid {
            grid-template-columns: 1fr;
        }
    }
</style>
@endsection

@section('content')
<h1 style="font-size: 2rem; font-weight: 700; margin-bottom: 2rem; color: var(--gray-900);">
    Media Management
</h1>

<!-- Filters -->
<form method="GET" class="filters">
    <div class="filter-group">
        <label for="status">Status</label>
        <select name="status" id="status" onchange="this.form.submit()">
            <option value="">All Status</option>
            <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Pending</option>
            <option value="approved" {{ request('status') == 'approved' ? 'selected' : '' }}>Approved</option>
        </select>
    </div>

    <div class="filter-group">
        <label for="type">Type</label>
        <select name="type" id="type" onchange="this.form.submit()">
            <option value="">All Types</option>
            <option value="photo" {{ request('type') == 'photo' ? 'selected' : '' }}>Photos</option>
            <option value="video" {{ request('type') == 'video' ? 'selected' : '' }}>Videos</option>
        </select>
    </div>

    @if(request()->hasAny(['status', 'type']))
        <div class="filter-group">
            <a href="{{ route('admin.media.index') }}" class="btn btn-secondary" style="width: 100%; text-align: center;">
                Clear Filters
            </a>
        </div>
    @endif
</form>

<!-- Media Grid -->
@if($media->count() > 0)
    <div class="media-grid">
        @foreach($media as $item)
            <div class="media-card">
                <!-- Media Preview -->
                <div class="media-preview">
                    @if($item->file_path)
                        @if($item->isPhoto())
                            <img src="{{ asset('storage/' . $item->file_path) }}" alt="{{ $item->title }}">
                        @elseif($item->isVideo())
                            <video src="{{ asset('storage/' . $item->file_path) }}" controls></video>
                        @endif
                    @else
                        <div class="media-icon">
                            <svg style="width: 64px; height: 64px;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                            </svg>
                        </div>
                    @endif
                    <span class="media-badge">{{ ucfirst($item->file_type) }}</span>
                </div>

                <!-- Media Content -->
                <div class="media-content">
                    <div class="status-badge status-{{ $item->is_approved ? 'approved' : 'pending' }}">
                        {{ $item->is_approved ? 'Approved' : 'Pending' }}
                    </div>

                    <div class="media-title">{{ $item->title }}</div>

                    @if($item->description)
                        <div class="media-description">{{ $item->description }}</div>
                    @endif

                    <div class="media-meta">
                        @if($item->event_date)
                            <span>📅 {{ $item->event_date->format('M d, Y') }}</span>
                        @endif
                        <span>📦 {{ number_format($item->file_size / 1024, 1) }} KB</span>
                    </div>

                    @if($item->tags && count($item->tags) > 0)
                        <div class="media-tags">
                            @foreach($item->tags as $tag)
                                <span class="tag">{{ $tag }}</span>
                            @endforeach
                        </div>
                    @endif

                    <div class="media-user">
                        <div class="user-avatar">{{ strtoupper(substr($item->user->name, 0, 1)) }}</div>
                        <div class="user-info">
                            <div class="user-name">{{ $item->user->name }}</div>
                            <div class="user-date">{{ $item->created_at->diffForHumans() }}</div>
                        </div>
                    </div>

                    <div class="media-actions">
                        @if(!$item->is_approved)
                            <form method="POST" action="{{ route('admin.media.approve', $item) }}" style="flex: 1;">
                                @csrf
                                <button type="submit" class="btn-sm btn-success">
                                    Approve
                                </button>
                            </form>
                            <form method="POST" action="{{ route('admin.media.reject', $item) }}" style="flex: 1;" onsubmit="return confirm('Are you sure you want to reject and delete this media?');">
                                @csrf
                                <button type="submit" class="btn-sm btn-danger">
                                    Reject
                                </button>
                            </form>
                        @else
                            <a href="{{ asset('storage/' . $item->file_path) }}" target="_blank" class="btn-sm btn-secondary" style="flex: 1;">
                                View
                            </a>
                            <form method="POST" action="{{ route('admin.media.destroy', $item) }}" style="flex: 1;" onsubmit="return confirm('Are you sure you want to delete this media?');">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn-sm btn-danger">
                                    Delete
                                </button>
                            </form>
                        @endif
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    <!-- Pagination -->
    @if($media->hasPages())
        <div style="margin-top: 2rem; display: flex; justify-content: center;">
            {{ $media->links() }}
        </div>
    @endif
@else
    <div class="empty-state">
        <svg style="width: 64px; height: 64px; margin: 0 auto 1rem; color: var(--gray-400);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
        </svg>
        <h3 style="font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--gray-700);">No media found</h3>
        <p>No media items match your current filters.</p>
    </div>
@endif
@endsection