@extends('layouts.finance')

@section('title', 'Detail Paylater')
@section('page-title', 'Detail Transaksi Paylater')

@section('content')
<div class="max-w-4xl mx-auto">
    <!-- Header -->
    <div class="mb-6">
        <div class="flex items-center gap-3 mb-4">
            <a href="{{ route('paylater.index') }}"
               class="text-gray-600 hover:text-gray-900 transition-colors">
                <i class="fas fa-arrow-left"></i>
            </a>
            <h1 class="text-2xl font-bold text-gray-900">Detail Transaksi</h1>
        </div>

        <div class="bg-gradient-to-r from-purple-500 to-purple-600 rounded-xl p-6 text-white shadow-lg">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-purple-100 text-sm font-medium mb-1">{{ $paylaterTransaction->note }}</p>
                    <p class="text-3xl font-bold">{{ $paylaterTransaction->account->name }}</p>
                    <p class="text-purple-200 text-sm mt-2">
                        Total: Rp {{ number_format($paylaterTransaction->total_amount, 0, ',', '.') }} •
                        Jenis: {{ $paylaterTransaction->payment_type_label }}
                        @if ($paylaterTransaction->payment_type === 'installment')
                            • Tenor: {{ $paylaterTransaction->tenor }}x • Cicilan: Rp {{ number_format($paylaterTransaction->monthly_amount, 0, ',', '.') }}
                        @endif
                    </p>
                </div>
                <div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center">
                    <i class="fas fa-credit-card text-white text-2xl"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
        <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-200">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-600 font-medium">Total Tagihan</p>
                    <p class="text-2xl font-bold text-gray-900 mt-1">Rp {{ number_format($paylaterTransaction->total_amount, 0, ',', '.') }}</p>
                </div>
                <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center">
                    <i class="fas fa-file-invoice text-purple-600 text-xl"></i>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-200">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-600 font-medium">Sudah Dibayar</p>
                    <p class="text-2xl font-bold text-green-600 mt-1">Rp {{ number_format($totalPaid, 0, ',', '.') }}</p>
                </div>
                <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
                    <i class="fas fa-check-circle text-green-600 text-xl"></i>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-200">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-600 font-medium">Sisa Tagihan</p>
                    <p class="text-2xl font-bold text-orange-600 mt-1">Rp {{ number_format($remainingBalance, 0, ',', '.') }}</p>
                </div>
                <div class="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center">
                    <i class="fas fa-hourglass-half text-orange-600 text-xl"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Progress Overview -->
    <div class="bg-white rounded-xl shadow-sm p-6 mb-6 border border-gray-200">
        <h2 class="text-lg font-semibold text-gray-800 mb-4">Progress Pembayaran</h2>