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

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    
    {{-- Action Buttons --}}
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        <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 ($authorize->add == '1')
                            <button class="btn btn-primary mb-0" id="btn-save">
                                <i class="fas fa-floppy-disk me-1"></i>
                                <span class="font-weight-bold">Simpan</span>
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Main Form --}}
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-10">
                <div class="card">
                    <form role="form" method="POST" action="{{ URL::to($url_menu) }}" 
                          id="{{ $dmenu }}-form" enctype="multipart/form-data">
                        @csrf
                        
                        <div class="card-body">
                            <p class="text-uppercase text-sm">Insert {{ $title_menu }}</p>
                            <hr class="horizontal dark mt-0">
                            
                            <div class="row">
                                <input type="hidden" name="id_internal_memo" value="{{ old('id_internal_memo') }}">

                                {{-- Left Column --}}
                                <div class="col-md-6">
                                    {{-- Dari --}}
                                    <div class="mb-4">
                                        <label for="from" class="form-label">Dari</label>
                                        <select class="form-select text-muted" id="from" name="from" required>
                                            <option value="" disabled selected>-- Pilih Dari --</option>
                                            @foreach ($from_list as $from)
                                                <option value="{{ $from->value }}" {{ old('from') == $from->value ? 'selected' : '' }}>
                                                    {{ $from->label }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    {{-- Untuk --}}
                                    <div class="mb-4">
                                        <label for="to" class="form-label">Untuk</label>
                                        <div class="form-check-list d-flex flex-wrap justify-content-start" style="gap: 15px;">
                                            @foreach ($to_list as $to)
                                                <div class="form-check" style="flex: 0 0 calc(25% - 15px); max-width: calc(25% - 15px);">
                                                    <input class="form-check-input" type="checkbox" 
                                                           id="to_{{ $to->value }}" name="to[]" 
                                                           value="{{ $to->label }}"
                                                           {{ is_array(old('to')) && in_array($to->label, old('to')) ? 'checked' : '' }}>
                                                    <label class="form-check-label" for="to_{{ $to->value }}">
                                                        {{ $to->label }}
                                                    </label>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>

                                    {{-- Subjek --}}
                                    <div class="mb-4">
                                        <label for="subject" class="form-label">Subjek</label>
                                        <input type="text" class="form-control" id="subject" 
                                               name="subject" value="{{ old('subject') }}" required>
                                    </div>

                                    {{-- Tanggal --}}
                                    <div class="mb-4">
                                        <label for="tanggal" class="form-label">Tanggal</label>
                                        <input type="date" class="form-control" id="tanggal" 
                                               name="tanggal" value="{{ old('tanggal') }}" required>
                                    </div>

                                    {{-- No Surat --}}
                                    <div class="mb-4">
                                        <label for="no_surat" class="form-label">Nomor Surat</label>
                                        <input type="text" class="form-control" id="no_surat" 
                                               name="no_surat" value="{{ old('no_surat') }}" required>
                                    </div>

                                    {{-- Urgensi --}}
                                    <div class="mb-4">
                                        <label for="urgency" class="form-label">Urgensi</label>
                                        <div class="form-group">
                                            <select class="form-select text-muted" id="urgency" 
                                                    name="urgency[]" multiple style="width: 100%;">
                                                @foreach ($urgency_list as $urgency)
                                                    <option value="{{ $urgency->value }}" 
                                                            {{ is_array(old('urgency')) && in_array($urgency->value, old('urgency')) ? 'selected' : '' }}>
                                                        {{ $urgency->label }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                {{-- Right Column (Empty for layout) --}}
                                <div class="col-md-6"></div>

                                {{-- Deskripsi (Full Width) --}}
                                <div class="col-12">
                                    <div class="mb-4">
                                        <div class="d-flex justify-content-between align-items-center mb-2">
                                            <label for="deskripsi" class="form-label mb-0">Deskripsi</label>
                                            <small class="text-muted">
                                                <span id="char-count">0 karakter | 0/25 baris PDF</span>
                                            </small>
                                        </div>
                                        <textarea class="form-control" id="deskripsi" name="deskripsi" 
                                                  rows="10" required
                                                  style="font-family: Arial, sans-serif; font-size: 10pt; line-height: 1.6;">{{ old('deskripsi') }}</textarea>
                                    </div>
                                </div>
                            </div>
                            <hr class="horizontal dark">
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- JS Menu Include --}}
    @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @push('addjs')
                @include('js.' . $dmenu)
            @endpush
        @else
            @push('addjs')
                <script>
                    Swal.fire({
                        title: 'JS Not Found!!',
                        text: 'Please Create File JS',
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                </script>
            @endpush
        @endif
    @endif
@endsection

{{-- Custom CSS --}}
@push('css')
<style>
    select.form-control {
        appearance: auto;
    }

    .urgency-tag {
        background-color: #28a745;
        color: white;
        padding: 5px 10px;
        border-radius: 20px;
        display: inline-flex;
        align-items: center;
    }

    .urgency-tag .remove-btn {
        margin-left: 10px;
        cursor: pointer;
        color: white;
        font-weight: bold;
    }
</style>
@endpush
@push('js')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    $(document).ready(function() {
        $('#urgency').select2({
            placeholder: "Pilih Urgensi",
            allowClear: true,
            width: '100%'
        });
        $('#deskripsi').on('keydown', function(e) {
            if (e.key === 'Tab') {
                e.preventDefault();
                const start = this.selectionStart;
                const end = this.selectionEnd;
                // Insert 4 spaces
                $(this).val(
                    $(this).val().substring(0, start) +
                    "    " + 
                    $(this).val().substring(end)
                );
                // Move cursor after inserted spaces
                this.selectionStart = this.selectionEnd = start + 4;
                // Update PDF line counter
                updateCounter();
            }
        });
        const MAX_LINES = 25;
        const BASE_WIDTH_PT = 503; 
        let lastValidText = $('#deskripsi').val();
        let lastCursorPosition = 0      


        function calculatePDFLines(text) {
            if (!text) return 0;

            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            ctx.font = '13.33px Arial';

            const lines = text.split('\n');
            let totalLines = 0;

            lines.forEach(line => {
                // Empty lines count as 1 line in PDF
                if (line.length === 0) {
                    totalLines += 1;
                    return;
                }
                const processedLine = line.replace(/\t/g, '    ');
                
                const trimmed = processedLine.trim();
                const leadingSpaces = processedLine.match(/^\s*/)[0].length;
                let availableWidth = BASE_WIDTH_PT;

                if (trimmed.length === 0) {
                    totalLines += 1;
                    return;
                }

                const mainNumberMatch = trimmed.match(/^(\d+)\.\s+(.+)$/);
                if (mainNumberMatch && leadingSpaces === 0) {
                    availableWidth = BASE_WIDTH_PT - 20;
                    const fullText = processedLine.substring(processedLine.indexOf(mainNumberMatch[1]));
                    totalLines += wrapTextWithSpaces(ctx, fullText, availableWidth);
                    return;
                }
                const subNumberMatch = trimmed.match(/^(\d+)\.\s+(.+)$/);
                if (subNumberMatch && leadingSpaces > 0) {
                    availableWidth = BASE_WIDTH_PT - 40;
                    const fullText = processedLine.substring(processedLine.indexOf(subNumberMatch[1]));
                    totalLines += wrapTextWithSpaces(ctx, fullText, availableWidth);
                    return;
                }
                if (leadingSpaces > 0) {
                    availableWidth = BASE_WIDTH_PT - 20;
                    totalLines += wrapTextWithSpaces(ctx, trimmed, availableWidth);
                    return;
                }
                totalLines += wrapTextWithSpaces(ctx, processedLine, BASE_WIDTH_PT);
            });

            return totalLines;
        }

        function wrapTextWithSpaces(ctx, text, maxWidthPt) {
            const maxWidthPx = maxWidthPt * 1.333;
            
            let linesCount = 1;
            let currentLine = '';
            let currentWidth = 0;

            for (let i = 0; i < text.length; i++) {
                const char = text[i];
                const testLine = currentLine + char;
                const testWidth = ctx.measureText(testLine).width;
                
                if (testWidth > maxWidthPx && currentLine.length > 0) {
                    // Line break terjadi
                    linesCount++;
                    currentLine = char;
                    currentWidth = ctx.measureText(char).width;
                } else {
                    currentLine = testLine;
                    currentWidth = testWidth;
                }
            }

            return linesCount;
        }
        function updateCounter(e) {
        const $textarea = $('#deskripsi');
        const currentText = $textarea.val();
        const lineCount = calculatePDFLines(currentText);
        const $display = $('#char-count');

        // 1. CEK JIKA MELEBIHI BATAS
        if (lineCount > MAX_LINES) {
            // Jika melebihi batas, kembalikan ke teks sebelumnya
            $textarea.val(lastValidText);
            
            // Kembalikan posisi kursor agar tidak melompat ke akhir
            $textarea[0].setSelectionRange(lastCursorPosition, lastCursorPosition);

            // Tampilkan Notifikasi
            Swal.fire({
                icon: 'warning',
                title: 'Batas Maksimal!',
                text: 'Teks tidak boleh lebih dari 25 baris PDF. Perubahan dibatalkan.',
                timer: 2000,
                showConfirmButton: false,
                toast: true,
                position: 'top-end'
            });
        } else {
            // 2. JIKA VALID, SIMPAN SEBAGAI STATE TERAKHIR
            lastValidText = currentText;
            lastCursorPosition = $textarea[0].selectionStart;
        }

        // 3. UPDATE TAMPILAN COUNTER
        const finalLineCount = calculatePDFLines(lastValidText);
        const charCount = lastValidText.length;
        
        $display.html(`${charCount.toLocaleString('id-ID')} karakter | ${finalLineCount}/${MAX_LINES} baris PDF`);

        // Warna merah muncul HANYA jika sudah mencapai limit (baris 25)
        if (finalLineCount >= MAX_LINES) {
            $display.addClass('text-danger font-weight-bold');
        } else {
            $display.removeClass('text-danger font-weight-bold');
        }
    }
        // Bind counter to textarea input
        $('#deskripsi').on('input', updateCounter);
        // Simpan posisi kursor setiap kali ada aktivitas klik atau tombol arah
        $('#deskripsi').on('keydown click focus', function() {
            if (calculatePDFLines($(this).val()) <= MAX_LINES) {
                lastCursorPosition = this.selectionStart;
            }
        });
        // Run on page load (for handling old values)
        updateCounter();

        $('#btn-save').on('click', function(e) {
            e.preventDefault();

            let from = $('#from').val();
            let to = $('input[name="to[]"]:checked').length;
            let subject = $('#subject').val() ? $('#subject').val().trim() : '';
            let tanggal = $('#tanggal').val();
            let no_surat = $('#no_surat').val() ? $('#no_surat').val().trim() : '';
            let deskripsi = $('#deskripsi').val() ? $('#deskripsi').val().trim() : '';

            let errors = [];
            let firstEmpty = null;

            // Check required fields
            if (!from) {
                errors.push('Dari');
                if (!firstEmpty) firstEmpty = '#from';
            }
            if (!to) {
                errors.push('Untuk');
                if (!firstEmpty) firstEmpty = 'input[name="to[]"]:first';
            }
            if (!subject) {
                errors.push('Subjek');
                if (!firstEmpty) firstEmpty = '#subject';
            }
            if (!tanggal) {
                errors.push('Tanggal');
                if (!firstEmpty) firstEmpty = '#tanggal';
            }
            if (!no_surat) {
                errors.push('Nomor Surat');
                if (!firstEmpty) firstEmpty = '#no_surat';
            }
            if (!deskripsi) {
                errors.push('Deskripsi');
                if (!firstEmpty) firstEmpty = '#deskripsi';
            }

            // Show validation errors
            if (errors.length > 0) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Data Belum Lengkap',
                    html: 'Silakan lengkapi data berikut:<br><ul style="text-align:left;">' +
                          errors.map(e => `<li>${e}</li>`).join('') + '</ul>',
                    confirmButtonColor: '#028284'
                }).then(function() {
                    if (firstEmpty) {
                        setTimeout(() => {
                            if (firstEmpty === 'input[name="to[]"]:first') {
                                $('input[name="to[]"]').first().focus();
                            } else {
                                $(firstEmpty).focus();
                            }
                        }, 200);
                    }
                });
                return false;
            }

            // Validate description length
            if (deskripsi) {
                const lineCount = calculatePDFLines(deskripsi);

                if (lineCount > MAX_LINES) {
                    const excess = lineCount - MAX_LINES;
                    const avgCharsPerLine = Math.floor(deskripsi.length / lineCount);
                    const suggestedCut = excess * avgCharsPerLine;

                    Swal.fire({
                        icon: 'error',
                        title: 'Deskripsi Terlalu Panjang!',
                        html: `
                            <div style="text-align: left; padding: 10px;">
                                <p style="margin-bottom: 10px;"><strong>PDF akan lebih dari 1 halaman!</strong></p>
                                <hr style="margin: 10px 0;">
                                <table style="width: 100%; margin-bottom: 10px; font-size: 14px;">
                                    <tr>
                                        <td style="padding: 4px 0;">Baris saat ini:</td>
                                        <td style="padding: 4px 0;"><strong>${lineCount} baris</strong></td>
                                    </tr>
                                    <tr>
                                        <td style="padding: 4px 0;">Maksimal:</td>
                                        <td style="padding: 4px 0;"><strong>${MAX_LINES} baris</strong></td>
                                    </tr>
                                    <tr>
                                        <td style="padding: 4px 0;">Kelebihan:</td>
                                        <td style="padding: 4px 0;"><strong>${excess} baris (~${suggestedCut} karakter)</strong></td>
                                    </tr>
                                </table>
                                <hr style="margin: 10px 0;">
                                <p style="margin-bottom: 5px;"><strong>Cara mengurangi:</strong></p>
                                <ul style="margin: 5px 0; padding-left: 20px; font-size: 13px;">
                                    <li>Hapus <strong>${excess} baris</strong></li>
                                    <li>Kurangi ~<strong>${suggestedCut} karakter</strong></li>
                                    <li>Perpendek kalimat panjang</li>
                                    <li>Gabungkan paragraf</li>
                                </ul>
                            </div>
                        `,
                        width: '500px',
                        confirmButtonColor: '#028284',
                        confirmButtonText: 'Edit Deskripsi',
                        allowOutsideClick: false
                    }).then(() => {
                        $('#deskripsi').focus();
                        const textarea = document.getElementById('deskripsi');
                        textarea.setSelectionRange(textarea.value.length, textarea.value.length);
                        textarea.scrollTop = textarea.scrollHeight;
                    });
                    return false;
                }
            }

            // Submit form if all validations pass
            $('#{{ $dmenu }}-form').submit();
        });

        // Prevent duplicate form submission
        $('#{{ $dmenu }}-form').off('submit');
        $('#urgency').on('select2:select', function(e) {
            const selectedValue = e.params.data.id;
            const selectedText = e.params.data.text;

            // Prevent duplicate tags
            if (document.getElementById(`urgency-item-${selectedValue}`)) {
                return;
            }

            const urgencyList = document.getElementById('selected-urgency-list');
            if (!urgencyList) return;

            // Create urgency tag
            const urgencyItem = document.createElement('div');
            urgencyItem.id = `urgency-item-${selectedValue}`;
            urgencyItem.className = 'urgency-tag';

            const labelSpan = document.createElement('span');
            labelSpan.textContent = selectedText;

            const removeButton = document.createElement('span');
            removeButton.className = 'remove-btn';
            removeButton.textContent = 'x';
            removeButton.onclick = function() {
                urgencyItem.remove();
                $(`#urgency option[value="${selectedValue}"]`).prop('selected', false).trigger('change');
            };

            urgencyItem.appendChild(labelSpan);
            urgencyItem.appendChild(removeButton);
            urgencyList.appendChild(urgencyItem);
        });
    });
</script>
@endpush