@extends('layouts.admin')

@section('content')
<div class="max-w-4xl mx-auto">
    <div class="bg-white rounded-lg shadow-sm border border-gray-200">
        <div class="px-6 py-4 border-b border-gray-200">
            <h1 class="text-2xl font-semibold text-gray-900 flex items-center">
                <svg class="w-6 h-6 mr-3 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path 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"/>
                </svg>
                Live Stream Configuration
            </h1>
            <p class="text-gray-600 mt-1">Configure YouTube live streaming settings for the frontend</p>
        </div>

        @if(session('success'))
            <div class="mx-6 mt-4 bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-md">
                {{ session('success') }}
            </div>
        @endif

        <form action="{{ route('admin.live-config.update') }}" method="POST" class="p-6">
            @csrf
            @method('PUT')

            <div class="space-y-6">
                <!-- Enable/Disable Live Stream -->
                <div class="flex items-center">
                    <input type="checkbox"
                           id="is_enabled"
                           name="is_enabled"
                           value="1"
                           {{ $config->is_enabled ? 'checked' : '' }}
                           class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
                    <label for="is_enabled" class="ml-3 text-sm font-medium text-gray-700">
                        Enable YouTube Live Stream
                    </label>
                </div>

                <!-- YouTube ID -->
                <div>
                    <label for="youtube_id" class="block text-sm font-medium text-gray-700 mb-2">
                        YouTube Video ID
                    </label>
                    <input type="text"
                           id="youtube_id"
                           name="youtube_id"
                           value="{{ old('youtube_id', $config->youtube_id) }}"
                           placeholder="e.g., dQw4w9WgXcQ"
                           class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 @error('youtube_id') border-red-500 @enderror">
                    @error('youtube_id')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                    <p class="mt-1 text-sm text-gray-500">
                        Enter the YouTube video ID (the part after "v=" in the URL)
                    </p>
                </div>

                <!-- Title -->
                <div>
                    <label for="title" class="block text-sm font-medium text-gray-700 mb-2">
                        Live Stream Title
                    </label>
                    <input type="text"
                           id="title"
                           name="title"
                           value="{{ old('title', $config->title) }}"
                           placeholder="e.g., Live Puja from Wargal Temple"
                           class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 @error('title') border-red-500 @enderror">
                    @error('title')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Description -->
                <div>
                    <label for="description" class="block text-sm font-medium text-gray-700 mb-2">
                        Description
                    </label>
                    <textarea id="description"
                              name="description"
                              rows="4"
                              placeholder="Enter a description for the live stream..."
                              class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 @error('description') border-red-500 @enderror">{{ old('description', $config->description) }}</textarea>
                    @error('description')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Preview Section -->
                @if($config->is_enabled && $config->youtube_id)
                <div class="bg-gray-50 rounded-lg p-4">
                    <h3 class="text-lg font-medium text-gray-900 mb-3">Preview</h3>
                    <div class="bg-white rounded-lg p-4 border border-gray-200">
                        <h4 class="font-medium text-gray-900 mb-2">{{ $config->title ?: 'Live Stream' }}</h4>
                        @if($config->description)
                            <p class="text-gray-600 text-sm mb-3">{{ $config->description }}</p>
                        @endif
                        <div class="aspect-video bg-gray-200 rounded-lg flex items-center justify-center">
                            <div class="text-center">
                                <svg class="w-12 h-12 text-gray-400 mx-auto mb-2" fill="currentColor" viewBox="0 0 24 24">
                                    <path 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"/>
                                </svg>
                                <p class="text-gray-500 text-sm">YouTube Live Stream</p>
                                <p class="text-gray-400 text-xs">ID: {{ $config->youtube_id }}</p>
                            </div>
                        </div>
                    </div>
                </div>
                @endif
            </div>

            <!-- Submit Button -->
            <div class="mt-8 flex justify-end">
                <button type="submit"
                        class="bg-indigo-600 text-white px-6 py-2 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition-colors">
                    Update Configuration
                </button>
            </div>
        </form>
    </div>
</div>
@endsection