@extends('layouts.admin')

@section('header', 'Site Settings')

@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.settings.update') }}" method="POST" class="space-y-8" enctype="multipart/form-data">
        @csrf
        @method('PUT')

        <div class="border-b border-gray-200 pb-8">
            <h3 class="text-lg font-medium leading-6 text-gray-900 mb-4">General Settings</h3>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="col-span-2 md:col-span-1">
                    <label for="site_title" class="block text-sm font-medium text-gray-700">Site Title</label>
                    <input type="text" name="site_title" id="site_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('site_title', $settings['site_title'] ?? '') }}">
                    @error('site_title') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                <div class="col-span-2">
                    <label for="site_description" class="block text-sm font-medium text-gray-700">Site Description (SEO)</label>
                    <textarea name="site_description" id="site_description" 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('site_description', $settings['site_description'] ?? '') }}</textarea>
                    @error('site_description') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>
                
                <div class="col-span-2">
                    <label for="about_teaser" class="block text-sm font-medium text-gray-700">Footer About Teaser</label>
                    <textarea name="about_teaser" id="about_teaser" rows="2" 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('about_teaser', $settings['about_teaser'] ?? '') }}</textarea>
                    @error('about_teaser') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>
            </div>
        </div>

        <div>
            <h3 class="text-lg font-medium leading-6 text-gray-900 mb-4">Social Links</h3>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="twitter_url" class="block text-sm font-medium text-gray-700">X (Twitter) URL</label>
                    <div class="mt-1 flex rounded-md shadow-sm">
                        <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm">
                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path></svg>
                        </span>
                        <input type="url" name="twitter_url" id="twitter_url" class="flex-1 block w-full rounded-none rounded-r-md border-gray-300 focus:border-theme-900 focus:ring-theme-900 sm:text-sm" value="{{ old('twitter_url', $settings['twitter_url'] ?? '') }}">
                    </div>
                    @error('twitter_url') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label for="youtube_url" class="block text-sm font-medium text-gray-700">YouTube URL</label>
                    <div class="mt-1 flex rounded-md shadow-sm">
                        <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm">
                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"></path></svg>
                        </span>
                        <input type="url" name="youtube_url" id="youtube_url" class="flex-1 block w-full rounded-none rounded-r-md border-gray-300 focus:border-theme-900 focus:ring-theme-900 sm:text-sm" value="{{ old('youtube_url', $settings['youtube_url'] ?? '') }}">
                    </div>
                    @error('youtube_url') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>
            </div>
        </div>

        <div class="border-t border-gray-200 pt-8 mt-8">
            <h3 class="text-lg font-medium leading-6 text-gray-900 mb-4">Podcast Guest Settings</h3>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="col-span-2">
                    <label for="guest_requirements" class="block text-sm font-medium text-gray-700">Guest Requirements & Terms</label>
                    <p class="text-sm text-gray-500 mb-2">These requirements will be displayed on the public "Become a Guest" application form.</p>
                    <textarea name="guest_requirements" id="guest_requirements" rows="6" 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('guest_requirements', $settings['guest_requirements'] ?? "Please provide detailed information about why you would be a great guest.") }}</textarea>
                    @error('guest_requirements') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                </div>
                <div class="col-span-2">
                    <label class="block text-sm font-medium text-gray-700">Guest Page Background Slider Images</label>
                    <p class="text-sm text-gray-500 mb-2">Upload images to cycle in the background of the guest application page. (Existing images will be kept unless you click 'Clear Images').</p>
                    <input type="file" name="guest_slider_images[]" multiple accept="image/*" class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-theme-50 file:text-theme-700 hover:file:bg-theme-100">
                    @error('guest_slider_images.*') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                    
                    @php
                        $sliderImages = json_decode($settings['guest_slider_images'] ?? '[]', true) ?? [];
                    @endphp
                    @if(count($sliderImages) > 0)
                        <div class="mt-4">
                            <p class="text-sm font-medium text-gray-700 mb-2">Current Images ({{ count($sliderImages) }}):</p>
                            <div class="flex flex-wrap gap-4">
                                @foreach($sliderImages as $img)
                                    <img src="{{ asset('storage/' . $img) }}" class="h-20 w-32 object-cover rounded-md shadow-sm border border-gray-200">
                                @endforeach
                            </div>
                            <div class="mt-3">
                                <label class="inline-flex items-center text-sm text-red-600 font-medium">
                                    <input type="checkbox" name="clear_slider_images" value="1" class="rounded border-gray-300 text-red-600 focus:ring-red-500 mr-2">
                                    Clear all existing slider images
                                </label>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="flex justify-end pt-2 mt-8">
            <button type="submit" class="bg-theme-900 py-2 px-6 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">Save Settings</button>
        </div>
    </form>
</div>
@endsection