@extends('layouts.app')

@section('content')
    <x-common.page-breadcrumb pageTitle="{{ $title ?? 'Cetak Struk' }}" />

    @php
        $changeAmount = (float) ($order->change_amount ?? 0);

        /*
         * Kadang kembalian muncul Rp 1 karena pembulatan/perhitungan decimal.
         * Untuk kasus transaksi percetakan, selisih 0-1 rupiah dianggap 0.
         */
        if ($changeAmount <= 1) {
            $changeAmount = 0;
        }

        $invoicePrintRouteExists = \Illuminate\Support\Facades\Route::has('orders.invoice-print');
        $printNotaRouteExists = \Illuminate\Support\Facades\Route::has('print.nota');
        $printFakturRouteExists = \Illuminate\Support\Facades\Route::has('print.faktur');
    @endphp

    @if(session('success'))
        <div class="mb-4 rounded-lg bg-success-50 p-4 text-sm text-success-700 dark:bg-success-500/15 dark:text-success-500">
            {{ session('success') }}
        </div>
    @endif

    @if(session('error'))
        <div class="mb-4 rounded-lg bg-red-50 p-4 text-sm text-red-700 dark:bg-red-500/15 dark:text-red-400">
            {{ session('error') }}
        </div>
    @endif

    <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
        <div class="border-b border-gray-200 px-5 py-4 dark:border-gray-800">
            <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                <div>
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">
                        Pembayaran Berhasil
                    </h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400">
                        Transaksi berhasil diproses. Silakan cetak nota sesuai ukuran yang dibutuhkan.
                    </p>
                </div>

                <span class="inline-flex w-fit rounded-full bg-success-50 px-3 py-1 text-sm font-medium text-success-700 dark:bg-success-500/15 dark:text-success-500">
                    LUNAS
                </span>
            </div>
        </div>

        <div class="p-5">
            <div class="mx-auto max-w-2xl">
                <div class="rounded-xl border border-gray-200 bg-gray-50 p-6 dark:border-gray-700 dark:bg-gray-800">
                    <dl class="space-y-3">
                        <div class="flex justify-between gap-4">
                            <dt class="text-sm text-gray-500 dark:text-gray-400">No. Invoice</dt>
                            <dd class="text-right text-sm font-semibold text-gray-800 dark:text-white/90">
                                {{ $order->invoice_number }}
                            </dd>
                        </div>

                        <div class="flex justify-between gap-4">
                            <dt class="text-sm text-gray-500 dark:text-gray-400">Pelanggan</dt>
                            <dd class="text-right text-sm font-medium text-gray-800 dark:text-white/90">
                                {{ $order->customer_name }}
                            </dd>
                        </div>

                        <div class="flex justify-between gap-4">
                            <dt class="text-sm text-gray-500 dark:text-gray-400">File</dt>
                            <dd class="text-right text-sm font-medium text-gray-800 dark:text-white/90">
                                {{ $order->file_name ?: '-' }}
                            </dd>
                        </div>

                        @if(($order->use_ppn ?? false) || (($order->ppn_amount ?? 0) > 0))
                            <hr class="border-gray-200 dark:border-gray-700">

                            <div class="flex justify-between gap-4">
                                <dt class="text-sm text-gray-500 dark:text-gray-400">Subtotal</dt>
                                <dd class="text-right text-sm font-semibold text-gray-800 dark:text-white/90">
                                    Rp {{ number_format($order->subtotal_before_ppn ?: (($order->total_price ?? 0) - ($order->ppn_amount ?? 0)), 0, ',', '.') }}
                                </dd>
                            </div>

                            <div class="flex justify-between gap-4">
                                <dt class="text-sm text-gray-500 dark:text-gray-400">
                                    PPN {{ rtrim(rtrim(number_format((float) ($order->ppn_rate ?? 0), 2, ',', '.'), '0'), ',') }}%
                                </dt>
                                <dd class="text-right text-sm font-semibold text-gray-800 dark:text-white/90">
                                    Rp {{ number_format($order->ppn_amount ?? 0, 0, ',', '.') }}
                                </dd>
                            </div>
                        @endif

                        <hr class="border-gray-200 dark:border-gray-700">

                        <div class="flex justify-between gap-4">
                            <dt class="text-sm text-gray-500 dark:text-gray-400">Total</dt>
                            <dd class="text-right text-sm font-bold text-gray-800 dark:text-white/90">
                                Rp {{ number_format($order->total_price, 0, ',', '.') }}
                            </dd>
                        </div>

                        <div class="flex justify-between gap-4">
                            <dt class="text-sm text-gray-500 dark:text-gray-400">Dibayar</dt>
                            <dd class="text-right text-sm text-gray-800 dark:text-white/90">
                                Rp {{ number_format($order->paid_amount, 0, ',', '.') }}
                            </dd>
                        </div>

                        <div class="flex justify-between gap-4">
                            <dt class="text-sm text-gray-500 dark:text-gray-400">Kembalian</dt>
                            <dd class="text-right text-sm font-bold text-success-600 dark:text-success-400">
                                Rp {{ number_format($changeAmount, 0, ',', '.') }}
                            </dd>
                        </div>

                        <hr class="border-gray-200 dark:border-gray-700">

                        <div class="flex justify-between gap-4">
                            <dt class="text-sm text-gray-500 dark:text-gray-400">Kasir</dt>
                            <dd class="text-right text-sm text-gray-800 dark:text-white/90">
                                {{ $order->cashier->name ?? '-' }}
                            </dd>
                        </div>

                        <div class="flex justify-between gap-4">
                            <dt class="text-sm text-gray-500 dark:text-gray-400">Waktu</dt>
                            <dd class="text-right text-sm text-gray-800 dark:text-white/90">
                                {{ optional($order->paid_at)->format('d M Y H:i') ?: now()->format('d M Y H:i') }}
                            </dd>
                        </div>
                    </dl>
                </div>

                <div class="mt-6 rounded-xl border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-800 dark:bg-gray-900">
                    <div class="mb-4">
                        <h4 class="text-base font-semibold text-gray-900 dark:text-white">
                            Cetak Nota / Invoice
                        </h4>
                        <p class="text-sm text-gray-500 dark:text-gray-400">
                            Pilih ukuran cetak sesuai kebutuhan pelanggan.
                        </p>
                    </div>

                    <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
                        @if($printNotaRouteExists)
                            <a href="{{ route('print.nota', $order) }}"
                               target="_blank"
                               style="display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:8px !important;background:#2563eb !important;color:#ffffff !important;border:1px solid #1d4ed8 !important;border-radius:10px !important;padding:12px 14px !important;font-size:14px !important;font-weight:800 !important;text-decoration:none !important;box-shadow:0 4px 10px rgba(37,99,235,.25) !important;">
                                <svg style="width:18px;height:18px;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" />
                                </svg>
                                Cetak POS 80mm
                            </a>
                        @endif

                        @if($invoicePrintRouteExists)
                            <a href="{{ route('orders.invoice-print', ['order' => $order, 'paper' => 'a4']) }}"
                               target="_blank"
                               style="display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:8px !important;background:#2563eb !important;color:#ffffff !important;border:1px solid #1d4ed8 !important;border-radius:10px !important;padding:12px 14px !important;font-size:14px !important;font-weight:800 !important;text-decoration:none !important;box-shadow:0 4px 10px rgba(37,99,235,.25) !important;">
                                Cetak A4
                            </a>

                            <a href="{{ route('orders.invoice-print', ['order' => $order, 'paper' => 'a5']) }}"
                               target="_blank"
                               style="display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:8px !important;background:#2563eb !important;color:#ffffff !important;border:1px solid #1d4ed8 !important;border-radius:10px !important;padding:12px 14px !important;font-size:14px !important;font-weight:800 !important;text-decoration:none !important;box-shadow:0 4px 10px rgba(37,99,235,.25) !important;">
                                Cetak A5
                            </a>

                            <a href="{{ route('orders.invoice-print', ['order' => $order, 'paper' => '215x165']) }}"
                               target="_blank"
                               style="display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:8px !important;background:#2563eb !important;color:#ffffff !important;border:1px solid #1d4ed8 !important;border-radius:10px !important;padding:12px 14px !important;font-size:14px !important;font-weight:800 !important;text-decoration:none !important;box-shadow:0 4px 10px rgba(37,99,235,.25) !important;">
                                Cetak 21,5 × 16,5
                            </a>
                        @else
                            @if($printFakturRouteExists)
                                <a href="{{ route('print.faktur', $order) }}"
                                   target="_blank"
                                   style="display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:8px !important;background:#2563eb !important;color:#ffffff !important;border:1px solid #1d4ed8 !important;border-radius:10px !important;padding:12px 14px !important;font-size:14px !important;font-weight:800 !important;text-decoration:none !important;box-shadow:0 4px 10px rgba(37,99,235,.25) !important;">
                                    Cetak Faktur A5
                                </a>
                            @endif
                        @endif
                    </div>
                </div>

                <div class="mt-6">
                    <a href="{{ route('kasir.index') }}"
                       class="flex w-full items-center justify-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700">
                        Kembali ke Tagihan
                    </a>
                </div>
            </div>
        </div>
    </div>
@endsection