@extends('layouts/base_view')
@section('title')
{!! $variables['header_routes'] !!}
@endsection
@section('content')
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card card-secondary">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h3 class="card-title">{!! $variables['judul'] !!}</h3>
                        <a href="{{ route('landing-page.products') }}" class="btn btn-sm btn-outline-info">
                            <i class="fas fa-box"></i> Kelola Products
                        </a>
                    </div>
                    <div class="card-body">
                        <form id="settings-form" enctype="multipart/form-data">
                            @csrf
                            <ul class="nav nav-tabs mb-4" id="settingsTabs">
                                @foreach($settings->keys() as $i => $group)
                                    <li class="nav-item">
                                        <a class="nav-link {{ $i === 0 ? 'active' : '' }}" data-toggle="tab" href="#tab-{{ $group }}">
                                            {{ ucfirst($group) }}
                                        </a>
                                    </li>
                                @endforeach
                            </ul>

                            <div class="tab-content">
                                @foreach($settings as $group => $items)
                                    <div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}" id="tab-{{ $group }}">
                                        <div class="row">
                                            @foreach($items as $item)
                                                <div class="form-group mb-3 {{ in_array($item->type, ['textarea','richtext']) ? 'col-md-12' : 'col-md-6' }}">
                                                    <label>{{ $item->label }}</label>
                                                    @if($item->type === 'textarea')
                                                        <textarea name="{{ $item->key }}" class="form-control" rows="3">{{ $item->value }}</textarea>
                                                    @elseif($item->type === 'richtext')
                                                        <textarea name="{{ $item->key }}" id="ck_{{ $item->key }}" class="form-control ckeditor-field" rows="12">{{ $item->value }}</textarea>
                                                    @elseif($item->type === 'image')
                                                        <input type="file" class="form-control" name="{{ $item->key }}" accept="image/jpeg,image/png,image/jpg,image/webp">
                                                        <small class="text-muted">Format: jpeg, png, jpg, webp. Maks 2MB.</small>
                                                        @if($item->value)
                                                            <div class="mt-2">
                                                                <img src="{{ asset('storage/' . $item->value) }}" style="max-height:100px;object-fit:cover;" class="img-thumbnail">
                                                            </div>
                                                        @endif
                                                    @else
                                                        <input type="text" class="form-control" name="{{ $item->key }}" value="{{ $item->value }}">
                                                    @endif
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                            <hr>
                            <button type="submit" class="btn btn-outline-primary">
                                <i class="fa-regular fa-floppy-disk"></i> Simpan Semua
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection
@push('scripts')
<script>
$(function() {
    var MAX_SIZE_MB = 5;
    var MAX_SIZE_BYTES = MAX_SIZE_MB * 1024 * 1024;

    var isSubmitting = false;
    $('#settings-form').on('submit', function(e) {
        e.preventDefault();
        if (isSubmitting) return;

        // Validasi ukuran file sebelum upload
        var oversized = [];
        $(this).find('input[type="file"]').each(function() {
            if (this.files && this.files[0]) {
                if (this.files[0].size > MAX_SIZE_BYTES) {
                    oversized.push($(this).attr('name') + ' (' + (this.files[0].size / 1024 / 1024).toFixed(1) + ' MB)');
                }
            }
        });

        if (oversized.length > 0) {
            Swal.fire({
                icon: 'error',
                title: 'Ukuran File Terlalu Besar',
                html: 'File berikut melebihi batas ' + MAX_SIZE_MB + 'MB:<br><strong>' + oversized.join('<br>') + '</strong><br><br>Kompres atau resize gambar terlebih dahulu.',
                confirmButtonColor: '#6c757d',
            });
            return;
        }

        isSubmitting = true;
        $('#loaderaditdinda').show();
        syncCKEditors(); // sync CKEditor ke textarea sebelum FormData dibuat
        var formData = new FormData(this);
        $.ajax({
            type: 'POST',
            url: '{{ route("landing-page.settings.save") }}',
            data: formData,
            processData: false,
            contentType: false,
            dataType: 'json'
        }).done(function(data) {
            Swal.fire({
                icon: data[0],
                text: data[1],
                confirmButtonColor: '#6c757d',
                confirmButtonText: 'OK',
                allowOutsideClick: false
            }).then(function(result) {
                if (result.isConfirmed && data[0] === 'success') {
                    window.location.reload();
                }
            });
        }).fail(function(xhr) {
            var msg = 'Terjadi kesalahan. Silakan coba lagi.';
            if (xhr.status === 0 || xhr.status === 413) {
                msg = 'File terlalu besar untuk diupload. Kompres gambar dan coba lagi.';
            }
            Swal.fire({ icon: 'error', text: msg });
        }).always(function() {
            isSubmitting = false;
            $('#loaderaditdinda').hide();
        });
    });

    // Preview gambar saat dipilih
    $(document).on('change', 'input[type="file"]', function() {
        var file = this.files[0];
        if (!file) return;
        var sizeMB = (file.size / 1024 / 1024).toFixed(2);
        var hint = $(this).siblings('.file-size-hint');
        if (hint.length === 0) {
            hint = $('<small class="file-size-hint d-block"></small>').insertAfter($(this));
        }
        if (file.size > MAX_SIZE_BYTES) {
            hint.html('<span class="text-danger"><i class="fas fa-exclamation-triangle"></i> ' + sizeMB + ' MB — melebihi batas ' + MAX_SIZE_MB + 'MB</span>');
        } else {
            hint.html('<span class="text-success"><i class="fas fa-check"></i> ' + sizeMB + ' MB</span>');
        }
    });
});
</script>
@endpush
@push('scripts')
<script src="https://cdn.ckeditor.com/ckeditor5/41.4.2/classic/ckeditor.js"></script>
<script>
var ckEditors = {};

$(function() {
    document.querySelectorAll('.ckeditor-field').forEach(function(el) {
        ClassicEditor.create(el, {
            toolbar: ['heading','|','bold','italic','underline','|','bulletedList','numberedList','|','link','blockQuote','|','undo','redo'],
        }).then(function(editor) {
            ckEditors[el.id] = editor;
        }).catch(console.error);
    });
});

// Fungsi untuk sync semua CKEditor ke textarea — dipanggil sebelum FormData dibuat
function syncCKEditors() {
    Object.keys(ckEditors).forEach(function(id) {
        var el = document.getElementById(id);
        if (el) el.value = ckEditors[id].getData();
    });
}
</script>
@endpush