@extends('layouts.admin')

@section('header', 'Create Episode')

@section('content')
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 md:p-8 max-w-4xl">
    <form action="{{ route('admin.episodes.store') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
        @csrf

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="col-span-2 md:col-span-1">
                <label for="title" class="block text-sm font-medium text-gray-700">Title</label>
                <input type="text" name="title" id="title" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-theme-900 focus:ring-theme-900 sm:text-sm" value="{{ old('title') }}" required>
                @error('title') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
            </div>

            <div>
                <label for="episode_number" class="block text-sm font-medium text-gray-700">Episode Number</label>
                <input type="number" name="episode_number" id="episode_number" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-theme-900 focus:ring-theme-900 sm:text-sm" value="{{ old('episode_number') }}">
                @error('episode_number') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
            </div>

            <div class="col-span-2 md:col-span-1">
                <label for="guest_name" class="block text-sm font-medium text-gray-700">Guest Name (Optional)</label>
                <input type="text" name="guest_name" id="guest_name" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-theme-900 focus:ring-theme-900 sm:text-sm" value="{{ old('guest_name') }}">
                @error('guest_name') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
            </div>

            <div class="col-span-2 md:col-span-1">
                <label for="guest_credentials" class="block text-sm font-medium text-gray-700">Guest Credentials (e.g., "CEO of X, Author")</label>
                <input type="text" name="guest_credentials" id="guest_credentials" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-theme-900 focus:ring-theme-900 sm:text-sm" value="{{ old('guest_credentials') }}">
                @error('guest_credentials') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
            </div>

            <div class="col-span-2">
                <label for="guest_socials" class="block text-sm font-medium text-gray-700">Guest Social Handles (comma-separated URLs, e.g., "https://x.com/hannah, https://linkedin.com/in/hannah")</label>
                <input type="text" name="guest_socials" id="guest_socials" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-theme-900 focus:ring-theme-900 sm:text-sm" value="{{ old('guest_socials') }}">
                @error('guest_socials') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
            </div>

            <div>
                <label for="duration" class="block text-sm font-medium text-gray-700">Duration (e.g., "45 mins")</label>
                <input type="text" name="duration" id="duration" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-theme-900 focus:ring-theme-900 sm:text-sm" value="{{ old('duration') }}">
                @error('duration') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
            </div>
            
            <div class="col-span-2 md:col-span-1">
                <label for="featured_image" class="block text-sm font-medium text-gray-700">Thumbnail Image (Optional)</label>
                <input type="file" name="featured_image" id="featured_image" accept="image/*" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-theme-900 focus:ring-theme-900 sm:text-sm">
                @error('featured_image') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
            </div>
            
            <div class="col-span-2 md:col-span-1">
                <label for="audio_url" class="block text-sm font-medium text-gray-700">Audio URL (.mp3)</label>
                <input type="url" name="audio_url" id="audio_url" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-theme-900 focus:ring-theme-900 sm:text-sm" value="{{ old('audio_url') }}">
                @error('audio_url') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
            </div>

            <div class="col-span-2 md:col-span-1">
                <label for="youtube_url" class="block text-sm font-medium text-gray-700">YouTube Video URL</label>
                <input type="url" name="youtube_url" id="youtube_url" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-theme-900 focus:ring-theme-900 sm:text-sm" value="{{ old('youtube_url') }}" placeholder="https://www.youtube.com/watch?v=...">
                @error('youtube_url') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
            </div>

            <div class="col-span-2 md:col-span-1">
                <label for="sponsor_tags" class="block text-sm font-medium text-gray-700">Sponsors (comma-separated, e.g., "MTN, Airtel")</label>
                <input type="text" name="sponsor_tags" id="sponsor_tags" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-theme-900 focus:ring-theme-900 sm:text-sm" value="{{ old('sponsor_tags') }}">
                @error('sponsor_tags') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
            </div>
        </div>

        <div>
            <label for="embed_code" class="block text-sm font-medium text-gray-700">Embed Code (Spotify/Apple) - Optional alternative to Audio URL</label>
            <textarea name="embed_code" id="embed_code" rows="3" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-theme-900 focus:ring-theme-900 sm:text-sm">{{ old('embed_code') }}</textarea>
            @error('embed_code') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
        </div>

        <div>
            <label for="topic_summary" class="block text-sm font-medium text-gray-700">Topic Summary (A brief highlight shown at the top of the episode page)</label>
            <textarea name="topic_summary" id="topic_summary" rows="3" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-theme-900 focus:ring-theme-900 sm:text-sm">{{ old('topic_summary') }}</textarea>
            @error('topic_summary') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
        </div>

        <div>
            <label for="description" class="block text-sm font-medium text-gray-700">Description / Show Notes</label>
            <textarea name="description" id="description" rows="8" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-theme-900 focus:ring-theme-900 sm:text-sm">{{ old('description') }}</textarea>
            @error('description') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
        </div>

        <div class="flex items-center pt-4 border-t border-gray-200">
            <input type="checkbox" name="is_published" id="is_published" value="1" class="h-4 w-4 text-theme-600 focus:ring-theme-900 border-gray-300 rounded" {{ old('is_published') ? 'checked' : '' }}>
            <label for="is_published" class="ml-2 block text-sm text-gray-900">Published</label>
        </div>

        <div class="flex justify-end pt-6">
            <a href="{{ route('admin.episodes.index') }}" class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-theme-900 mr-3">Cancel</a>
            <button type="submit" class="bg-theme-900 py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white hover:bg-theme-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-theme-900">Create Episode</button>
        </div>
    </form>
</div>
@endsection