@extends('layouts.app')

@section('content')
<div class="max-w-7xl mx-auto px-6 pt-6">
    <!-- Header Section -->
    <div class="flex items-center justify-between mb-5">
        <div>
            <h1 class="text-2xl font-bold text-gray-800">
                💰 {{ $header->nama_buku }}
            </h1>
            <p class="text-gray-500 text-sm">
                Buku Tunai bagi bulan <strong>{{ $header->bulan }}</strong> tahun <strong>{{ $header->tahun }}</strong>.
            </p>
        </div>

        <a href="{{ route('buku-tunai.add-form', $header->id) }}"
           class="px-5 py-2 bg-indigo-100 text-indigo-700 rounded-lg hover:bg-indigo-200 transition font-semibold shadow-sm">
            ➕ Tambah Rekod
        </a>
    </div>

    <!-- Transactions Table -->
    <div class="bg-white shadow-md rounded-lg border border-gray-100 overflow-hidden mb-4">
        <table class="w-full text-sm text-left text-gray-700">
            <thead class="bg-gray-50 border-b border-gray-200 text-gray-700 font-semibold">
                <tr>
                    <th class="px-4 py-3">Tarikh</th>
                    <th class="px-4 py-3">Butiran</th>
                    <th class="px-4 py-3">No. Baucar</th>
                    <th class="px-4 py-3 text-right">Terimaan (RM)</th>
                    <th class="px-4 py-3 text-right">Bayaran (RM)</th>
                    <th class="px-4 py-3 text-right">Baki (RM)</th>
                    <th class="px-4 py-3 text-center">Tindakan</th>
                </tr>
            </thead>

            <tbody>
                @forelse($records as $item)
                    <tr class="hover:bg-gray-50 transition">
                        <td class="px-4 py-2 whitespace-nowrap">{{ \Carbon\Carbon::parse($item->tarikh)->format('d/m/Y') }}</td>
                        <td class="px-4 py-2">{{ $item->butiran }}</td>
                        <td class="px-4 py-2">{{ $item->no_baucar ?? '-' }}</td>
                        <td class="px-4 py-2 text-right text-green-600 font-medium">
                            {{ $item->terimaan ? number_format($item->terimaan, 2) : '-' }}
                        </td>
                        <td class="px-4 py-2 text-right text-red-500 font-medium">
                            {{ $item->bayaran ? number_format($item->bayaran, 2) : '-' }}
                        </td>
                        <td class="px-4 py-2 text-right font-semibold text-gray-700">
                            {{ $item->baki ? number_format($item->baki, 2) : '-' }}
                        </td>

                        <td class="px-4 py-2 text-center">
                            <div class="flex justify-center space-x-2">
                                <a href="{{ route('buku-tunai.edit', $item->id) }}"
                                   class="px-3 py-1.5 bg-yellow-100 text-yellow-700 rounded-md hover:bg-yellow-200 transition">
                                   ✏️
                                </a>
                                <form action="{{ route('buku-tunai.destroy', $item->id) }}" method="POST"
                                      onsubmit="return confirm('Padam rekod ini?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit"
                                            class="px-3 py-1.5 bg-red-100 text-red-600 rounded-md hover:bg-red-200 transition">
                                        🗑️
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="text-center py-6 text-gray-400">Tiada transaksi direkodkan.</td>
                    </tr>
                @endforelse
            </tbody>

            @if($records->count())
            <tfoot class="bg-gray-50 border-t">
                <tr>
                    <th colspan="3" class="px-4 py-3 text-right font-semibold text-gray-700">Jumlah</th>
                    <th class="px-4 py-3 text-right text-green-600 font-semibold">{{ number_format($total_terimaan, 2) }}</th>
                    <th class="px-4 py-3 text-right text-red-500 font-semibold">{{ number_format($total_bayaran, 2) }}</th>
                    <th class="px-4 py-3 text-right text-blue-600 font-semibold">{{ number_format($total_baki, 2) }}</th>
                    <th></th>
                </tr>
            </tfoot>
            @endif
        </table>
    </div>

    <!-- Footer Buttons -->
    <div class="flex justify-between items-center mt-6">
        <a href="{{ route('buku-tunai.index') }}"
           class="px-6 py-2 bg-gray-200 text-gray-600 rounded-lg hover:bg-gray-300 transition font-semibold">
           ← Kembali 
        </a>

        <div class="flex gap-3">
            <a href="{{ route('buku-tunai.export.excel', $header->id) }}"
               class="px-6 py-2 bg-green-100 text-green-700 rounded-lg hover:bg-green-200 transition font-semibold">
               📊 Export Excel
            </a>

            <a href="{{ route('buku-tunai.export.pdf', $header->id) }}" target="_blank"
               class="px-6 py-2 bg-red-100 text-red-700 rounded-lg hover:bg-red-200 transition font-semibold">
               🧾 Export PDF
            </a>
        </div>
    </div>
</div>
@endsection