@extends('backEnd.layouts.master')
@section('title', 'Landing Page')

@push('styles')
<style>
.lp-panel { background:#fff;border:1px solid #e5e7eb;border-radius:4px;overflow:hidden; }
.lp-table { width:100%;border-collapse:collapse;font-size:13px; }
.lp-table thead th { background:#f3f4f6;border-bottom:1px solid #d1d5db;padding:12px 14px;font-weight:700;color:#374151;white-space:nowrap; }
.lp-table tbody td { border-bottom:1px solid #e5e7eb;padding:14px;vertical-align:middle; }
.lp-table tbody tr:nth-child(even){ background:#f9fafb; }
.lp-name-cell { display:flex;align-items:center;gap:12px; }
.lp-thumb {
    width:72px;height:72px;border-radius:6px;object-fit:cover;border:1px solid #e5e7eb;background:#f3f4f6;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;color:#9ca3af;font-size:24px;
}
.lp-id { color:#16a34a;font-weight:800;font-size:12px;margin-bottom:2px; }
.lp-title { font-weight:700;color:#111827;font-size:14px;line-height:1.35; }
.lp-badge-published { background:#dcfce7;color:#15803d;font-size:11px;font-weight:700;padding:4px 12px;border-radius:4px;display:inline-block; }
.lp-badge-draft { background:#fee2e2;color:#b91c1c;font-size:11px;font-weight:700;padding:4px 12px;border-radius:4px;display:inline-block; }
.lp-visits { background:#0d9488;color:#fff;font-size:12px;font-weight:700;padding:5px 12px;border-radius:4px;display:inline-block;min-width:52px;text-align:center; }
.lp-fb { background:#1877f2;color:#fff;font-size:11px;font-weight:700;padding:4px 10px;border-radius:4px;display:inline-block; }
.lp-orders { background:#16a34a;color:#fff;font-size:11px;font-weight:700;padding:4px 10px;border-radius:4px;display:inline-block; }
.lp-revenue { font-size:12px;font-weight:700;color:#15803d; }
.lp-btn-analytics { background:#1877f2;color:#fff; }
.lp-actions { display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;max-width:420px;margin-left:auto; }
.lp-btn { font-size:11px;font-weight:700;padding:5px 10px;border-radius:4px;border:none;text-decoration:none;display:inline-flex;align-items:center;gap:4px;white-space:nowrap; }
.lp-btn-view { background:#2563eb;color:#fff; }
.lp-btn-products { background:#16a34a;color:#fff; }
.lp-btn-customize { background:#0d9488;color:#fff; }
.lp-btn-builder { background:#334155;color:#fff; }
.lp-btn-export { background:#06b6d4;color:#fff; }
.lp-btn-clone { background:#ca8a04;color:#fff; }
.lp-btn-delete { background:#dc2626;color:#fff; }
</style>
@endpush

@section('content')
<div class="container-fluid py-3">
    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
        <h4 class="fw-bold mb-0">Landing Page</h4>
        <div class="d-flex flex-wrap gap-2">
            <a href="{{ route('admin.page-builder') }}" class="btn btn-outline-success btn-sm">
                <i class="fas fa-home me-1"></i> Customize Homepage
            </a>
            @if($canCreateLanding)
            <button class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#createLandingModal">
                <i class="fas fa-plus me-1"></i> Create New Landing Page
            </button>
            <button class="btn btn-info btn-sm text-white" data-bs-toggle="modal" data-bs-target="#importLandingModal">
                <i class="fas fa-file-import me-1"></i> Import Template
            </button>
            @else
            <button class="btn btn-success btn-sm" disabled title="Landing page limit reached">
                <i class="fas fa-plus me-1"></i> Create New Landing Page
            </button>
            <button class="btn btn-info btn-sm text-white" disabled title="Landing page limit reached">
                <i class="fas fa-file-import me-1"></i> Import Template
            </button>
            @endif
        </div>
    </div>

    @if($landingLimit < 9999)
    <div class="alert {{ $canCreateLanding ? 'alert-secondary' : 'alert-warning' }} border py-2 px-3 mb-3 small">
        <i class="fas fa-layer-group me-1"></i>
        <strong>Landing pages:</strong> {{ $landingCount }} / {{ $landingLimit }} used.
        @unless($canCreateLanding)
            Limit reached — upgrade your plan or delete unused pages to create more.
        @endunless
    </div>
    @endif

    @if(!$pixelConfigured || !$capiEnabled)
    <div class="alert alert-warning border py-2 px-3 mb-3 small">
        <strong><i class="fab fa-facebook me-1"></i> FB Tracking:</strong>
        @if(!$pixelConfigured)
            Pixel ID set করা নেই —
            <a href="{{ route('admin.social.ads', ['tab' => 'integrations']) }}">Ad Management → Integrations</a>.
        @else
            <span class="badge bg-success me-1">Pixel ON</span>
        @endif
        @if(!$capiEnabled)
            CAPI OFF —
            <a href="{{ route('admin.social.ads', ['tab' => 'integrations']) }}">Ad Management → Integrations</a> enable করুন।
        @else
            <span class="badge bg-primary me-1">CAPI ON</span>
        @endif
        Landing page-এ আলাদা pixel লাগে না — site-wide settings use হয়।
    </div>
    @else
    <div class="alert alert-success border py-2 px-3 mb-3 small">
        <i class="fab fa-facebook me-1"></i> Pixel + CAPI active — LP visit-এ <strong>ViewContent</strong>, order-এ <strong>Purchase</strong> event যাবে।
        List-এর <strong>FB Ads</strong> column = Facebook traffic (fbclid/utm) count।
    </div>
    @endif

    <div class="card shadow-sm border-0 mb-3">
        <div class="card-body py-3">
            <div class="row g-2 align-items-end">
                <div class="col-md-4">
                    <form method="POST" action="{{ route('admin.landing-page.bulk') }}" id="bulkForm" class="d-flex gap-2">
                        @csrf
                        <select name="action" class="form-select form-select-sm" required>
                            <option value="">Select Action</option>
                            <option value="publish">Publish</option>
                            <option value="unpublish">Unpublish</option>
                            <option value="delete">Delete</option>
                        </select>
                        <button type="submit" class="btn btn-success btn-sm px-3" onclick="return submitBulk()">Apply</button>
                    </form>
                </div>
                <div class="col-md-5 ms-auto">
                    <form method="GET" class="input-group input-group-sm">
                        <input type="text" name="search" class="form-control" value="{{ $search ?? '' }}" placeholder="Search...">
                        <button class="btn btn-success">Search</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="lp-panel">
        <div class="table-responsive">
            <table class="lp-table">
                <thead>
                    <tr>
                        <th style="width:36px"><input type="checkbox" id="checkAllLanding"></th>
                        <th>Name</th>
                        <th class="text-center" style="width:110px">Status</th>
                        <th class="text-center" style="width:90px">Visits</th>
                        <th class="text-center" style="width:90px" title="Facebook ads traffic (fbclid / utm)">FB Ads</th>
                        <th class="text-center" style="width:80px" title="Orders from this LP">Orders</th>
                        <th class="text-center" style="width:90px">Revenue</th>
                        <th class="text-center" style="width:70px" title="Order ÷ visit">Conv%</th>
                        <th class="text-end" style="width:460px">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($pages as $page)
                    <tr>
                        <td><input type="checkbox" class="row-check-landing" value="{{ $page->id }}"></td>
                        <td>
                            <div class="lp-name-cell">
                                @if($page->thumbnail)
                                <img src="{{ asset($page->thumbnail) }}" alt="" class="lp-thumb" style="display:block">
                                @else
                                <div class="lp-thumb"><i class="fas fa-image"></i></div>
                                @endif
                                <div>
                                    <div class="lp-id">#{{ $page->id }}</div>
                                    <div class="lp-title">{{ $page->name }}</div>
                                    <small class="text-muted">/lp/{{ $page->slug }}</small>
                                    @if(($page->editor_mode ?? 'builder') === 'template')
                                    <div class="mt-1">
                                        <span class="badge bg-primary">{{ \App\Services\LandingPageTemplateService::label($page->template_key) }}</span>
                                        @if($page->hasBuilderContent())
                                        <span class="badge bg-dark">Builder customized</span>
                                        @endif
                                    </div>
                                    @else
                                    <div class="mt-1"><span class="badge bg-secondary">Drag & Drop Builder</span></div>
                                    @endif
                                </div>
                            </div>
                        </td>
                        <td class="text-center">
                            @if($page->status)
                            <span class="lp-badge-published">Published</span>
                            @else
                            <span class="lp-badge-draft">Draft</span>
                            @endif
                        </td>
                        @php $s = $stats[$page->id] ?? ['visits'=>$page->visits_count,'fb_visits'=>0,'orders'=>0,'revenue'=>0,'conversion'=>0]; @endphp
                        <td class="text-center">
                            <span class="lp-visits" title="Conversion: {{ $s['conversion'] }}%">{{ number_format($s['visits']) }}</span>
                        </td>
                        <td class="text-center">
                            <span class="lp-fb" title="FB traffic from ads">{{ number_format($s['fb_visits']) }}</span>
                        </td>
                        <td class="text-center">
                            <span class="lp-orders">{{ number_format($s['orders']) }}</span>
                        </td>
                        <td class="text-center">
                            <span class="lp-revenue">৳{{ number_format($s['revenue'], 0) }}</span>
                        </td>
                        <td class="text-center">
                            <span class="small fw-bold text-muted">{{ $s['conversion'] }}%</span>
                        </td>
                        <td>
                            <div class="lp-actions">
                                <a href="{{ route('admin.landing-page.analytics', $page) }}" class="lp-btn lp-btn-analytics"><i class="fab fa-facebook"></i> Analytics</a>
                                <a href="{{ $page->public_url }}" target="_blank" class="lp-btn lp-btn-view"><i class="fas fa-eye"></i> View</a>
                                @if(($page->editor_mode ?? 'builder') === 'template')
                                <a href="{{ route('admin.landing-page.edit-template', $page) }}" class="lp-btn lp-btn-customize"><i class="fas fa-edit"></i> Edit Page</a>
                                <a href="{{ route('admin.landing-page.products', $page) }}" class="lp-btn lp-btn-products"><i class="fas fa-box"></i> Products</a>
                                <a href="{{ route('admin.page-builder', ['landing' => $page->id]) }}" class="lp-btn lp-btn-builder" title="Quick Edit content দিয়ে builder খুলবে"><i class="fas fa-paint-brush"></i> Builder</a>
                                @else
                                <a href="{{ route('admin.landing-page.products', $page) }}" class="lp-btn lp-btn-products"><i class="fas fa-box"></i> Products</a>
                                <a href="{{ route('admin.page-builder', ['landing' => $page->id]) }}" class="lp-btn lp-btn-customize"><i class="fas fa-paint-brush"></i> Builder</a>
                                @endif
                                <a href="{{ route('admin.landing-page.export', $page) }}" class="lp-btn lp-btn-export"><i class="fas fa-download"></i> Export</a>
                                <form method="POST" action="{{ route('admin.landing-page.clone', $page) }}" class="d-inline" onsubmit="return confirm('Clone this landing page?')">
                                    @csrf
                                    <button type="submit" class="lp-btn lp-btn-clone"><i class="fas fa-copy"></i> Clone</button>
                                </form>
                                <form method="POST" action="{{ route('admin.landing-page.destroy', $page) }}" class="d-inline" onsubmit="return confirm('Delete this landing page?')">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="lp-btn lp-btn-delete"><i class="fas fa-trash"></i> Delete</button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="9" class="text-center py-5 text-muted">
                            No landing pages yet. Create one or import a template.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($pages->hasPages())
        <div class="p-3">{{ $pages->links() }}</div>
        @endif
    </div>
</div>

<div class="modal fade" id="createLandingModal" tabindex="-1">
    <div class="modal-dialog">
        <form method="POST" action="{{ route('admin.landing-page.store') }}" class="modal-content">
            @csrf
            <input type="hidden" name="_lp_form" value="create">
            <div class="modal-header">
                <h5 class="modal-title">Create New Landing Page</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label fw-semibold">Create Mode</label>
                    <div class="vstack gap-2 @error('editor_mode') is-invalid @enderror">
                        <label class="border rounded p-3 d-flex gap-3 align-items-start {{ old('editor_mode', 'template') === 'template' ? 'border-success' : '' }}" style="cursor:pointer">
                            <input type="radio" name="editor_mode" value="template" class="mt-1" {{ old('editor_mode', 'template') === 'template' ? 'checked' : '' }}>
                            <div>
                                <strong>LP Layout 1 — Quick Edit</strong>
                                <div class="small text-muted">Organic-style sales page। Product + text edit — অথবা পরে Builder দিয়ে advanced customize।</div>
                            </div>
                        </label>
                        <label class="border rounded p-3 d-flex gap-3 align-items-start {{ old('editor_mode') === 'builder' ? 'border-success' : '' }}" style="cursor:pointer">
                            <input type="radio" name="editor_mode" value="builder" class="mt-1" {{ old('editor_mode') === 'builder' ? 'checked' : '' }}>
                            <div>
                                <strong>Drag & Drop Builder</strong>
                                <div class="small text-muted">Visual page builder — full custom design, blocks, free layout।</div>
                            </div>
                        </label>
                    </div>
                    @error('editor_mode')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                </div>
                <input type="hidden" name="template_key" value="{{ old('template_key', 'lp_layout_1') }}">
                <div class="mb-3">
                    <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') }}" required placeholder="Summer Sale Landing Page">
                    @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="mb-0">
                    <label class="form-label fw-semibold">Slug (optional)</label>
                    <input type="text" name="slug" class="form-control @error('slug') is-invalid @enderror" value="{{ old('slug') }}" placeholder="summer-sale-landing">
                    @error('slug')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-success btn-sm">Create Landing Page</button>
            </div>
        </form>
    </div>
</div>

<div class="modal fade" id="importLandingModal" tabindex="-1">
    <div class="modal-dialog">
        <form method="POST" action="{{ route('admin.landing-page.import') }}" enctype="multipart/form-data" class="modal-content">
            @csrf
            <input type="hidden" name="_lp_form" value="import">
            <div class="modal-header">
                <h5 class="modal-title">Import Template</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <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') }}" required>
                    @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="mb-3">
                    <label class="form-label fw-semibold">Template File (.html / .json)</label>
                    <input type="file" name="template" class="form-control @error('template') is-invalid @enderror" accept=".html,.htm,.json,.txt" required>
                    @error('template')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    <div class="form-text">
                        HTML import auto-cleans scripts, Elementor shortcodes, and inline styles.
                        Use JSON from this app&apos;s Export for perfect re-import.
                    </div>
                </div>
                <div class="mb-0">
                    <label class="form-label fw-semibold">Source Website URL <span class="text-muted fw-normal">(optional)</span></label>
                    <input type="url" name="source_url" class="form-control @error('source_url') is-invalid @enderror" value="{{ old('source_url') }}" placeholder="https://example.com/landing-page/">
                    @error('source_url')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    <div class="form-text">
                        Relative image paths (e.g. <code>/wp-content/uploads/...</code>) will be fixed using this URL.
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-info btn-sm text-white">Import</button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.getElementById('checkAllLanding')?.addEventListener('change', function() {
    document.querySelectorAll('.row-check-landing').forEach(cb => cb.checked = this.checked);
});
function submitBulk() {
    const checked = document.querySelectorAll('.row-check-landing:checked');
    if (!checked.length) { alert('Select at least one landing page.'); return false; }
    const action = document.querySelector('#bulkForm select[name=action]').value;
    if (!action) { alert('Select an action.'); return false; }
    if (action === 'delete' && !confirm('Delete selected landing pages?')) return false;
    const form = document.getElementById('bulkForm');
    form.querySelectorAll('input[name="page_ids[]"]').forEach(el => el.remove());
    checked.forEach(cb => {
        const input = document.createElement('input');
        input.type = 'hidden';
        input.name = 'page_ids[]';
        input.value = cb.value;
        form.appendChild(input);
    });
    return true;
}
@if($errors->any())
(function() {
    const form = @json(old('_lp_form'));
    const modalId = form === 'import' ? 'importLandingModal' : (form === 'create' ? 'createLandingModal' : null);
    if (!modalId) return;
    const el = document.getElementById(modalId);
    if (el) bootstrap.Modal.getOrCreateInstance(el).show();
})();
@endif
</script>
@endpush