@extends('adminlte::page')

@section('title', 'Laporan Transaksi Kantin | Smart Cendekia')

@section('content_header')
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center pt-3 pb-2">
        <div>
            <h1 class="text-dark font-weight-bold mb-1" style="font-family: 'Poppins', sans-serif; font-size: 1.75rem;">
                <i class="fas fa-file-invoice-dollar text-success mr-2"></i> Laporan {{ Session::get('kantin_nama') }}
            </h1>
            <p class="text-muted font-weight-500 mb-0">Pantau pendapatan jajan santri dan status pencairan dana dari Bendahara.</p>
        </div>
        <div class="mt-3 mt-md-0">
            <a href="{{ route('kantin.pos') }}" class="btn btn-primary shadow-sm rounded-pill font-weight-bold px-4">
                <i class="fas fa-cash-register mr-1"></i> Kembali ke Kasir
            </a>
        </div>
    </div>
@stop

@section('content')
<div class="container-fluid pb-5 px-0">
    {{-- RINGKASAN WIDGET --}}
    <div class="row">
        {{-- Omzet Hari Ini --}}
        <div class="col-md-4 mb-4">
            <div class="card border-0 shadow-sm h-100" style="border-radius: 15px; background: linear-gradient(135deg, #5B247A 0%, #1B0B26 100%); color: white;">
                <div class="card-body p-4">
                    <p class="mb-1 font-weight-bold opacity-80 text-uppercase small" style="letter-spacing: 1px;">Omzet Hari Ini</p>
                    <h2 class="font-weight-bolder mb-0">
                        Rp {{ number_format($totalPendapatan, 0, ',', '.') }}
                    </h2>
                    <i class="fas fa-wallet position-absolute" style="font-size: 5rem; right: 10px; bottom: 10px; opacity: 0.1;"></i>
                </div>
            </div>
        </div>

        {{-- Filter Tanggal --}}
        <div class="col-md-8 mb-4">
            <div class="card border-0 shadow-sm h-100" style="border-radius: 15px;">
                <div class="card-body p-4 d-flex align-items-center">
                    <form action="{{ route('kantin.laporan') }}" method="GET" class="w-100 d-flex align-items-center flex-wrap flex-md-nowrap">
                        <div class="form-group mb-0 flex-grow-1 mr-md-3 w-100 mb-3 mb-md-0">
                            <label class="text-muted text-xs text-uppercase font-weight-bold mb-2">Filter Berdasarkan Tanggal</label>
                            <input type="date" name="tanggal" class="form-control form-control-lg font-weight-bold bg-light border-0" value="{{ $tanggal }}" style="border-radius: 10px;">
                        </div>
                        <button type="submit" class="btn btn-dark btn-lg font-weight-bold shadow-sm px-4 mt-md-4 w-100" style="border-radius: 10px; max-width: 200px;">
                            <i class="fas fa-filter mr-2"></i> Tampilkan
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- TABEL DATA TRANSAKSI --}}
    <div class="card border-0 shadow-sm" style="border-radius: 15px;">
        <div class="card-header bg-white border-0 py-4 px-4 d-flex justify-content-between align-items-center">
            <h5 class="card-title font-weight-bold text-dark mb-0">
                Rincian Penjualan: <span class="text-primary">{{ \Carbon\Carbon::parse($tanggal)->translatedFormat('d F Y') }}</span>
            </h5>
            <span class="badge badge-light-primary text-primary px-3 py-2 rounded-pill font-weight-bold">
                {{ $transaksis->count() }} Transaksi Terdaftar
            </span>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="bg-light">
                        <tr class="text-muted text-xs text-uppercase" style="letter-spacing: 0.5px;">
                            <th class="pl-4 py-3 border-0">Waktu</th>
                            <th class="border-0">Nama Santri</th>
                            <th class="border-0 text-right">Nominal</th>
                            <th class="border-0 text-center">Status Pencairan</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($transaksis as $trx)
                            <tr style="border-bottom: 1px solid #f4f6f9;">
                                <td class="pl-4 py-3">
                                    <span class="font-weight-bold text-dark">{{ \Carbon\Carbon::parse($trx->created_at)->format('H:i') }}</span>
                                    <small class="text-muted d-block">{{ $trx->kode_transaksi }}</small>
                                </td>
                                <td>
                                    <span class="font-weight-bold">{{ optional($trx->santri->siswa)->nama_lengkap }}</span>
                                    <small class="text-muted d-block">Kelas {{ optional(optional($trx->santri)->siswa)->kelas->nama_kelas }}</small>
                                </td>
                                <td class="text-right">
                                    <span class="font-weight-bolder text-success" style="font-size: 1.1rem;">
                                        Rp {{ number_format($trx->nominal, 0, ',', '.') }} {{-- --}}
                                    </span>
                                </td>
                                <td class="text-center">
                                    {{-- Fitur Penanda Pencairan Uang Bendahara --}}
                                    @if($trx->is_settled) {{-- --}}
                                        <span class="badge badge-success px-3 py-1 rounded-pill">
                                            <i class="fas fa-check-circle mr-1"></i> Sudah Diserahkan
                                        </span>
                                        <small class="text-muted d-block mt-1">Cair: {{ \Carbon\Carbon::parse($trx->settled_at)->format('d/m/y H:i') }}</small>
                                    @else
                                        <span class="badge badge-warning px-3 py-1 rounded-pill text-dark">
                                            <i class="fas fa-clock mr-1"></i> Belum Diserahkan
                                        </span>
                                        <small class="text-muted d-block mt-1">Menunggu Bendahara</small>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="text-center py-5">
                                    <div class="d-flex flex-column align-items-center">
                                        <i class="fas fa-receipt fa-3x text-muted mb-3 opacity-30"></i>
                                        <h6 class="text-muted font-weight-bold">Tidak ada transaksi pada tanggal ini.</h6>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        {{-- FOOTER INFO --}}
        <div class="card-footer bg-light border-0 p-4">
            <div class="row align-items-center">
                <div class="col-md-6 text-center text-md-left mb-3 mb-md-0">
                    <p class="text-muted small mb-0"><i class="fas fa-info-circle mr-1"></i> Status <b>"Belum Diserahkan"</b> berarti uang tunai masih dipegang Bendahara sekolah.</p>
                </div>
                <div class="col-md-6 text-center text-md-right">
                    <h5 class="font-weight-bold mb-0">Total Bersih: <span class="text-success">Rp {{ number_format($totalPendapatan, 0, ',', '.') }}</span></h5>
                </div>
            </div>
        </div>
    </div>
</div>
@stop

@section('css')
<style>
    body { font-family: 'Poppins', sans-serif; }
    .badge-light-primary { background-color: #e0e7ff; color: #4338ca; }
    .table thead th { border: none; font-size: 0.75rem; color: #9ca3af; }
    .text-royal { color: #5B247A !important; }
</style>
@stop