@extends('layouts.main')

@include('layouts.form-scripts')

@section('title', $title)

@section('content')
    <div class="row justify-content-center">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <x-buttons.back-small name="event" :route="route('event.index')" />
                    {{ $title }}
                </div>
                <div class="card-body">
                    <form id="eventForm" action="{{ $formAction }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        @if(!$isFormCreate)
                            @method('PUT')
                        @endif
                        <!-- Header Fields -->
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <x-forms.input-text name="title" :label="__('validation.attributes.title')" required :value="$event->title ?? null" />
                            </div>
                            <div class="col-md-6">
                                @php
                                    $categoryOptions = collect($eventCategories)->mapWithKeys(function($c){
                                        $label = $c->name ?? ('#'.$c->id);
                                        return [$c->id => $label];
                                    })->toArray();
                                @endphp
                                <x-forms.input-select name="event_category_id" :label="__('general.category')" :options="$categoryOptions" :selected="$event->event_category_id ?? null" :can-clear="true" />
                            </div>
                            <div class="col-md-12">
                                <x-forms.input-textarea name="description" :rows="4" :label="__('validation.attributes.description')" :value="$event->description ?? null" />
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-3">
                                <x-forms.input-datepicker
                                    name="date"
                                    :label="__('validation.attributes.date')"
                                    :value="$event->date ?? null"
                                    required
                                />
                            </div>
                            <div class="col-md-3">
                                <x-forms.input-datetime
                                    name="start_time"
                                    label="Start Time"
                                    :required="true"
                                    :value="$event->start_time ?? null"
                                />
                            </div>
                            <div class="col-md-3">
                                <x-forms.input-datetime
                                    name="end_time"
                                    label="End Time"
                                    :value="$event->end_time ?? null"
                                />
                            </div>
                            <div class="col-md-3">
                                <x-forms.input-switch name="is_active" :label="__('validation.attributes.is_active')" value="1" :checked="$event->is_active ?? false" />
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-3">
                                <x-forms.input-text name="location" :label="__('validation.attributes.location')" :value="$event->location ?? null" />
                            </div>
                            <div class="col-md-3">
                                <x-forms.input-textarea name="address" :rows="2" :label="__('validation.attributes.address')" :value="$event->address ?? null" />
                            </div>
                            <div class="col-md-3">
                                <x-forms.input-text name="city" :label="__('validation.attributes.city')" :value="$event->city ?? null" />
                            </div>
                            <div class="col-md-3">
                                <x-forms.input-text name="province" :label="__('validation.attributes.province')" :value="$event->province ?? null" />
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-3">
                                <x-forms.input-text name="country" :label="__('validation.attributes.country')" :value="$event->country ?? 'Indonesia'" />
                            </div>
                            <div class="col-md-3">
                                <x-forms.input-text name="latitude" :label="__('validation.attributes.latitude')" :value="$event->latitude ?? null" />
                            </div>
                            <div class="col-md-3">
                                <x-forms.input-text name="longitude" :label="__('validation.attributes.longitude')" :value="$event->longitude ?? null" />
                            </div>
                            <div class="col-md-3">
                                <x-forms.input-text name="capacity" :label="__('validation.attributes.capacity')" :value="$event->capacity ?? null" />
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-3">
                                <x-forms.input-text name="organizer" :label="__('validation.attributes.organizer')" :value="$event->organizer ?? null" />
                            </div>
                            <div class="col-md-3">
                                <x-forms.input-text name="contact_phone" :label="__('validation.attributes.contact_phone')" :value="$event->contact_phone ?? null" />
                            </div>
                            <div class="col-md-3">
                                <x-forms.input-text name="contact_email" :label="__('validation.attributes.contact_email')" :value="$event->contact_email ?? null" />
                            </div>
                            <div class="col-md-3">
                                <x-forms.input-text name="website" :label="__('validation.attributes.website')" :value="$event->website ?? null" />
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-4">
                                <x-forms.input-file name="banner" :label="__('validation.attributes.banner')" :value="$event->banner ?? null" accept="image/apng,image/avif,image/gif,image/jpeg,image/png,image/svg+xml,image/webp" path="media/event/" />
                            </div>
                            <div class="col-md-4">
                                <x-forms.input-text name="video" :label="__('validation.attributes.video')" :value="$event->video ?? null" />
                            </div>
                            <div class="col-md-4">
                                <x-forms.input-text name="code" :label="__('validation.attributes.code')" :value="$event->code ?? null" />
                            </div>
                        </div>
                        <div class="card mb-4 shadow-sm border-0 rounded-3">
                            <div class="card-header bg-white border-bottom-0 pb-0">
                                <ul class="nav nav-tabs card-header-tabs flex-nowrap overflow-auto" id="eventTab" role="tablist" style="border-bottom: 0;">
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link active fw-semibold" id="agendas-tab" data-bs-toggle="tab" data-bs-target="#agendas" type="button" role="tab" aria-controls="agendas" aria-selected="true">
                                            <i class="bi bi-calendar-event me-1"></i>{{ __('Agendas') }}
                                        </button>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link fw-semibold" id="speakers-tab" data-bs-toggle="tab" data-bs-target="#speakers" type="button" role="tab" aria-controls="speakers" aria-selected="false">
                                            <i class="bi bi-mic me-1"></i>{{ __('Speakers') }}
                                        </button>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link fw-semibold" id="sponsors-tab" data-bs-toggle="tab" data-bs-target="#sponsors" type="button" role="tab" aria-controls="sponsors" aria-selected="false">
                                            <i class="bi bi-people me-1"></i>{{ __('Sponsors') }}
                                        </button>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link fw-semibold" id="packages-tab" data-bs-toggle="tab" data-bs-target="#packages" type="button" role="tab" aria-controls="packages" aria-selected="false">
                                            <i class="bi bi-box-seam me-1"></i>{{ __('Packages') }}
                                        </button>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link fw-semibold" id="tickets-tab" data-bs-toggle="tab" data-bs-target="#tickets" type="button" role="tab" aria-controls="tickets" aria-selected="false">
                                            <i class="bi bi-ticket-perforated me-1"></i>{{ __('Tickets') }}
                                        </button>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link fw-semibold" id="documentations-tab" data-bs-toggle="tab" data-bs-target="#documentations" type="button" role="tab" aria-controls="documentations" aria-selected="false">
                                            <i class="bi bi-images me-1"></i>
                                            @if ($event->is_active)
                                                {{ __('Exhibition Booth') }}
                                            @else
                                                {{ __('Documentation') }}
                                            @endif
                                        </button>
                                    </li>
                                </ul>
                            </div>
                            <div class="card-body p-3">
                                <div class="tab-content" id="eventTabContent" style="background-color: #fafbfc; border-radius: .5rem;">
                                    <div class="tab-pane fade show active" id="agendas" role="tabpanel" aria-labelledby="agendas-tab">
                                        @include('event.partials.agendas')
                                    </div>
                                    <div class="tab-pane fade" id="speakers" role="tabpanel" aria-labelledby="speakers-tab">
                                        @include('event.partials.speakers')
                                    </div>
                                    <div class="tab-pane fade" id="sponsors" role="tabpanel" aria-labelledby="sponsors-tab">
                                        @include('event.partials.sponsors')
                                    </div>
                                    <div class="tab-pane fade" id="packages" role="tabpanel" aria-labelledby="packages-tab">
                                        @include('event.partials.packages')
                                    </div>
                                    <div class="tab-pane fade" id="tickets" role="tabpanel" aria-labelledby="tickets-tab">
                                        @include('event.partials.tickets')
                                    </div>
                                    <div class="tab-pane fade" id="documentations" role="tabpanel" aria-labelledby="documentations-tab">
                                        @include('event.partials.documentations')
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="text-end">
                            <x-buttons.submit-save />
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

@stack('partials')

@endsection

@push('scripts')
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/summernote-lite.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/summernote-lite.min.js"></script>

<script>

    $('#textarea-description').summernote({
        height: 350,
        tabsize: 2,
        dialogsInBody: true,

        toolbar: [
            ['style', ['style']],
            ['font', ['bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear']],
            ['fontname', ['fontname']],
            ['fontsize', ['fontsize']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph', 'height']],
            ['insert', ['picture', 'video', 'link', 'table', 'hr']],
            ['misc', ['fullscreen', 'codeview', 'undo', 'redo', 'help']]
        ],

        fontNames: [
            'Arial', 'Arial Black', 'Comic Sans MS', 'Courier New',
            'Helvetica', 'Impact', 'Tahoma', 'Times New Roman', 'Verdana'
        ],

        fontsize: ['8', '9', '10', '11', '12', '14', '16', '18', '24', '36', '48'],

        placeholder: 'Write your content here...',


        /* ========= IMAGE UPLOAD LARAVEL ========= */
        callbacks: {
            onImageUpload: function(files) {
                uploadImageLaravel(files[0]);
            }
        }
    });


    /* ==============================
       Laravel Upload Handler
    =============================== */
    function uploadImageLaravel(file) {
        let data = new FormData();
        data.append("file", file);
        data.append("_token", "{{ csrf_token() }}");

        $.ajax({
            url: "{{ route('blog.store-image') }}",
            method: "POST",
            data: data,
            contentType: false,
            processData: false,

            success: function (url) {
                $('#textarea-description').summernote('insertImage', url);
            },

            error: function (xhr) {
                console.error("Upload error:", xhr.responseText);
                alert("Upload failed!");
            }
        });
    }

</script>

<script type="module">
    document.addEventListener('DOMContentLoaded', function () {

        /**
        * Tambahkan elemen baru dari template tersembunyi
        */
        function addRepeater(wrapperId, partialView, groupName) {
            const wrapper = document.getElementById(wrapperId);
            if (!wrapper) return alert('Wrapper ' + wrapperId + ' tidak ditemukan.');

            let idx = wrapper.querySelectorAll('.' + groupName.slice(0, -1) + '-item').length;
            let templateDiv = document.getElementById(wrapperId + '-template');
            if (!templateDiv) return alert('Template untuk ' + wrapperId + ' tidak ditemukan.');

            // Ganti semua __INDEX__ menjadi index baru
            let html = templateDiv.innerHTML.replace(/__INDEX__/g, idx);

            // Convert string HTML ke elemen
            const temp = document.createElement('div');
            temp.innerHTML = html.trim();

            const newItem = temp.firstElementChild;
            if (!newItem) return;

            // Tambahkan ke wrapper
            wrapper.appendChild(newItem);

            // Update semua sequence
            updateSequence(wrapper, groupName);

            // Re-init plugin
            initializePlugins(newItem);
        }

        /**
        * Update nomor urut & name input
        */
        function updateSequence(wrapper, groupName) {
            const items = wrapper.querySelectorAll('.' + groupName.slice(0, -1) + '-item');
            items.forEach((item, index) => {
                // Update nomor urut tampilan
                const seqEl = item.querySelector('.seq-number');
                if (seqEl) seqEl.textContent = index + 1;

                // Update input sequence (jika ada)
                const seqInput = item.querySelector('input[name*="[sequence]"]');
                if (seqInput) seqInput.value = index + 1;

                // Update semua atribut name agar sesuai index
                item.querySelectorAll('input, select, textarea').forEach(el => {
                    if (el.name) {
                        el.name = el.name.replace(
                            new RegExp(groupName + '\\[[0-9]+\\]'),
                            groupName + '[' + index + ']'
                        );
                    }
                });
            });
        }

        /**
        * Clone item (misalnya baris speaker)
        */
        function cloneItem(button) {
            const itemClass = button.getAttribute('data-item-class');
            const wrapperId = button.getAttribute('data-wrapper');
            const wrapper = document.getElementById(wrapperId);
            const group = wrapperId.replace('-wrapper', '');

            const item = button.closest('.' + itemClass);
            if (!item) return;

            const clone = item.cloneNode(true);

            // Kosongkan nilai input
            clone.querySelectorAll('input, textarea, select').forEach((el) => {
                if (el.type === 'checkbox' || el.type === 'radio') el.checked = false;
                else el.value = '';
            });

            wrapper.appendChild(clone);

            // Update urutan & plugin
            updateSequence(wrapper, group);
            initializePlugins(clone);
        }

        /**
        * Inisialisasi plugin (Select2, Flatpickr, dsb)
        */
        function initializePlugins(scope) {
            // Select2
            $(scope).find('.form-select').each(function () {
                if ($(this).data('select2')) {
                    $(this).select2('destroy');
                }
                $(this).select2({
                    width: '100%',
                    dropdownParent: $(document.body)
                });
            });

            // Flatpickr
            $(scope).find('.flatpickr-input').each(function () {
                if (this._flatpickr) {
                    this._flatpickr.destroy();
                }
                flatpickr(this, {
                    dateFormat: "Y-m-d H:i",
                    altInput: true,
                    altFormat: "d M Y H:i",
                    enableTime: true,
                    time_24hr: true,
                    appendTo: document.body
                });
            });

            // Datepicker
            $(scope).find('.datepicker').each(function () {
                // Remove any attached datepicker instance
                if ($(this).data('datepicker')) {
                    $(this).datepicker('destroy');
                }
                $(this).datepicker({
                    ...window.datepickerOptions,
                    orientation: 'bottom',
                    container: 'body'
                });
            });
        }

        /**
        * Tombol [data-clone]
        */
        document.addEventListener('click', function (e) {
            const target = e.target.closest('[data-clone]');
            if (target) {
                e.preventDefault();
                cloneItem(target);
            }

            // Tombol hapus
            if (e.target.closest('.btn-danger')) {
                const wrapper = e.target.closest('[id$="-wrapper"]');
                if (wrapper) {
                    setTimeout(() => {
                        const group = wrapper.id.replace('-wrapper', '');
                        updateSequence(wrapper, group);
                    }, 100);
                }
            }
        });

        /**
        * Setup tombol Add untuk repeater
        */
        const kinds = ['agenda', 'speaker', 'sponsor', 'ticket', 'package', 'documentation'];
        const map = {
            agenda: 'agendas',
            speaker: 'speakers',
            sponsor: 'sponsors',
            ticket: 'tickets',
            package: 'packages',
            documentation: 'documentations'
        };

        kinds.forEach(kind => {
            const btn = document.getElementById('add-' + kind);
            if (!btn) return;

            btn.addEventListener('click', function () {
                addRepeater(map[kind] + '-wrapper', '', map[kind]);
                // Setelah menambah, scroll ke elemen repeater paling bawah
                setTimeout(() => {
                    const wrapper = document.getElementById(map[kind] + '-wrapper');
                    if (wrapper && wrapper.lastElementChild) {
                        wrapper.lastElementChild.scrollIntoView({ behavior: 'smooth', block: 'end' });
                    }
                }, 150); // waktu tunggu agar elemen sudah dirender
            });
        });

        /**
        * Jalankan init plugin untuk elemen yang sudah ada di form saat load
        */
        initializePlugins(document);
    });
</script>
@endpush