@extends('adminlte::page')

@section('title', 'Buat Surat Keluar')
@section('plugins.Sweetalert2', true)

@section('content_header')
    <div class="d-flex justify-content-between align-items-center mb-3 mt-2">
        <div>
            <h1 class="text-dark font-weight-bold h3 mb-1">Buat Surat Baru</h1>
            <p class="text-muted mb-0 text-sm">Gunakan kecerdasan buatan (AI) untuk mempercepat penulisan draf surat resmi Anda.</p>
        </div>
        <a href="{{ route('eoffice.surat.index') }}" class="btn btn-light rounded-pill px-4 shadow-sm font-weight-bold transition-hover" style="color: #475569;">
            <i class="fas fa-arrow-left mr-2"></i> Kembali ke Arsip
        </a>
    </div>
@stop

@section('content')

{{-- ========================================================= --}}
{{-- 1. FORM UTAMA UNTUK SIMPAN DATA (POST)                    --}}
{{-- ========================================================= --}}
<form action="{{ route('eoffice.surat.store') }}" method="POST" id="form-surat">
    @csrf
    <div class="row pb-4">
        
        {{-- KOLOM KIRI: PARAMETER & DETAIL ACARA --}}
        <div class="col-md-4 mb-4">
            
            {{-- CARD 1: PARAMETER SURAT UTAMA --}}
            <div class="card border-0 shadow-sm" style="border-radius: 15px; background: #ffffff;">
                <div class="card-header bg-transparent border-bottom-0 pt-4 px-4">
                    <h5 class="font-weight-bold text-dark mb-0">
                        <i class="fas fa-sliders-h text-primary mr-2"></i> Parameter Surat
                    </h5>
                </div>
                <div class="card-body px-4 pb-4 pt-3">
                    
                    <div class="form-group mb-4">
                        <label class="small text-muted font-weight-bold text-uppercase mb-2">Klasifikasi & Template <span class="text-danger">*</span></label>
                        <select name="surat_template_id" id="template_id" class="form-control select2-custom" required>
                            <option value="">-- Pilih Jenis Surat --</option>
                            @foreach($templates as $t)
                                <option value="{{ $t->id }}" data-nama="{{ $t->category->nama_surat ?? '' }}">
                                    [{{ $t->category->kode_lembaga ?? 'UMUM' }}] - {{ $t->nama_template }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="form-group mb-4">
                        <label class="small text-muted font-weight-bold text-uppercase mb-2">Nomor Surat Otomatis</label>
                        <div class="input-group shadow-none" style="border-radius: 10px; overflow: hidden; background: #f8fafc; border: 1px solid #e2e8f0;">
                            <div class="input-group-prepend">
                                <span class="input-group-text bg-transparent border-0"><i class="fas fa-hashtag text-primary"></i></span>
                            </div>
                            <input type="text" name="no_surat" id="no_surat" class="form-control bg-transparent text-dark font-weight-bold border-0 pl-0" readonly required placeholder="Pilih jenis surat di atas..." style="letter-spacing: 0.5px;">
                        </div>
                    </div>

                    <div class="form-group mb-4">
                        <label class="small text-muted font-weight-bold text-uppercase mb-2">Tanggal Surat <span class="text-danger">*</span></label>
                        <input type="date" name="tgl_surat" id="tgl_surat" class="form-control custom-input" value="{{ date('Y-m-d') }}" required>
                    </div>

                    <div class="form-group mb-4">
                        <label class="small text-muted font-weight-bold text-uppercase mb-2">Tujuan (Kepada Yth) <span class="text-danger">*</span></label>
                        <input type="text" name="tujuan_surat" id="tujuan_surat" class="form-control custom-input" placeholder="Contoh: Orang Tua Siswa Kelas X" required>
                    </div>

                    <div class="form-group mb-4">
                        <label class="small text-muted font-weight-bold text-uppercase mb-2">Perihal <span class="text-danger">*</span></label>
                        <input type="text" name="perihal" id="perihal" class="form-control custom-input" placeholder="Contoh: Undangan Rapat Evaluasi" required>
                    </div>

                    <hr class="my-4" style="border-top: 2px dashed #e2e8f0;">

                    <div class="form-group mb-0">
                        <label class="small text-muted font-weight-bold text-uppercase mb-2">Pejabat Penandatangan (TTE) <span class="text-danger">*</span></label>
                        <select name="penandatangan_id" id="penandatangan_id" class="form-control select2-custom" required>
                            <option value="">-- Pilih Pejabat --</option>
                            @foreach($pejabat as $p)
                                <option value="{{ $p->id }}">
                                    {{ $p->name }} - {{ strtoupper(str_replace('_', ' ', $p->role instanceof \App\Enums\UserRole ? $p->role->value : ($p->role ?? '-'))) }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                </div>
            </div>

            {{-- CARD 2: DETAIL ACARA (SMART UNDANGAN) --}}
            <div class="card border-0 shadow-sm mt-4" style="border-radius: 15px; background: #ffffff;">
                <div class="card-header bg-transparent border-bottom-0 pt-4 px-4">
                    <h5 class="font-weight-bold text-dark mb-0">
                        <i class="far fa-calendar-check text-warning mr-2"></i> Detail Acara (Opsional)
                    </h5>
                    <p class="text-muted text-xs mt-1 mb-0">Isi jika surat ini adalah undangan / pemberitahuan kegiatan.</p>
                </div>
                <div class="card-body px-4 pb-4 pt-3">
                    <div class="form-group mb-3">
                        <label class="small text-muted font-weight-bold text-uppercase mb-2">Hari & Tanggal Acara</label>
                        <input type="date" name="tgl_acara" id="tgl_acara" class="form-control custom-input">
                    </div>

                    <div class="form-group mb-3">
                        <label class="small text-muted font-weight-bold text-uppercase mb-2">Waktu / Jam</label>
                        <input type="text" name="waktu_acara" id="waktu_acara" class="form-control custom-input" placeholder="Contoh: 09.00 WITA - Selesai">
                    </div>

                    <div class="form-group mb-3">
                        <label class="small text-muted font-weight-bold text-uppercase mb-2">Tempat / Lokasi</label>
                        <input type="text" name="tempat_acara" id="tempat_acara" class="form-control custom-input" placeholder="Contoh: Ruang Aula SMA Cendekia">
                    </div>

                    <div class="form-group mb-0">
                        <label class="small text-muted font-weight-bold text-uppercase mb-2">Catatan Tambahan</label>
                        <input type="text" name="catatan_acara" id="catatan_acara" class="form-control custom-input" placeholder="Contoh: Harap hadir tepat waktu">
                    </div>
                </div>
            </div>

        </div>

        {{-- KOLOM KANAN: EDITOR ISI SURAT --}}
        <div class="col-md-8 mb-4">
            <div class="card border-0 shadow-lg h-100 flex-column" style="border-radius: 15px; overflow: visible; display: flex;">
                
                <div class="card-header bg-white border-bottom-0 pt-4 px-4 d-flex justify-content-between align-items-center pb-3" style="border-bottom: 1px solid #f1f5f9 !important;">
                    <div>
                        <h5 class="font-weight-bold text-dark mb-0">
                            <i class="fas fa-file-alt text-primary mr-2"></i> Kanvas Surat
                        </h5>
                    </div>
                    
                    <div class="d-flex">
                        {{-- Tombol Pratinjau PDF --}}
                        <button type="button" id="btn-preview-live" class="btn btn-light rounded-pill shadow-sm px-4 font-weight-bold transition-hover mr-2" style="color: #dc3545;">
                            <i class="fas fa-file-pdf mr-2"></i> Pratinjau PDF
                        </button>

                        <button type="button" class="btn btn-primary rounded-pill shadow-sm px-4 font-weight-bold transition-hover ai-glow" data-toggle="modal" data-target="#aiModal">
                            <i class="fas fa-magic mr-2"></i> Generate AI
                        </button>
                    </div>
                </div>

                <div class="card-body p-0 flex-grow-1 bg-light">
                    <textarea id="summernote" name="isi_surat"></textarea>
                </div>

                <div class="card-footer bg-white p-4 border-top-0" style="box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.05); border-radius: 0 0 15px 15px;">
                    <button type="submit" class="btn btn-success btn-lg btn-block shadow rounded-pill font-weight-bold transition-hover" id="btn-submit" style="font-size: 1.1rem; letter-spacing: 0.5px;">
                        <i class="fas fa-paper-plane mr-2"></i> SIMPAN DRAF & AJUKAN TTE
                    </button>
                </div>

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

{{-- ========================================================= --}}
{{-- 2. FORM TERSEMBUNYI UNTUK PREVIEW (MURNI POST)            --}}
{{-- ========================================================= --}}
<form id="form-preview-hidden" action="{{ route('eoffice.surat.preview-live') }}" method="POST" target="_blank" style="display: none;">
    @csrf
    <input type="hidden" name="template_id" id="preview_template_id">
    <input type="hidden" name="no_surat" id="preview_no_surat">
    <input type="hidden" name="tgl_surat" id="preview_tgl_surat">
    <input type="hidden" name="tujuan_surat" id="preview_tujuan_surat">
    <input type="hidden" name="perihal" id="preview_perihal">
    <input type="hidden" name="penandatangan_id" id="preview_penandatangan_id">
    <textarea name="isi_surat" id="preview_isi_surat"></textarea>
    
    <input type="hidden" name="tgl_acara" id="preview_tgl_acara">
    <input type="hidden" name="waktu_acara" id="preview_waktu_acara">
    <input type="hidden" name="tempat_acara" id="preview_tempat_acara">
    <input type="hidden" name="catatan_acara" id="preview_catatan_acara">
</form>

{{-- ========================================================= --}}
{{-- 3. MODAL AI WIZARD                                        --}}
{{-- ========================================================= --}}
<div class="modal fade" id="aiModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-xl" style="border-radius: 20px; overflow: hidden;">
            <div class="modal-header border-0 p-4" style="background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);">
                <h5 class="modal-title font-weight-bold text-white"><i class="fas fa-robot mr-2"></i> AI Prompt Wizard</h5>
                <button type="button" class="close text-white" data-dismiss="modal" style="opacity: 0.8;"><span>&times;</span></button>
            </div>
            <div class="modal-body p-4 bg-white">
                <div class="alert alert-info border-0 shadow-sm text-sm" style="border-radius: 10px; background-color: #eff6ff; color: #1e3a8a;">
                    <i class="fas fa-info-circle mr-1"></i> AI akan membaca <b>Klasifikasi</b> dan <b>Tujuan Surat</b> Anda untuk merangkai kalimat yang formal dan sopan.
                </div>
                <div class="form-group mb-0 mt-3">
                    <label class="font-weight-bold text-dark">Konteks / Detail Acara <span class="text-danger">*</span></label>
                    <textarea id="ai_konteks" class="form-control custom-input" rows="4" placeholder="Ceritakan detailnya secara singkat. Contoh: Mengundang untuk rapat evaluasi belajar semester ganjil pada hari Senin, 15 Juli jam 09.00 di Aula Sekolah."></textarea>
                </div>
            </div>
            <div class="modal-footer bg-light border-0 p-3">
                <button type="button" class="btn btn-secondary rounded-pill px-4" data-dismiss="modal">Batal</button>
                <button type="button" id="btn-generate-ai" class="btn btn-primary rounded-pill px-4 shadow font-weight-bold transition-hover">
                    <i class="fas fa-bolt mr-2"></i> Generate Teks
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('css')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
    <style>
        .custom-input { background-color: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 15px; color: #1e293b; transition: all 0.2s; }
        .custom-input:focus { background-color: #ffffff; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); }
        .select2-container--default .select2-selection--single { background-color: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; height: calc(2.5rem + 2px); padding: 5px 10px; display: flex; align-items: center; }
        .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; top: 0; right: 10px; }
        .select2-container--default.select2-container--focus .select2-selection--single { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); }
        
        /* STANDARISASI SUMMERNOTE */
        .note-editor.note-frame { border: none !important; overflow: visible !important; }
        .note-toolbar { background-color: #ffffff !important; border-bottom: 1px solid #f1f5f9 !important; padding: 10px 15px !important; position: relative; z-index: 50 !important; }
        .note-editor .dropdown-menu { z-index: 9999 !important; }
        
        .note-editable { 
            min-height: 480px; 
            padding: 40px 50px !important; 
            background: #ffffff; 
        }
        
        /* MEMAKSA FONT STANDAR TIMES NEW ROMAN 12pt DI KANVAS */
        .note-editor .note-editable p, 
        .note-editor .note-editable li, 
        .note-editor .note-editable table, 
        .note-editor .note-editable td,
        .note-editor .note-editable span { 
            font-family: 'Times New Roman', Times, serif !important; 
            font-size: 12pt !important; 
            line-height: 1.5; 
            color: #000; 
            text-align: justify;
        }

        .transition-hover { transition: all 0.3s ease; }
        .transition-hover:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important; }
        .ai-glow { animation: pulse-blue 2s infinite; }
        @keyframes pulse-blue { 0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); } 70% { box-shadow: 0 0 0 6px rgba(59, 130, 246, 0); } 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); } }
    </style>
@endsection

@section('js')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>

    <script>
        // Menyuntikkan seluruh data template HTML dari database ke dalam Javascript
        const masterTemplates = @json($templates->keyBy('id'));

        $(document).ready(function() {
            $('.select2-custom').select2({ width: '100%' });
            
            $('#summernote').summernote({
                placeholder: 'Silakan pilih Klasifikasi & Template di samping kiri terlebih dahulu...',
                height: 480,
                fontNames: ['Times New Roman', 'Arial', 'Courier New', 'Helvetica'],
                fontNamesIgnoreCheck: ['Times New Roman'],
                toolbar: [
                    ['style', ['bold', 'italic', 'underline', 'clear']],
                    ['font', ['strikethrough', 'superscript', 'subscript']],
                    ['fontname', ['fontname']],
                    ['fontsize', ['fontsize']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['insert', ['table']],
                    ['view', ['fullscreen', 'codeview']]
                ]
            });
            
            // Memaksa dropdown menu langsung menunjukkan Times New Roman & 12pt
            $('#summernote').summernote('fontName', 'Times New Roman');
            $('#summernote').summernote('fontSize', 12);

            @if($errors->any())
                Swal.fire({ icon: 'error', title: 'Perhatian!', html: '{!! implode("<br>", $errors->all()) !!}' });
            @endif

            // KETIKA TEMPLATE DIPILIH: TAMPILKAN KE KANVAS & AMBIL NOMOR SURAT
            $('#template_id').on('change', function() {
    let id = $(this).val();
    let tglSurat = $('#tgl_surat').val();
    
    if(id && masterTemplates[id]) {
        // 1. Ambil konten HTML dari Master Template
        let templateHtml = masterTemplates[id].kandungan_html;
        
        if(templateHtml) {
            // 2. Suntikkan ke Summernote (Menghilangkan placeholder)
            $('#summernote').summernote('code', templateHtml);
            
            // 3. Ambil nomor surat otomatis
            $.get('{{ route("api.surat.autonumber") }}', { template_id: id, tgl_surat: tglSurat })
                .done(function(res) { 
                    $('#no_surat').val(res.no_surat); 
                });

            Swal.fire({ icon: 'success', title: 'Template Dimuat', toast: true, position: 'top-end', timer: 2000, showConfirmButton: false });
        }
    }
});

            // Update Auto Number saat ganti tanggal
            $('#tgl_surat').change(function() {
                let templateId = $('#template_id').val();
                let tglSurat = $(this).val();
                if(templateId) {
                    $('#no_surat').val('Sedang memproses...');
                    $.get('{{ route("api.surat.autonumber") }}', { template_id: templateId, tgl_surat: tglSurat })
                    .done(function(data) { $('#no_surat').val(data.no_surat); });
                }
            });

            // AI GENERATOR WIZARD
            $('#btn-generate-ai').click(function() {
                let namaSurat = $('#template_id option:selected').data('nama');
                let tujuan = $('#tujuan_surat').val();
                let konteks = $('#ai_konteks').val();

                if(!namaSurat || !tujuan || !konteks) {
                    Swal.fire({ icon: 'warning', title: 'Data Belum Lengkap', text: 'Pastikan Anda sudah memilih Jenis Surat, mengisi Tujuan, dan Konteks surat di form ini!' });
                    return;
                }

                Swal.fire({ title: 'AI Sedang Mengetik...', allowOutsideClick: false, didOpen: () => { Swal.showLoading(); } });

                $.post('{{ route("api.surat.generate-ai") }}', {
                    _token: '{{ csrf_token() }}', nama_surat: namaSurat, tujuan: tujuan, konteks: konteks
                })
                .done(function(res) {
                    Swal.close();
                    if(res.success) {
                        $('#perihal').val(res.data.perihal);
                        
                        let aiHtml = res.data.isi_surat;
                        let currentEditorHtml = $('#summernote').summernote('code');
                        
                        // Sistem Cerdas: Cari tag [ISI_SURAT] di kanvas, lalu ganti dengan teks dari AI
                        if (currentEditorHtml.includes('[ISI_SURAT]')) {
                            let updatedHtml = currentEditorHtml.replace('[ISI_SURAT]', aiHtml);
                            $('#summernote').summernote('code', updatedHtml);
                        } else {
                            // Jika tag tidak ketemu, paksa taruh teks AI di paling bawah surat (sebelum TTD)
                            $('#summernote').summernote('code', currentEditorHtml + '<br><br>' + aiHtml);
                        }

                        $('#aiModal').modal('hide');
                        Swal.fire({ icon: 'success', title: 'Berhasil!', text: 'Teks AI berhasil dimasukkan ke dalam kerangka template.', toast: true, position: 'top-end', timer: 3000, showConfirmButton: false });
                    } else {
                        Swal.fire('Gagal', 'Sistem AI mengalami gangguan.', 'error');
                    }
                }).fail(function() { Swal.fire('Error', 'Tidak dapat terhubung ke server AI.', 'error'); });
            });

            // LIVE PREVIEW PDF (MENGGUNAKAN FORM TERPISAH)
            $('#btn-preview-live').click(function(e) {
                e.preventDefault(); 

                let templateId = $('#template_id').val();
                if(!templateId) {
                    Swal.fire({ icon: 'warning', title: 'Pilih Template', text: 'Pilih Klasifikasi terlebih dahulu untuk melihat pratinjau.' });
                    return;
                }

                // Ambil data dari form utama ke hidden form
                $('#preview_template_id').val(templateId); 
                $('#preview_no_surat').val($('#no_surat').val());
                $('#preview_tgl_surat').val($('#tgl_surat').val());
                $('#preview_tujuan_surat').val($('#tujuan_surat').val());
                $('#preview_perihal').val($('#perihal').val());
                $('#preview_penandatangan_id').val($('#penandatangan_id').val());
                
                // MENGIRIM SELURUH KANVAS (TERMASUK LAYOUT TEMPLATE)
                $('#preview_isi_surat').val($('#summernote').val()); 
                
                $('#preview_tgl_acara').val($('#tgl_acara').val());
                $('#preview_waktu_acara').val($('#waktu_acara').val());
                $('#preview_tempat_acara').val($('#tempat_acara').val());
                $('#preview_catatan_acara').val($('#catatan_acara').val());

                // Submit form tersembunyi ke tab baru
                $('#form-preview-hidden').submit();
            });

            // LOADING STATE SAAT MENYIMPAN
            $('#form-surat').submit(function() {
                $('#btn-submit').html('<i class="fas fa-circle-notch fa-spin mr-2"></i> MENYIMPAN...').prop('disabled', true);
            });
        });
    </script>
@endsection