@extends('layouts.demo10.base')

@section('content')
<div style="padding:1.5rem 0 2rem;">
    <div style="display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap;margin-bottom:1.25rem;">
        <div>
            <h1 style="margin:0;font-size:2rem;font-weight:700;color:#18181b;">Theme Customize</h1>
            <p style="margin:0.35rem 0 0;color:#6b7280;">Project/{{ $project->name }}/{{ $activeTheme?->name ?? 'Active Theme' }}</p>
        </div>
        <div style="display:flex;gap:0.75rem;align-items:center;">
            @if($activeTheme)
            <a href="{{ route('themes.preview', ['themeId' => $activeTheme->id]) }}"
               style="background:#111827;color:#fff;border:1px solid #111827;padding:0.7rem 1rem;border-radius:10px;text-decoration:none;font-weight:600;">
                Preview Process Page
            </a>
            @endif
            <a href="{{ route('themes.pages.builder') }}"
               style="background:#0f766e;color:#fff;border:1px solid #0f766e;padding:0.7rem 1rem;border-radius:10px;text-decoration:none;font-weight:600;">
                Page/Table Builder
            </a>
            <a href="{{ route('tenants.projects.settings', ['projectName' => $project->slug]) }}"
               style="background:#fff;color:#111827;border:1px solid #e5e7eb;padding:0.7rem 1rem;border-radius:10px;text-decoration:none;font-weight:600;">
                Back To Settings
            </a>
        </div>
    </div>

    @if (session('success'))
        <div style="margin-bottom:1rem;padding:0.85rem 1rem;background:#dcfce7;color:#166534;border:1px solid #86efac;border-radius:12px;">
            {{ session('success') }}
        </div>
    @endif

    @if (session('error'))
        <div style="margin-bottom:1rem;padding:0.85rem 1rem;background:#fee2e2;color:#991b1b;border:1px solid #fca5a5;border-radius:12px;">
            {{ session('error') }}
        </div>
    @endif

    @if (session('info'))
        <div style="margin-bottom:1rem;padding:0.85rem 1rem;background:#dbeafe;color:#1d4ed8;border:1px solid #93c5fd;border-radius:12px;">
            {{ session('info') }}
        </div>
    @endif

    @if ($errors->any())
        <div style="margin-bottom:1rem;padding:0.85rem 1rem;background:#fff7ed;color:#9a3412;border:1px solid #fdba74;border-radius:12px;">
            {{ $errors->first() }}
        </div>
    @endif

    <div style="display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:1rem;align-items:start;">
        <form method="POST" action="{{ route('themes.customize.save') }}" enctype="multipart/form-data" style="background:#fff;border:1px solid #ebe5dd;border-radius:20px;padding:1.25rem;box-shadow:0 10px 30px rgba(15,23,42,0.04);">
            @csrf
            <div style="display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;">
                <div>
                    <h2 style="margin:0;font-size:1.15rem;font-weight:700;color:#18181b;">Customize Active Theme</h2>
                    <p style="margin:0.35rem 0 0;color:#6b7280;font-size:0.92rem;">Theme slug: {{ $currentThemeSetting->theme_slug }}</p>
                </div>
                <button type="submit" style="background:#2563eb;color:#fff;border:none;padding:0.75rem 1.1rem;border-radius:10px;font-weight:600;cursor:pointer;">
                    Save Changes
                </button>
            </div>

            <div style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;">
                <label style="display:block;">
                    <span style="display:block;margin-bottom:0.35rem;font-size:0.86rem;font-weight:600;color:#374151;">Site Name</span>
                    <input type="text" name="site_name" value="{{ old('site_name', $currentThemeSetting->site_name) }}" style="width:100%;border:1px solid #d1d5db;border-radius:10px;padding:0.7rem 0.85rem;">
                </label>
                <label style="display:block;">
                    <span style="display:block;margin-bottom:0.35rem;font-size:0.86rem;font-weight:600;color:#374151;">Site Tagline</span>
                    <input type="text" name="site_tagline" value="{{ old('site_tagline', $currentThemeSetting->site_tagline) }}" style="width:100%;border:1px solid #d1d5db;border-radius:10px;padding:0.7rem 0.85rem;">
                </label>
                <label style="display:block;grid-column:span 2;">
                    <span style="display:block;margin-bottom:0.35rem;font-size:0.86rem;font-weight:600;color:#374151;">Logo 1 Path (optional)</span>
                    <input type="text" name="logo1_path" value="{{ old('logo1_path', $currentThemeSetting->logo1_path ?: $currentThemeSetting->logo_path) }}" placeholder="theme-logos/tenant-1/logo-1.png or https://..." style="width:100%;border:1px solid #d1d5db;border-radius:10px;padding:0.7rem 0.85rem;">
                    <small style="display:block;margin-top:0.35rem;color:#6b7280;">Primary logo. Relative path public storage se load hoga. Full URL bhi de sakte hain.</small>
                </label>
                <label style="display:block;grid-column:span 2;">
                    <span style="display:block;margin-bottom:0.35rem;font-size:0.86rem;font-weight:600;color:#374151;">Logo 2 Path (optional)</span>
                    <input type="text" name="logo2_path" value="{{ old('logo2_path', $currentThemeSetting->logo2_path) }}" placeholder="theme-logos/tenant-1/logo-2.png or https://..." style="width:100%;border:1px solid #d1d5db;border-radius:10px;padding:0.7rem 0.85rem;">
                    <small style="display:block;margin-top:0.35rem;color:#6b7280;">Secondary logo. Agar empty ho to navbar sirf pehla logo dikhayega.</small>
                </label>
                <label style="display:block;">
                    <span style="display:block;margin-bottom:0.35rem;font-size:0.86rem;font-weight:600;color:#374151;">Upload Logo 1</span>
                    <input type="file" name="logo1" accept=".jpg,.jpeg,.png,.svg,.webp,image/*" style="width:100%;border:1px solid #d1d5db;border-radius:10px;padding:0.55rem 0.7rem;background:#fff;">
                </label>
                <label style="display:block;">
                    <span style="display:block;margin-bottom:0.35rem;font-size:0.86rem;font-weight:600;color:#374151;">Upload Logo 2</span>
                    <input type="file" name="logo2" accept=".jpg,.jpeg,.png,.svg,.webp,image/*" style="width:100%;border:1px solid #d1d5db;border-radius:10px;padding:0.55rem 0.7rem;background:#fff;">
                </label>
                <label style="display:block;">
                    <span style="display:block;margin-bottom:0.35rem;font-size:0.86rem;font-weight:600;color:#374151;">Primary Color</span>
                    <input type="text" name="primary_color" value="{{ old('primary_color', $currentThemeSetting->primary_color) }}" placeholder="#2563EB" style="width:100%;border:1px solid #d1d5db;border-radius:10px;padding:0.7rem 0.85rem;">
                </label>
                <label style="display:block;">
                    <span style="display:block;margin-bottom:0.35rem;font-size:0.86rem;font-weight:600;color:#374151;">Secondary Color</span>
                    <input type="text" name="secondary_color" value="{{ old('secondary_color', $currentThemeSetting->secondary_color) }}" placeholder="#10B981" style="width:100%;border:1px solid #d1d5db;border-radius:10px;padding:0.7rem 0.85rem;">
                </label>
                <label style="display:block;">
                    <span style="display:block;margin-bottom:0.35rem;font-size:0.86rem;font-weight:600;color:#374151;">Accent Color</span>
                    <input type="text" name="accent_color" value="{{ old('accent_color', $currentThemeSetting->accent_color) }}" placeholder="#F59E0B" style="width:100%;border:1px solid #d1d5db;border-radius:10px;padding:0.7rem 0.85rem;">
                </label>
                <label style="display:block;">
                    <span style="display:block;margin-bottom:0.35rem;font-size:0.86rem;font-weight:600;color:#374151;">Header Background</span>
                    <input type="text" name="header_bg_color" value="{{ old('header_bg_color', $currentThemeSetting->header_bg_color) }}" style="width:100%;border:1px solid #d1d5db;border-radius:10px;padding:0.7rem 0.85rem;">
                </label>
                <label style="display:block;">
                    <span style="display:block;margin-bottom:0.35rem;font-size:0.86rem;font-weight:600;color:#374151;">Header Text Color</span>
                    <input type="text" name="header_text_color" value="{{ old('header_text_color', $currentThemeSetting->header_text_color) }}" style="width:100%;border:1px solid #d1d5db;border-radius:10px;padding:0.7rem 0.85rem;">
                </label>
                <label style="display:block;">
                    <span style="display:block;margin-bottom:0.35rem;font-size:0.86rem;font-weight:600;color:#374151;">Footer Background</span>
                    <input type="text" name="footer_bg_color" value="{{ old('footer_bg_color', $currentThemeSetting->footer_bg_color) }}" style="width:100%;border:1px solid #d1d5db;border-radius:10px;padding:0.7rem 0.85rem;">
                </label>
                <label style="display:block;">
                    <span style="display:block;margin-bottom:0.35rem;font-size:0.86rem;font-weight:600;color:#374151;">Footer Text Color</span>
                    <input type="text" name="footer_text_color" value="{{ old('footer_text_color', $currentThemeSetting->footer_text_color) }}" style="width:100%;border:1px solid #d1d5db;border-radius:10px;padding:0.7rem 0.85rem;">
                </label>
                <label style="display:block;">
                    <span style="display:block;margin-bottom:0.35rem;font-size:0.86rem;font-weight:600;color:#374151;">Body Background</span>
                    <input type="text" name="body_bg_color" value="{{ old('body_bg_color', $currentThemeSetting->body_bg_color) }}" style="width:100%;border:1px solid #d1d5db;border-radius:10px;padding:0.7rem 0.85rem;">
                </label>
                <label style="display:block;">
                    <span style="display:block;margin-bottom:0.35rem;font-size:0.86rem;font-weight:600;color:#374151;">Heading Font</span>
                    <input type="text" name="heading_font" value="{{ old('heading_font', $currentThemeSetting->heading_font) }}" style="width:100%;border:1px solid #d1d5db;border-radius:10px;padding:0.7rem 0.85rem;">
                </label>
                <label style="display:block;">
                    <span style="display:block;margin-bottom:0.35rem;font-size:0.86rem;font-weight:600;color:#374151;">Body Font</span>
                    <input type="text" name="body_font" value="{{ old('body_font', $currentThemeSetting->body_font) }}" style="width:100%;border:1px solid #d1d5db;border-radius:10px;padding:0.7rem 0.85rem;">
                </label>
            </div>

            <div style="display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0.75rem;margin-top:1rem;">
                <label style="display:flex;align-items:center;gap:0.6rem;padding:0.85rem 1rem;background:#f9fafb;border:1px solid #e5e7eb;border-radius:12px;">
                    <input type="hidden" name="show_header" value="0">
                    <input type="checkbox" name="show_header" value="1" {{ old('show_header', $currentThemeSetting->show_header) ? 'checked' : '' }}>
                    <span style="font-weight:600;color:#374151;">Show Header</span>
                </label>
                <label style="display:flex;align-items:center;gap:0.6rem;padding:0.85rem 1rem;background:#f9fafb;border:1px solid #e5e7eb;border-radius:12px;">
                    <input type="hidden" name="show_footer" value="0">
                    <input type="checkbox" name="show_footer" value="1" {{ old('show_footer', $currentThemeSetting->show_footer) ? 'checked' : '' }}>
                    <span style="font-weight:600;color:#374151;">Show Footer</span>
                </label>
                <label style="display:flex;align-items:center;gap:0.6rem;padding:0.85rem 1rem;background:#f9fafb;border:1px solid #e5e7eb;border-radius:12px;">
                    <input type="hidden" name="sticky_header" value="0">
                    <input type="checkbox" name="sticky_header" value="1" {{ old('sticky_header', $currentThemeSetting->sticky_header) ? 'checked' : '' }}>
                    <span style="font-weight:600;color:#374151;">Sticky Header</span>
                </label>
            </div>

            <div style="margin-top:1rem;display:grid;gap:1rem;">
                <label style="display:block;">
                    <span style="display:block;margin-bottom:0.35rem;font-size:0.86rem;font-weight:600;color:#374151;">Footer Text</span>
                    <textarea name="footer_text" rows="3" style="width:100%;border:1px solid #d1d5db;border-radius:10px;padding:0.7rem 0.85rem;">{{ old('footer_text', $currentThemeSetting->footer_text) }}</textarea>
                </label>
                <label style="display:block;">
                    <span style="display:block;margin-bottom:0.35rem;font-size:0.86rem;font-weight:600;color:#374151;">Meta Title</span>
                    <input type="text" name="meta_title" value="{{ old('meta_title', $currentThemeSetting->meta_title) }}" style="width:100%;border:1px solid #d1d5db;border-radius:10px;padding:0.7rem 0.85rem;">
                </label>
                <label style="display:block;">
                    <span style="display:block;margin-bottom:0.35rem;font-size:0.86rem;font-weight:600;color:#374151;">Meta Description</span>
                    <textarea name="meta_description" rows="3" style="width:100%;border:1px solid #d1d5db;border-radius:10px;padding:0.7rem 0.85rem;">{{ old('meta_description', $currentThemeSetting->meta_description) }}</textarea>
                </label>
                <label style="display:block;">
                    <span style="display:block;margin-bottom:0.35rem;font-size:0.86rem;font-weight:600;color:#374151;">Custom CSS</span>
                    <textarea name="custom_css" rows="8" style="width:100%;border:1px solid #d1d5db;border-radius:10px;padding:0.7rem 0.85rem;font-family:monospace;">{{ old('custom_css', $currentThemeSetting->custom_css) }}</textarea>
                </label>
            </div>
        </form>

        <div style="display:grid;gap:1rem;">
            <div style="background:#fff;border:1px solid #ebe5dd;border-radius:20px;padding:1.25rem;box-shadow:0 10px 30px rgba(15,23,42,0.04);">
                <h3 style="margin:0 0 0.5rem;font-size:1rem;font-weight:700;color:#18181b;">Theme Template Setup</h3>
                <p style="margin:0;color:#6b7280;font-size:0.92rem;line-height:1.6;">Theme folder slug ke naam se banao. Example: <strong>resources/views/theme/{{ $activeTheme?->slug ?? 'my-theme' }}</strong></p>
                <div style="margin-top:0.85rem;padding:0.9rem 1rem;background:#f9fafb;border:1px solid #e5e7eb;border-radius:12px;font-family:monospace;font-size:0.84rem;line-height:1.7;color:#374151;">
                    resources/views/theme/{{ $activeTheme?->slug ?? 'my-theme' }}/modules/header.blade.php<br>
                    resources/views/theme/{{ $activeTheme?->slug ?? 'my-theme' }}/modules/sidebar.blade.php<br>
                    resources/views/theme/{{ $activeTheme?->slug ?? 'my-theme' }}/modules/footer.blade.php<br>
                    resources/views/theme/{{ $activeTheme?->slug ?? 'my-theme' }}/modules/hero.blade.php
                </div>
                <p style="margin:0.85rem 0 0;color:#6b7280;font-size:0.9rem;line-height:1.6;">Blade files ke andar <strong>$themeSettings</strong> aur <strong>$activeTheme</strong> available honge.</p>
            </div>

            <div style="background:#fff;border:1px solid #ebe5dd;border-radius:20px;padding:1.25rem;box-shadow:0 10px 30px rgba(15,23,42,0.04);">
                <h3 style="margin:0 0 0.75rem;font-size:1rem;font-weight:700;color:#18181b;">Modules</h3>
                @forelse($tenantModules as $module)
                    <div style="display:flex;justify-content:space-between;align-items:center;gap:0.75rem;padding:0.7rem 0;border-bottom:1px solid #f1f5f9;">
                        <div>
                            <div style="font-weight:600;color:#111827;">{{ ucfirst(str_replace('_', ' ', $module->module_key)) }}</div>
                            <div style="font-size:0.84rem;color:#6b7280;">sort_order: {{ $module->sort_order }}</div>
                        </div>
                        <span style="font-size:0.78rem;padding:0.25rem 0.65rem;border-radius:999px;background:{{ $module->is_enabled ? '#dcfce7' : '#fee2e2' }};color:{{ $module->is_enabled ? '#166534' : '#b91c1c' }};font-weight:600;">
                            {{ $module->is_enabled ? 'Enabled' : 'Disabled' }}
                        </span>
                    </div>
                @empty
                    <p style="margin:0;color:#6b7280;">Abhi koi tenant module setting nahi mili.</p>
                @endforelse
            </div>
        </div>
    </div>
</div>
@endsection