@extends('adminlte::page')

@section('title', 'Edit Shortlink: ' . $shortlink->id)

@section('content_header')
    <h1>Edit Shortlink: {{ $shortlink->id }}</h1>
@stop

@section('content')
    {{-- Profile Visibility Status Banner --}}
    @if(Auth::user()->isProfilePrivate())
        <div class="alert alert-warning alert-dismissible">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
            <h5><i class="icon fas fa-lock"></i> Profil Privat Aktif</h5>
            <p class="mb-0">
                Profil Anda saat ini bersifat privat dan tidak dapat diakses oleh publik. 
                <a href="{{ route('profile.settings') }}" class="alert-link">Klik di sini</a> untuk mengubah pengaturan visibilitas profil.
            </p>
        </div>
    @else
        <div class="alert alert-success alert-dismissible">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
            <h5><i class="icon fas fa-globe"></i> Profil Publik Aktif</h5>
            <p class="mb-0">
                Profil Anda dapat diakses oleh semua orang. Anda dapat membagikan link profil Anda ke sosial media.
            </p>
        </div>
    @endif

<div class="card">
    <div class="card-header">
        <h3 class="card-title">Form Edit Shortlink</h3>
    </div>
    <div class="card-body">
        {{-- Notifikasi sukses --}}
        @if(session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif
        {{-- Form khusus update custom_label --}}
        <form method="POST" action="{{ route('shortlinks.updateLabel', $shortlink->id) }}" class="mb-4">
            @csrf
            <div class="form-group">
                <label for="custom_label">Nama/Label Tombol (akan tampil di public profile)</label>
                <input type="text" id="custom_label" name="custom_label" class="form-control"
                       value="{{ old('custom_label', $shortlink->custom_label ?? '') }}"
                       maxlength="100" placeholder="Contoh: Download Skin ML">
            </div>
            <button type="submit" class="btn btn-primary mt-2">Simpan Label</button>
        </form>
        {{-- CSRF --}}
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <input type="hidden" id="shortlink_id" value="{{ $shortlink->id }}">

        {{-- ✅ Textarea sebagai sumber data shortlink untuk gen-edit.js --}}
        <textarea name="link" id="link_json" class="d-none" style="display:none;">{!! json_encode([
            'id' => $shortlink->id,
            'original' => $shortlink->original,
            'description' => $shortlink->description,
            'custom_label' => $shortlink->custom_label ?? ''
        ], JSON_HEX_AMP) !!}</textarea>

        {{-- 📦 Tempat form dan preview akan ditampilkan --}}
        <div id="generate_now" class="lg:w-2/3">
            <div>
                <div class="stu_cnt" id="stuCnt"></div>
            </div>
            <div>
                <div class="prv_cnt d_stu" id="stuPrv"></div>
            </div>
        </div>
    </div>
</div>
@stop

@push('css')
    {{-- ✅ Tambahan file CSS --}}
    <link rel="stylesheet" href="{{ asset('css/stu/gen.css?v=1') }}">
    {{-- Use Mix helper function to get the correct versioned asset URL --}}
    <link rel="stylesheet" href="{{ mix('css/app.css') }}">
@endpush

@push('js')
    {{-- ✅ Tambahan file JS --}}
    <script src="{{ asset('js/stu/gen-config.js') }}"></script>
    <script src="{{ asset('js/stu/gen-edit.js?v=17') }}"></script>
@endpush

@section('js')
    {{-- ✅ Base URL & script utama --}}
    <script>
        function get_simple_base_url() {
            return '{{ url('/') }}';
        }

        document.addEventListener("DOMContentLoaded", () => {
            const textarea = document.querySelector("textarea[name=link]");
            if (!textarea) return console.warn("❌ <textarea[name=link]> tidak ditemukan");

            const shortlinkData = JSON.parse(textarea.value || '{}');
//            console.log("📦 Data dari textarea:", shortlinkData);

            const observer = new MutationObserver((mutations, obs) => {
                const hasChild = document.getElementById("stuCnt").children.length > 0;
                if (hasChild) {
                    obs.disconnect();
                    console.log("✅ Form berhasil di-inject!");
                    fillForm(shortlinkData);
                }
            });

            observer.observe(document.getElementById("stuCnt"), {
                childList: true,
                subtree: true
            });

            function fillForm(data) {
                console.log("🔁 Isi form dengan data:", data);

                const rawOriginal = data.original || '';
                const parsed = {};

                if (rawOriginal.startsWith("?")) {
                    const query = rawOriginal.slice(1);
                    const params = new URLSearchParams(query);

                    for (const [key, val] of params.entries()) {
                        try {
                            const base64 = decodeURIComponent(val);
                            parsed[key] = decodeURIComponent(atob(base64));
                        } catch (e) {
                            console.warn(`⚠️ Gagal decode ${key}:`, val, e.message);
                            parsed[key] = val;
                        }
                    }
                }

                for (const key in parsed) {
                    if (key === "pas1") continue;

                    const el = document.querySelector(`[name="${key}"]`);
                    if (el) {
                        el.value = parsed[key];
                        el.classList.add("ok");
                        el.dataset.fill = true;
                    } else {
                        console.warn(`⚠️ Input [name="${key}"] tidak ditemukan`);
                    }
                }

                if (data.description) {
                    const ttl = document.getElementById("i_ttl");
                    if (ttl && !ttl.value) {
                        ttl.value = data.description;
                        ttl.classList.add("ok");
                        ttl.dataset.fill = true;
                    }
                }

                console.log("✅ Semua field berhasil diisi.");
            }
        });
    </script>
@stop