@extends('layouts.app')

@section('title', 'Pengaturan Kop Surat')

@section('content')
<div class="pkbm-settings mx-auto max-w-7xl space-y-5">
    <header class="pkbm-settings__heading">
        <div class="min-w-0">
            <p class="pkbm-dashboard__breadcrumb"><span>Data Utama</span><i class="bi bi-chevron-right" aria-hidden="true"></i>Pengaturan<i class="bi bi-chevron-right" aria-hidden="true"></i>Kop Surat</p>
            <h1 class="pkbm-dashboard__title">Pengaturan Kop Surat</h1>
            <p class="pkbm-dashboard__subtitle">Pilih format awal kop surat, lalu sesuaikan logo, baris informasi, ukuran huruf, dan garis sesuai kebutuhan.</p>
        </div>
        <div class="pkbm-settings__period">
            <span class="pkbm-settings__period-icon"><i class="bi bi-envelope-paper" aria-hidden="true"></i></span>
            <span>
                <span class="pkbm-settings__period-label">Mode kop aktif</span>
                <span class="pkbm-settings__period-value">{{ ($letterhead?->mode ?? 'default') === 'custom' ? 'Custom' : 'Default lembaga' }}</span>
            </span>
        </div>
    </header>

    @if (session('status'))
        <div role="status" class="settings-notice settings-notice--success">
            <i class="bi bi-check-circle-fill" aria-hidden="true"></i><span>{{ session('status') }}</span>
        </div>
    @endif
    @if ($errors->any())
        <div role="alert" class="settings-notice settings-notice--error">
            <i class="bi bi-exclamation-circle-fill" aria-hidden="true"></i>
            <div>
                <p class="font-semibold">Periksa kembali pengaturan kop surat.</p>
                <ul class="mt-1 list-inside list-disc">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        </div>
    @endif

    <div class="grid items-start gap-5">
        <section class="sp-card settings-form-card overflow-hidden">
            <div class="settings-panel-heading">
                <span class="settings-panel-heading__icon"><i class="bi bi-envelope-paper" aria-hidden="true"></i></span>
                <div>
                    <h2 class="sp-section-title">Identitas kop surat</h2>
                    <p class="mt-1 text-xs leading-5 text-slate-500">Pilihan default mengambil nama, alamat, dan NPSN dari data lembaga. Pilih custom untuk memakai identitas atau logo yang berbeda.</p>
                </div>
            </div>
            <form method="POST" action="{{ route('pkbm.kop-surat.update') }}" enctype="multipart/form-data" class="settings-form space-y-4 p-5 sm:p-6">
                @csrf
                @method('PUT')

                @php($selectedMode = old('mode', $letterhead->mode ?? 'default'))
                @php($formRows = old('rows', $configuredRows))
                @php($logoSize = max(24, min(160, (int) old('logo_size', $letterhead->logo_size ?? 68))))
                @php($institutionLogoSize = max(24, min(160, (int) old('institution_logo_size', $letterhead->institution_logo_size ?? 68))))
                <fieldset class="letterhead-mode-fieldset">
                    <legend class="sp-form-label">Pilih format awal kop surat</legend>
                    <div class="letterhead-mode-options">
                    <label class="letterhead-mode-choice">
                        <input type="radio" name="mode" value="default" @checked($selectedMode === 'default') class="mt-1 size-4 accent-blue-600">
                        <span>
                            <span class="letterhead-mode-choice__title"><i class="bi bi-building" aria-hidden="true"></i>Kop default lembaga</span>
                            <span class="letterhead-mode-choice__description">Format awal: logo kiri, empat baris identitas PKBM, dan garis ganda. Isi baris tetap bisa Anda ubah di bawah.</span>
                        </span>
                    </label>
                    <label class="letterhead-mode-choice">
                        <input type="radio" name="mode" value="custom" @checked($selectedMode === 'custom') class="mt-1 size-4 accent-blue-600">
                        <span>
                            <span class="letterhead-mode-choice__title"><i class="bi bi-pencil-square" aria-hidden="true"></i>Kop custom</span>
                            <span class="letterhead-mode-choice__description">Mulai dari identitas custom. Nama, alamat, kontak, baris, logo, dan garis dapat diatur sendiri.</span>
                        </span>
                    </label>
                    </div>
                </fieldset>

                <section class="sp-card settings-history-card letterhead-preview-card overflow-hidden">
                    <div class="sp-card-header settings-history-card__header">
                        <div>
                            <h2 class="sp-section-title">Pratinjau kop aktif</h2>
                            <p class="mt-1 text-xs text-slate-500">Pratinjau identitas yang digunakan pada dokumen cetak.</p>
                        </div>
                    </div>
                    <div class="letterhead-preview-wrap p-4">
                        <div id="letterhead-preview" class="letterhead-preview letterhead-preview--{{ $letterhead->line_style ?? 'double' }}">
                            <div class="letterhead-preview__logos letterhead-preview__logos--left">
                                @if ($institutionLogoAvailable && ($letterhead->institution_logo_position ?? 'left') === 'left')
                                    <img src="{{ route('pkbm.kop-surat.institution-logo', ['tenant' => $pkbmId, 'logo' => $institution->logo]) }}" alt="Logo lembaga" data-logo-kind="institution" style="width: {{ $institutionLogoSize }}px; height: {{ $institutionLogoSize }}px">
                                @endif
                                @if ($letterhead?->logo && ($letterhead->logo_position ?? 'right') === 'left')
                                    <img src="{{ route('pkbm.kop-surat.logo') }}" alt="Logo tambahan" data-logo-kind="additional" style="width: {{ $logoSize }}px; height: {{ $logoSize }}px">
                                @endif
                            </div>
                            <div id="letterhead-preview-rows" class="letterhead-preview__rows">
                                @foreach ($configuredRows as $row)
                                    <p style="font-size: {{ $row['font_size'] ?? 10 }}px; font-weight: {{ ($row['bold'] ?? false) ? '700' : '400' }}">{{ $row['text'] ?? '' }}</p>
                                @endforeach
                            </div>
                            <div class="letterhead-preview__logos letterhead-preview__logos--right">
                                @if ($institutionLogoAvailable && ($letterhead->institution_logo_position ?? 'left') === 'right')
                                    <img src="{{ route('pkbm.kop-surat.institution-logo', ['tenant' => $pkbmId, 'logo' => $institution->logo]) }}" alt="Logo lembaga" data-logo-kind="institution" style="width: {{ $institutionLogoSize }}px; height: {{ $institutionLogoSize }}px">
                                @endif
                                @if ($letterhead?->logo && ($letterhead->logo_position ?? 'right') === 'right')
                                    <img src="{{ route('pkbm.kop-surat.logo') }}" alt="Logo tambahan" data-logo-kind="additional" style="width: {{ $logoSize }}px; height: {{ $logoSize }}px">
                                @endif
                            </div>
                            @if (($letterhead->line_style ?? 'double') !== 'none')
                                <div class="letterhead-preview__rule letterhead-preview__rule--{{ $letterhead->line_style ?? 'double' }}"></div>
                            @endif
                        </div>
                        <p class="mt-3 text-center text-[11px] text-slate-500">Mode aktif: <strong>{{ ($letterhead?->mode ?? 'default') === 'custom' ? 'Custom' : 'Default lembaga' }}</strong></p>
                    </div>
                </section>

                <div class="letterhead-settings-grid">
                <div id="custom-letterhead-fields" @class(['letterhead-custom-fields border-t border-slate-100 pt-5', 'hidden' => $selectedMode !== 'custom'])>
                    <div>
                        <label for="nama_instansi" class="sp-form-label">Nama pada kop <span class="text-rose-500">*</span></label>
                        <input id="nama_instansi" name="nama_instansi" value="{{ old('nama_instansi', $letterhead->nama_instansi ?? $institution->nama_pkbm ?? '') }}" maxlength="150" @required($selectedMode === 'custom') class="sp-form-control w-full px-3 py-2.5 text-sm">
                        @error('nama_instansi')<p class="mt-1 text-xs text-rose-700">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label for="subjudul" class="sp-form-label">Subjudul / keterangan lembaga <span class="font-normal text-slate-400">(opsional)</span></label>
                        <input id="subjudul" name="subjudul" value="{{ old('subjudul', $letterhead->subjudul ?? '') }}" maxlength="200" class="sp-form-control w-full px-3 py-2.5 text-sm" placeholder="Pendidikan Kesetaraan Paket A, B, dan C">
                        @error('subjudul')<p class="mt-1 text-xs text-rose-700">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label for="alamat" class="sp-form-label">Alamat kop <span class="text-rose-500">*</span></label>
                        <textarea id="alamat" name="alamat" rows="3" maxlength="1000" @required($selectedMode === 'custom') class="sp-form-control w-full px-3 py-2.5 text-sm">{{ old('alamat', $letterhead->alamat ?? $institution->alamat ?? '') }}</textarea>
                        @error('alamat')<p class="mt-1 text-xs text-rose-700">{{ $message }}</p>@enderror
                    </div>
                    <div class="grid gap-4 sm:grid-cols-2">
                        <div>
                            <label for="telepon" class="sp-form-label">Nomor telepon <span class="font-normal text-slate-400">(opsional)</span></label>
                            <input id="telepon" name="telepon" value="{{ old('telepon', $letterhead->telepon ?? '') }}" maxlength="30" class="sp-form-control w-full px-3 py-2.5 text-sm">
                            @error('telepon')<p class="mt-1 text-xs text-rose-700">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <label for="email" class="sp-form-label">Email <span class="font-normal text-slate-400">(opsional)</span></label>
                            <input id="email" type="email" name="email" value="{{ old('email', $letterhead->email ?? '') }}" maxlength="150" class="sp-form-control w-full px-3 py-2.5 text-sm">
                            @error('email')<p class="mt-1 text-xs text-rose-700">{{ $message }}</p>@enderror
                        </div>
                    </div>
                    <div>
                        <label for="npsn" class="sp-form-label">NPSN <span class="font-normal text-slate-400">(opsional)</span></label>
                        <input id="npsn" name="npsn" value="{{ old('npsn', $letterhead->npsn ?? $institution->npsn ?? '') }}" maxlength="30" class="sp-form-control w-full px-3 py-2.5 text-sm">
                        @error('npsn')<p class="mt-1 text-xs text-rose-700">{{ $message }}</p>@enderror
                    </div>
                </div>

                <fieldset class="letterhead-layout-fields">
                    <legend class="sp-form-label">Posisi logo</legend>
                    <div class="grid gap-4 sm:grid-cols-2">
                        <div>
                            <label for="institution-logo-position" class="sp-form-label">Logo lembaga dari data PKBM</label>
                            <select id="institution-logo-position" name="institution_logo_position" class="sp-form-control">
                                <option value="left" @selected(old('institution_logo_position', $letterhead->institution_logo_position ?? 'left') === 'left')>Kiri</option>
                                <option value="right" @selected(old('institution_logo_position', $letterhead->institution_logo_position ?? 'left') === 'right')>Kanan</option>
                            </select>
                            <label for="institution-logo-size" class="sp-form-label mt-3">Ukuran logo lembaga (<output data-logo-size-value="institution">{{ $institutionLogoSize }}</output> px)</label>
                            <input id="institution-logo-size" type="range" name="institution_logo_size" min="24" max="160" step="4" value="{{ $institutionLogoSize }}" data-logo-size="institution" class="letterhead-logo-size">
                            @if ($institutionLogoAvailable)
                                <p class="mt-1 text-[11px] text-emerald-700">Logo lembaga tersedia dan diambil dari data PKBM.</p>
                            @else
                                <p class="mt-1 text-[11px] text-amber-700">Belum ada logo pada data PKBM.</p>
                            @endif
                            @error('institution_logo_position')<p class="mt-1 text-xs text-rose-700">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <label for="kop-logo-position" class="sp-form-label">Logo tambahan</label>
                            <select id="kop-logo-position" name="logo_position" class="sp-form-control">
                                <option value="left" @selected(old('logo_position', $letterhead->logo_position ?? 'right') === 'left')>Kiri</option>
                                <option value="right" @selected(old('logo_position', $letterhead->logo_position ?? 'right') === 'right')>Kanan</option>
                            </select>
                            <label for="kop-logo-size" class="sp-form-label mt-3">Ukuran logo tambahan (<output data-logo-size-value="additional">{{ $logoSize }}</output> px)</label>
                            <input id="kop-logo-size" type="range" name="logo_size" min="24" max="160" step="4" value="{{ $logoSize }}" data-logo-size="additional" class="letterhead-logo-size">
                            <label for="kop-logo" class="sp-form-label mt-3">Unggah logo tambahan <span class="font-normal text-slate-400">(opsional, maks. 2 MB)</span></label>
                            <input id="kop-logo" type="file" name="logo" accept="image/jpeg,image/png,image/webp" class="sp-form-control block w-full">
                            <p class="mt-1 text-[11px] text-slate-500">Format JPG, PNG, atau WEBP. Logo tambahan tidak menggantikan logo lembaga.</p>
                            @error('logo')<p class="mt-1 text-xs text-rose-700">{{ $message }}</p>@enderror
                            @if ($letterhead?->logo)
                                <label class="mt-2 inline-flex items-center gap-2 text-xs text-slate-600">
                                    <input type="checkbox" name="hapus_logo" value="1" @checked(old('hapus_logo')) class="size-4 rounded border-slate-300 text-blue-600">
                                    Hapus logo tambahan yang tersimpan
                                </label>
                            @endif
                            @error('logo_position')<p class="mt-1 text-xs text-rose-700">{{ $message }}</p>@enderror
                        </div>
                    </div>
                </fieldset>

                <fieldset class="letterhead-layout-fields letterhead-rows-fieldset">
                    <div class="flex flex-wrap items-center justify-between gap-2">
                        <div>
                            <legend class="sp-form-label">Baris kop surat</legend>
                            <p class="text-xs text-slate-500">Format default dimulai dengan empat baris PKBM. Anda bebas menambah, menghapus, mengatur ukuran huruf, dan menebalkan baris.</p>
                        </div>
                        <button id="add-letterhead-row" type="button" class="sp-btn-secondary">
                            <i class="bi bi-plus-lg" aria-hidden="true"></i>Tambah baris
                        </button>
                    </div>
                    @error('rows')<p class="mt-2 text-xs text-rose-700">{{ $message }}</p>@enderror
                    <div id="letterhead-rows" class="letterhead-rows-grid mt-3">
                        @foreach ($formRows as $index => $row)
                            <div class="letterhead-row">
                                <label for="letterhead-row-{{ $index }}" class="sp-form-label">Baris {{ $loop->iteration }}</label>
                                <textarea id="letterhead-row-{{ $index }}" name="rows[{{ $index }}][text]" rows="2" maxlength="300" required class="sp-form-control letterhead-row__text">{{ $row['text'] ?? '' }}</textarea>
                                <div class="letterhead-row__controls">
                                    <label for="letterhead-font-{{ $index }}" class="sp-form-label">Ukuran font (px)</label>
                                    <input id="letterhead-font-{{ $index }}" name="rows[{{ $index }}][font_size]" type="number" min="8" max="36" value="{{ $row['font_size'] ?? 10 }}" required class="sp-form-control letterhead-row__font">
                                    <label class="letterhead-row__bold">
                                        <input type="checkbox" name="rows[{{ $index }}][bold]" value="1" @checked((bool) ($row['bold'] ?? false)) class="size-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500">
                                        Tebal
                                    </label>
                                    <button type="button" class="settings-icon-action settings-icon-action--delete letterhead-row__remove" aria-label="Hapus baris {{ $loop->iteration }}" title="Hapus baris">
                                        <i class="bi bi-trash3" aria-hidden="true"></i>
                                    </button>
                                </div>
                                @error("rows.{$index}.text")<p class="text-xs text-rose-700">{{ $message }}</p>@enderror
                                @error("rows.{$index}.font_size")<p class="text-xs text-rose-700">{{ $message }}</p>@enderror
                            </div>
                        @endforeach
                        <fieldset class="letterhead-layout-fields letterhead-line-style">
                            <label for="line-style" class="sp-form-label">Model garis bawah kop</label>
                            <select id="line-style" name="line_style" class="sp-form-control">
                                <option value="none" @selected(old('line_style', $letterhead->line_style ?? 'double') === 'none')>Tanpa garis</option>
                                <option value="single" @selected(old('line_style', $letterhead->line_style ?? 'double') === 'single')>Garis tunggal</option>
                                <option value="double" @selected(old('line_style', $letterhead->line_style ?? 'double') === 'double')>Garis ganda</option>
                                <option value="thick" @selected(old('line_style', $letterhead->line_style ?? 'double') === 'thick')>Garis tebal</option>
                            </select>
                            @error('line_style')<p class="mt-1 text-xs text-rose-700">{{ $message }}</p>@enderror
                        </fieldset>
                    </div>
                    <template id="letterhead-row-template">
                        <div class="letterhead-row">
                            <label class="sp-form-label"></label>
                            <textarea rows="2" maxlength="300" required class="sp-form-control letterhead-row__text"></textarea>
                            <div class="letterhead-row__controls">
                                <label class="sp-form-label">Ukuran font (px)</label>
                                <input type="number" min="8" max="36" value="10" required class="sp-form-control letterhead-row__font">
                                <label class="letterhead-row__bold">
                                    <input type="checkbox" value="1" class="size-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500">
                                    Tebal
                                </label>
                                <button type="button" class="settings-icon-action settings-icon-action--delete letterhead-row__remove" aria-label="Hapus baris" title="Hapus baris">
                                    <i class="bi bi-trash3" aria-hidden="true"></i>
                                </button>
                            </div>
                        </div>
                    </template>
                </fieldset>

                <div class="settings-form__actions flex flex-wrap gap-2">
                    <button type="submit" class="sp-btn-primary"><i class="bi bi-check2-circle" aria-hidden="true"></i>Simpan kop surat</button>
                </div>
                </div>
            </form>
        </section>
    </div>
</div>
@push('scripts')
    <script>
        const modeInputs = document.querySelectorAll('input[name="mode"]');
        const customFields = document.getElementById('custom-letterhead-fields');
        const customRequiredFields = ['nama_instansi', 'alamat'].map(id => document.getElementById(id));
        const rowsContainer = document.getElementById('letterhead-rows');
        const previewRows = document.getElementById('letterhead-preview-rows');
        const rowTemplate = document.getElementById('letterhead-row-template');
        const preview = document.getElementById('letterhead-preview');
        const lineStyleSelect = document.getElementById('line-style');
        const leftLogos = preview.querySelector('.letterhead-preview__logos--left');
        const rightLogos = preview.querySelector('.letterhead-preview__logos--right');
        const logoPositions = {
            institution: document.getElementById('institution-logo-position'),
            additional: document.getElementById('kop-logo-position'),
        };
        const logoSizes = document.querySelectorAll('[data-logo-size]');

        function updateLetterheadFields() {
            const isCustom = document.querySelector('input[name="mode"]:checked')?.value === 'custom';
            customFields.classList.toggle('hidden', !isCustom);
            customRequiredFields.forEach(field => field.required = isCustom);
        }

        function updatePreviewRows() {
            previewRows.replaceChildren();
            rowsContainer.querySelectorAll('.letterhead-row').forEach(row => {
                const text = row.querySelector('.letterhead-row__text').value;
                const fontSize = row.querySelector('.letterhead-row__font').value;
                if (!text.trim()) return;
                const line = document.createElement('p');
                line.textContent = text;
                line.style.fontSize = `${fontSize}px`;
                line.style.fontWeight = row.querySelector('.letterhead-row__bold input').checked ? '700' : '400';
                previewRows.append(line);
            });
        }

        function updatePreviewLogos() {
            preview.querySelectorAll('[data-logo-kind]').forEach(logo => {
                const position = logoPositions[logo.dataset.logoKind].value;
                (position === 'left' ? leftLogos : rightLogos).append(logo);
            });
        }

        function updatePreviewLogoSizes() {
            const columnSize = Math.max(76, ...Array.from(logoSizes, input => Number(input.value) || 0));
            preview.style.gridTemplateColumns = `minmax(2.5rem, ${columnSize}px) minmax(0, 1fr) minmax(2.5rem, ${columnSize}px)`;
            logoSizes.forEach(input => {
                const size = `${input.value}px`;
                preview.querySelectorAll(`[data-logo-kind="${input.dataset.logoSize}"]`).forEach(logo => {
                    logo.style.width = size;
                    logo.style.height = size;
                });
                const output = document.querySelector(`[data-logo-size-value="${input.dataset.logoSize}"]`);
                if (output) output.value = input.value;
            });
        }

        function refreshRows() {
            const rows = rowsContainer.querySelectorAll('.letterhead-row');
            rows.forEach((row, index) => {
                const label = row.querySelector('.sp-form-label');
                const textarea = row.querySelector('.letterhead-row__text');
                const fontSize = row.querySelector('.letterhead-row__font');
                const bold = row.querySelector('.letterhead-row__bold input');
                label.textContent = `Baris ${index + 1}`;
                label.htmlFor = `letterhead-row-${index}`;
                textarea.id = `letterhead-row-${index}`;
                textarea.name = `rows[${index}][text]`;
                fontSize.id = `letterhead-font-${index}`;
                fontSize.name = `rows[${index}][font_size]`;
                bold.id = `letterhead-bold-${index}`;
                bold.name = `rows[${index}][bold]`;
                row.querySelector('.letterhead-row__controls label').htmlFor = fontSize.id;
                row.querySelector('.letterhead-row__remove').setAttribute('aria-label', `Hapus baris ${index + 1}`);
            });
            const lineStyleField = rowsContainer.querySelector('.letterhead-line-style');
            lineStyleField.style.gridRow = rows.length >= 3 ? '2' : '';
            lineStyleField.style.gridColumn = rows.length >= 3 ? '2' : '';
            updatePreviewRows();
        }

        document.getElementById('add-letterhead-row').addEventListener('click', () => {
            const count = rowsContainer.querySelectorAll('.letterhead-row').length;
            if (count >= 12) return;
            const fragment = rowTemplate.content.cloneNode(true);
            const row = fragment.querySelector('.letterhead-row');
            row.querySelector('.letterhead-row__text').value = '';
            row.querySelector('.letterhead-row__font').value = '10';
            row.querySelector('.letterhead-row__bold input').checked = false;
            rowsContainer.append(fragment);
            refreshRows();
        });

        rowsContainer.addEventListener('click', event => {
            const removeButton = event.target.closest('.letterhead-row__remove');
            if (!removeButton) return;
            const rows = rowsContainer.querySelectorAll('.letterhead-row');
            if (rows.length <= 1) return;
            removeButton.closest('.letterhead-row').remove();
            refreshRows();
        });

        rowsContainer.addEventListener('input', updatePreviewRows);
        rowsContainer.addEventListener('change', updatePreviewRows);
        Object.values(logoPositions).forEach(select => select.addEventListener('change', updatePreviewLogos));
        logoSizes.forEach(input => input.addEventListener('input', updatePreviewLogoSizes));
        lineStyleSelect.addEventListener('change', () => {
            preview.className = `letterhead-preview letterhead-preview--${lineStyleSelect.value}`;
        });

        modeInputs.forEach(input => input.addEventListener('change', updateLetterheadFields));
        updateLetterheadFields();
        refreshRows();
        updatePreviewLogos();
        updatePreviewLogoSizes();
    </script>
@endpush
@endsection