@extends('backEnd.layouts.master')
@section('title', 'Edit Landing — ' . $landingPage->name)

@push('styles')
<style>
.lpt-panel { background:#fff;border:1px solid #e5e7eb;border-radius:8px;margin-bottom:16px;overflow:hidden; }
.lpt-head { background:#f0fdf4;border-bottom:1px solid #bbf7d0;padding:12px 16px;font-weight:800;color:#14532d; }
.lpt-body { padding:16px; }
.lpt-row-item { border:1px dashed #d1d5db;border-radius:8px;padding:12px;margin-bottom:10px;background:#fafafa; }
</style>
@endpush

@section('content')
<div class="container-fluid py-3">
    <div class="d-flex justify-content-between align-items-start mb-3 flex-wrap gap-2">
        <div>
            <h4 class="fw-bold mb-1">Edit Landing Page</h4>
            <div class="small text-muted">
                <span class="badge bg-success">{{ \App\Services\LandingPageTemplateService::label($templateKey) }}</span>
                <span class="ms-2">/lp/{{ $landingPage->slug }}</span>
            </div>
        </div>
        <div class="d-flex flex-wrap gap-2">
            <a href="{{ route('admin.page-builder', ['landing' => $landingPage->id]) }}" class="btn btn-dark btn-sm"><i class="fas fa-paint-brush me-1"></i> Open Builder</a>
            <a href="{{ route('admin.landing-page.analytics', $landingPage) }}" class="btn btn-primary btn-sm"><i class="fab fa-facebook me-1"></i> Analytics</a>
            <a href="{{ $landingPage->public_url }}" target="_blank" class="btn btn-outline-primary btn-sm"><i class="fas fa-eye me-1"></i> Preview</a>
            <a href="{{ route('admin.landing-page.index') }}" class="btn btn-outline-secondary btn-sm">Back</a>
        </div>
    </div>

    <div class="alert alert-info py-2 small">
        <strong>Quick Edit mode</strong> — fixed layout-এ text, color, product, FAQ edit করুন।
        Advanced design-এর জন্য <strong>Open Builder</strong> ব্যবহার করুন — template content auto-load হবে।
        @if($landingPage->hasBuilderContent())
        <span class="badge bg-dark ms-1">Builder customized</span> — live site builder version দেখাচ্ছে। Quick Edit save করলে builder reset করতে নিচে checkbox use করুন।
        @endif
    </div>

    <form method="POST" action="{{ route('admin.landing-page.edit-template.update', $landingPage) }}">
        @csrf
        <div class="row g-3">
            <div class="col-lg-8">
                <div class="lpt-panel">
                    <div class="lpt-head">Page Settings</div>
                    <div class="lpt-body row g-3">
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Page Name</label>
                            <input type="text" name="name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name', $landingPage->name) }}" required>
                            @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Slug</label>
                            <input type="text" name="slug" class="form-control @error('slug') is-invalid @enderror" value="{{ old('slug', $landingPage->slug) }}">
                            @error('slug')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-semibold">Primary Color</label>
                            <input type="color" name="primary_color" class="form-control form-control-color w-100" value="{{ old('primary_color', $templateData['primary_color'] ?? '#16a34a') }}">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-semibold">Hero BG</label>
                            <input type="color" name="hero_bg" class="form-control form-control-color w-100" value="{{ old('hero_bg', $templateData['hero_bg'] ?? '#0b6019') }}">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-semibold">Content BG</label>
                            <input type="color" name="content_bg" class="form-control form-control-color w-100" value="{{ old('content_bg', $templateData['content_bg'] ?? '#0a4b02') }}">
                        </div>
                        <div class="col-md-4 d-flex align-items-end">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" name="status" value="1" id="lpStatus" {{ old('status', $landingPage->status) ? 'checked' : '' }}>
                                <label class="form-check-label fw-semibold" for="lpStatus">Published</label>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="lpt-panel">
                    <div class="lpt-head">Hero Section</div>
                    <div class="lpt-body">
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Headline</label>
                            <textarea name="hero_title" class="form-control" rows="2">{{ old('hero_title', $templateData['hero_title'] ?? '') }}</textarea>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Sub headline</label>
                            <textarea name="hero_subtitle" class="form-control" rows="2">{{ old('hero_subtitle', $templateData['hero_subtitle'] ?? '') }}</textarea>
                        </div>
                        <div class="mb-0">
                            <label class="form-label fw-semibold">Button text</label>
                            <input type="text" name="hero_cta" class="form-control" value="{{ old('hero_cta', $templateData['hero_cta'] ?? '') }}">
                        </div>
                    </div>
                </div>

                <div class="lpt-panel">
                    <div class="lpt-head"><i class="fab fa-youtube me-1"></i> Video & Gallery (Organic-style)</div>
                    <div class="lpt-body">
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Hero YouTube Video</label>
                            <input type="url" name="hero_video" class="form-control" placeholder="https://www.youtube.com/watch?v=... বা youtu.be/..."
                                   value="{{ old('hero_video', $templateData['hero_video'] ?? '') }}">
                            <small class="text-muted">Headline-এর নিচে main product video দেখাবে</small>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Customer Review Videos (YouTube)</label>
                            @php $reviewVideos = old('review_videos', $templateData['review_videos'] ?? ['','','']); @endphp
                            @foreach(array_pad($reviewVideos, 3, '') as $i => $rv)
                            <input type="url" name="review_videos[]" class="form-control form-control-sm mb-2"
                                   placeholder="Review video {{ $i + 1 }} URL" value="{{ $rv }}">
                            @endforeach
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Promo / Product Image URL</label>
                            <input type="text" name="promo_image" class="form-control" placeholder="https://... বা uploads/..."
                                   value="{{ old('promo_image', $templateData['promo_image'] ?? '') }}">
                            <small class="text-muted">খালি থাকলে linked product image use হবে</small>
                        </div>
                        <div class="mb-2">
                            <label class="form-label fw-semibold">Photo Slider (Gallery)</label>
                            @php $galleryImages = old('gallery_images', $templateData['gallery_images'] ?? ['','']); @endphp
                            @foreach(array_pad($galleryImages, 4, '') as $i => $gi)
                            <input type="text" name="gallery_images[]" class="form-control form-control-sm mb-2"
                                   placeholder="Gallery image {{ $i + 1 }} URL" value="{{ $gi }}">
                            @endforeach
                            <small class="text-muted">Customer photo slider — mobile swipe + auto slide</small>
                        </div>
                        <input type="text" name="gallery_title" class="form-control form-control-sm" placeholder="Gallery title (optional)"
                               value="{{ old('gallery_title', $templateData['gallery_title'] ?? '') }}">
                    </div>
                </div>

                <div class="lpt-panel">
                    <div class="lpt-head">Comparison Table</div>
                    <div class="lpt-body">
                        <div class="row g-2 mb-3">
                            <div class="col-md-4"><input type="text" name="compare_title" class="form-control" placeholder="Title" value="{{ old('compare_title', $templateData['compare_title'] ?? '') }}"></div>
                            <div class="col-md-4"><input type="text" name="compare_left" class="form-control" placeholder="Left column" value="{{ old('compare_left', $templateData['compare_left'] ?? '') }}"></div>
                            <div class="col-md-4"><input type="text" name="compare_right" class="form-control" placeholder="Right column" value="{{ old('compare_right', $templateData['compare_right'] ?? '') }}"></div>
                        </div>
                        @foreach(old('compare_rows', $templateData['compare_rows'] ?? []) as $i => $row)
                        <div class="lpt-row-item row g-2">
                            <div class="col-md-4"><input type="text" name="compare_rows[{{ $i }}][feature]" class="form-control form-control-sm" placeholder="Feature" value="{{ $row['feature'] ?? '' }}"></div>
                            <div class="col-md-4"><input type="text" name="compare_rows[{{ $i }}][left]" class="form-control form-control-sm" placeholder="Generic" value="{{ $row['left'] ?? '' }}"></div>
                            <div class="col-md-4"><input type="text" name="compare_rows[{{ $i }}][right]" class="form-control form-control-sm" placeholder="Our product" value="{{ $row['right'] ?? '' }}"></div>
                        </div>
                        @endforeach
                    </div>
                </div>

                <div class="lpt-panel">
                    <div class="lpt-head">Benefits & How It Works</div>
                    <div class="lpt-body">
                        <label class="form-label fw-semibold">Benefits title</label>
                        <input type="text" name="benefits_title" class="form-control mb-2" value="{{ old('benefits_title', $templateData['benefits_title'] ?? '') }}">
                        @foreach(old('benefits', $templateData['benefits'] ?? []) as $i => $line)
                        <input type="text" name="benefits[{{ $i }}]" class="form-control form-control-sm mb-2" value="{{ $line }}" placeholder="Benefit {{ $i + 1 }}">
                        @endforeach
                        <hr>
                        <label class="form-label fw-semibold">How it works title</label>
                        <input type="text" name="how_title" class="form-control mb-2" value="{{ old('how_title', $templateData['how_title'] ?? '') }}">
                        @foreach(old('how_items', $templateData['how_items'] ?? []) as $i => $line)
                        <input type="text" name="how_items[{{ $i }}]" class="form-control form-control-sm mb-2" value="{{ $line }}" placeholder="Point {{ $i + 1 }}">
                        @endforeach
                    </div>
                </div>

                <div class="lpt-panel">
                    <div class="lpt-head">Reviews</div>
                    <div class="lpt-body">
                        <input type="text" name="reviews_title" class="form-control mb-3" value="{{ old('reviews_title', $templateData['reviews_title'] ?? '') }}">
                        @php
                            $reviews = old('reviews', $templateData['reviews'] ?? []);
                            while (count($reviews) < 3) {
                                $reviews[] = ['text' => '', 'name' => '', 'rating' => 5];
                            }
                        @endphp
                        @foreach($reviews as $i => $review)
                        <div class="lpt-row-item">
                            <textarea name="reviews[{{ $i }}][text]" class="form-control form-control-sm mb-2" rows="2" placeholder="Review text">{{ $review['text'] ?? '' }}</textarea>
                            <div class="row g-2">
                                <div class="col-8"><input type="text" name="reviews[{{ $i }}][name]" class="form-control form-control-sm" value="{{ $review['name'] ?? '' }}" placeholder="Name, City"></div>
                                <div class="col-4"><input type="number" name="reviews[{{ $i }}][rating]" class="form-control form-control-sm" min="1" max="5" value="{{ $review['rating'] ?? 5 }}"></div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>

                <div class="lpt-panel">
                    <div class="lpt-head">FAQ & Final CTA</div>
                    <div class="lpt-body">
                        <input type="text" name="faq_title" class="form-control mb-3" value="{{ old('faq_title', $templateData['faq_title'] ?? '') }}">
                        @foreach(old('faqs', $templateData['faqs'] ?? []) as $i => $faq)
                        <div class="lpt-row-item">
                            <input type="text" name="faqs[{{ $i }}][q]" class="form-control form-control-sm mb-2" value="{{ $faq['q'] ?? '' }}" placeholder="Question">
                            <textarea name="faqs[{{ $i }}][a]" class="form-control form-control-sm" rows="2" placeholder="Answer">{{ $faq['a'] ?? '' }}</textarea>
                        </div>
                        @endforeach
                        <hr>
                        <input type="text" name="cta_title" class="form-control mb-2" value="{{ old('cta_title', $templateData['cta_title'] ?? '') }}" placeholder="Final CTA title">
                        <textarea name="cta_subtitle" class="form-control mb-2" rows="2" placeholder="Final CTA subtitle">{{ old('cta_subtitle', $templateData['cta_subtitle'] ?? '') }}</textarea>
                        <input type="text" name="cta_button" class="form-control" value="{{ old('cta_button', $templateData['cta_button'] ?? '') }}" placeholder="Button text">
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="lpt-panel sticky-top" style="top:80px;">
                    <div class="lpt-head">Linked Product</div>
                    <div class="lpt-body">
                        <p class="small text-muted mb-2">
                            Active theme:
                            <span class="badge bg-success">{{ ucfirst($activeTheme ?? \App\Services\ThemeService::active()) }}</span>
                        </p>
                        <p class="small text-muted">প্রথম selected product — image, price, order form-এ auto আসবে। শুধু active theme-এর product দেখানো হচ্ছে।</p>
                        <div style="max-height:360px;overflow:auto;">
                            @forelse($products as $product)
                            <label class="d-flex align-items-center gap-2 border rounded p-2 mb-2 w-100" style="cursor:pointer">
                                <input type="checkbox" name="product_ids[]" value="{{ $product->id }}"
                                    {{ in_array($product->id, old('product_ids', $landingPage->product_ids ?? [])) ? 'checked' : '' }}>
                                @if($product->thumbnail)
                                <img src="{{ asset($product->thumbnail) }}" width="36" height="36" class="rounded" style="object-fit:cover">
                                @endif
                                <span class="small fw-semibold">{{ Str::limit($product->name, 40) }}</span>
                            </label>
                            @empty
                            <p class="small text-muted mb-0">এই theme-এ কোনো published product নেই।</p>
                            @endforelse
                        </div>
                    </div>
                </div>

                <div class="d-grid gap-2 mt-3">
                    @if($landingPage->hasBuilderContent())
                    <div class="form-check mb-1">
                        <input class="form-check-input" type="checkbox" name="reset_builder" value="1" id="resetBuilderCheck">
                        <label class="form-check-label small" for="resetBuilderCheck">
                            Builder customization reset করুন — live site আবার Quick Edit content দেখাবে
                        </label>
                    </div>
                    @endif
                    <button type="submit" class="btn btn-success btn-lg"><i class="fas fa-save me-1"></i> Save & Publish</button>
                    <div class="small text-muted text-center">Quick Edit + Builder দুটোই ব্যবহার করা যায়</div>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection