@extends('layouts.marketing')

@section('title', __('app.homepage_visual_title'))

@push('head')
<style>
    [x-cloak] { display: none !important; }
</style>
@endpush

@section('content')
@php
    $homepageUploadMessages = [
        'failed' => __('app.homepage_upload_failed'),
        'storage' => __('app.homepage_upload_storage_not_writable'),
        'tooLarge' => __('app.homepage_upload_too_large'),
        'session' => __('app.homepage_upload_session'),
        'forbidden' => __('app.homepage_upload_forbidden'),
    ];
@endphp
{{-- JSON u x-data atributu lomi Alpine; config + handler u istom scriptu pre x-data. --}}
<script>
window.__ajrHomepageEdit = {
    offerings: @json($offeringsEditor),
    testimonials: @json($testimonialsEditor),
    marketingPricing: @json($marketingPricingEditor ?? []),
    marketingInstructors: @json($marketingInstructorsEditor ?? []),
    heroDesktopPreviewUrl: @json($heroDesktopPreviewUrl ?? ''),
    heroMobilePreviewUrl: @json($heroMobilePreviewUrl ?? ''),
    headerLogoPreviewUrl: @json($headerLogoPreviewUrl ?? ''),
    uploadUrl: @json(route('admin.homepage.upload-asset')),
    csrf: @json(csrf_token()),
    uploadMessages: @json($homepageUploadMessages),
};
function ajrHomepageParseUploadResult(res, text, messages) {
    messages = messages || {};
    var data = null;
    try { data = text ? JSON.parse(text) : null; } catch (e) { data = null; }
    if (res.ok && data && data.path) {
        return { ok: true, data: data };
    }
    var msg = messages.failed || 'Upload failed';
    if (data && data.message) {
        msg = data.message;
    } else if (data && data.errors && typeof data.errors === 'object') {
        msg = Object.values(data.errors).flat().join('\n');
    } else if (res.status === 413) {
        msg = messages.tooLarge || msg;
    } else if (res.status === 419) {
        msg = messages.session || msg;
    } else if (res.status === 401 || res.status === 403) {
        msg = messages.forbidden || msg;
    } else if (text && text.length > 0 && text.length < 600 && text.trim().indexOf('<') !== 0) {
        msg = text.trim();
    } else {
        msg = msg + ' (HTTP ' + res.status + ')';
    }
    return { ok: false, message: msg };
}
function ajrHomepageNormalizeUploadPath(p) {
    if (!p || typeof p !== 'string') return p;
    var s = p.replace(/^\/+/, '');
    if (s.indexOf('/') === -1 && /^[A-Za-z0-9._-]+\.(jpe?g|png|gif|webp)$/i.test(s)) {
        var stem = s.replace(/\.[^.]+$/, '');
        if (stem.length >= 16) return 'homepage/' + s;
    }
    return p;
}
function ajrHomepageNewOfferingClientId() {
    return 'o-' + Date.now().toString(36) + '-' + Math.random().toString(36).slice(2, 10);
}
function ajrHomepageNormalizeOfferingsForEditor(raw) {
    if (!Array.isArray(raw)) return [];
    var out = JSON.parse(JSON.stringify(raw));
    out.forEach(function (row, idx) {
        if (row.visible === undefined) {
            row.visible = true;
        } else if (typeof row.visible === 'string') {
            row.visible = ['0', 'false', 'no', 'off', ''].indexOf(row.visible.toLowerCase()) === -1;
        }
        row._clientId = row._clientId || ajrHomepageNewOfferingClientId();
    });
    return out;
}
function homepageVisualState(cfg) {
    cfg = cfg && typeof cfg === 'object' ? cfg : {};
    var uploadMessages = cfg.uploadMessages || {};
    return {
        modal: null,
        offerings: ajrHomepageNormalizeOfferingsForEditor(cfg.offerings),
        testimonials: Array.isArray(cfg.testimonials) ? JSON.parse(JSON.stringify(cfg.testimonials)) : [],
        marketingPricing: Array.isArray(cfg.marketingPricing) ? JSON.parse(JSON.stringify(cfg.marketingPricing)) : [],
        marketingInstructors: Array.isArray(cfg.marketingInstructors) ? JSON.parse(JSON.stringify(cfg.marketingInstructors)) : [],
        heroPreview: {
            desktop: cfg.heroDesktopPreviewUrl || '',
            mobile: cfg.heroMobilePreviewUrl || '',
            logo: cfg.headerLogoPreviewUrl || '',
        },
        offeringDragFrom: null,
        uploadUrl: cfg.uploadUrl,
        csrf: cfg.csrf,
        uploadMessages: uploadMessages,
        openModal: function (m) { this.modal = m; },
        closeModal: function () { this.modal = null; },
        emptyOffering: function () {
            return { title_sr: '', title_en: '', description_sr: '', description_en: '', duration_sr: '', duration_en: '', level_sr: '', level_en: '', max_students_sr: '', max_students_en: '', image_path: '', visible: true, _previewUrl: '', _clientId: ajrHomepageNewOfferingClientId() };
        },
        emptyTestimonial: function () {
            return { rating: 5, content_sr: '', content_en: '', author_name: '', role_sr: '', role_en: '' };
        },
        emptyPricingCard: function () {
            return { name_sr: '', name_en: '', description_sr: '', description_en: '', price_line_sr: '', price_line_en: '', period_sr: '', period_en: '', is_featured: false, features_sr: '', features_en: '', cta_label_sr: '', cta_label_en: '', cta_url: '' };
        },
        emptyInstructorCard: function () {
            return { name: '', title_sr: '', title_en: '', image_path: '' };
        },
        addOffering: function () { this.offerings.push(this.emptyOffering()); },
        addTestimonial: function () { this.testimonials.push(this.emptyTestimonial()); },
        addPricing: function () { this.marketingPricing.push(this.emptyPricingCard()); },
        addInstructor: function () { this.marketingInstructors.push(this.emptyInstructorCard()); },
        removeOffering: function (i) { this.offerings.splice(i, 1); if (this.offerings.length === 0) this.addOffering(); },
        removeTestimonial: function (i) { this.testimonials.splice(i, 1); if (this.testimonials.length === 0) this.addTestimonial(); },
        removePricing: function (i) { this.marketingPricing.splice(i, 1); },
        removeInstructor: function (i) { this.marketingInstructors.splice(i, 1); },
        offeringDragStart: function (i, ev) {
            this.offeringDragFrom = i;
            try { ev.dataTransfer.setData('text/plain', String(i)); } catch (e) {}
            ev.dataTransfer.effectAllowed = 'move';
        },
        offeringDragEnd: function () {
            this.offeringDragFrom = null;
        },
        offeringDragOver: function (i, ev) {
            ev.preventDefault();
        },
        offeringDrop: function (toIndex, ev) {
            ev.preventDefault();
            var from = this.offeringDragFrom;
            if (from === null || from === undefined) return;
            if (from === toIndex) return;
            var a = this.offerings;
            var item = a.splice(from, 1)[0];
            var insertAt = from < toIndex ? toIndex - 1 : toIndex;
            a.splice(insertAt, 0, item);
            this.offeringDragFrom = null;
        },
        syncJsonFields: function () {
            var stripOffering = function (r) {
                var o = JSON.parse(JSON.stringify(r));
                Object.keys(o).forEach(function (k) {
                    if (k.indexOf('_') === 0) delete o[k];
                });
                return o;
            };
            this.$refs.offJson.value = JSON.stringify(this.offerings.map(stripOffering));
            this.$refs.tstJson.value = JSON.stringify(this.testimonials);
            this.$refs.mpJson.value = JSON.stringify(this.marketingPricing);
            this.$refs.miJson.value = JSON.stringify(this.marketingInstructors);
        },
        uploadOfferingImage: async function (ev, i) {
            var f = ev.target && ev.target.files && ev.target.files[0];
            if (!f) return;
            var body = new FormData();
            body.append('file', f);
            var res = await fetch(this.uploadUrl, {
                method: 'POST',
                body: body,
                headers: {
                    'X-CSRF-TOKEN': this.csrf,
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                },
                credentials: 'same-origin',
            });
            var text = await res.text();
            var pr = ajrHomepageParseUploadResult(res, text, this.uploadMessages);
            if (!pr.ok) {
                alert(pr.message);
                ev.target.value = '';
                return;
            }
            this.offerings[i].image_path = ajrHomepageNormalizeUploadPath(pr.data.path);
            this.offerings[i]._previewUrl = pr.data.url || this.offerings[i]._previewUrl || '';
            ev.target.value = '';
        },
        clearOfferingImage: function (i) {
            if (!this.offerings[i]) return;
            this.offerings[i].image_path = '';
            this.offerings[i]._previewUrl = '';
        },
        uploadTeamImage: async function (ev, i) {
            var f = ev.target && ev.target.files && ev.target.files[0];
            if (!f) return;
            var body = new FormData();
            body.append('file', f);
            var res = await fetch(this.uploadUrl, {
                method: 'POST',
                body: body,
                headers: {
                    'X-CSRF-TOKEN': this.csrf,
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                },
                credentials: 'same-origin',
            });
            var text = await res.text();
            var pr = ajrHomepageParseUploadResult(res, text, this.uploadMessages);
            if (!pr.ok) {
                alert(pr.message);
                ev.target.value = '';
                return;
            }
            this.marketingInstructors[i].image_path = ajrHomepageNormalizeUploadPath(pr.data.path);
            ev.target.value = '';
        },
        uploadHeroSlot: async function (ev, slot) {
            var f = ev.target && ev.target.files && ev.target.files[0];
            if (!f) return;
            var body = new FormData();
            body.append('file', f);
            var res = await fetch(this.uploadUrl, {
                method: 'POST',
                body: body,
                headers: {
                    'X-CSRF-TOKEN': this.csrf,
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                },
                credentials: 'same-origin',
            });
            var text = await res.text();
            var pr = ajrHomepageParseUploadResult(res, text, this.uploadMessages);
            if (!pr.ok) {
                alert(pr.message);
                ev.target.value = '';
                return;
            }
            var pathNorm = ajrHomepageNormalizeUploadPath(pr.data.path);
            if (slot === 'desktop') {
                this.$refs.heroPathDesktop.value = pathNorm;
                this.heroPreview.desktop = pr.data.url || '';
            } else if (slot === 'mobile') {
                this.$refs.heroPathMobile.value = pathNorm;
                this.heroPreview.mobile = pr.data.url || '';
            } else {
                this.$refs.heroPathLogo.value = pathNorm;
                this.heroPreview.logo = pr.data.url || '';
            }
            ev.target.value = '';
        }
    };
}
</script>
<div
    x-data="homepageVisualState(window.__ajrHomepageEdit || {})"
    x-on:keydown.escape.window="closeModal()"
    class="relative"
>
    {{-- Ne koristiti class "hidden" (display:none) na formi: u nekim pregledačima fajl-polja sa form="..." ne šalju se. --}}
    <form id="visual-home-form" method="POST" action="{{ route('admin.homepage.update') }}" enctype="multipart/form-data" class="sr-only w-px h-px overflow-hidden fixed left-0 top-0 opacity-0 -z-10" aria-hidden="true" @submit="syncJsonFields()">
        @csrf
        @method('PUT')
        <input type="hidden" name="hero_image_desktop_path" x-ref="heroPathDesktop" value="" autocomplete="off" />
        <input type="hidden" name="hero_image_mobile_path" x-ref="heroPathMobile" value="" autocomplete="off" />
        <input type="hidden" name="header_logo_path" x-ref="heroPathLogo" value="" autocomplete="off" />
        <input type="hidden" name="offerings_json" x-ref="offJson" value="" />
        <input type="hidden" name="testimonials_json" x-ref="tstJson" value="" />
        <input type="hidden" name="marketing_pricing_json" x-ref="mpJson" value="" />
        <input type="hidden" name="marketing_instructors_json" x-ref="miJson" value="" />
    </form>
    {{-- Sticky toolbar — ispod fiksnog site headera --}}
    <div class="sticky top-0 z-[60] border-b border-border/90 bg-gradient-to-b from-amber-50/95 to-background/95 backdrop-blur-md shadow-sm">
        <div class="max-w-7xl mx-auto px-3 sm:px-4 py-2 sm:py-2.5 flex flex-wrap items-center justify-between gap-2 text-sm">
            <div class="flex flex-wrap items-center gap-2 min-w-0">
                <a href="{{ route('admin.dashboard') }}" class="inline-flex items-center gap-1.5 text-foreground/80 hover:text-primary font-medium shrink-0">
                    <i class="fas fa-arrow-left text-xs"></i> {{ __('app.homepage_visual_back') }}
                </a>
                <span class="text-border/80 hidden sm:inline">|</span>
                <a href="{{ route('admin.homepage.index') }}" class="text-foreground/70 hover:text-primary shrink-0">{{ __('app.homepage_hub_title') }}</a>
                <span class="text-border/80 hidden sm:inline">|</span>
                <span class="text-foreground/60 text-xs sm:text-sm font-medium shrink-0">{{ __('app.homepage_visual_title') }}</span>
                <span class="text-border/80 hidden sm:inline">|</span>
                <a href="{{ route('home') }}" target="_blank" class="text-foreground/70 hover:text-primary inline-flex items-center gap-1 shrink-0">
                    <i class="fas fa-external-link-alt text-xs"></i> {{ __('app.homepage_preview') }}
                </a>
            </div>
            <div class="flex flex-wrap items-center gap-2">
                <button type="button" @click="openModal('mPopup')" class="inline-flex items-center gap-1.5 rounded-lg border border-border bg-card px-3 py-1.5 text-foreground/90 hover:bg-muted/50 text-xs sm:text-sm">
                    <i class="fas fa-bullhorn text-amber-700/80"></i> {{ __('app.homepage_promo_popup') }}
                </button>
                <button type="submit" form="visual-home-form" class="inline-flex items-center gap-1.5 rounded-lg bg-primary text-primary-foreground font-semibold px-4 py-1.5 sm:py-2 text-xs sm:text-sm shadow hover:opacity-95">
                    <i class="fas fa-save text-xs"></i> {{ __('app.save_changes') }}
                </button>
            </div>
        </div>
    </div>

    @if(session('success'))
        <div class="max-w-7xl mx-auto px-4 pt-3">
            <div class="rounded-lg border border-emerald-200 bg-emerald-50 text-emerald-900 px-4 py-2 text-sm">{{ session('success') }}</div>
        </div>
    @endif
    @if($errors->any())
        <div class="max-w-7xl mx-auto px-4 pt-3">
            <div class="rounded-lg border border-red-200 bg-red-50 text-red-900 px-4 py-2 text-sm">
                <ul class="list-disc pl-4">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
            </div>
        </div>
    @endif

    @include('home.partials.admin-pending-bar')
    @include('home.welcome-body', ['homepageEditMode' => true])

    @include('admin.homepage.visual-modals')
</div>

@endsection