<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Detail pembayaran') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6">



    <div class="card max-w-xl mx-auto p-6">
        <h2 class="text-xl font-bold text-primary mb-4">Detail Pembayaran</h2>
        <div class="mb-2"><span class="font-semibold">Santri:</span> {{ $pembayaran->santri->nama ?? '-' }}</div>
        <div class="mb-2"><span class="font-semibold">Kelas:</span> {{ $pembayaran->kelas->nama ?? '-' }}</div>
        <div class="mb-2"><span class="font-semibold">Tanggal:</span> {{ $pembayaran->tanggal }}</div>
        <div class="mb-2"><span class="font-semibold">Jenis Pembayaran:</span> {{ $pembayaran->jenis_pembayaran }}</div>
        <div class="mb-2"><span class="font-semibold">Jumlah:</span> {{ number_format($pembayaran->jumlah,0,',','.') }}</div>
        <div class="mb-2"><span class="font-semibold">Keterangan:</span> {{ $pembayaran->keterangan }}</div>
        <div class="mb-2"><span class="font-semibold">Status:</span> {{ ucfirst($pembayaran->status) }}</div>
        <div class="mb-2"><span class="font-semibold">Bukti Pembayaran:</span>
            @if($pembayaran->bukti_pembayaran)
                @php
                    $ext = pathinfo($pembayaran->bukti_pembayaran, PATHINFO_EXTENSION);
                    $buktiUrl = asset('storage/' . str_replace('\\', '/', $pembayaran->bukti_pembayaran));
                @endphp
                <a href="{{ $buktiUrl }}" target="_blank">
                    @if(in_array(strtolower($ext), ['jpg','jpeg','png','gif','webp']))
                        <img src="{{ $buktiUrl }}" alt="Bukti" class="h-32 w-auto rounded shadow my-2">
                    @else
                        <span>Lihat File</span>
                    @endif
                </a>
            @else
                -
            @endif
        </div>
        <div class="mt-4">
            <a href="{{ route('pembayarans.index') }}" class="btn-accent">Kembali</a>
        

                
    </div>
</x-app-layout> 
