@extends('layouts.main')

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

@section('content')
    <div class="w-full">
        <!-- Preview Memo Penyelesaian -->
        <div class="bg-white">
            <!-- Header Controls - Hidden saat print -->
            <div class="p-4 border-b bg-agi-50 no-print">
                <div class="flex justify-between items-center mx-auto">
                    <h3 class="text-lg font-semibold text-gray-800">
                        Preview Memo Penyelesaian
                    </h3>
                    <div class="flex gap-2">
                        <button onclick="history.back()" class="btn btn-sm btn-light">
                            <i class="ki-filled ki-black-left"></i>
                            Kembali Edit
                        </button>
                        <button type="button" onclick="window.print()" class="btn btn-sm btn-secondary">
                            <i class="ki-filled ki-printer"></i>
                            Print Preview
                        </button>
                    </div>
                </div>
            </div>

            @if (session('error'))
                <div class="m-4 no-print alert alert-danger">
                    {{ session('error') }}
                </div>
            @endif

            <!-- Halaman 1: Memo Utama -->
            <div class="p-5 w-full bg-white page-memo">
                <!-- Header Bank -->
                <div class="flex items-center mb-3">
                    <img class="default-logo min-h-[22px] max-w-none" style="height: 53.55px;"
                        src="assets/media/images/logo-arthagraha.png" />
                </div>

                <!-- Judul Memo -->
                <div class="mb-8 text-left">
                    <h4 class="text-base font-semibold" style="margin: 0;"><strong>Memo Instruksi Penyelesaian</strong>
                        Rekening Escrow / <strong>KSL Penilai Jaminan</strong></h4>
                </div>

                <!-- Informasi Memo -->
                <div class="mb-8">
                    <table style="width: 100%; border-collapse: collapse;">
                        <tr>
                            <td style="width: 80px; padding: 2px 0; vertical-align: top;">Kepada</td>
                            <td style="width: 10px; padding: 2px 0; vertical-align: top;">:</td>
                            <td style="padding: 2px 0; vertical-align: top;">SUBDIT E-Channel Support & Operation (NOC)</td>
                        </tr>
                        <tr>
                            <td style="padding: 2px 0; vertical-align: top;">Dari</td>
                            <td style="padding: 2px 0; vertical-align: top;">:</td>
                            <td style="padding: 2px 0; vertical-align: top;">SUBDIT Appraisal</td>
                        </tr>
                        <tr>
                            <td style="padding: 2px 0; vertical-align: top;">Nomor</td>
                            <td style="padding: 2px 0; vertical-align: top;">:</td>
                            <td style="padding: 2px 0; vertical-align: top;"><strong>{{ $memoData['memo_number'] }}</strong>
                            </td>
                        </tr>
                        <tr>
                            <td style="padding: 2px 0; vertical-align: top;">Tanggal</td>
                            <td style="padding: 2px 0; vertical-align: top;">:</td>
                            <td style="padding: 2px 0; vertical-align: top;">
                                {{ dateFormat($memoData['memo_date']) }}</td>
                        </tr>
                        <tr>
                            <td style="padding: 2px 0; vertical-align: top;">Perihal</td>
                            <td style="padding: 2px 0; vertical-align: top;">:</td>
                            <td style="padding: 2px 0; vertical-align: top;">Penyelesaian Rekening Escrow / <strong>KSL
                                    Penilai Jaminan (PJ)</strong></td>
                        </tr>
                    </table>
                </div>

                <hr style="border: none; border-top: 1px solid #000; margin: 20px 0;">

                <!-- Isi Memo -->
                <div class="mb-8">
                    <p style="margin-bottom: 16px; text-align: justify;">Sehubungan dengan telah dilakukannya penilaian
                        jaminan dengan keterangan sbb :</p>

                    <table style="width: 100%; border-collapse: collapse; margin-bottom: 16px;">
                        <tr>
                            <td style="width: 200px; padding: 2px 0; vertical-align: top;">Nama Debitur</td>
                            <td style="width: 10px; padding: 2px 0; vertical-align: top;">:</td>
                            <td style="padding: 2px 0; vertical-align: top;">Terlampir ({{ $memoData['debitur_count'] }}
                                Debitur)</td>
                        </tr>
                        <tr>
                            <td style="padding: 2px 0; vertical-align: top;">Jaminan</td>
                            <td style="padding: 2px 0; vertical-align: top;">:</td>
                            <td style="padding: 2px 0; vertical-align: top;">Tanah & Bangunan</td>
                        </tr>
                        <tr>
                            <td style="padding: 2px 0; vertical-align: top;">Total Biaya PJ</td>
                            <td style="padding: 2px 0; vertical-align: top;">:</td>
                            <td style="padding: 2px 0; vertical-align: top;"><strong>Rp
                                    {{ number_format($memoData['total_biaya_pj'], 0, ',', '.') }},-</strong></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td></td>
                            <td style="padding: 2px 0; vertical-align: top; font-size: 11pt;">
                                ({{ terbilang($memoData['total_biaya_pj']) }} Rupiah)</td>
                        </tr>
                        <tr>
                            <td style="padding: 2px 0; vertical-align: top;">Pembayaran Tanggal</td>
                            <td style="padding: 2px 0; vertical-align: top;">:</td>
                            <td style="padding: 2px 0; vertical-align: top;">
                                {{ \Carbon\Carbon::parse($memoData['payment_date'])->format('d F Y') }}</td>
                        </tr>
                        <tr>
                            <td style="padding: 2px 0; vertical-align: top;">LPJ selesai dikirim</td>
                            <td style="padding: 2px 0; vertical-align: top;">:</td>
                            <td style="padding: 2px 0; vertical-align: top;">-</td>
                        </tr>
                        <tr>
                            <td style="padding: 2px 0; vertical-align: top;">Jenis Penilaian</td>
                            <td style="padding: 2px 0; vertical-align: top;">:</td>
                            <td style="padding: 2px 0; vertical-align: top;">
                                <strong>
                                    @if ($memoData['jenisPenilaian'] == 2)
                                        KJPP
                                    @else
                                        Internal
                                    @endif
                                </strong>
                            </td>
                        </tr>
                    </table>

                    <p style="margin-bottom: 16px; text-align: justify;">
                        Kami menginstruksikan kepada Sentra Operasi untuk menyelesaikan Rekening Escrow /
                        <strong>KSL Penilai Jaminan</strong> atas nama debitur tersebut diatas ke

                        @if ($memoData['jenisPenilaian'] == 2)
                            <strong>KJPP (terlampir)</strong>.
                        @else
                            <strong>PDPT-Lainnya Penilaian Jaminan KPNO (IDR 57557)</strong>.
                        @endif
                    </p>

                    <p style="margin-bottom: 16px; text-align: justify;">Demikian kami sampaikan, atas perhatian dan
                        kerjasamanya kami ucapkan terima kasih.</p>
                </div>

                <!-- Tanda Tangan -->
                <div style="display: flex; justify-content: space-between; margin-top: 60px;">
                    <div style="text-align: center; width: 30%;">
                        <p style="margin-bottom: 80px;">Salam</p>
                        <div style="border-bottom: 1px solid #000; margin: 0 auto 8px; width: 120px;"></div>
                        <p style="font-weight: 500; margin: 0;">Innawati Sulina</p>
                        <p style="font-size: 11pt; margin: 0;">DD Operation 2</p>
                    </div>
                    <div style="text-align: center; width: 30%;">
                        <p style="margin-bottom: 80px;">&nbsp;</p>
                        <div style="border-bottom: 1px solid #000; margin: 0 auto 8px; width: 120px;"></div>
                        <p style="font-weight: 500; margin: 0;">Wahab N. Wibawa</p>
                        <p style="font-size: 11pt; margin: 0;">Pgs EO Subdit Appraisal</p>
                    </div>
                    <div style="text-align: center; width: 30%;">
                        <p style="margin-bottom: 80px;">&nbsp;</p>
                        <div style="border-bottom: 1px solid #000; margin: 0 auto 8px; width: 120px;"></div>
                        <p style="font-weight: 500; margin: 0;">Sumurung P. Siahaan</p>
                        <p style="font-size: 11pt; margin: 0;">&nbsp;</p>
                    </div>
                </div>

                <!-- Lampiran -->
                <div style="margin-top: 40px;">
                    <p style="font-weight: 500; margin-bottom: 8px;">Lampiran :</p>
                    <ul style="margin: 0; padding-left: 20px; font-size: 11pt;">
                        <li style="margin-bottom: 4px;">Rekap permohonan penyelesaian biaya KJPP (Eksternal)</li>
                        <li style="margin-bottom: 4px;">Asli Invoice & Faktur Pajak KJPP (Eksternal)</li>
                        <li style="margin-bottom: 4px;">Copy Tiket Debet (KSL)</li>
                    </ul>
                </div>
            </div>

            <!-- Halaman 2: Lampiran Daftar Permohonan -->
            <div class="p-5 w-full bg-white page-lampiran">
                <div style="text-align: center; margin-bottom: 30px;">
                    <h3 style="font-weight: bold; margin: 0; font-size: 14pt;">LAMPIRAN</h3>
                    <h4 style="font-weight: bold; margin: 8px 0 0 0; font-size: 13pt;">REKAP PERMOHONAN PENYELESAIAN BIAYA
                        KJPP</h4>
                    <p style="margin: 8px 0 0 0; font-size: 11pt;">Memo No: {{ $memoData['memo_number'] }}</p>
                </div>

                <div style="overflow-x: auto;">
                    <table style="width: 100%; border-collapse: collapse; font-size: 10pt;">
                        <thead>
                            <tr style="background-color: #f8f9fa;">
                                <th style="border: 1px solid #000; padding: 8px; text-align: center; font-weight: bold;">No
                                </th>
                                <th style="border: 1px solid #000; padding: 8px; text-align: left; font-weight: bold;">Nomor
                                    Registrasi</th>
                                <th style="border: 1px solid #000; padding: 8px; text-align: left; font-weight: bold;">
                                    Debitur</th>
                                <th style="border: 1px solid #000; padding: 8px; text-align: left; font-weight: bold;">
                                    Cabang</th>
                                <th style="border: 1px solid #000; padding: 8px; text-align: left; font-weight: bold;">AO
                                </th>
                                <th style="border: 1px solid #000; padding: 8px; text-align: left; font-weight: bold;">
                                    Tujuan Penilaian</th>
                                <th style="border: 1px solid #000; padding: 8px; text-align: right; font-weight: bold;">
                                    Biaya PJ</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($permohonanList as $index => $permohonan)
                                <tr>
                                    <td style="border: 1px solid #000; padding: 6px; text-align: center;">
                                        {{ $index + 1 }}</td>
                                    <td style="border: 1px solid #000; padding: 6px; font-weight: 500;">
                                        {{ $permohonan->nomor_registrasi }}</td>
                                    <td style="border: 1px solid #000; padding: 6px;">
                                        {{ $permohonan->debiture->name ?? '-' }}</td>
                                    <td style="border: 1px solid #000; padding: 6px;">
                                        {{ $permohonan->branch->name ?? '-' }}</td>
                                    <td style="border: 1px solid #000; padding: 6px;">{{ $permohonan->user->name ?? '-' }}
                                    </td>
                                    <td style="border: 1px solid #000; padding: 6px;">
                                        @if ($permohonan->tujuanPenilaian)
                                            {{ $permohonan->tujuanPenilaian->name }}
                                        @else
                                            -
                                        @endif
                                    </td>
                                    <td style="border: 1px solid #000; padding: 6px; text-align: right; font-weight: 500;">
                                        Rp {{ number_format($permohonan->noc->nominal_bayar ?? 0, 0, ',', '.') }}
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                        <tfoot>
                            <tr style="background-color: #f8f9fa; font-weight: bold;">
                                <td colspan="6"
                                    style="border: 1px solid #000; padding: 8px; text-align: right; font-weight: bold;">
                                    Total Biaya PJ:</td>
                                <td style="border: 1px solid #000; padding: 8px; text-align: right; font-weight: bold;">Rp
                                    {{ number_format($totalBiayaPJ, 0, ',', '.') }}</td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>

            <!-- Form untuk Generate PDF - Hidden saat print -->
            <div class="p-4 bg-gray-50 border-t no-print">
                <form action="{{ route('memo.generate-pdf') }}" method="POST" id="generate-form" class="mx-auto">
                    @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">
                        <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...';
                    }
                });
            }
        });
    </script>
@endpush

@push('styles')
    <style>
        /* Print Styles */
        @media print {
            * {
                -webkit-print-color-adjust: exact !important;
                color-adjust: exact !important;
            }

            body {
                margin: 0 !important;
                padding: 0 !important;
                background: white !important;
            }

            .no-print {
                display: none !important;
            }

            .page-memo,
            .page-lampiran {
                width: 210mm !important;
                min-height: 297mm !important;
                margin: 0 !important;
                padding: 20mm !important;
                page-break-after: always;
                box-shadow: none !important;
            }

            .page-lampiran {
                page-break-before: always !important;
            }

            /* Ensure table borders print correctly */
            table,
            th,
            td {
                border-collapse: collapse !important;
            }

            th,
            td {
                border: 1px solid #000 !important;
            }

            /* Ensure background colors print */
            .bg-gray-50,
            tr[style*="background-color: #f8f9fa"] {
                background-color: #f8f9fa !important;
            }
        }

        /* Screen Styles */
        @media screen {

            .page-memo,
            .page-lampiran {
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
                margin-bottom: 20px;
            }
        }
    </style>
@endpush