@extends('layouts.main')

@section('breadcrumbs')
    {{ Breadcrumbs::render('memo.create') }}
@endsection

@section('content')
    <div class="grid gap-5 mx-auto w-full lg:gap-7.5">
        <!-- Preview Memo Penyelesaian -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    Preview Memo Penyelesaian
                </h3>
                <div class="flex gap-2 items-center">
                    <button onclick="history.back()" class="btn btn-sm btn-light">
                        <i class="ki-filled ki-black-left"></i>
                        Kembali
                    </button>
                </div>
            </div>

            <div class="card-body">
                @if (session('error'))
                    <div class="alert alert-danger">
                        {{ session('error') }}
                    </div>
                @endif

                <!-- Template Memo -->
                <div class="p-8 mx-auto bg-white" style="max-width: 800px; font-family: 'Times New Roman', serif;">
                    <!-- Header Bank -->
                    <div class="flex items-center mb-6">
                        <div class="mr-4">
                            <div class="flex justify-center items-center w-16 h-16 bg-blue-600 rounded">
                                <span class="text-lg font-bold text-white">AGI</span>
                            </div>
                        </div>
                        <div>
                            <h2 class="text-lg font-bold text-blue-600">BANK</h2>
                            <h2 class="text-lg font-bold text-blue-600">ARTHA GRAHA</h2>
                            <h2 class="text-lg font-bold text-blue-600">INTERNASIONAL</h2>
                        </div>
                    </div>

                    <!-- Judul Memo -->
                    <div class="mb-6">
                        <h3 class="text-lg font-bold">Memo Instruksi Penyelesaian</h3>
                        <h4 class="text-base font-semibold">Rekening Escrow / KSL Penilai Jaminan</h4>
                    </div>

                    <!-- Informasi Memo -->
                    <div class="mb-6 space-y-2">
                        <div class="flex">
                            <span class="w-20 font-medium">Kepada</span>
                            <span class="mr-2">:</span>
                            <span>SUBDIT E-Channel Support & Operation (NOC)</span>
                        </div>
                        <div class="flex">
                            <span class="w-20 font-medium">Dari</span>
                            <span class="mr-2">:</span>
                            <span>SUBDIT Appraisal</span>
                        </div>
                        <div class="flex">
                            <span class="w-20 font-medium">Nomor</span>
                            <span class="mr-2">:</span>
                            <span>{{ $memoData['memo_number'] }}</span>
                        </div>
                        <div class="flex">
                            <span class="w-20 font-medium">Tanggal</span>
                            <span class="mr-2">:</span>
                            <span>{{ \Carbon\Carbon::parse($memoData['memo_date'])->format('d F Y') }}</span>
                        </div>
                        <div class="flex">
                            <span class="w-20 font-medium">Perihal</span>
                            <span class="mr-2">:</span>
                            <span>Penyelesaian Rekening Escrow / <strong>KSL Penilai Jaminan (PJ)</strong></span>
                        </div>
                    </div>

                    <hr class="mb-6 border-black">

                    <!-- Isi Memo -->
                    <div class="mb-6 space-y-4">
                        <p>Sehubungan dengan telah dilakukannya penilaian jaminan dengan keterangan sbb :</p>

                        <div class="space-y-2">
                            <div class="flex">
                                <span class="w-32 font-medium">Nama Debitur</span>
                                <span class="mr-2">:</span>
                                <span>Terlampir ({{ $memoData['debitur_count'] }} Debitur)</span>
                            </div>
                            <div class="flex">
                                <span class="w-32 font-medium">Jaminan</span>
                                <span class="mr-2">:</span>
                                <span>{{ $memoData['jaminan_info'] }}</span>
                            </div>
                            <div class="flex">
                                <span class="w-32 font-medium">Total Biaya PJ</span>
                                <span class="mr-2">:</span>
                                <span><strong>Rp
                                        {{ number_format($memoData['total_biaya_pj'], 0, ',', '.') }},-</strong></span>
                            </div>
                            <div class="ml-32">
                                <span class="text-sm">({{ terbilang($memoData['total_biaya_pj']) }} Rupiah)</span>
                            </div>
                            <div class="flex">
                                <span class="w-32 font-medium">Pembayaran Tanggal</span>
                                <span class="mr-2">:</span>
                                <span>{{ \Carbon\Carbon::parse($memoData['payment_date'])->format('d F Y') }}</span>
                            </div>
                            <div class="flex">
                                <span class="w-32 font-medium">LPJ selesai dikirim</span>
                                <span class="mr-2">:</span>
                                <span>-</span>
                            </div>
                            <div class="flex">
                                <span class="w-32 font-medium">Jenis Penilaian</span>
                                <span class="mr-2">:</span>
                                <span><strong>KJPP</strong></span>
                            </div>
                        </div>

                        <p class="mt-4">
                            Kami menginstruksikan kepada Sentra Operasi untuk menyelesaikan Rekening Escrow /
                            <strong>KSL Penilai Jaminan</strong> atas nama debitur tersebut diatas ke <strong>KJPP
                                (terlampir)</strong>.
                        </p>

                        <p>Demikian kami sampaikan, atas perhatian dan kerjasamanya kami ucapkan terima kasih.</p>
                    </div>

                    <!-- Tanda Tangan -->
                    <div class="flex justify-between mt-12">
                        <div class="text-center">
                            <p class="mb-16">Salam</p>
                            <div class="mx-auto mb-2 w-32 border-b border-black"></div>
                            <p class="font-medium">Innawati Sulina</p>
                            <p class="text-sm">DD Operation 2</p>
                        </div>
                        <div class="text-center">
                            <p class="mb-16">&nbsp;</p>
                            <div class="mx-auto mb-2 w-32 border-b border-black"></div>
                            <p class="font-medium">Wahab N. Wibawa</p>
                            <p class="text-sm">Pgs EO Subdit Appraisal</p>
                        </div>
                        <div class="text-center">
                            <p class="mb-16">&nbsp;</p>
                            <div class="mx-auto mb-2 w-32 border-b border-black"></div>
                            <p class="font-medium">Sumurung P. Siahaan</p>
                            <p class="text-sm">&nbsp;</p>
                        </div>
                    </div>

                    <!-- Lampiran -->
                    <div class="mt-8">
                        <p class="mb-2 font-medium">Lampiran :</p>
                        <ul class="space-y-1 text-sm list-disc list-inside">
                            <li>Rekap permohonan penyelesaian biaya KJPP (Eksternal)</li>
                            <li>Asli Invoice & Faktur Pajak KJPP (Eksternal)</li>
                            <li>Copy Tiket Debet (KSL)</li>
                        </ul>
                    </div>
                </div>

                <!-- Daftar Permohonan -->
                <div class="mt-8">
                    <h4 class="mb-4 text-lg font-semibold">Daftar Permohonan Terlampir</h4>
                    <div class="overflow-x-auto">
                        <table class="table table-border">
                            <thead>
                                <tr class="bg-gray-50">
                                    <th class="text-center">No</th>
                                    <th>Nomor Registrasi</th>
                                    <th>Debitur</th>
                                    <th>Cabang</th>
                                    <th>AO</th>
                                    <th>Tujuan Penilaian</th>
                                    <th class="text-right">Biaya PJ</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($permohonanList as $index => $permohonan)
                                    <tr>
                                        <td class="text-center">{{ $index + 1 }}</td>
                                        <td class="font-medium">{{ $permohonan->nomor_registrasi }}</td>
                                        <td>{{ $permohonan->debiture->name ?? '-' }}</td>
                                        <td>{{ $permohonan->branch->name ?? '-' }}</td>
                                        <td>{{ $permohonan->user->name ?? '-' }}</td>
                                        <td>
                                            @if ($permohonan->tujuanPenilaian)
                                                <span class="badge badge-sm badge-primary">
                                                    {{ $permohonan->tujuanPenilaian->name }}
                                                </span>
                                            @else
                                                -
                                            @endif
                                        </td>
                                        <td class="font-medium text-right">
                                            Rp {{ number_format($permohonan->noc->nominal_bayar ?? 0, 0, ',', '.') }}
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                            <tfoot>
                                <tr class="font-semibold bg-gray-50">
                                    <td colspan="6" class="text-right">Total Biaya PJ:</td>
                                    <td class="text-right">Rp {{ number_format($totalBiayaPJ, 0, ',', '.') }}</td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>

                <!-- Form untuk Generate PDF -->
                <form action="{{ route('memo.generate-pdf') }}" method="POST" id="generate-form">
                    @csrf
                    @foreach ($permohonanList as $permohonan)
                        <input type="hidden" name="permohonan_ids[]" value="{{ $permohonan->id }}">
                    @endforeach
                    <input type="hidden" name="memo_number" value="{{ $memoData['memo_number'] }}">
                    <input type="hidden" name="memo_date" value="{{ $memoData['memo_date'] }}">
                    <input type="hidden" name="payment_date" value="{{ $memoData['payment_date'] }}">

                    <div class="flex gap-2 justify-end mt-8">
                        <button type="button" onclick="history.back()" class="btn btn-light">
                            <i class="ki-filled ki-black-left"></i>
                            Kembali Edit
                        </button>
                        <button type="button" onclick="window.print()" class="btn btn-secondary">
                            <i class="ki-filled ki-printer"></i>
                            Print Preview
                        </button>
                        <button type="submit" class="btn btn-primary" id="generate-btn">
                            <i class="ki-filled ki-file-down"></i>
                            Generate PDF & Simpan
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const generateForm = document.getElementById('generate-form');
            const generateBtn = document.getElementById('generate-btn');

            /**
             * Event listener untuk form generate PDF
             */
            if (generateForm) {
                generateForm.addEventListener('submit', function(e) {
                    // Konfirmasi sebelum generate
                    const confirmed = confirm(
                        'Apakah Anda yakin ingin generate PDF dan menyimpan memo penyelesaian ini?'
                    );
                    if (!confirmed) {
                        e.preventDefault();
                        return false;
                    }

                    // Disable submit button untuk mencegah double submit
                    if (generateBtn) {
                        generateBtn.disabled = true;
                        generateBtn.innerHTML = '<i class="ki-filled ki-loading"></i> Memproses...';
                    }
                });
            }
        });

        // Print styles
        const printStyles = `
            <style>
                @media print {
                    body * {
                        visibility: hidden;
                    }
                    .card-body, .card-body * {
                        visibility: visible;
                    }
                    .card-body {
                        position: absolute;
                        left: 0;
                        top: 0;
                        width: 100%;
                    }
                    .btn, .card-header, .mt-8:last-child {
                        display: none !important;
                    }
                }
            </style>
        `;
        document.head.insertAdjacentHTML('beforeend', printStyles);
    </script>
@endpush