@extends('layouts.app')

@section('subtitle', 'Edit Template Surat')

@section('content_body')
    <!-- Header & Breadcrumbs -->
    <x-page-header 
        title="Edit Template Surat" 
        subtitle="Ubah judul surat, isi template, dan status keaktifan template."
        :breadcrumbs="[
            'Dashboard' => route('dashboard'),
            'Master Surat' => route('master-surat.index'),
            'Edit Template' => route('master-surat.edit', $template->id)
        ]"
    >
        <x-slot name="buttons">
            <a href="{{ route('master-surat.show', $template->id) }}" class="btn btn-light border mr-2">
                <i class="fas fa-arrow-left mr-1"></i> Batal
            </a>
        </x-slot>
    </x-page-header>

    <div class="row">
        <!-- Kolom Utama: Form Edit -->
        <div class="col-lg-8 mb-4">
            <div class="card border-0 shadow-sm rounded-xl" style="border-radius: 12px; background: #ffffff;">
                <div class="card-body p-4">
                    <form id="editTemplateForm" action="{{ route('master-surat.update', $template->id) }}" method="POST">
                        @csrf
                        @method('PUT')

                        @php
                            $isUsed = \App\Models\PengajuanSurat::where('jenis_surat_id', $template->id)->exists();
                        @endphp
                        <div class="row">
                            <!-- Kode Surat -->
                            <div class="col-md-6 mb-3">
                                <label for="kode_surat" class="font-weight-bold text-secondary text-sm">Kode Surat <span class="text-danger">*</span></label>
                                @if($isUsed)
                                    <input type="text" id="kode_surat_disabled" class="form-control" value="{{ $template->kode_surat }}" disabled style="border-radius: 8px; background-color: #f8fafc; border-color: #e2e8f0;">
                                    <input type="hidden" name="kode_surat" value="{{ $template->kode_surat }}">
                                    <small class="text-xs text-muted">Kode surat tidak dapat diubah karena sudah digunakan dalam pengajuan.</small>
                                @else
                                    <input type="text" name="kode_surat" id="kode_surat" class="form-control @error('kode_surat') is-invalid @enderror" value="{{ old('kode_surat', $template->kode_surat) }}" required style="border-radius: 8px;">
                                    @error('kode_surat')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="text-xs text-muted">Kode surat bersifat unik (misal: SKU, SKD, SKP).</small>
                                @endif
                            </div>

                            <!-- Nama Surat -->
                            <div class="col-md-6 mb-3">
                                <label for="nama_surat" class="font-weight-bold text-secondary text-sm">Nama Surat <span class="text-danger">*</span></label>
                                <input type="text" name="nama_surat" id="nama_surat" class="form-control @error('nama_surat') is-invalid @enderror" value="{{ old('nama_surat', $template->nama_surat) }}" required style="border-radius: 8px;">
                                @error('nama_surat')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="text-xs text-muted">Nama dari jenis surat kependudukan.</small>
                            </div>
                        </div>

                        <!-- Judul Surat (Editable) -->
                        <div class="mb-3">
                            <label for="judul_surat" class="font-weight-bold text-secondary text-sm">Judul Surat <span class="text-danger">*</span></label>
                            <input type="text" name="judul_surat" id="judul_surat" class="form-control @error('judul_surat') is-invalid @enderror" value="{{ old('judul_surat', $template->judul_surat) }}" placeholder="Contoh: SURAT KETERANGAN DOMISILI" required style="border-radius: 8px;">
                            @error('judul_surat')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="text-xs text-muted">Judul resmi yang akan dicetak di bagian atas surat.</small>
                        </div>

                        <!-- Deskripsi (Editable) -->
                        <div class="mb-3">
                            <label for="deskripsi" class="font-weight-bold text-secondary text-sm">Deskripsi (Opsional)</label>
                            <textarea name="deskripsi" id="deskripsi" rows="3" class="form-control @error('deskripsi') is-invalid @enderror" placeholder="Keterangan opsional mengenai fungsi jenis surat ini..." style="border-radius: 8px;">{{ old('deskripsi', $template->deskripsi) }}</textarea>
                            @error('deskripsi')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Status (Editable) -->
                        <div class="mb-4">
                            <label for="status" class="font-weight-bold text-secondary text-sm">Status <span class="text-danger">*</span></label>
                            <select name="status" id="status" class="form-control @error('status') is-invalid @enderror" required style="border-radius: 8px; width: 100%;">
                                <option value="aktif" {{ old('status', $template->status) === 'aktif' ? 'selected' : '' }}>Aktif (Tersedia untuk pengajuan warga)</option>
                                <option value="nonaktif" {{ old('status', $template->status) === 'nonaktif' ? 'selected' : '' }}>Nonaktif (Dinonaktifkan sementara)</option>
                            </select>
                            @error('status')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Isi Template (Editable) -->
                        <div class="mb-4">
                            <label for="isi_template" class="font-weight-bold text-secondary text-sm">Isi Template Surat <span class="text-danger">*</span></label>
                            <textarea name="isi_template" id="isi_template" rows="15" class="form-control @error('isi_template') is-invalid @enderror" style="border-radius: 8px;">{{ old('isi_template', $template->isi_template) }}</textarea>
                            @error('isi_template')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                            <small class="text-xs text-muted d-block mt-2">Gunakan editor kaya fitur di atas untuk memodifikasi format surat. Pastikan minimal ada satu placeholder wajib di bawah ini.</small>
                        </div>

                        <!-- Action Buttons -->
                        <div class="text-right">
                            <a href="{{ route('master-surat.show', $template->id) }}" class="btn btn-light border mr-2">Batal</a>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save mr-1"></i> Simpan Perubahan
                            </button>
                        </div>

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

        <!-- Kolom Kanan: Panduan Placeholder -->
        <div class="col-lg-4 mb-4">
            <div class="card border-0 shadow-sm rounded-xl mb-4" style="border-radius: 12px; background: #ffffff;">
                <div class="card-header bg-transparent border-0 pt-4 px-4 pb-0">
                    <h5 class="font-weight-bold text-dark mb-0"><i class="fas fa-tags text-warning mr-2"></i> Panduan Placeholder</h5>
                </div>
                <div class="card-body px-4 pb-4">
                    <div class="alert alert-info text-xs border-0 p-3 mb-3" style="border-radius: 8px; background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0 !important;">
                        <i class="fas fa-info-circle mr-1 text-sm"></i> <strong>Klik nama placeholder</strong> di bawah ini untuk menyalin secara otomatis ke clipboard Anda.
                    </div>
                    
                    <!-- Accordion Grouped Placeholders -->
                    <div class="accordion" id="placeholderAccordion">
                        @foreach($groupedPlaceholders as $groupName => $items)
                            @php
                                $collapseId = 'collapse' . Str::slug($groupName);
                                $headerId = 'heading' . Str::slug($groupName);
                            @endphp
                            <div class="card border mb-2" style="border-radius: 8px; overflow: hidden; border-color: #e2e8f0 !important;">
                                <div class="card-header bg-light p-0" id="{{ $headerId }}">
                                    <button class="btn btn-link btn-block text-left font-weight-bold text-dark p-3 d-flex justify-content-between align-items-center" 
                                            type="button" 
                                            data-toggle="collapse" 
                                            data-target="#{{ $collapseId }}" 
                                            aria-expanded="{{ $loop->first ? 'true' : 'false' }}" 
                                            aria-controls="{{ $collapseId }}"
                                            style="text-decoration: none; font-size: 0.85rem; color: #334155 !important;">
                                        <span><i class="fas fa-folder text-primary mr-2"></i> {{ $groupName }}</span>
                                        <span class="badge badge-secondary text-xs font-weight-normal mr-2" style="background-color: #64748b !important; color: #ffffff !important; border-radius: 4px;">{{ count($items) }} Placeholder</span>
                                    </button>
                                </div>

                                <div id="{{ $collapseId }}" class="collapse {{ $loop->first ? 'show' : '' }}" aria-labelledby="{{ $headerId }}" data-parent="#placeholderAccordion">
                                    <div class="card-body p-3" style="max-height: 350px; overflow-y: auto; background: #fafafa;">
                                        <ul class="list-unstyled mb-0" style="gap: 12px; display: flex; flex-direction: column;">
                                            @foreach($items as $key => $meta)
                                                <li class="border-bottom pb-2" style="border-color: #f1f5f9 !important;">
                                                    <div class="d-flex align-items-center justify-content-between mb-1">
                                                        <code class="font-weight-bold text-xs p-1" 
                                                              style="color: var(--primary-color); cursor: pointer; background-color: #f1f5f9; border-radius: 4px; display: inline-block; font-size: 0.8rem;" 
                                                              onclick="copyPlaceholder('{{ $key }}')"
                                                              title="Klik untuk menyalin">
                                                            {{  }}                                                        </code>
                                                        <span class="text-primary font-weight-bold" style="cursor: pointer; font-size: 0.95rem;" onclick="copyPlaceholder('{{ $key }}')" title="Salin Placeholder">
                                                            📋
                                                        </span>
                                                    </div>
                                                    <div class="text-secondary text-xs font-weight-normal mb-1">{{ $meta['desc'] }}</div>
                                                    <div class="text-muted" style="font-size: 0.7rem; font-weight: 500;">
                                                        Asal Data: <span class="text-secondary">{{ $meta['source'] }}</span>
                                                    </div>
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

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

@push('js')
    <!-- Load TinyMCE 6 CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/6.8.2/tinymce.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $(function() {
            // Initialize TinyMCE Editor
            tinymce.init({
                selector: '#isi_template',
                height: 500,
                plugins: 'advlist autolink lists link image charmap preview anchor searchreplace visualblocks code fullscreen insertdatetime media table',
                toolbar: 'undo redo | blocks | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | code',
                promotion: false,
                branding: false,
                allowed_content: true,
                valid_elements: '*[*]'
            });

            // SweetAlert2 Form Submit Confirmation
            $('#editTemplateForm').on('submit', function(e) {
                e.preventDefault();
                let form = this;
                
                // Trigger TinyMCE save to update original textarea value
                tinymce.triggerSave();

                Swal.fire({
                    title: 'Konfirmasi Perubahan',
                    text: 'Apakah Anda yakin ingin menyimpan perubahan template surat ini? Perubahan akan langsung digunakan pada surat baru yang diterbitkan.',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: 'var(--primary-color, #2563eb)',
                    cancelButtonColor: '#64748b',
                    confirmButtonText: 'Ya, Simpan!',
                    cancelButtonText: 'Batal',
                    customClass: {
                        confirmButton: 'btn btn-primary px-4 py-2 font-weight-bold',
                        cancelButton: 'btn btn-secondary px-4 py-2 font-weight-bold'
                    },
                    buttonsStyling: true
                }).then((result) => {
                    if (result.isConfirmed) {
                        form.submit();
                    }
                });
            });
        });

        // Copy placeholder helper and notify with SweetAlert2 Toast
        function copyPlaceholder(text) {
            const formatted = '{' + '{ ' + text + ' }' + '}';
            navigator.clipboard.writeText(formatted).then(function() {
                const Toast = Swal.mixin({
                    toast: true,
                    position: 'top-end',
                    showConfirmButton: false,
                    timer: 2000,
                    timerProgressBar: true,
                    didOpen: (toast) => {
                        toast.addEventListener('mouseenter', Swal.stopTimer)
                        toast.addEventListener('mouseleave', Swal.resumeTimer)
                    }
                });

                Toast.fire({
                    icon: 'success',
                    title: 'Placeholder berhasil disalin.'
                });
            });
        }
    </script>
@endpush