@extends('admin.layouts.app')

@section('title', 'Site Settings')

@push('styles')
    <style>
        /* --------- Fancy header --------- */
        .page-hero {
            background: radial-gradient(1200px 600px at 10% -20%, rgba(13,110,253,.12), transparent 60%),
            radial-gradient(1000px 600px at 90% 0%, rgba(32,201,151,.12), transparent 60%),
            linear-gradient(180deg, var(--bs-body-bg), var(--bs-body-bg));
            border-radius: 1rem;
            position: relative;
            overflow: hidden;
        }
        .page-hero::after {
            content: "";
            position: absolute;
            right: -60px;
            top: -60px;
            width: 220px; height: 220px;
            background: conic-gradient(from 180deg, rgba(13,110,253,.25), rgba(13,110,253,0));
            filter: blur(20px);
            border-radius: 50%;
            animation: spin 18s linear infinite;
        }

        @keyframes spin { to { transform: rotate(360deg);} }

        /* --------- Cards + micro-animations --------- */
        .card.fancy {
            border: 1px solid var(--bs-border-color);
            backdrop-filter: saturate(130%) blur(3px);
            transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
        }
        .card.fancy:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.08); }
        .card-header.fancy {
            background: linear-gradient(90deg, rgba(13,110,253,.08), rgba(32,201,151,.08));
            border-bottom: 1px dashed var(--bs-border-color);
        }

        /* --------- Pills --------- */
        .fancy-pills .nav-link {
            border-radius: 999px;
            padding: .5rem 1rem;
            margin-right: .25rem;
            transition: all .15s ease;
        }
        .fancy-pills .nav-link.active {
            box-shadow: 0 .25rem .75rem rgba(13,110,253,.15);
        }

        /* --------- Promo preview --------- */
        #promoPreview {
            min-height: 48px;
            border: 1px dashed var(--bs-border-color);
            border-radius: .75rem;
            background:
                linear-gradient(135deg, rgba(13,110,253,.07), rgba(13,110,253,0)) padding-box,
                radial-gradient(400px 120px at 80% -30%, rgba(32,201,151,.1), transparent) border-box;
        }

        /* --------- Social rows --------- */
        .social-row {
            border: 1px dashed var(--bs-border-color);
            border-radius: .75rem;
            padding: .75rem;
            background: var(--bs-body-bg);
            transition: background-color .15s ease, transform .15s ease, opacity .2s ease;
        }
        .social-row:hover { background: rgba(13,110,253,.03); }
        .drag-handle{ cursor: grab; opacity:.7; }
        .social-row.removing { opacity: 0; transform: translateY(-6px); }

        /* --------- Sticky save bar --------- */
        .sticky-save {
            position: sticky; bottom: -1px; z-index: 10;
            padding-top: .75rem;
        }

        /* --------- Gradient buttons --------- */
        .btn-gradient {
            background: linear-gradient(90deg, #0d6efd, #20c997);
            border: 0;
        }
        .btn-gradient:hover { filter: brightness(1.05); }

        /* Toast position */
        .toast-container { position: fixed; right: 1rem; top: 1rem; z-index: 1080; }
    </style>
@endpush

@section('content')
    <div class="container-fluid">
        {{-- Toast success --}}
        @if(session('status'))
            <div class="toast-container">
                <div class="toast align-items-center text-bg-success border-0 show" role="alert" aria-live="assertive" aria-atomic="true">
                    <div class="d-flex">
                        <div class="toast-body">
                            <i class="bi bi-check2-circle me-2"></i>{{ session('status') }}
                        </div>
                        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
                    </div>
                </div>
            </div>
        @endif

        {{-- Page header --}}
        <div class="page-hero p-4 mb-4 mt-4">
            <div class="d-flex align-items-center">
                <div class="me-3">
                    <span class="badge rounded-pill text-bg-primary px-3 py-2"><i class="bi bi-gear me-1"></i> Configurari</span>
                </div>
                <div>
                    <h3 class="mb-0">Setari website</h3>
                    <small class="text-secondary">Configurează branding, bara promoțională, link-urile sociale și cheile pentru affiliate.</small>
                </div>
            </div>
        </div>

        <form action="{{ route('admin.cfg.update') }}" method="POST" class="needs-validation" novalidate>
            @csrf
            @method('PUT')

            <ul class="nav nav-pills mb-3 fancy-pills" id="settingsTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="tab-general" data-bs-toggle="pill" data-bs-target="#pane-general" type="button" role="tab">
                        <i class="bi bi-sliders2-vertical me-1"></i> General
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="tab-social" data-bs-toggle="pill" data-bs-target="#pane-social" type="button" role="tab">
                        <i class="bi bi-share me-1"></i> Social Links
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="tab-affiliate" data-bs-toggle="pill" data-bs-target="#pane-affiliate" type="button" role="tab">
                        <i class="bi bi-shield-lock me-1"></i> Affiliate
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="tab-advanced" data-bs-toggle="pill" data-bs-target="#pane-advanced" type="button" role="tab">
                        <i class="bi bi-braces-asterisk me-1"></i> Advanced
                    </button>
                </li>
            </ul>

            <div class="tab-content" id="settingsTabContent">
                {{-- GENERAL --}}
                <div class="tab-pane fade show active" id="pane-general" role="tabpanel">
                    <div class="row g-4">
                        <div class="col-lg-8">
                            <div class="card fancy">
                                <div class="card-header fancy d-flex align-items-center">
                                    <i class="bi bi-palette me-2"></i>
                                    <h5 class="mb-0">General</h5>
                                </div>
                                <div class="card-body">
                                    <div class="row g-3">
                                        <div class="col-md-6">
                                            <div class="form-floating">
                                                <input type="text" name="site_name" id="site_name" class="form-control @error('site_name') is-invalid @enderror"
                                                       value="{{ old('site_name', $conf->site_name) }}" required>
                                                <label for="site_name">Nume website</label>
                                                @error('site_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                            </div>
                                        </div>

                                        <div class="col-md-6">
                                            <div class="row g-3 align-items-center">
                                                <div class="col">
                                                    <div class="form-floating">
                                                        <input type="text" name="support_phone" id="support_phone" class="form-control @error('support_phone') is-invalid @enderror"
                                                               value="{{ old('support_phone', $conf->support_phone) }}">
                                                        <label for="support_phone"><i class="bi bi-telephone me-1"></i>Nr tel suport</label>
                                                        @error('support_phone')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                                    </div>
                                                </div>
                                                <div class="col">
                                                    <div class="form-floating">
                                                        <input type="email" name="support_email" id="support_email" class="form-control @error('support_email') is-invalid @enderror"
                                                               value="{{ old('support_email', $conf->support_email) }}">
                                                        <label for="support_email"><i class="bi bi-envelope me-1"></i>Email suport</label>
                                                        @error('support_email')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-12">
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox" role="switch" id="promoSwitch" name="header_promo_active" value="1"
                                                    {{ old('header_promo_active', $conf->header_promo_active) ? 'checked' : '' }}>
                                                <label class="form-check-label" for="promoSwitch">Activează bara promo din header</label>
                                            </div>
                                        </div>

                                        <div class="col-12">
                                            <div class="collapse {{ old('header_promo_active', $conf->header_promo_active) ? 'show' : '' }}" id="promoArea">
                                                <label class="form-label">Anunt promotional</label>
                                                <textarea name="header_promo_html" rows="3"
                                                          class="form-control @error('header_promo_html') is-invalid @enderror"
                                                          placeholder='Ex: Summer sale discount <span class="color">50%</span> off! <span>Shop Now</span>'>{{ old('header_promo_html', $conf->header_promo_html) }}</textarea>
                                                @error('header_promo_html')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                                <small class="text-secondary">Se acceptă HTML simplu. Preview live mai jos.</small>

                                                <div class="mt-2 p-3" id="promoPreview">
                                                    {!! old('header_promo_html', $conf->header_promo_html) !!}
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-4">
                            <div class="card fancy h-100">
                                <div class="card-header fancy d-flex align-items-center">
                                    <i class="bi bi-lightbulb me-2"></i>
                                    <h5 class="mb-0">Tips</h5>
                                </div>
                                <div class="card-body">
                                    <ul class="list-unstyled mb-0">
                                        <li class="mb-2"><i class="bi bi-check2-circle text-success me-2"></i>Folosește HTML scurt în bara promo.</li>
                                        <li class="mb-2"><i class="bi bi-check2-circle text-success me-2"></i>Suport phone/email apar în footer sau contacte.</li>
                                        <li class="mb-2"><i class="bi bi-check2-circle text-success me-2"></i>Activează bara promo doar în campanii.</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div> {{-- /row --}}
                </div>

                {{-- SOCIAL --}}
                <div class="tab-pane fade" id="pane-social" role="tabpanel">
                    <div class="card fancy">
                        <div class="card-header fancy d-flex align-items-center justify-content-between">
                            <div class="d-flex align-items-center">
                                <i class="bi bi-share me-2"></i><h5 class="mb-0">Social Links</h5>
                            </div>
                            <button type="button" class="btn btn-sm btn-outline-primary" id="addRow">
                                <i class="bi bi-plus-circle me-1"></i> Adaugă link
                            </button>
                        </div>
                        <div class="card-body">
                            @php
                                $social = old('social_links', collect($conf->social_links ?? [ 'facebook'=>'', 'instagram'=>'', 'tiktok'=>'', 'youtube'=>'' ])
                                  ->map(fn($v,$k)=>['key'=>$k,'url'=>$v])
                                  ->values()
                                  ->all());
                            @endphp

                            <div id="socialList" class="vstack gap-2">
                                @foreach($social as $i => $row)
                                    <div class="social-row" data-index="{{ $i }}">
                                        <div class="row g-2 align-items-end">
                                            <div class="col-md-1 text-center">
                                                <span class="text-secondary drag-handle" title="Drag to reorder"><i class="bi bi-grip-vertical fs-4"></i></span>
                                            </div>
                                            <div class="col-md-3">
                                                <label class="form-label">Key</label>
                                                <input type="text" class="form-control" name="social_links[{{ $i }}][key]" value="{{ $row['key'] }}">
                                            </div>
                                            <div class="col-md-7">
                                                <label class="form-label">URL</label>
                                                <input type="text" class="form-control" name="social_links[{{ $i }}][url]" value="{{ $row['url'] }}">
                                            </div>
                                            <div class="col-md-1">
                                                <button type="button" class="btn btn-outline-danger w-100 remove-row" title="Remove">
                                                    <i class="bi bi-x-lg"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                            <template id="socialRowTpl">
                                <div class="social-row" data-index="__IDX__">
                                    <div class="row g-2 align-items-end">
                                        <div class="col-md-1 text-center">
                                            <span class="text-secondary drag-handle" title="Drag to reorder"><i class="bi bi-grip-vertical fs-4"></i></span>
                                        </div>
                                        <div class="col-md-3">
                                            <label class="form-label">Key</label>
                                            <input type="text" class="form-control" name="social_links[__IDX__][key]" value="">
                                        </div>
                                        <div class="col-md-7">
                                            <label class="form-label">URL</label>
                                            <input type="text" class="form-control" name="social_links[__IDX__][url]" value="">
                                        </div>
                                        <div class="col-md-1">
                                            <button type="button" class="btn btn-outline-danger w-100 remove-row" title="Remove">
                                                <i class="bi bi-x-lg"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </template>

                        </div>
                    </div>
                </div>

                {{-- AFFILIATE --}}
                <div class="tab-pane fade" id="pane-affiliate" role="tabpanel">
                    <div class="row g-4">
                        <div class="col-lg-6">
                            <div class="card fancy">
                                <div class="card-header fancy d-flex align-items-center">
                                    <i class="bi bi-shield-lock me-2"></i><h5 class="mb-0">Affiliate API</h5>
                                </div>
                                <div class="card-body">
                                    <div class="form-floating mb-3">
                                        <input type="text" name="affiliate_uid" id="affiliate_uid" class="form-control @error('affiliate_uid') is-invalid @enderror"
                                               value="{{ old('affiliate_uid', $conf->affiliate_uid) }}">
                                        <label for="affiliate_uid">Affiliate UID</label>
                                        @error('affiliate_uid')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                    </div>
                                    <div class="form-floating">
                                        <input type="text" name="user_key" id="user_key" class="form-control @error('user_key') is-invalid @enderror"
                                               value="{{ old('user_key', $conf->user_key) }}">
                                        <label for="user_key">User Key</label>
                                        @error('user_key')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                    </div>
                                    <div class="alert alert-info mt-3">
                                        <i class="bi bi-info-circle me-1"></i>
                                        <small>La checkout folosim <code>uid</code> și <code>key</code> de aici. Parametrii ofertei vin din produs (offer / lp / script).</small>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-6">
                            <div class="card fancy h-100">
                                <div class="card-header fancy d-flex align-items-center">
                                    <i class="bi bi-clipboard2-data me-2"></i><h5 class="mb-0">Exemplu request</h5>
                                </div>
                                <div class="card-body">
                <pre class="mb-0 small text-secondary">
POST https://offers.power-watch.com/forms/api/
uid={{ old('affiliate_uid', $conf->affiliate_uid) ?: '...' }}
key={{ old('user_key', $conf->user_key) ?: '...' }}
offer={product.internal_offer_id}
lp={product.internal_lp}
name={name}
tel={tel}
street-address={street-address}
ip={USER_IP_ADDRESS}
ua={USER_USERAGENT}</pre>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- ADVANCED --}}
                <div class="tab-pane fade" id="pane-advanced" role="tabpanel">
                    <div class="card fancy">
                        <div class="card-header fancy d-flex align-items-center justify-content-between">
                            <div class="d-flex align-items-center">
                                <i class="bi bi-braces-asterisk me-2"></i><h5 class="mb-0">Extra JSON</h5>
                            </div>
                            <div class="d-flex gap-2">
                                <button class="btn btn-sm btn-outline-secondary" type="button" id="formatJson"><i class="bi bi-magic me-1"></i>Format</button>
                                <button class="btn btn-sm btn-outline-secondary" type="button" id="minifyJson"><i class="bi bi-filter-circle me-1"></i>Minify</button>
                            </div>
                        </div>
                        <div class="card-body">
            <textarea name="extra_json" id="extra_json" rows="10" class="form-control font-monospace @error('extra_json') is-invalid @enderror"
                      placeholder='{"gtm_id":"G-XXXX","fb_pixel":"123"}'>{{ old('extra_json', $conf->extra ? json_encode($conf->extra, JSON_PRETTY_PRINT|JSON_UNESCAPED_SLASHES) : '') }}</textarea>
                            @error('extra_json')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            <small class="text-secondary">JSON valid opțional; îl poți folosi pentru orice setări avansate.</small>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Sticky Save --}}
            <div class="sticky-save mt-3">
                <div class="d-flex justify-content-end gap-2">
                    <a href="{{ route('admin.cfg.edit') }}" class="btn btn-outline-secondary"><i class="bi bi-arrow-counterclockwise me-1"></i>Reset</a>
                    <button type="submit" class="btn btn-gradient text-white">
                        <i class="bi bi-save me-1"></i> Salvează setările
                    </button>
                </div>
            </div>
        </form>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // Bootstrap form validation
            const forms = document.querySelectorAll('.needs-validation');
            Array.from(forms).forEach((form) => {
                form.addEventListener('submit', (event) => {
                    if (!form.checkValidity()) { event.preventDefault(); event.stopPropagation(); }
                    form.classList.add('was-validated');
                }, false);
            });

            // Promo toggle + live preview
            const promoSwitch = document.getElementById('promoSwitch');
            const promoArea = document.getElementById('promoArea');
            const promoTextarea = document.querySelector('textarea[name="header_promo_html"]');
            const promoPreview = document.getElementById('promoPreview');

            function setPromoVisibility() {
                const collapse = bootstrap.Collapse.getOrCreateInstance(promoArea, { toggle: false });
                promoSwitch.checked ? collapse.show() : collapse.hide();
            }
            promoSwitch?.addEventListener('change', setPromoVisibility);
            setPromoVisibility();

            promoTextarea?.addEventListener('input', () => { promoPreview.innerHTML = promoTextarea.value || ''; });

            // Social repeater
            const list = document.getElementById('socialList');
            const addBtn = document.getElementById('addRow');
            const tpl = document.getElementById('socialRowTpl')?.innerHTML || '';

            addBtn?.addEventListener('click', () => {
                const idx = list.querySelectorAll('.social-row').length;
                const html = tpl.replaceAll('__IDX__', idx);
                const temp = document.createElement('div');
                temp.innerHTML = html.trim();
                const node = temp.firstElementChild;
                node.style.opacity = 0;
                list.appendChild(node);
                requestAnimationFrame(() => { node.style.transition = 'opacity .25s ease, transform .2s ease'; node.style.opacity = 1; node.style.transform = 'translateY(-4px)'; setTimeout(()=> node.style.transform='none', 220); });
            });

            list?.addEventListener('click', (e) => {
                if (e.target.closest('.remove-row')) {
                    const row = e.target.closest('.social-row');
                    row.classList.add('removing');
                    setTimeout(() => row.remove(), 180);
                }
            });

            // Optional: make rows sortable if SortableJS is loaded globally
            if (window.Sortable) {
                Sortable.create(list, {
                    handle: '.drag-handle',
                    animation: 150,
                    ghostClass: 'bg-body-tertiary',
                    onEnd: () => {
                        // Reindex name attributes after reorder
                        list.querySelectorAll('.social-row').forEach((row, i) => {
                            row.dataset.index = i;
                            row.querySelectorAll('input').forEach(inp => {
                                inp.name = inp.name.replace(/social_links\[\d+\]/, `social_links[${i}]`);
                            });
                        });
                    }
                });
            }

            // JSON helpers
            const txt = document.getElementById('extra_json');
            document.getElementById('formatJson')?.addEventListener('click', () => {
                if (!txt.value.trim()) return;
                try { txt.value = JSON.stringify(JSON.parse(txt.value), null, 2); }
                catch(e){ alert('JSON invalid: ' + e.message); }
            });
            document.getElementById('minifyJson')?.addEventListener('click', () => {
                if (!txt.value.trim()) return;
                try { txt.value = JSON.stringify(JSON.parse(txt.value)); }
                catch(e){ alert('JSON invalid: ' + e.message); }
            });
        });
    </script>
@endpush