@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@push('css')
    <link rel="stylesheet" href="{{ asset('/') }}assets/css/summernote-bs5.min.css">
    <style>
        .note-editable table {
            border-collapse: collapse;
        }
        .note-editable td,
        .note-editable th {
            border: 1px solid #cbd5e1;
            min-width: 30px;
            position: relative;
            box-sizing: border-box;
        }
        .col-resize-handle {
            position: absolute;
            top: 0;
            right: -3px;
            width: 6px;
            height: 100%;
            cursor: col-resize;
            z-index: 20;
            display: inline-block;
            user-select: none;
        }
        .col-resize-handle:hover {
            background-color: rgba(30, 58, 95, 0.4);
        }
        .row-resize-handle {
        position: absolute;
        left: 0;
        bottom: -3px;
        width: 100%;
        height: 6px;
        cursor: row-resize;
        z-index: 20;
        display: inline-block;
        user-select: none;
    }
    .row-resize-handle:hover {
        background-color: rgba(30, 58, 95, 0.4);
    }
    .note-editor .dropdown-fontsize {
        max-height: 250px;
        overflow-y: auto;
    }
    </style>
@endpush

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">

                <div class="card shadow-lg mx-1 mb-4">
                    <div class="card-body p-3">
                        <div class="row gx-4">
                            <div class="col-lg">
                                <div class="nav-wrapper d-flex flex-wrap gap-2 align-items-center">
                                    <button type="button" class="btn btn-secondary mb-0" onclick="history.back()"><i class="fas fa-circle-left me-1"></i><span class="font-weight-bold">Kembali</span></button>
                                    @if (!$item)
                                        <button type="button" class="btn btn-outline-primary mb-0" id="solusiKontenForm-draft"
                                            onclick="submitKontenForm('draft')"><i class="fas fa-file-lines me-1"></i><span class="font-weight-bold">Simpan sebagai Draft</span></button>
                                        <button type="button" class="btn btn-primary mb-0" id="solusiKontenForm-publish"
                                            onclick="submitKontenForm('publish')"><i class="fas fa-paper-plane me-1"></i><span class="font-weight-bold">Publikasikan</span></button>
                                    @elseif (($item->status ?? '') === 'draft')
                                        <button type="button" class="btn btn-outline-primary mb-0" id="solusiKontenForm-draft"
                                            onclick="submitKontenForm('draft')"><i class="fas fa-floppy-disk me-1"></i><span class="font-weight-bold">Simpan Draft</span></button>
                                        <button type="button" class="btn btn-success mb-0" id="solusiKontenForm-publish"
                                            onclick="submitKontenForm('publish')"><i class="fas fa-paper-plane me-1"></i><span class="font-weight-bold">Publikasikan Sekarang</span></button>
                                    @else
                                        <button type="button" class="btn btn-outline-warning mb-0" id="solusiKontenForm-draft"
                                            onclick="submitKontenForm('draft')"><i class="fas fa-file-lines me-1"></i><span class="font-weight-bold">Kembalikan ke Draft</span></button>
                                        <button type="button" class="btn btn-primary mb-0" id="solusiKontenForm-save"
                                            onclick="submitKontenForm('publish')"><i class="fas fa-floppy-disk me-1"></i><span class="font-weight-bold">Simpan Perubahan</span></button>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row mx-1">
                    <div class="card">
                        <hr class="horizontal dark mt-0">

                        <div class="px-4 py-2 d-flex justify-content-between align-items-center flex-wrap gap-2">
                            <h5 class="mb-0">{{ $title_menu }} <small class="text-muted">— Kategori: {{ $kategoriNama }} / {{ $tipeLabel }}</small></h5>
                            @if ($item)
                                @if (($item->status ?? '') === 'draft')
                                    <span class="badge bg-warning text-dark px-3 py-2"><i class="fas fa-file-pen me-1"></i> Status: Draft</span>
                                @elseif ($item->isactive == 1)
                                    <span class="badge bg-success px-3 py-2"><i class="fas fa-check-circle me-1"></i> Status: Dipublikasikan</span>
                                @else
                                    <span class="badge bg-secondary px-3 py-2"><i class="fas fa-pause-circle me-1"></i> Status: Nonaktif</span>
                                @endif
                            @else
                                <span class="badge bg-info text-white px-3 py-2"><i class="fas fa-plus me-1"></i> Konten Baru</span>
                            @endif
                        </div>

                        <div class="px-4 pb-4">
                            <form id="solusiKontenForm" action="{{ $item ? url('/solusi-master/konten/' . $idkategori . '/' . $tipe . '/update/' . $item->idsolusikonten) : url('/solusi-master/konten/' . $idkategori . '/' . $tipe . '/store') }}"
                                method="POST" enctype="multipart/form-data">
                                @csrf
                                @if ($item) @method('PUT') @endif
                                <input type="hidden" name="action" id="solusiKontenAction" value="publish">

                                <div class="row mt-3">
                                    <div class="col-md-6">
                                        <div class="card border">
                                            <div class="card-header bg-light"><b>🇮🇩 Bahasa Indonesia</b></div>
                                            <div class="card-body">
                                                <div class="mb-3">
                                                    <label>Judul</label>
                                                    <input type="text" name="judul_id" class="form-control" value="{{ $langId->judul ?? '' }}" required>
                                                </div>
                                                <div class="mb-3">
                                                    <label>Isi Konten</label>
                                                    <textarea name="isi_id" class="summernote">{{ $langId->isi ?? '' }}</textarea>
                                                </div>
                                                {{--
                                                <div>
                                                    <label>Meta Title</label>
                                                    <input type="text" name="meta_title_id" class="form-control" value="{{ $langId->meta_title ?? '' }}">
                                                </div>
                                                <div class="mt-3">
                                                    <label>Meta Description</label>
                                                    <textarea name="meta_description_id" class="form-control" rows="2">{{ $langId->meta_description ?? '' }}</textarea>
                                                </div>
                                                --}}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="card border">
                                            <div class="card-header bg-light"><b>🇬🇧 English</b></div>
                                            <div class="card-body">
                                                <div class="mb-3">
                                                    <label>Judul</label>
                                                    <input type="text" name="judul_en" class="form-control" value="{{ $langEn->judul ?? '' }}" required>
                                                </div>
                                                <div class="mb-3">
                                                    <label>Isi Konten</label>
                                                    <textarea name="isi_en" class="summernote">{{ $langEn->isi ?? '' }}</textarea>
                                                </div>
                                                {{--
                                                <div>
                                                    <label>Meta Title</label>
                                                    <input type="text" name="meta_title_en" class="form-control" value="{{ $langEn->meta_title ?? '' }}">
                                                </div>
                                                <div class="mt-3">
                                                    <label>Meta Description</label>
                                                    <textarea name="meta_description_en" class="form-control" rows="2">{{ $langEn->meta_description ?? '' }}</textarea>
                                                </div>
                                                --}}
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="card border mt-3">
                                    <div class="card-header bg-light"><b>Data Konten</b></div>
                                    <div class="card-body row">
                                        <div class="col-md-4 mb-3">
                                            <label>Tanggal</label>
                                            <input type="date" name="tanggal" class="form-control" value="{{ $item->tanggal ?? now()->toDateString() }}">
                                        </div>
                                        <div class="col-md-4 mb-3">
                                            <label>Urutan</label>
                                            <input type="number" name="urutan" class="form-control" value="{{ $item->urutan ?? 0 }}">
                                        </div>
                                        <div class="col-md-8 mb-3">
                                            <label>Gambar</label>
                                            <div class="mb-2 d-flex align-items-center gap-3 {{ ($item && $item->gambar) ? '' : 'd-none' }}" id="previewWrapper_gambarKonten">
                                                <img id="previewImg_gambarKonten" src="{{ ($item && $item->gambar) ? img_src($item->gambar) : '' }}" style="height:60px" class="rounded">
                                                <div class="text-muted small">
                                                    <div>File saat ini: <b id="previewFileName_gambarKonten">{{ $item && $item->gambar ? basename($item->gambar) : '' }}</b></div>
                                                    @if ($item && $item->gambar && \Illuminate\Support\Facades\Storage::disk('public')->exists($item->gambar))
                                                        <div>{{ number_format(\Illuminate\Support\Facades\Storage::disk('public')->size($item->gambar) / 1024, 1) }} KB</div>
                                                    @endif
                                                </div>
                                            </div>

                                            <input type="file" name="gambar" id="inputGambarKonten" class="form-control" accept="image/*" style="display: none;">
                                            <div class="d-flex align-items-center gap-2" style="min-width: 0;">
                                                <label for="inputGambarKonten" class="btn btn-outline-secondary mb-0 flex-shrink-0">
                                                    <i class="fas fa-upload me-1"></i> Choose file
                                                </label>
                                                <span id="namaFileGambarKonten" class="text-muted small text-truncate" style="min-width: 0;">Belum ada file dipilih</span>
                                            </div>

                                            <small class="text-muted d-block mt-1">
                                                <i class="fas fa-info-circle text-primary me-1"></i> Upload foto maksimal <b>4 MB</b>. Rasio yang direkomendasikan: <code>16:9</code> atau <code>4:3 Landscape</code> (Format: JPG/PNG/WebP).
                                            </small>
                                        </div>
                                    </div>
                                </div>

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

            </div>
        </div>
    </div>
@endsection

@push('js')
    <script src="{{ asset('/') }}assets/js/summernote-bs5.min.js"></script>
    <script>
        function cleanNestedTables(container) {
            var nestedTables = container.querySelectorAll('table table');
            while (nestedTables.length > 0) {
                nestedTables.forEach(function(nested) {
                    var parentCell = nested.closest('td') || nested.closest('th');
                    if (parentCell) {
                        var fragment = document.createDocumentFragment();
                        while (nested.firstChild) {
                            fragment.appendChild(nested.firstChild);
                        }
                        nested.replaceWith(fragment);
                    } else {
                        var parentTable = nested.closest('table');
                        if (parentTable && parentTable !== nested) {
                            parentTable.parentNode.insertBefore(nested, parentTable.nextSibling);
                        }
                    }
                });
                nestedTables = container.querySelectorAll('table table');
            }

            // Helper: pertahankan properti style tertentu, buang sisanya (sampah dari paste Word/Excel)
            function preserveStyle(el, props) {
                var kept = {};
                props.forEach(function (p) {
                    if (el.style[p]) kept[p] = el.style[p];
                });
                el.removeAttribute('style');
                Object.keys(kept).forEach(function (p) {
                    el.style[p] = kept[p];
                });
            }

            var tables = container.querySelectorAll('table');
            tables.forEach(function(tbl) {
                preserveStyle(tbl, ['width', 'table-layout']); // pertahankan hasil resize
                tbl.removeAttribute('width');  // buang HTML attribute width lama (beda dari style)
                tbl.removeAttribute('height');
                tbl.classList.add('table', 'table-bordered');

                // Pertahankan width tiap kolom hasil resize
                tbl.querySelectorAll('col').forEach(function (col) {
                    preserveStyle(col, ['width']);
                });
            });
        }

        // ===== TABLE COLUMN RESIZE untuk Summernote =====
        function enableTableColumnResize(editorClass) {
            $(editorClass).each(function () {
                const context = $(this).data('summernote');
                if (!context) return;
                const $editable = context.layoutInfo.editable;
                if (!$editable || !$editable.length) return;

                function ensureColgroup($table) {
                    const $firstRow = $table.find('tr:first-child');
                    const colCount = $firstRow.find('> th, > td').length;
                    let $colgroup = $table.find('> colgroup');

                    if (!$colgroup.length || $colgroup.find('col').length !== colCount) {
                        $table.find('> colgroup').remove();
                        $colgroup = $('<colgroup></colgroup>');
                        for (let i = 0; i < colCount; i++) {
                            $colgroup.append('<col>');
                        }
                        $table.prepend($colgroup);
                    }
                    return $colgroup;
                }

                function attachResizers() {
                    $editable.find('table').each(function () {
                        const $table = $(this);
                        $table.css('table-layout', 'fixed');
                        $table.find('td, th').css('border', '1px solid #cbd5e1');

                        const $colgroup = ensureColgroup($table);
                        const $cols = $colgroup.find('col');

                        $table.find('tr').each(function () {
                            $(this).find('> th, > td').each(function (index) {
                                const $cell = $(this);
                                if ($cell.find('> .col-resize-handle').length) return;

                                $cell.css('position', 'relative');
                                const $handle = $('<span class="col-resize-handle" contenteditable="false"></span>');
                                $cell.append($handle);

                                $handle.on('mousedown', function (e) {
                                    e.preventDefault();
                                    e.stopPropagation();

                                    const startX = e.pageX;
                                    const $col = $cols.eq(index);
                                    const $nextCol = $cols.eq(index + 1);
                                    const isLastCol = $nextCol.length === 0;

                                    const startWidth = $cell.outerWidth();
                                    const $nextCell = $cell.next('th, td');
                                    const nextStartWidth = $nextCell.length ? $nextCell.outerWidth() : null;

                                    let startTableWidth = null;

                                    if (isLastCol) {
                                        $table.find('tr').first().find('> th, > td').each(function (i) {
                                            const w = $(this).outerWidth();
                                            $cols.eq(i).attr('width', w).css('width', w + 'px');
                                        });
                                        startTableWidth = $table.outerWidth();
                                        $table.css('width', startTableWidth + 'px');
                                    }

                                    $(document).on('mousemove.colresize', function (eMove) {
                                        const diff = eMove.pageX - startX;
                                        const newWidth = Math.round(Math.max(30, startWidth + diff));
                                        $col.attr('width', newWidth).css('width', newWidth + 'px');

                                        if ($nextCol.length && nextStartWidth !== null) {
                                            const newNextWidth = Math.round(Math.max(30, nextStartWidth - diff));
                                            $nextCol.attr('width', newNextWidth).css('width', newNextWidth + 'px');
                                        } else if (isLastCol) {
                                            const newTableWidth = Math.round(Math.max(30, startTableWidth + diff));
                                            $table.css('width', newTableWidth + 'px');
                                        }
                                    });

                                    $(document).on('mouseup.colresize', function () {
                                        $(document).off('mousemove.colresize mouseup.colresize');
                                    });
                                });
                            });
                        });

                        const $rows = $table.find('tr');
                        $rows.each(function (rowIndex) {
                            if (rowIndex === $rows.length - 1) return;

                            const $row = $(this);
                            const $cellsInRow = $row.find('> th, > td');

                            $cellsInRow.each(function () {
                                const $cell = $(this);
                                $cell.css('position', 'relative');

                                if ($cell.find('> .row-resize-handle').length) return;

                                const $rowHandle = $('<span class="row-resize-handle" contenteditable="false"></span>');
                                $cell.append($rowHandle);

                                $rowHandle.on('mousedown', function (e) {
                                    e.preventDefault();
                                    e.stopPropagation();

                                    const startY = e.pageY;
                                    const startHeight = $row.outerHeight();

                                    $(document).on('mousemove.rowresize', function (eMove) {
                                        const diff = eMove.pageY - startY;
                                        const newHeight = Math.round(Math.max(24, startHeight + diff));
                                        $row.find('> th, > td').css('height', newHeight + 'px');
                                    });

                                    $(document).on('mouseup.rowresize', function () {
                                        $(document).off('mousemove.rowresize mouseup.rowresize');
                                    });
                                });
                            });
                        });
                    });
                }

                attachResizers();
                $editable.on('input mouseup keyup', function () {
                    attachResizers();
                });
            });
        }

        $(document).ready(function() {
            $('.summernote').summernote({
                height: 400,
                tooltip: true,
                fontSizes: ['1', '2', '3', '4', '5', '6', '7','8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51', '52', '53', '54', '55', '56', '57', '58', '59', '60', '61', '62', '63', '64', '65', '66', '67', '68', '69', '70', '71', '72', '73', '74', '75', '76', '77', '78', '79', '80', '81', '82', '83', '84', '85', '86', '87', '88', '89', '90', '91', '92', '93', '94', '95', '96', '97', '98', '99', '100'],
                toolbar: [
                    ['style', ['style']],
                    ['font', ['bold', 'italic', 'underline', 'clear']],
                    ['fontname', ['fontname']],
                    ['fontsize', ['fontsize']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['height', ['height']],
                    ['table', ['table']],
                    ['insert', ['link', 'picture', 'video', 'hr']],
                    ['view', ['fullscreen', 'codeview', 'undo', 'redo']],
                ],
                callbacks: {
                    onImageUpload: function (files) {
                        for (let i = 0; i < files.length; i++) {
                            uploadSummernoteImage(files[i], this);
                        }
                    },
                    onPaste: function (e) {
                        var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('text/html');
                        if (bufferText && (bufferText.includes('<table') || bufferText.includes('<TABLE'))) {
                            e.preventDefault();
                            var tempDiv = document.createElement('div');
                            tempDiv.innerHTML = bufferText;
                            cleanNestedTables(tempDiv);
                            document.execCommand('insertHTML', false, tempDiv.innerHTML);
                        }
                    }
                }
            });
            $('.note-editor [data-toggle="dropdown"]').each(function () {
                $(this).attr('data-bs-toggle', 'dropdown');
            });

            enableTableColumnResize('.summernote');

            $('#solusiKontenForm').on('submit', function() {
                $('.summernote').each(function() {
                    var code = $(this).summernote('code');
                    if (code && code.includes('<table')) {
                        var temp = document.createElement('div');
                        temp.innerHTML = code;
                        cleanNestedTables(temp);
                        $(this).summernote('code', temp.innerHTML);
                    }
                });
            });
        });

        function uploadSummernoteImage(file, editor) {
            const formData = new FormData();
            formData.append('gambar', file);
            formData.append('_token', '{{ csrf_token() }}');

            fetch('{{ url("/solusi-master/konten/upload-gambar-konten") }}', {
                method: 'POST',
                body: formData
            })
            .then(res => res.json())
            .then(data => {
                if (data.url) {
                    $(editor).summernote('insertImage', data.url);
                } else {
                    alert('Gagal upload gambar: ' + (data.message || 'Unknown error'));
                }
            })
            .catch(err => {
                console.error(err);
                alert('Gagal upload gambar.');
            });
        }

        document.getElementById('inputGambarKonten')?.addEventListener('change', function () {
            const nameSpan = document.getElementById('namaFileGambarKonten');
            const $preview = document.getElementById('previewImg_gambarKonten');
            const $wrapper = document.getElementById('previewWrapper_gambarKonten');
            const $fileNameInPreview = document.getElementById('previewFileName_gambarKonten');

            if (this.files && this.files.length > 0) {
                const file = this.files[0];

                nameSpan.textContent = file.name;
                nameSpan.classList.remove('text-muted');
                nameSpan.classList.add('text-success', 'fw-semibold');

                const reader = new FileReader();
                reader.onload = function (e) {
                    if ($preview) $preview.src = e.target.result;
                    if ($wrapper) $wrapper.classList.remove('d-none');
                    if ($fileNameInPreview) $fileNameInPreview.textContent = file.name;
                };
                reader.readAsDataURL(file);
            } else {
                nameSpan.textContent = 'Belum ada file dipilih';
                nameSpan.classList.add('text-muted');
                nameSpan.classList.remove('text-success', 'fw-semibold');
            }
        });

        function submitKontenForm(action) {
            const form = document.getElementById('solusiKontenForm');
            document.getElementById('solusiKontenAction').value = action;
            if (action === 'draft') {
                const titleInput = form.querySelector('input[name="judul_id"]');
                if (titleInput && !titleInput.value.trim()) {
                    titleInput.focus();
                    titleInput.reportValidity();
                    return;
                }
                form.submit();
            } else {
                if (form.reportValidity()) {
                    form.submit();
                }
            }
        }
    </script>
@endpush