@extends('layouts.promoter')

@section('page-title', 'Live Sessions')

@section('content')
<div class="flex justify-between items-center mb-8">
    <h2 class="text-2xl font-bold">Live Sessions</h2>
    <button onclick="document.getElementById('create-session-modal').classList.remove('hidden')" class="royal-btn px-4 py-2 text-sm">Start New Session</button>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    @forelse($sessions as $session)
        <div class="royal-card overflow-hidden">
            <div class="relative">
                @if($session->product && $session->product->primaryImage)
                    <img src="{{ asset('storage/' . $session->product->primaryImage->path) }}" alt="{{ $session->product->name }}" class="w-full h-48 object-cover">
                @else
                    <div class="w-full h-48 bg-gradient-to-br from-purple-500 to-purple-700 flex items-center justify-center">
                        <svg class="w-16 h-16 text-white opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>
                    </div>
                @endif
                <span class="absolute top-3 right-3 px-2 py-1 rounded-full text-xs font-semibold
                    @if($session->status === 'active') bg-red-600 text-white
                    @elseif($session->status === 'scheduled') bg-blue-600 text-white
                    @else bg-gray-600 text-white @endif">{{ ucfirst($session->status) }}</span>
            </div>
            <div class="p-4">
                <h3 class="font-semibold mb-2">{{ $session->title }}</h3>
                @if($session->product)
                    <p class="text-sm text-gray-500 mb-2">{{ $session->product->name }}</p>
                @endif
                <div class="flex justify-between text-sm text-gray-500 mb-3">
                    <span>Viewers: {{ $session->viewers_count }}</span>
                    <span>Sales: {{ $session->sales_count }}</span>
                </div>
                @if($session->status === 'scheduled' && $session->scheduled_at)
                    <p class="text-xs text-gray-400 mb-3">{{ $session->scheduled_at->format('M d, Y H:i') }}</p>
                @elseif($session->status === 'completed' && $session->duration)
                    <p class="text-xs text-gray-400 mb-3">Duration: {{ $session->duration }} min</p>
                @endif
                @if($session->status === 'active' && $session->daily_room_url)
                    <div class="flex items-center gap-2 mb-3 px-3 py-2 bg-red-50 rounded-lg border border-red-100">
                        <span class="w-2 h-2 bg-red-600 rounded-full animate-pulse"></span>
                        <span class="text-xs text-red-700 font-medium">Live video active</span>
                    </div>
                @endif
                <a href="{{ route('promoter.sessions.show', $session) }}" class="royal-btn w-full text-center text-sm">{{ $session->status === 'active' ? 'Join Session' : 'View Session' }}</a>
            </div>
        </div>
    @empty
        <div class="col-span-full text-center py-12 text-gray-500">
            <p class="text-xl mb-2">No live sessions yet</p>
            <p>Start your first live selling session to engage with customers!</p>
        </div>
    @endforelse
</div>

@if($sessions->hasPages())
    <div class="mt-8">{{ $sessions->links() }}</div>
@endif

{{-- Create Session Modal --}}
<div id="create-session-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
    <div class="royal-card p-6 max-w-lg w-full mx-4">
        <h3 class="text-xl font-bold mb-4">Start New Session</h3>
        <form action="{{ route('promoter.sessions.create') }}" method="POST">
            @csrf
            <div class="space-y-4">
                <div>
                    <label class="block text-sm font-medium mb-1">Title</label>
                    <input type="text" name="title" required class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="e.g., Summer Sale Live Demo">
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1">Product</label>
                    <select name="product_id" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
                        <option value="">Select product (optional)</option>
                        @foreach(\App\Models\Product::where('vendor_id', auth()->user()->vendor?->id)->get() as $product)
                            <option value="{{ $product->id }}">{{ $product->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1">Scheduled At (leave empty to start now)</label>
                    <input type="datetime-local" name="scheduled_at" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1">Description</label>
                    <textarea name="description" rows="3" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="Describe what you'll be showcasing..."></textarea>
                </div>
                <div class="flex gap-3">
                    <button type="button" onclick="document.getElementById('create-session-modal').classList.add('hidden')" class="flex-1 px-4 py-2 border rounded-lg hover:bg-gray-100">Cancel</button>
                    <button type="submit" class="flex-1 royal-btn">Start Session</button>
                </div>
                @if(!App\Models\Setting::get('daily_api_key'))
                    <div class="mt-4 p-3 bg-amber-50 border border-amber-200 rounded-lg">
                        <p class="text-xs text-amber-700">⚠️ Daily.co API key not configured. Video will not be available.</p>
                    </div>
                @endif
            </div>
        </form>
    </div>
</div>
@endsection