@extends('layouts.landing-page')
@section('content')
    <div class="container flex justify-center w-full" id="invoiceContainer">

        <div class="container flex justify-center w-full" style="margin-bottom: 100px;" id="printArea">
            <div class="bg-white/5 border border-white/10 rounded-xl p-6 w-full max-w-2xl text-white ">

                <div class=" relative">
                    <div class="absolute top-4 left-4">
                        <img src="{{asset('img/icon3.png')}}" alt="Logo" class="h-7 w-auto">
                    </div>

                </div>

                <!-- Judul -->
                <div class="text-center mb-6 mt-10">
                    <h1 class="text-2xl font-bold">Invoice Order</h1>
                    <p class="text-sm text-gray-300">#{{ $order->order_no }}</p>
                </div>

                <!-- Info Pembeli -->
                <div class="mb-3">
                    <div class="flex justify-between text-sm">
                        <div>Tanggal. {{ $order->created_at->format('d-m-Y H:i') }}</div>
                    </div>

                </div>
                <div class="mb-4">
                    <div class="flex justify-between">
                        <div>
                            <h2 class="font-semibold text-lg">Detail Pembeli</h2>
                            <p class="text-sm text-gray-300">Nama: {{ $order->user->name }}</p>
                            <p class="text-sm text-gray-300">Email: {{ $order->user->email }}</p>
                            <p class="text-sm text-gray-300">Telp: {{ '+'.$order->user->phone }}</p>
                            <p class="text-sm text-gray-300" style="">Alamat: {{ ($order->user->profile) ? $order->user->profile->address : '' }}</p>

                        </div>
                        <div class="me-5" style="">
                            @php
                                $textColor = 'text-red-500';
                            @endphp
                            @if ($order->payment_status == 'paid')
                                @php
                                    $textColor = 'text-green-400';
                                @endphp
                            @endif
                            <h2 class="font-semibold text-lg  ">Status : <span class="{{ $textColor }}">
                                    {{ strtoupper($order->payment_status) }}</span>
                            </h2>

                        </div>

                    </div>
                </div>

                <!-- Info Order -->
                <div class="mb-4">
                    <h2 class="font-semibold text-lg">Rincian Order</h2>
                    <table class="w-full text-sm mt-2">
                        <thead>
                            <tr class="border-b border-white/10 text-left">
                                <th class="py-2">Uraian</th>
                                <th class="py-2">Qty</th>
                                <th class="py-2 text-center">
                                    Harga/Nilai
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            @php
                                $subtotal = 0;
                            @endphp
                            @foreach ($order->orderItem as $row)
                                @php
                                    $subtotal = 0;
                                @endphp
                                <tr class="border-b border-white/5">
                                    <td class="py-2">
                                        <div class="flex flex-col">
                                            <div>
                                                @php
                                                    $license_type = $row->songLicense->license_type;
                                                    $time_amount = $row->songLicense->time_amount;
                                                    $time_type = $row->songLicense->time_type;
                                                @endphp
                                                {{ 'Lisensi ' . $row->songLicense->license_type . ' (' . $row->songLicense->zone . ')' }}
                                            </div>
                                            <div>
                                                {{ $row->songLicense->song->title }}
                                            </div>
                                            <div class="text-xs">
                                                {{ 'Cipt. ' . $row->songLicense->song->songContributors->pluck('user.name')->implode(', ') }}
                                            </div>
                                        </div>
                                    </td>
                                    <td class="py-2">1</td>
                                    @if ($row->songLicense->payment_type == 'Beli Harga')
                                        <td class="py-2 text-right">Rp. {{ number_format($row->songLicense->amount) }} </td>
                                    @else
                                        <td class="py-2 text-right">{{ number_format($row->songLicense->amount) }} %</td>
                                    @endif
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <!-- Total -->
                @php
                    $subtotal = $row->songLicense->amount;
                    $ppn = $subtotal * ($ppnAmount / 100);
                    if ($row->songLicense->payment_type != 'Beli Harga') {
                        $ppn = 0;
                    }
                    $total = $subtotal + $ppn;
                @endphp
                <div class="mt-6 text-sm">
                    <div class="flex justify-between mb-1">
                        <span>Subtotal</span>
                        <span>Rp{{ number_format($subtotal, 0, ',', '.') }}</span>
                    </div>
                    @if ($row->songLicense->payment_type == 'Beli Harga')
                        <div class="flex justify-between mb-1">
                            <span>PPN ({{ $ppnAmount }}%)</span>
                            <span>Rp{{ number_format($ppn, 0, ',', '.') }}</span>
                        </div>
                        <div
                            class="flex justify-between items-center mt-4 border-t border-white/10 pt-3 text-lg font-semibold">

                            <span>Total</span>
                            <span class="text-green-400">Rp. {{ number_format($total, 0, ',', '.') }}</span>

                        </div>
                        {{-- <div
                            class="flex justify-between items-center mt-4 border-t border-white/10 pt-3 text-md font-semibold">

                            <span>Terbilang</span>
                            <span class="text-white">{{  terbilang_rupiah($total) }}</span>

                        </div> --}}
                    @else
                        <div
                            class="flex justify-between items-center mt-4 border-t border-white/10 pt-3 text-lg font-semibold">

                            <span>Total</span>
                            <span class="text-green-400">{{ number_format($total, 0, ',', '.') }} %</span>

                        </div>
                    @endif

                </div>

                {{-- <div class="flex justify-between items-center mt-6 border-t border-white/10 pt-4">
                    <span class="font-semibold text-lg">Total</span>
                    @if ($row->songLicense->payment_type == 'Beli Harga')
                        <span class="font-bold text-xl {{ $textColor }}">Rp.
                            {{ number_format($row->songLicense->amount) }} </span>
                    @else
                        <span class="font-bold text-xl {{ $textColor }}">{{ number_format($row->songLicense->amount) }}
                            %</span>
                    @endif

                </div> --}}

                <!-- Metode Pembayaran -->
                @if ($row->songLicense->payment_type == 'Beli Harga')
                    @if (!in_array($order->payment_status, ['paid', 'failed']))
                        <div class="mb-6 mt-4">
                            <h2 class="text-lg font-semibold mb-2 text-red-300 ">Metode Pembayaran :
                                {{ $order->payment_method }}</h2>
                            <p>Silakan transfer ke rekening berikut:</p>
                            <p><span class="font-semibold">Bank:</span> {{ $bank_name }}</p>
                            <p><span class="font-semibold">No Rek:</span> {{ $bank_acc_number }}</p>
                            <p><span class="font-semibold">An:</span> {{ $bank_acc_name }}</p>
                            <p><span class="font-semibold">Sejumlah :</span> <span class=" font-semibold text-xl "> Rp.
                                    {{ number_format($total, 0, ',', '.') }} </span> </p>
                            <p><span class="font-semibold">Terbilang :</span> {{ terbilang_rupiah($total) }}</p>

                        </div>
                    @endif
                @endif

                <!-- Tombol Aksi -->
                <div class="mt-14 flex justify-center space-x-4 no-print">
                    <a href="{{ route('welcome') }}"
                        class="inline-block bg-red-600 text-white font-medium px-5 py-2 rounded-md hover:bg-red-800 hover:text-white transition ">
                        Kembali ke Home
                    </a>
                    <a href="{{ route('payment.confirm',['orderNo' => $order->order_no]) }}"
                        class="inline-block bg-red-600 text-white font-medium px-5 py-2 rounded-md hover:bg-red-800 hover:text-white transition ">
                        Konfirmasi Pembayaran
                    </a>
                    <button onclick="window.print()"
                        class="inline-block bg-red-600 text-white font-medium px-5 py-2 rounded-md hover:bg-green-700 transition duration-300 !hover:bg-green-700 ">
                        Cetak
                    </button>

                </div>

            </div>
        </div>



    </div>
@endsection
@push('style')
    <style>
        @media print {
            body {
                background: white !important;
            }

            #printArea {
                background: white !important;
                color: #000 !important;
            }

            #printArea * {
                color: #000 !important;
            }

            /* Sembunyikan elemen yang tidak perlu dicetak */
            .no-print {
                display: none !important;
            }

            /* Hanya tampilkan area invoice */
            body * {
                visibility: hidden;
            }

            #printArea,
            #printArea * {
                visibility: visible;
            }

            #printArea {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
            }
        }
    </style>
@endpush
@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const elMain = document.getElementById('mainContent');

            if (elMain) {
                elMain.classList.add('w-full');
            }

        });
    </script>
@endsection