@extends('admin.layouts.app')

@section('title', $page->exists ? 'Edit landing page' : 'New landing page')
@section('crumbs')
    <a href="{{ route('admin.landing-pages.index') }}">Landing Pages</a>
    <span>{{ $page->exists ? $page->title : 'New' }}</span>
@endsection

@section('content')
    @php
        $lines = fn ($rows, $a, $b) => collect($rows ?? [])->map(fn ($r) => $r[$a].' | '.$r[$b])->implode("\n");
        $url = $page->exists ? route('landing.show', $page) : null;
    @endphp

    <form method="POST" enctype="multipart/form-data"
          action="{{ $page->exists ? route('admin.landing-pages.update', $page) : route('admin.landing-pages.store') }}">
        @csrf
        @if ($page->exists) @method('PUT') @endif

        <div class="grid-2">
            <div>
                {{-- 1. product --}}
                <div class="card">
                    <div class="card-head"><h2>① Product &amp; offer</h2></div>
                    <div class="card-body form-grid">
                        @include('admin.partials.field', ['name' => 'title', 'label' => 'Page name (shudhu admin dekhbe)', 'value' => $page->title, 'required' => true, 'placeholder' => 'e.g. Denim Jeans Eid Offer'])
                        @include('admin.partials.slug-field', ['model' => $page, 'from' => 'f_title', 'source' => 'title'])
                        <div class="field span-2">
                            <label for="f_product_id">Kon product er jonno? <span class="req">*</span></label>
                            <select id="f_product_id" name="product_id" required class="{{ $errors->has('product_id') ? 'is-invalid' : '' }}">
                                <option value="">— Select product —</option>
                                @foreach ($products as $p)
                                    <option value="{{ $p->id }}" @selected(old('product_id', $page->product_id) == $p->id)>
                                        {{ $p->name }}@if ($p->sku) ({{ $p->sku }})@endif · ৳{{ number_format($p->price) }} · stock {{ $p->stock }}
                                    </option>
                                @endforeach
                            </select>
                            <small class="hint">Size, color, chobi ar stock ei product theke ashbe.</small>
                            @error('product_id') <div class="err">{{ $message }}</div> @enderror
                        </div>
                        @include('admin.partials.field', ['name' => 'offer_price', 'label' => 'Offer price (৳)', 'type' => 'number', 'value' => $page->offer_price, 'attrs' => 'min="0" step="1"', 'hint' => 'Faka rakhle product er dam. Product er dam er cheye kom dile kete deya dam dekhabe.'])
                        <div class="field">
                            <label>&nbsp;</label>
                            @include('admin.partials.check', ['name' => 'free_shipping', 'label' => 'Free delivery', 'checked' => $page->free_shipping, 'hint' => 'Delivery charge nebe na'])
                        </div>
                    </div>
                </div>

                {{-- 2. hero --}}
                <div class="card">
                    <div class="card-head"><h2>② Upore boro banner (hero)</h2></div>
                    <div class="card-body form-grid">
                        @include('admin.partials.field', ['name' => 'badge_text', 'label' => 'Choto badge', 'value' => $page->badge_text, 'placeholder' => '🔥 সীমিত সময়ের অফার'])
                        @include('admin.partials.field', ['name' => 'button_text', 'label' => 'Button er lekha', 'value' => $page->button_text])
                        @include('admin.partials.field', ['name' => 'headline', 'label' => 'Headline (boro lekha)', 'value' => $page->headline, 'required' => true, 'full' => true, 'placeholder' => 'e.g. ঈদের সেরা ডেনিম জিন্স — এখন মাত্র ৳১,৪৯০'])
                        @include('admin.partials.field', ['name' => 'subheadline', 'label' => 'Sub-headline', 'type' => 'textarea', 'value' => $page->subheadline, 'full' => true, 'rows' => 2, 'placeholder' => 'Product ta keno kinbe, 1-2 line e'])
                        @include('admin.partials.image', ['name' => 'hero_image', 'label' => 'Banner er chobi', 'path' => $page->hero_image, 'hint' => 'Faka rakhle product er chobi dekhabe. Model pore ache emon chobi bhalo kaj kore. Max 4 MB.'])
                        @include('admin.partials.field', ['name' => 'video_url', 'label' => 'YouTube video (optional)', 'value' => $page->video_url, 'full' => true, 'placeholder' => 'https://youtu.be/...', 'hint' => 'Product er video thakle banner er niche dekhabe.'])
                        @include('admin.partials.field', ['name' => 'countdown_end', 'label' => 'Offer sesh hobe (countdown)', 'type' => 'datetime-local', 'value' => $page->countdown_end?->format('Y-m-d\TH:i'), 'hint' => 'Faka rakhle countdown dekhabe na.'])
                    </div>
                </div>

                {{-- 3. sections --}}
                <div class="card">
                    <div class="card-head"><h2>③ Section gula</h2><span class="muted small">Faka rakhle oi section dekhabe na</span></div>
                    <div class="card-body form-grid">
                        @include('admin.partials.field', ['name' => 'features', 'label' => '✅ Keno kinben (ek line e ekta)', 'type' => 'textarea', 'full' => true, 'rows' => 5, 'value' => implode("\n", $page->features ?? [])])
                        @include('admin.partials.field', ['name' => 'reviews', 'label' => '⭐ Customer review (Nam | Review)', 'type' => 'textarea', 'full' => true, 'rows' => 4, 'value' => $lines($page->reviews, 'name', 'text'), 'placeholder' => "Rakib, Mirpur | কাপড়ের মান অসাধারণ, সাইজ একদম পারফেক্ট।\nSabbir, Chattogram | দুই দিনে ডেলিভারি পেয়েছি।", 'hint' => 'Prottek line e: nam, tarpor | dag, tarpor review.'])
                        @include('admin.partials.field', ['name' => 'faqs', 'label' => '❓ FAQ (Proshno | Uttor)', 'type' => 'textarea', 'full' => true, 'rows' => 4, 'value' => $lines($page->faqs, 'q', 'a'), 'hint' => 'Prottek line e: proshno, tarpor | dag, tarpor uttor.'])
                    </div>
                </div>
            </div>

            <div>
                {{-- design --}}
                <div class="card">
                    <div class="card-head"><h2>🎨 Design</h2></div>
                    <div class="card-body form-grid">
                        @include('admin.partials.field', ['name' => 'theme_color', 'label' => 'Main color', 'type' => 'color', 'value' => $page->theme_color, 'full' => true, 'hint' => 'Banner, button ar heading er rong'])
                        @include('admin.partials.field', ['name' => 'accent_color', 'label' => 'Highlight color', 'type' => 'color', 'value' => $page->accent_color, 'full' => true, 'hint' => 'Badge, dam ar countdown er rong'])
                        <div class="field span-2">
                            <label>Ready theme</label>
                            <div class="lp-presets">
                                @foreach ([['#0b2d6b', '#ffb400', 'Navy'], ['#111827', '#f59e0b', 'Black'], ['#7f1d1d', '#fbbf24', 'Maroon'], ['#065f46', '#facc15', 'Green'], ['#5b21b6', '#f472b6', 'Purple'], ['#c2410c', '#fde047', 'Orange']] as [$m, $a, $n])
                                    <button type="button" class="lp-preset" data-main="{{ $m }}" data-accent="{{ $a }}" title="{{ $n }}">
                                        <i style="background:{{ $m }}"></i><i style="background:{{ $a }}"></i><span>{{ $n }}</span>
                                    </button>
                                @endforeach
                            </div>
                        </div>
                        <div class="field span-2">
                            @include('admin.partials.check', ['name' => 'is_active', 'label' => 'Page live', 'checked' => $page->is_active, 'hint' => 'Off korle customer page ta dekhbe na'])
                        </div>
                    </div>
                    <div class="form-actions">
                        @if ($url)<a href="{{ $url }}" target="_blank" rel="noopener" class="btn btn-ghost">Open ↗</a>@endif
                        <button type="submit" class="btn btn-primary">💾 Save</button>
                    </div>
                </div>

                @if ($url)
                    <div class="card">
                        <div class="card-head"><h2>🔗 Ad er link</h2></div>
                        <div class="card-body">
                            <div class="lp-link">
                                <input type="text" value="{{ $url }}" readonly onclick="this.select()">
                                <button type="button" class="btn btn-primary btn-sm" data-copy="{{ $url }}">Copy</button>
                            </div>
                            <p class="hint" style="margin:8px 0 0">{{ $page->orders()->count() }} order ei page theke esheche.</p>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-head"><h2>📱 Preview</h2><span class="muted small">Save korle update hobe</span></div>
                        <div class="card-body">
                            <div class="lp-phone"><iframe src="{{ $url }}?preview=1" title="Landing page preview" loading="lazy"></iframe></div>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </form>
@endsection

@push('scripts')
<script>
    // ready theme: duita color ekshathe boshay
    document.querySelectorAll('.lp-preset').forEach(function (b) {
        b.addEventListener('click', function () {
            [['f_theme_color', b.dataset.main], ['f_accent_color', b.dataset.accent]].forEach(function (p) {
                var picker = document.getElementById(p[0]), txt = document.getElementById(p[0] + '_txt');
                picker.value = p[1]; txt.value = p[1];
            });
        });
    });
</script>
@endpush