@extends('layouts.authenticated')

@section('title', 'Closing Harian')
@section('page-title', 'Closing Harian - ' . \Carbon\Carbon::parse($date)->format('d M Y'))

@section('page-content')
<div class="space-y-6 animate-fade-in">
    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
        <div>
            <a href="{{ route('daily-reports.index') }}" class="inline-flex items-center gap-2 text-sm text-blue-600 hover:text-blue-500 mb-4">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
                Kembali
            </a>
            <h1 class="text-xl font-semibold text-slate-900 dark:text-white">Closing Harian - {{ \Carbon\Carbon::parse($date)->format('d M Y') }}</h1>
            <p class="text-xs text-slate-400 dark:text-slate-500 mt-1">
                Total rupiah pada tabel sudah net setelah fee. Fee tidak ditampilkan karena laporan ini untuk mitra.
            </p>
        </div>
        <div class="flex items-center gap-3">
            @if(count($partnerReports) > 0)
            <div x-data="{ open: false }" class="relative">
                <button type="button"
                        @click="open = !open"
                        class="inline-flex items-center gap-2 px-5 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white font-medium rounded-lg transition-colors text-sm">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7h16M4 12h16M4 17h16"></path>
                    </svg>
                    Export
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                    </svg>
                </button>
                <div x-show="open"
                     @click.outside="open = false"
                     x-transition
                     class="absolute right-0 mt-2 w-48 rounded-lg border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-800 shadow-lg overflow-hidden z-20"
                     style="display: none;">
                    <a href="{{ route('daily-reports.export.pdf') }}?date={{ $date }}&branch_id={{ $branchId }}"
                       class="flex items-center gap-2 px-4 py-3 text-sm text-slate-700 dark:text-slate-200 hover:bg-gray-50 dark:hover:bg-slate-700">
                        <svg class="w-4 h-4 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9a2 2 0 00-2-2H9a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                        </svg>
                        Export PDF
                    </a>
                    <a href="{{ route('daily-reports.export.excel') }}?date={{ $date }}&branch_id={{ $branchId }}"
                       class="flex items-center gap-2 px-4 py-3 text-sm text-slate-700 dark:text-slate-200 hover:bg-gray-50 dark:hover:bg-slate-700">
                        <svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3"></path>
                        </svg>
                        Export Excel
                    </a>
                </div>
            </div>
            @endif
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="bg-gradient-to-br from-blue-500 to-indigo-600 rounded-xl p-5 text-white shadow-lg">
            <p class="text-sm text-white/80">Total Penjualan</p>
            <p class="text-2xl font-bold mt-1">Rp {{ number_format($totalSales, 0, ',', '.') }}</p>
            <p class="text-xs text-white/70 mt-1">{{ $totalTransactions }} transaksi</p>
        </div>
        <div class="bg-gradient-to-br from-green-500 to-emerald-600 rounded-xl p-5 text-white shadow-lg">
            <p class="text-sm text-white/80">Total Stok Terjual</p>
            <p class="text-2xl font-bold mt-1">{{ $dailyStocks->sum('sold') }}</p>
        </div>
        <div class="bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl p-5 text-white shadow-lg">
            <p class="text-sm text-white/80">Sisa Stok</p>
            <p class="text-2xl font-bold mt-1">{{ $dailyStocks->sum('remaining') }}</p>
            <p class="text-xs text-white/70 mt-1">Dikembalikan ke mitra</p>
        </div>
    </div>

    <!-- Rincian Metode Pembayaran -->
    <div class="bg-white dark:bg-slate-800 rounded-xl border border-gray-200 dark:border-slate-700 p-5 shadow-sm">
        <h3 class="text-sm font-semibold text-slate-900 dark:text-white mb-4">Rincian Metode Pembayaran</h3>
        <div class="grid grid-cols-1 sm:grid-cols-4 gap-4">
            <!-- Cash -->
            <div class="flex items-center justify-between p-4 bg-slate-50 dark:bg-slate-700/40 rounded-xl">
                <div>
                    <p class="text-xs text-slate-500 dark:text-slate-400 font-medium uppercase tracking-wider">Tunai (Cash)</p>
                    <p class="text-lg font-bold text-slate-900 dark:text-white mt-1">Rp {{ number_format($paymentMethodTotals['cash']['total'] ?? 0, 0, ',', '.') }}</p>
                </div>
                <span class="px-2.5 py-1 rounded-full text-xs font-semibold bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">
                    {{ $paymentMethodTotals['cash']['count'] ?? 0 }} trx
                </span>
            </div>
            <!-- QRIS -->
            <div class="flex items-center justify-between p-4 bg-slate-50 dark:bg-slate-700/40 rounded-xl">
                <div>
                    <p class="text-xs text-slate-500 dark:text-slate-400 font-medium uppercase tracking-wider">QRIS</p>
                    <p class="text-lg font-bold text-slate-900 dark:text-white mt-1">Rp {{ number_format($paymentMethodTotals['qris']['total'] ?? 0, 0, ',', '.') }}</p>
                </div>
                <span class="px-2.5 py-1 rounded-full text-xs font-semibold bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-300">
                    {{ $paymentMethodTotals['qris']['count'] ?? 0 }} trx
                </span>
            </div>
            <!-- Transfer -->
            <div class="flex items-center justify-between p-4 bg-slate-50 dark:bg-slate-700/40 rounded-xl">
                <div>
                    <p class="text-xs text-slate-500 dark:text-slate-400 font-medium uppercase tracking-wider">Transfer</p>
                    <p class="text-lg font-bold text-slate-900 dark:text-white mt-1">Rp {{ number_format($paymentMethodTotals['transfer']['total'] ?? 0, 0, ',', '.') }}</p>
                </div>
                <span class="px-2.5 py-1 rounded-full text-xs font-semibold bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300">
                    {{ $paymentMethodTotals['transfer']['count'] ?? 0 }} trx
                </span>
            </div>
            <!-- Operasional -->
            <div class="flex items-center justify-between p-4 bg-slate-50 dark:bg-slate-700/40 rounded-xl">
                <div>
                    <p class="text-xs text-slate-500 dark:text-slate-400 font-medium uppercase tracking-wider">Operasional</p>
                    <p class="text-lg font-bold text-slate-900 dark:text-white mt-1">Rp {{ number_format($paymentMethodTotals['operasional']['total'] ?? 0, 0, ',', '.') }}</p>
                </div>
                <span class="px-2.5 py-1 rounded-full text-xs font-semibold bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300">
                    {{ $paymentMethodTotals['operasional']['count'] ?? 0 }} trx
                </span>
            </div>
        </div>
    </div>

    <div class="bg-white dark:bg-slate-800 rounded-xl border border-gray-200 dark:border-slate-700 p-4">
        <p class="text-sm text-slate-600 dark:text-slate-400">
            <strong>Catatan:</strong> angka <em>Total (Rupiah)</em> dan <em>Total Penjualan (Rupiah)</em> sudah dikurangi fee. Setelah tabel penjualan, ringkasan pencairan dan saldo ditampilkan di bawah.
        </p>
    </div>

    <div class="bg-white dark:bg-slate-800 rounded-xl border border-gray-200 dark:border-slate-700 overflow-hidden">
        <div class="p-5 border-b border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-700/50">
            <h3 class="text-base font-semibold text-slate-900 dark:text-white">Ringkasan Penjualan Per Mitra</h3>
            <p class="text-sm text-slate-500">Format disederhanakan seperti laporan mitra</p>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead class="bg-gray-50 dark:bg-slate-700/50">
                    <tr>
                        <th class="px-4 py-3 text-center text-xs font-medium text-slate-500 dark:text-slate-400 uppercase">No</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase">Nama Mitra</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase">Menu</th>
                        <th class="px-4 py-3 text-right text-xs font-medium text-slate-500 dark:text-slate-400 uppercase">Harga Porsi</th>
                        <th class="px-4 py-3 text-center text-xs font-medium text-slate-500 dark:text-slate-400 uppercase">Awal</th>
                        <th class="px-4 py-3 text-center text-xs font-medium text-slate-500 dark:text-slate-400 uppercase">Terjual</th>
                        <th class="px-4 py-3 text-center text-xs font-medium text-slate-500 dark:text-slate-400 uppercase">Sisa</th>
                        <th class="px-4 py-3 text-right text-xs font-medium text-slate-500 dark:text-slate-400 uppercase">Total (Rupiah)</th>
                        <th class="px-4 py-3 text-right text-xs font-medium text-slate-500 dark:text-slate-400 uppercase">Total Penjualan (Rupiah)</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200 dark:divide-slate-700">
                    @php $rowNumber = 0; @endphp
                    @forelse($partnerReports as $partnerId => $report)
                        @php $productCount = count($report['products']); @endphp
                        @foreach($report['products'] as $productIndex => $product)
                        <tr class="hover:bg-gray-50 dark:hover:bg-slate-700/50">
                            <td class="px-4 py-3 text-center align-top">
                                <span class="font-semibold text-slate-700 dark:text-slate-200">{{ ++$rowNumber }}</span>
                            </td>
                            @if($productIndex === 0)
                            <td class="px-4 py-3 align-top" rowspan="{{ $productCount }}">
                                @if($productIndex === 0)
                                    <div class="font-medium text-slate-900 dark:text-white">{{ $report['partner']->name }}</div>
                                    <div class="text-xs text-slate-500">{{ $report['partner']->code }}</div>
                                @endif
                            </td>
                            @endif
                            <td class="px-4 py-3 text-slate-700 dark:text-slate-200 align-top">{{ $product['menu'] }}</td>
                            <td class="px-4 py-3 text-right text-slate-700 dark:text-slate-200 align-top">Rp {{ number_format($product['price'], 0, ',', '.') }}</td>
                            <td class="px-4 py-3 text-center text-slate-700 dark:text-slate-200 align-top">{{ $product['check_in'] }}</td>
                            <td class="px-4 py-3 text-center text-slate-700 dark:text-slate-200 align-top">{{ $product['check_out'] }}</td>
                            <td class="px-4 py-3 text-center text-green-600 font-semibold align-top">{{ $product['sold'] }}</td>
                            <td class="px-4 py-3 text-right text-slate-700 dark:text-slate-200 align-top">Rp {{ number_format($product['net_sales'], 0, ',', '.') }}</td>
                            @if($productIndex === 0)
                            <td class="px-4 py-3 text-right font-semibold text-blue-600 align-top" rowspan="{{ $productCount }}">
                                    Rp {{ number_format($report['net_income'], 0, ',', '.') }}
                            </td>
                            @endif
                        </tr>
                        @endforeach
                    @empty
                        <tr>
                            <td colspan="9" class="px-6 py-12 text-center text-slate-500">
                                Belum ada data untuk tanggal ini.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <div class="bg-white dark:bg-slate-800 rounded-xl border border-gray-200 dark:border-slate-700 overflow-hidden">
        <div class="p-5 border-b border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-700/50">
            <h3 class="text-base font-semibold text-slate-900 dark:text-white">Pencairan & Saldo</h3>
            <p class="text-sm text-slate-500">Setelah penjualan net, saldo dihitung untuk pencairan berikutnya</p>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead class="bg-gray-50 dark:bg-slate-700/50">
                    <tr>
                        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase">No</th>
                        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase">Mitra</th>
                        <th class="px-4 py-3 text-right text-xs font-medium text-slate-500 dark:text-slate-400 uppercase">Saldo Sebelum</th>
                        <th class="px-4 py-3 text-right text-xs font-medium text-slate-500 dark:text-slate-400 uppercase">Bersih Hari Ini</th>
                        <th class="px-4 py-3 text-right text-xs font-medium text-slate-500 dark:text-slate-400 uppercase">Saldo Tersedia</th>
                        <th class="px-4 py-3 text-right text-xs font-medium text-slate-500 dark:text-slate-400 uppercase">Pencairan</th>
                        <th class="px-4 py-3 text-right text-xs font-medium text-slate-500 dark:text-slate-400 uppercase">Saldo Akhir</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200 dark:divide-slate-700">
                    @php $settlementRow = 0; @endphp
                    @forelse($partnerReports as $partnerId => $report)
                    <tr class="hover:bg-gray-50 dark:hover:bg-slate-700/50">
                        <td class="px-4 py-3 text-slate-700 dark:text-slate-200">{{ ++$settlementRow }}</td>
                        <td class="px-4 py-3">
                            <div class="font-medium text-slate-900 dark:text-white">{{ $report['partner']->name }}</div>
                            <div class="text-xs text-slate-500">{{ $report['partner']->code }}</div>
                        </td>
                        <td class="px-4 py-3 text-right text-slate-700 dark:text-slate-200">Rp {{ number_format($report['current_balance'], 0, ',', '.') }}</td>
                        <td class="px-4 py-3 text-right font-semibold text-green-600">Rp {{ number_format($report['net_income'], 0, ',', '.') }}</td>
                        <td class="px-4 py-3 text-right font-semibold text-teal-600">Rp {{ number_format($report['available_balance'], 0, ',', '.') }}</td>
                        <td class="px-4 py-3 text-right font-semibold text-blue-600">Rp {{ number_format($report['payout_amount'], 0, ',', '.') }}</td>
                        <td class="px-4 py-3 text-right font-semibold text-amber-600">Rp {{ number_format($report['ending_balance'], 0, ',', '.') }}</td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="px-6 py-12 text-center text-slate-500">
                            Belum ada data pencairan untuk tanggal ini.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
                @if(count($partnerReports) > 0)
                <tfoot class="bg-gray-50 dark:bg-slate-700/50">
                    <tr>
                        <td class="px-4 py-3 font-semibold text-slate-900 dark:text-white" colspan="2">Total</td>
                        <td class="px-4 py-3 text-right font-semibold text-slate-700 dark:text-slate-200">Rp {{ number_format(collect($partnerReports)->sum('current_balance'), 0, ',', '.') }}</td>
                        <td class="px-4 py-3 text-right font-semibold text-green-600">Rp {{ number_format(collect($partnerReports)->sum('net_income'), 0, ',', '.') }}</td>
                        <td class="px-4 py-3 text-right font-semibold text-teal-600">Rp {{ number_format(collect($partnerReports)->sum('available_balance'), 0, ',', '.') }}</td>
                        <td class="px-4 py-3 text-right font-semibold text-blue-600">Rp {{ number_format(collect($partnerReports)->sum('payout_amount'), 0, ',', '.') }}</td>
                        <td class="px-4 py-3 text-right font-semibold text-amber-600">Rp {{ number_format(collect($partnerReports)->sum('ending_balance'), 0, ',', '.') }}</td>
                    </tr>
                </tfoot>
                @endif
            </table>
        </div>
    </div>
</div>
@endsection