@extends('layouts.admin')

@section('title', 'Settings')

@section('content')
    <div class="mb-6 flex items-center justify-between">
        <h1 class="text-2xl font-bold sm:text-3xl">Settings</h1>
    </div>

    <form action="{{ route('admin.settings.update') }}" method="post" enctype="multipart/form-data" class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm sm:p-6">
        @csrf
        @method('PUT')

        <div class="grid gap-4 sm:grid-cols-2">
            <div class="sm:col-span-1">
                <label for="website_name" class="block text-sm font-medium text-slate-700">Website Name <span class="text-red-600">*</span></label>
                <input id="website_name" name="website_name" value="{{ old('website_name', $websiteName) }}" required class="mt-1 w-full rounded-xl border border-slate-300 bg-slate-50 px-3 py-2.5 focus:border-cyan-500 focus:bg-white focus:outline-none">
                @error('website_name')
                    <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div class="sm:col-span-1">
                <label for="ringtone_file_suffix" class="block text-sm font-medium text-slate-700">Content File Suffix</label>
                <input id="ringtone_file_suffix" name="ringtone_file_suffix" value="{{ old('ringtone_file_suffix', $ringtoneFileSuffix) }}" class="mt-1 w-full rounded-xl border border-slate-300 bg-slate-50 px-3 py-2.5 focus:border-cyan-500 focus:bg-white focus:outline-none">
                <p class="mt-1 text-xs text-slate-500">Upload filename format: `content-title-suffix.ext`</p>
                @error('ringtone_file_suffix')
                    <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div class="sm:col-span-1">
                <label for="primary_button_color" class="block text-sm font-medium text-slate-700">Primary Button Color</label>
                <div class="mt-1 flex items-center gap-2">
                    <input id="primary_button_color" name="primary_button_color" type="color" value="{{ old('primary_button_color', $primaryButtonColor) }}" class="h-10 w-14 rounded-lg border border-slate-300 bg-white p-1">
                    <span class="rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm text-slate-700">{{ old('primary_button_color', $primaryButtonColor) }}</span>
                </div>
                <p class="mt-1 text-xs text-slate-500">Used for frontend primary buttons (Download/CTA).</p>
                @error('primary_button_color')
                    <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div class="sm:col-span-2">
                <label for="ffmpeg_path" class="block text-sm font-medium text-slate-700">FFmpeg Path</label>
                <input id="ffmpeg_path" name="ffmpeg_path" value="{{ old('ffmpeg_path', $ffmpegPath) }}" class="mt-1 w-full rounded-xl border border-slate-300 bg-slate-50 px-3 py-2.5 focus:border-cyan-500 focus:bg-white focus:outline-none">
                <p class="mt-1 text-xs text-slate-500">Examples: `ffmpeg` or full path like `C:\ffmpeg\bin\ffmpeg.exe`.</p>
                @error('ffmpeg_path')
                    <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div class="sm:col-span-1">
                <label for="site_logo" class="block text-sm font-medium text-slate-700">Site Logo</label>
                <input id="site_logo" name="site_logo" type="file" accept=".png,.jpg,.jpeg,.webp,.svg" class="mt-1 w-full rounded-xl border border-slate-300 bg-slate-50 px-3 py-2.5 focus:border-cyan-500 focus:bg-white focus:outline-none">
                @if ($siteLogoPath)
                    <img src="{{ asset('storage/'.$siteLogoPath) }}" alt="Site logo" class="mt-2 h-12 rounded border border-slate-200 bg-white p-1">
                @endif
                @error('site_logo')
                    <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div class="sm:col-span-1">
                <label for="favicon" class="block text-sm font-medium text-slate-700">Favicon</label>
                <input id="favicon" name="favicon" type="file" accept=".ico,.png,.svg" class="mt-1 w-full rounded-xl border border-slate-300 bg-slate-50 px-3 py-2.5 focus:border-cyan-500 focus:bg-white focus:outline-none">
                @if ($faviconPath)
                    <img src="{{ asset('storage/'.$faviconPath) }}" alt="Favicon" class="mt-2 h-10 w-10 rounded border border-slate-200 bg-white p-1">
                @endif
                @error('favicon')
                    <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div class="sm:col-span-2 rounded-xl border border-slate-200 bg-slate-50 p-4">
                <h3 class="text-sm font-semibold text-slate-800">Admin Account Security</h3>
                <div class="mt-3 grid gap-3 sm:grid-cols-2">
                    <div class="sm:col-span-2">
                        <label for="admin_email" class="block text-xs font-medium text-slate-700">Admin Login Email</label>
                        <input id="admin_email" name="admin_email" type="email" value="{{ old('admin_email', $adminEmail) }}" class="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm focus:border-cyan-500 focus:outline-none">
                        @error('admin_email')
                            <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                    <div class="sm:col-span-1">
                        <label for="current_login_password" class="block text-xs font-medium text-slate-700">Current Login Password</label>
                        <input id="current_login_password" name="current_login_password" type="password" class="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm focus:border-cyan-500 focus:outline-none">
                        @error('current_login_password')
                            <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                    <div class="sm:col-span-1">
                        <label for="new_login_password" class="block text-xs font-medium text-slate-700">New Login Password</label>
                        <input id="new_login_password" name="new_login_password" type="password" class="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm focus:border-cyan-500 focus:outline-none">
                        @error('new_login_password')
                            <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                    <div class="sm:col-span-1">
                        <label for="new_login_password_confirmation" class="block text-xs font-medium text-slate-700">Confirm New Login Password</label>
                        <input id="new_login_password_confirmation" name="new_login_password_confirmation" type="password" class="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm focus:border-cyan-500 focus:outline-none">
                    </div>
                </div>
            </div>

            <div class="sm:col-span-2 rounded-xl border border-slate-200 bg-slate-50 p-4">
                <h3 class="text-sm font-semibold text-slate-800">Home Page SEO</h3>
                <div class="mt-3 grid gap-3 sm:grid-cols-2">
                    <div class="sm:col-span-2">
                        <label for="home_seo_title" class="block text-xs font-medium text-slate-700">Home SEO Title</label>
                        <input id="home_seo_title" name="home_seo_title" value="{{ old('home_seo_title', $homeSeoTitle) }}" class="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm focus:border-cyan-500 focus:outline-none">
                    </div>
                    <div class="sm:col-span-2">
                        <label for="home_seo_description" class="block text-xs font-medium text-slate-700">Home SEO Description</label>
                        <textarea id="home_seo_description" name="home_seo_description" rows="3" class="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm focus:border-cyan-500 focus:outline-none">{{ old('home_seo_description', $homeSeoDescription) }}</textarea>
                    </div>
                    <div class="sm:col-span-2">
                        <label for="home_seo_keywords" class="block text-xs font-medium text-slate-700">Home SEO Keywords</label>
                        <input id="home_seo_keywords" name="home_seo_keywords" value="{{ old('home_seo_keywords', $homeSeoKeywords) }}" class="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm focus:border-cyan-500 focus:outline-none">
                    </div>
                </div>
            </div>

            <div class="sm:col-span-2 rounded-xl border border-slate-200 bg-slate-50 p-4">
                <h3 class="text-sm font-semibold text-slate-800">Default SEO (Other Pages)</h3>
                <div class="mt-3 grid gap-3 sm:grid-cols-2">
                    <div class="sm:col-span-2">
                        <label for="default_seo_title" class="block text-xs font-medium text-slate-700">Default SEO Title</label>
                        <input id="default_seo_title" name="default_seo_title" value="{{ old('default_seo_title', $defaultSeoTitle) }}" class="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm focus:border-cyan-500 focus:outline-none">
                    </div>
                    <div class="sm:col-span-2">
                        <label for="default_seo_description" class="block text-xs font-medium text-slate-700">Default SEO Description</label>
                        <textarea id="default_seo_description" name="default_seo_description" rows="3" class="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm focus:border-cyan-500 focus:outline-none">{{ old('default_seo_description', $defaultSeoDescription) }}</textarea>
                    </div>
                    <div class="sm:col-span-2">
                        <label for="default_seo_keywords" class="block text-xs font-medium text-slate-700">Default SEO Keywords</label>
                        <input id="default_seo_keywords" name="default_seo_keywords" value="{{ old('default_seo_keywords', $defaultSeoKeywords) }}" class="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm focus:border-cyan-500 focus:outline-none">
                    </div>
                </div>
            </div>


            <div class="sm:col-span-2 rounded-xl border border-slate-200 bg-slate-50 p-4">
                <h3 class="text-sm font-semibold text-slate-800">Sitemap Settings</h3>
                <div class="mt-3 grid gap-3 sm:grid-cols-2">
                    <div class="sm:col-span-2">
                        <label for="sitemap_base_url" class="block text-xs font-medium text-slate-700">Sitemap Base URL</label>
                        <input id="sitemap_base_url" name="sitemap_base_url" value="{{ old('sitemap_base_url', $sitemapBaseUrl) }}" class="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm focus:border-cyan-500 focus:outline-none" placeholder="https://example.com">
                    </div>
                    <div class="sm:col-span-1">
                        <label for="sitemap_lastmod" class="block text-xs font-medium text-slate-700">Lastmod</label>
                        <select id="sitemap_lastmod" name="sitemap_lastmod" class="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm focus:border-cyan-500 focus:outline-none">
                            <option value="ON" @selected(old('sitemap_lastmod', $sitemapLastmod) === 'ON')>ON</option>
                            <option value="OFF" @selected(old('sitemap_lastmod', $sitemapLastmod) === 'OFF')>OFF</option>
                        </select>
                    </div>
                    <div class="sm:col-span-1">
                        <label for="sitemap_changefreq" class="block text-xs font-medium text-slate-700">Changefreq</label>
                        <input id="sitemap_changefreq" name="sitemap_changefreq" value="{{ old('sitemap_changefreq', $sitemapChangefreq) }}" class="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm focus:border-cyan-500 focus:outline-none" placeholder="daily">
                    </div>
                    <div class="sm:col-span-1">
                        <label for="sitemap_home_priority" class="block text-xs font-medium text-slate-700">Home Priority</label>
                        <input id="sitemap_home_priority" name="sitemap_home_priority" value="{{ old('sitemap_home_priority', $sitemapHomePriority) }}" class="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm focus:border-cyan-500 focus:outline-none" placeholder="1.00">
                    </div>
                    <div class="sm:col-span-1">
                        <label for="sitemap_listing_priority" class="block text-xs font-medium text-slate-700">Listing Priority</label>
                        <input id="sitemap_listing_priority" name="sitemap_listing_priority" value="{{ old('sitemap_listing_priority', $sitemapListingPriority) }}" class="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm focus:border-cyan-500 focus:outline-none" placeholder="0.80">
                    </div>
                    <div class="sm:col-span-1">
                        <label for="sitemap_content_priority" class="block text-xs font-medium text-slate-700">Content Priority</label>
                        <input id="sitemap_content_priority" name="sitemap_content_priority" value="{{ old('sitemap_content_priority', $sitemapContentPriority) }}" class="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm focus:border-cyan-500 focus:outline-none" placeholder="0.64">
                    </div>
                    <div class="sm:col-span-1">
                        <label for="sitemap_page_priority" class="block text-xs font-medium text-slate-700">Page Priority</label>
                        <input id="sitemap_page_priority" name="sitemap_page_priority" value="{{ old('sitemap_page_priority', $sitemapPagePriority) }}" class="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm focus:border-cyan-500 focus:outline-none" placeholder="0.64">
                    </div>
                    <div class="sm:col-span-1">
                        <label for="sitemap_limit" class="block text-xs font-medium text-slate-700">Per File Limit</label>
                        <input id="sitemap_limit" name="sitemap_limit" value="{{ old('sitemap_limit', $sitemapLimit) }}" class="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm focus:border-cyan-500 focus:outline-none" placeholder="10000">
                    </div>
                    <div class="sm:col-span-1">
                        <label for="sitemap_datemode" class="block text-xs font-medium text-slate-700">Date Mode</label>
                        <select id="sitemap_datemode" name="sitemap_datemode" class="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm focus:border-cyan-500 focus:outline-none">
                            <option value="entry" @selected(old('sitemap_datemode', $sitemapDatemode) === 'entry')>Entry date</option>
                            <option value="current" @selected(old('sitemap_datemode', $sitemapDatemode) === 'current')>Current date</option>
                        </select>
                    </div>
                    <div class="sm:col-span-1">
                        <label for="sitemap_timezone" class="block text-xs font-medium text-slate-700">Timezone</label>
                        <input id="sitemap_timezone" name="sitemap_timezone" value="{{ old('sitemap_timezone', $sitemapTimezone) }}" class="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm focus:border-cyan-500 focus:outline-none" placeholder="Asia/Kolkata">
                    </div>
                    <div class="sm:col-span-1">
                        <label for="sitemap_xsl_path" class="block text-xs font-medium text-slate-700">XSL Path</label>
                        <input id="sitemap_xsl_path" name="sitemap_xsl_path" value="{{ old('sitemap_xsl_path', $sitemapXslPath) }}" class="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm focus:border-cyan-500 focus:outline-none" placeholder="/css/sitemap.xsl">
                    </div>
                    <div class="sm:col-span-2">
                        <label for="sitemap_ping_endpoints" class="block text-xs font-medium text-slate-700">Ping Endpoints (one per line)</label>
                        <textarea id="sitemap_ping_endpoints" name="sitemap_ping_endpoints" rows="4" class="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm focus:border-cyan-500 focus:outline-none">{{ old('sitemap_ping_endpoints', $sitemapPingEndpoints) }}</textarea>
                        <p class="mt-1 text-xs text-slate-500">Use placeholder: <code>{sitemap_url}</code></p>
                    </div>
                    <div class="sm:col-span-1">
                        <label for="sitemap_schedule_time" class="block text-xs font-medium text-slate-700">Auto Generate Time (HH:MM)</label>
                        <input id="sitemap_schedule_time" name="sitemap_schedule_time" value="{{ old('sitemap_schedule_time', $sitemapScheduleTime) }}" class="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm focus:border-cyan-500 focus:outline-none" placeholder="02:30">
                    </div>
                    <div class="sm:col-span-1 flex items-end">
                        <label class="inline-flex items-center gap-2 rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm">
                            <input type="checkbox" name="sitemap_auto_ping" value="1" class="h-4 w-4 rounded border-slate-300 text-cyan-600 focus:ring-cyan-500" @checked((bool) old('sitemap_auto_ping', $sitemapAutoPing))>
                            Auto ping after scheduled generate
                        </label>
                    </div>
                    <div class="sm:col-span-1">
                        <label for="rss_path" class="block text-xs font-medium text-slate-700">RSS Path</label>
                        <input id="rss_path" name="rss_path" value="{{ old('rss_path', $rssPath) }}" class="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm focus:border-cyan-500 focus:outline-none" placeholder="/rss.xml">
                    </div>
                    <div class="sm:col-span-1">
                        <label for="rss_title" class="block text-xs font-medium text-slate-700">RSS Title</label>
                        <input id="rss_title" name="rss_title" value="{{ old('rss_title', $rssTitle) }}" class="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm focus:border-cyan-500 focus:outline-none">
                    </div>
                    <div class="sm:col-span-2">
                        <label for="rss_description" class="block text-xs font-medium text-slate-700">RSS Description</label>
                        <textarea id="rss_description" name="rss_description" rows="3" class="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm focus:border-cyan-500 focus:outline-none">{{ old('rss_description', $rssDescription) }}</textarea>
                    </div>
                </div>

                <div class="mt-4 flex items-center gap-3">
                    <label class="inline-flex items-center gap-2 text-sm">
                        <input type="checkbox" name="with_ping" value="1" checked>
                        Ping search engines
                    </label>
                    <button type="submit" formaction="{{ route('admin.settings.sitemap.generate') }}" formmethod="post" class="rounded-xl border border-cyan-200 bg-cyan-50 px-3 py-2 text-sm font-medium text-cyan-700 hover:bg-cyan-100">
                        Generate Sitemap Now
                    </button>
                    <a href="{{ $sitemapDynamicUrl }}" target="_blank" class="rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-700 hover:border-cyan-200 hover:text-cyan-700">
                        View Sitemap URL
                    </a>
                </div>
                <p class="mt-2 text-xs text-slate-500">Dynamic URL: <a class="text-cyan-700 hover:underline" href="{{ $sitemapDynamicUrl }}" target="_blank">{{ $sitemapDynamicUrl }}</a></p>
                <p class="mt-1 text-xs text-slate-500">Generated file URL: <a class="text-cyan-700 hover:underline" href="{{ $sitemapGeneratedFileUrl }}" target="_blank">{{ $sitemapGeneratedFileUrl }}</a></p>
                <p class="mt-1 text-xs text-slate-500">RSS URL: <a class="text-cyan-700 hover:underline" href="{{ $rssDynamicUrl }}" target="_blank">{{ $rssDynamicUrl }}</a></p>
                <p class="mt-1 text-xs text-slate-500">Generated RSS file URL: <a class="text-cyan-700 hover:underline" href="{{ $rssGeneratedFileUrl }}" target="_blank">{{ $rssGeneratedFileUrl }}</a></p>
                <p class="mt-1 text-xs text-slate-500">Sitemap file path: <code>storage/app/public/sitemap.xml</code></p>
            </div>

            <div class="sm:col-span-2 rounded-xl border border-slate-200 bg-slate-50 p-4">
                <h3 class="text-sm font-semibold text-slate-800">Delete Security</h3>
                <p class="mt-1 text-xs text-slate-500">
                    Current status: {{ $hasDeletePassword ? 'Configured' : 'Not configured' }}
                </p>
                <div class="mt-3 grid gap-3 sm:grid-cols-2">
                    <div class="sm:col-span-1">
                        <label for="delete_action_password" class="block text-xs font-medium text-slate-700">New Delete Password</label>
                        <input id="delete_action_password" name="delete_action_password" type="password" class="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm focus:border-cyan-500 focus:outline-none">
                        @error('delete_action_password')
                            <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                    <div class="sm:col-span-1">
                        <label for="delete_action_password_confirmation" class="block text-xs font-medium text-slate-700">Confirm Delete Password</label>
                        <input id="delete_action_password_confirmation" name="delete_action_password_confirmation" type="password" class="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm focus:border-cyan-500 focus:outline-none">
                    </div>
                </div>
            </div>
        </div>

        <div class="mt-6">
            <button class="inline-flex items-center gap-2 rounded-xl bg-cyan-600 px-4 py-2 text-sm font-medium text-white hover:bg-cyan-700">
                <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M5 13l4 4L19 7"/>
                </svg>
                Save Settings
            </button>
        </div>
    </form>
@endsection