@extends('layouts.main')

@section('content')
<div class="container-fluid px-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h3 class="fw-bold text-white mb-0">Riwayat Transaksi</h3>
            <p class="text-info small mb-0">Manajemen pencatatan pembayaran kontrakan</p>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ route('payments.report') }}" class="btn btn-outline-info px-3">
                <i class="bi bi-file-pdf"></i> Laporan
            </a>
            <a href="{{ route('payments.create') }}" class="btn btn-primary px-3 shadow-sm">
                <i class="bi bi-plus-lg"></i> Transaksi Baru
            </a>
        </div>
    </div>

    {{-- KODE PENCARIAN (Yang sebelumnya hilang) --}}
    <div class="card bg-dark border-secondary border-opacity-25 mb-4 shadow-sm" style="border-radius: 12px;">
        <div class="card-body p-2">
            <form method="GET" action="{{ route('payments.index') }}" class="row g-2 align-items-center">
                <div class="col-md-10">
                    <div class="input-group">
                        <span class="input-group-text bg-transparent border-0 text-info">
                            <i class="bi bi-search"></i>
                        </span>
                        <input type="text" name="search" class="form-control bg-transparent text-white border-0 shadow-none" 
                               placeholder="Cari nama penyewa..." value="{{ request('search') }}">
                    </div>
                </div>
                <div class="col-md-2 d-flex gap-1">
                    <button type="submit" class="btn btn-info w-100 fw-bold text-dark">Cari</button>
                    @if(request('search'))
                        <a href="{{ route('payments.index') }}" class="btn btn-secondary px-3">
                            <i class="bi bi-arrow-clockwise"></i>
                        </a>
                    @endif
                </div>
            </form>
        </div>
    </div>

    {{-- Tabel Utama --}}
    <div class="card border-0 shadow-lg" style="border-radius: 15px; overflow: hidden;">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0" style="background: white;">
                <thead style="background: #112931;">
                    <tr class="small fw-bold">
                        <th class="ps-4 py-3 text-info" style="width: 15%">TANGGAL</th>
                        <th class="text-info" style="width: 20%">PENYEWA</th>
                        <th class="text-info" style="width: 15%">JUMLAH</th>
                        <th class="text-info" style="width: 20%">PERIODE</th>
                        <th class="text-info pe-4" style="width: 30%">DESKRIPSI</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($transactions as $t)
                    <tr style="border-bottom: 1px solid #f1f1f1;">
                        <td class="ps-4 fw-bold text-dark">
                            {{ \Carbon\Carbon::parse($t->transaction_date)->format('d M Y') }}
                        </td>
                        <td class="fw-bold text-primary">
                            {{ $t->penyewa->nama_1 ?? 'Umum' }}
                        </td>
                        <td class="fw-bold text-dark">
                            Rp {{ number_format($t->amount, 0, ',', '.') }}
                        </td>
                        <td class="text-muted small">
                            {{ \Carbon\Carbon::parse($t->periode_mulai)->format('d/m/y') }} - {{ \Carbon\Carbon::parse($t->periode_selesai)->format('d/m/y') }}
                        </td>
                        <td class="pe-4">
                            <span class="text-secondary small italic">{{ $t->description ?? '-' }}</span>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="5" class="text-center py-5 text-muted small">Data tidak ditemukan.</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<style>
    .italic { font-style: italic; }
    .table thead th { letter-spacing: 1px; border: none; font-size: 0.75rem; }
    .table-hover tbody tr:hover { background-color: #fcfcfc !important; }
    .btn-info { background: #00f7ff; border: none; }
    .btn-info:hover { background: #00d4db; }
</style>
@endsection