@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:1.9rem;font-weight:700;color:#18181b;">Theme Pages</h1>
            <p style="margin:0.35rem 0 0;color:#6b7280;">Project/{{ $project->name }} · Active Theme/{{ $activeTheme->name }}</p>
        </div>
        <div style="display:flex;gap:0.75rem;align-items:center;flex-wrap:wrap;">
            <a href="{{ route('themes.customize') }}"
               style="background:#fff;color:#111827;border:1px solid #e5e7eb;padding:0.7rem 1rem;border-radius:10px;text-decoration:none;font-weight:600;">
                Back To Theme Customize
            </a>
            <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;">
                Open Page/Table Builder
            </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 ($errors->any())
        <div style="margin-bottom:1rem;padding:0.85rem 1rem;background:#fee2e2;color:#991b1b;border:1px solid #fca5a5;border-radius:12px;">
            {{ $errors->first() }}
        </div>
    @endif

    <div style="display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:1rem;align-items:start;">
        <form method="POST" action="{{ route('themes.page-templates.store') }}"
              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

            <h2 style="margin:0 0 0.75rem;font-size:1.08rem;font-weight:700;color:#111827;">Create Page And Assign Template</h2>
            <p style="margin:0 0 1rem;color:#6b7280;font-size:0.88rem;">Sirf active theme ({{ $currentThemeSetting->theme_slug }}) ke templates show honge.</p>

            <label style="display:block;margin-bottom:0.85rem;">
                <span style="display:block;margin-bottom:0.35rem;font-size:0.86rem;font-weight:600;color:#374151;">Page Name</span>
                <input type="text" name="page_name" value="{{ old('page_name') }}" placeholder="Progress"
                       style="width:100%;border:1px solid #d1d5db;border-radius:10px;padding:0.72rem 0.85rem;" required>
            </label>

            <label style="display:block;">
                <span style="display:block;margin-bottom:0.35rem;font-size:0.86rem;font-weight:600;color:#374151;">Template</span>
                <select name="template_blade" style="width:100%;border:1px solid #d1d5db;border-radius:10px;padding:0.72rem 0.85rem;" required>
                    <option value="">Select template</option>
                    @foreach($availableTemplates as $template)
                        <option value="{{ $template['view'] }}" {{ old('template_blade') === $template['view'] ? 'selected' : '' }}>
                            {{ $template['label'] }}
                        </option>
                    @endforeach
                </select>
            </label>

            <button type="submit"
                    style="margin-top:1rem;background:#1d4ed8;color:#fff;border:none;padding:0.78rem 1.1rem;border-radius:10px;font-weight:600;cursor:pointer;">
                Save Theme Page
            </button>
        </form>

        <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;">Saved Theme Pages</h3>

            @forelse($themePages as $page)
                <div style="padding:0.75rem 0;border-bottom:1px solid #f1f5f9;">
                    <div style="display:flex;justify-content:space-between;align-items:flex-start;gap:0.75rem;">
                        <div>
                            <div style="font-weight:700;color:#111827;">{{ $page->page_name }}</div>
                            <div style="font-size:0.79rem;color:#64748b;margin-top:0.2rem;">slug: {{ $page->page_slug }}</div>
                            <div style="font-size:0.79rem;color:#475569;margin-top:0.25rem;">template: {{ $page->template_blade }}</div>
                            <div style="font-size:0.79rem;color:#0f766e;margin-top:0.25rem;">records: {{ $page->records_count ?? 0 }}</div>
                            @if($page->source_table)
                                <div style="font-size:0.77rem;color:#64748b;margin-top:0.2rem;">source table: {{ $page->source_table }}</div>
                            @endif
                        </div>
                        <div style="display:flex;gap:0.35rem;align-items:center;">
                            @if($page->dynamic_page_id)
                                <a href="{{ route('themes.pages.data', ['pageId' => $page->dynamic_page_id]) }}"
                                   style="background:#2563eb;color:#fff;border-radius:7px;padding:4px 10px;font-size:0.75rem;text-decoration:none;font-weight:600;">
                                    Data
                                </a>
                            @endif
                                <form method="POST" action="{{ route('themes.page-templates.destroy', ['themePageId' => $page->id]) }}"
                                    onsubmit="return confirm('&#39;{{ addslashes($page->page_name) }}&#39; delete hoga. Sure?')">
                                @csrf
                                @method('DELETE')
                                <button type="submit"
                                        style="background:#ef4444;color:#fff;border:none;border-radius:7px;padding:4px 10px;font-size:0.75rem;font-weight:600;cursor:pointer;">
                                    Delete
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            @empty
                <p style="margin:0;color:#6b7280;font-size:0.85rem;">Abhi tak koi theme page save nahi hua.</p>
            @endforelse
        </div>
    </div>
</div>
@endsection