@extends('layouts.admin')

@section('page-title', 'Footer Settings')

@section('content')
<div class="max-w-5xl mx-auto">
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {{-- Left Column --}}
        <div class="lg:col-span-2 space-y-6">
            <form action="{{ route('admin.footer.update') }}" method="POST" enctype="multipart/form-data" id="footer-form">
                @csrf
                @method('PATCH')

                {{-- Theme Selection --}}
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
                    <h3 class="text-lg font-semibold text-gray-900 mb-1">Footer Theme</h3>
                    <p class="text-sm text-gray-500 mb-5">Choose the layout style for your footer</p>
                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                        <label class="cursor-pointer group">
                            <input type="radio" name="footer_theme" value="footer_theme1" class="hidden peer" {{ $footer_theme === 'footer_theme1' ? 'checked' : '' }}>
                            <div class="border-2 border-gray-200 rounded-xl p-4 peer-checked:border-indigo-500 peer-checked:bg-indigo-50 hover:border-gray-300 transition-all">
                                <div class="aspect-video bg-gradient-to-b from-gray-100 to-gray-200 rounded-lg mb-3 flex items-center justify-center">
                                    <div class="w-full px-3">
                                        <div class="h-2 bg-gray-300 rounded w-3/4 mb-2"></div>
                                        <div class="h-2 bg-gray-300 rounded w-1/2 mb-2"></div>
                                        <div class="h-2 bg-gray-300 rounded w-2/3"></div>
                                    </div>
                                </div>
                                <p class="text-sm font-medium text-center text-gray-700">Classic</p>
                                <p class="text-xs text-gray-400 text-center">3-column layout</p>
                            </div>
                        </label>

                        <label class="cursor-pointer group">
                            <input type="radio" name="footer_theme" value="footer_theme2" class="hidden peer" {{ $footer_theme === 'footer_theme2' ? 'checked' : '' }}>
                            <div class="border-2 border-gray-200 rounded-xl p-4 peer-checked:border-indigo-500 peer-checked:bg-indigo-50 hover:border-gray-300 transition-all">
                                <div class="aspect-video bg-gradient-to-b from-gray-100 to-gray-200 rounded-lg mb-3 flex items-center justify-center">
                                    <div class="w-full px-3">
                                        <div class="h-2 bg-gray-300 rounded w-1/2 mx-auto mb-2"></div>
                                        <div class="flex gap-2">
                                            <div class="h-2 bg-gray-300 rounded flex-1"></div>
                                            <div class="h-2 bg-gray-300 rounded flex-1"></div>
                                        </div>
                                    </div>
                                </div>
                                <p class="text-sm font-medium text-center text-gray-700">Centered</p>
                                <p class="text-xs text-gray-400 text-center">Centered content</p>
                            </div>
                        </label>

                        <label class="cursor-pointer group">
                            <input type="radio" name="footer_theme" value="footer_theme3" class="hidden peer" {{ $footer_theme === 'footer_theme3' ? 'checked' : '' }}>
                            <div class="border-2 border-gray-200 rounded-xl p-4 peer-checked:border-indigo-500 peer-checked:bg-indigo-50 hover:border-gray-300 transition-all">
                                <div class="aspect-video bg-gradient-to-b from-gray-100 to-gray-200 rounded-lg mb-3 flex items-center justify-center">
                                    <div class="w-full px-3">
                                        <div class="flex gap-2 mb-2">
                                            <div class="h-2 bg-gray-300 rounded flex-1"></div>
                                            <div class="h-2 bg-gray-300 rounded flex-1"></div>
                                            <div class="h-2 bg-gray-300 rounded flex-1"></div>
                                            <div class="h-2 bg-gray-300 rounded flex-1"></div>
                                        </div>
                                    </div>
                                </div>
                                <p class="text-sm font-medium text-center text-gray-700">Extended</p>
                                <p class="text-xs text-gray-400 text-center">4-column layout</p>
                            </div>
                        </label>
                    </div>
                </div>

                {{-- Footer Content --}}
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
                    <h3 class="text-lg font-semibold text-gray-900 mb-1">Footer Content</h3>
                    <p class="text-sm text-gray-500 mb-5">Customize the text and links in your footer</p>

                    <div class="space-y-5">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1.5">About Description</label>
                            <textarea name="footer_description" rows="4" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500 outline-none transition">{{ old('footer_description', $footer_description) }}</textarea>
                            <p class="mt-1 text-xs text-gray-400">Brief description shown in the footer about section</p>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1.5">Copyright Text</label>
                            <input type="text" name="footer_copyright" value="{{ old('footer_copyright', $footer_copyright) }}" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500 outline-none transition">
                        </div>

                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1.5">
                                    <span class="flex items-center gap-2">
                                        <svg class="w-4 h-4 text-green-600" viewBox="0 0 24 24" fill="currentColor"><path d="M3,20.5V3.5C3,2.91 3.34,2.39 3.84,2.15L13.69,12L3.84,21.85C3.34,21.61 3,21.09 3,20.5M16.81,15.12L6.05,21.34L14.54,12.85L16.81,15.12M20.16,10.81C20.5,11.08 20.75,11.45 20.86,11.88C20.97,12.31 20.93,12.76 20.74,13.16L17.89,18.94L15.39,16.44L16.81,15.12L20.16,10.81Z"/></svg>
                                        Play Store Link
                                    </span>
                                </label>
                                <input type="url" name="play_store_link" value="{{ old('play_store_link', $play_store_link) }}" placeholder="https://play.google.com/store/apps/details?id=..." class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500 outline-none transition">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1.5">
                                    <span class="flex items-center gap-2">
                                        <svg class="w-4 h-4 text-gray-700" viewBox="0 0 24 24" fill="currentColor"><path d="M18.71,19.5C17.88,20.5 17,21.5 15.5,21.5C14,21.5 13.5,20.5 12,20.5C10.5,20.5 10,21.5 8.5,21.5C7,21.5 6.12,20.5 5.29,19.5C3.5,17.5 3.5,14.5 3.5,12C3.5,9.5 3.5,6.5 5.29,4.5C6.12,3.5 7,2.5 8.5,2.5C10,2.5 10.5,3.5 12,3.5C13.5,3.5 14,2.5 15.5,2.5C17,2.5 17.88,3.5 18.71,4.5C20.5,6.5 20.5,9.5 20.5,12C20.5,14.5 20.5,17.5 18.71,19.5Z"/></svg>
                                        App Store Link
                                    </span>
                                </label>
                                <input type="url" name="app_store_link" value="{{ old('app_store_link', $app_store_link) }}" placeholder="https://apps.apple.com/app/..." class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500 outline-none transition">
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>

        {{-- Right Column --}}
        <div class="space-y-6">
            {{-- Footer Logo --}}
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
                <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-4">Footer Logo</h3>
                <div class="text-center">
                    <div class="relative inline-block group">
                        @if($footer_logo)
                            <img src="{{ asset('storage/' . $footer_logo) }}" alt="Footer Logo" class="w-32 h-32 object-contain border border-gray-200 rounded-xl p-2 bg-gray-50">
                        @else
                            <div class="w-32 h-32 border-2 border-dashed border-gray-300 rounded-xl flex items-center justify-center bg-gray-50">
                                <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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
                        <label class="absolute inset-0 rounded-xl bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer flex items-center justify-center">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                            <input type="file" name="footer_logo" accept="image/*" class="hidden" id="footer-logo-input">
                        </label>
                    </div>
                    @if($footer_logo)
                        <form action="{{ route('admin.footer.remove-logo') }}" method="POST" class="mt-3">
                            @csrf
                            <button type="submit" class="text-xs text-red-500 hover:text-red-700 font-medium">Remove logo</button>
                        </form>
                    @endif
                    <p class="text-xs text-gray-400 mt-2">PNG, JPG, SVG up to 2MB</p>
                </div>
            </div>

            {{-- Preview --}}
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
                <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-4">Preview</h3>
                <div class="bg-slate-900 rounded-lg p-4 text-white">
                    <div class="flex items-center gap-2 mb-3">
                        @if($footer_logo)
                            <img src="{{ asset('storage/' . $footer_logo) }}" class="h-6 object-contain">
                        @else
                            <span class="font-bold text-lg">{{ siteName() }}</span>
                        @endif
                    </div>
                    <p class="text-xs text-gray-400 mb-3 line-clamp-2">{{ Str::limit($footer_description, 80) }}</p>
                    <div class="flex gap-3">
                        @if($play_store_link)
                            <span class="text-xs text-gray-400">Play Store</span>
                        @endif
                        @if($app_store_link)
                            <span class="text-xs text-gray-400">App Store</span>
                        @endif
                    </div>
                    <div class="border-t border-gray-700 mt-3 pt-3">
                        <p class="text-xs text-gray-500">{{ $footer_copyright }}</p>
                    </div>
                </div>
            </div>

            {{-- Save Button --}}
            <button type="submit" form="footer-form" class="w-full px-5 py-3 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium rounded-xl transition shadow-sm">
                Save Footer Settings
            </button>
        </div>
    </div>
</div>
@endsection