@extends('layouts.app')

@section('title', 'Laporan Transaksi - Admin INUFA')

@section('header', 'Laporan Transaksi')

@section('content')
<div class="bg-white rounded-lg shadow-lg p-6">
    <h2 class="text-2xl font-bold text-gray-800 mb-6">Filter Laporan</h2>
    <form action="{{ route('admin.reports.transactions') }}" method="GET" class="mb-6 flex flex-wrap gap-4 items-end">
        <div class="flex flex-col">
            <label for="start_date" class="text-sm font-medium text-gray-700 mb-1">Tanggal Mulai:</label>
            <input type="date" id="start_date" name="start_date" class="form-input rounded-md shadow-sm border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" value="{{ request('start_date') }}">
        </div>
        <div class="flex flex-col">
            <label for="end_date" class="text-sm font-medium text-gray-700 mb-1">Tanggal Akhir:</label>
            <input type="date" id="end_date" name="end_date" class="form-input rounded-md shadow-sm border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" value="{{ request('end_date') }}">
        </div>
        <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">Filter</button>
        @if(request()->has('start_date') || request()->has('end_date'))
            <a href="{{ route('admin.reports.transactions') }}" class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2">Reset</a>
        @endif
    </form>

    @if($transactions->count() > 0)
        <div class="overflow-x-auto">
            <table class="min-w-full bg-white border border-gray-200 rounded-lg">
                <thead>
                    <tr class="bg-gray-100">
                        <th class="py-3 px-4 text-left text-sm font-semibold text-gray-600 border-b">No</th>
                        <th class="py-3 px-4 text-left text-sm font-semibold text-gray-600 border-b">Tanggal Sewa</th>
                        <th class="py-3 px-4 text-left text-sm font-semibold text-gray-600 border-b">Pelanggan</th>
                        <th class="py-3 px-4 text-left text-sm font-semibold text-gray-600 border-b">Paket</th>
                        <th class="py-3 px-4 text-left text-sm font-semibold text-gray-600 border-b">Total Harga</th>
                        <th class="py-3 px-4 text-left text-sm font-semibold text-gray-600 border-b">Nominal Pembayaran</th>
                        <th class="py-3 px-4 text-left text-sm font-semibold text-gray-600 border-b">Sisa Pembayaran</th>
                        <th class="py-3 px-4 text-left text-sm font-semibold text-gray-600 border-b">Status</th>
                        <th class="py-3 px-4 text-center text-sm font-semibold text-gray-600 border-b">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($transactions as $index => $sewa)
                    <tr class="border-b hover:bg-gray-50">
                        <td class="py-3 px-4 text-sm text-gray-800">{{ $transactions->firstItem() + $index }}</td>
                        <td class="py-3 px-4 text-sm text-gray-800">{{ \Carbon\Carbon::parse($sewa->created_at)->format('d M Y H:i') }}</td>
                        <td class="py-3 px-4 text-sm text-gray-800">{{ $sewa->user->nama }}</td>
                        <td class="py-3 px-4 text-sm text-gray-800">{{ $sewa->paket->nama_paket }}</td>
                        <td class="py-3 px-4 text-sm text-gray-800">Rp {{ number_format($sewa->total_harga, 0, ',', '.') }}</td>
                        <td class="py-3 px-4 text-sm text-gray-800">Rp {{ number_format($sewa->nominal_pembayaran, 0, ',', '.') }}</td>
                        <td class="py-3 px-4 text-sm text-gray-800">
                            @php
                                $sisaPembayaran = $sewa->total_harga - ($sewa->nominal_pembayaran ?? 0);
                            @endphp
                            @if($sisaPembayaran > 0)
                                <span class="text-red-600 font-medium">
                                    Rp {{ number_format($sisaPembayaran, 0, ',', '.') }}
                                </span>
                            @else
                                <span class="text-green-600 font-medium">Lunas</span>
                            @endif
                        </td>
                        <td class="py-3 px-4 text-sm text-gray-800">
                            <span class="px-2 py-1 text-xs font-semibold rounded-full
                                @if($sewa->status === 'selesai') bg-green-100 text-green-800
                                @elseif($sewa->status === 'confirmed') bg-blue-100 text-blue-800
                                @else bg-gray-100 text-gray-800 @endif">
                                {{ ucfirst($sewa->status) }}
                            </span>
                        </td>
                        <td class="py-3 px-4 text-center text-sm">
                            @if($sewa->status !== 'selesai' && $sewa->status !== 'dibatalkan')
                                <form action="{{ route('admin.riwayat.update-status', $sewa->id) }}" method="POST" class="inline">
                                    @csrf
                                    @method('PUT')
                                    <button type="submit" class="bg-indigo-500 hover:bg-indigo-600 text-white px-3 py-1 rounded-md">
                                        Selesaikan Pembayaran
                                    </button>
                                </form>
                            @else
                                <span class="text-gray-500">Tidak Ada Aksi</span>
                            @endif
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <div class="mt-4">
            {{ $transactions->links() }} <!-- Menampilkan paginasi -->
        </div>
    @else
        <div class="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4" role="alert">
            <p class="font-bold">Informasi</p>
            <p>Tidak ada data transaksi yang ditemukan.</p>
        </div>
    @endif
</div>
@endsection