@extends('layouts.app')
@section('title', 'Laporan Penjualan')
@section('page-title', 'Laporan Penjualan')

@section('content')
<div class="space-y-5">

    {{-- Filter --}}
    <div class="bg-white rounded-2xl border border-slate-200 p-4 shadow-sm">
        <form method="GET" class="flex flex-wrap items-end gap-3">
            <div>
                <label class="block text-xs font-semibold text-slate-600 mb-1">Dari Tanggal</label>
                <input type="date" name="start" value="{{ $start->format('Y-m-d') }}"
                    class="px-3 py-2 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400">
            </div>
            <div>
                <label class="block text-xs font-semibold text-slate-600 mb-1">Sampai Tanggal</label>
                <input type="date" name="end" value="{{ $end->format('Y-m-d') }}"
                    class="px-3 py-2 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-400">
            </div>
            <button type="submit" class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white font-semibold rounded-xl text-sm transition">
                🔍 Filter
            </button>
            <a href="{{ route('reports.sales') }}" class="px-4 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 font-semibold rounded-xl text-sm transition">Reset</a>

            {{-- Quick date shortcuts --}}
            <div class="flex gap-1.5 ml-auto flex-wrap">
                @foreach(['Hari Ini' => [now()->format('Y-m-d'), now()->format('Y-m-d')],
                          'Minggu Ini' => [now()->startOfWeek()->format('Y-m-d'), now()->format('Y-m-d')],
                          'Bulan Ini' => [now()->startOfMonth()->format('Y-m-d'), now()->format('Y-m-d')]] as $label => $range)
                <a href="{{ route('reports.sales', ['start' => $range[0], 'end' => $range[1]]) }}"
                   class="px-2.5 py-1.5 text-xs rounded-lg bg-slate-100 hover:bg-blue-50 hover:text-blue-700 border border-slate-200 transition font-medium">
                    {{ $label }}
                </a>
                @endforeach
            </div>
        </form>
    </div>

    {{-- Summary Cards --}}
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
        <div class="bg-white rounded-2xl border border-slate-200 p-4 shadow-sm">
            <div class="text-xs font-semibold text-slate-500 mb-2">TOTAL TRANSAKSI</div>
            <div class="text-3xl font-black text-slate-800">{{ $summary->total_trx ?? 0 }}</div>
        </div>
        <div class="bg-white rounded-2xl border border-slate-200 p-4 shadow-sm">
            <div class="text-xs font-semibold text-slate-500 mb-2">TOTAL PENJUALAN</div>
            <div class="text-xl font-black text-emerald-600">Rp {{ number_format($summary->total_sales ?? 0, 0, ',', '.') }}</div>
        </div>
        <div class="bg-white rounded-2xl border border-slate-200 p-4 shadow-sm">
            <div class="text-xs font-semibold text-slate-500 mb-2">RATA-RATA TRANSAKSI</div>
            <div class="text-xl font-black text-blue-600">Rp {{ number_format($summary->avg_transaction ?? 0, 0, ',', '.') }}</div>
        </div>
        <div class="bg-white rounded-2xl border border-slate-200 p-4 shadow-sm">
            <div class="text-xs font-semibold text-slate-500 mb-2">TOTAL DISKON</div>
            <div class="text-xl font-black text-amber-600">Rp {{ number_format($summary->total_discount ?? 0, 0, ',', '.') }}</div>
        </div>
    </div>

    {{-- Payment method split --}}
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-5">
        <div class="bg-white rounded-2xl border border-slate-200 p-5 shadow-sm">
            <h3 class="font-bold text-slate-700 mb-4">💳 Metode Pembayaran</h3>
            <div class="space-y-3">
                @foreach(['cash' => ['💵 Tunai', 'emerald'], 'transfer' => ['🏦 Transfer', 'blue'], 'qris' => ['📱 QRIS', 'purple']] as $key => [$label, $color])
                @php $val = $summary->{"${key}_sales"} ?? 0; $total = $summary->total_sales ?: 1; $pct = round($val/$total*100); @endphp
                <div>
                    <div class="flex justify-between text-sm mb-1">
                        <span class="text-slate-600">{{ $label }}</span>
                        <span class="font-bold text-slate-800">Rp {{ number_format($val, 0, ',', '.') }}</span>
                    </div>
                    <div class="h-2 bg-slate-100 rounded-full overflow-hidden">
                        <div class="h-full bg-{{ $color }}-500 rounded-full transition-all" style="width: {{ $pct }}%"></div>
                    </div>
                    <div class="text-xs text-slate-400 mt-0.5">{{ $pct }}%</div>
                </div>
                @endforeach
            </div>
        </div>

        {{-- Produk Terlaris --}}
        <div class="lg:col-span-2 bg-white rounded-2xl border border-slate-200 p-5 shadow-sm">
            <h3 class="font-bold text-slate-700 mb-4">🏆 Produk Terlaris</h3>
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="text-xs text-slate-500 border-b border-slate-100">
                            <th class="text-left pb-2">#</th>
                            <th class="text-left pb-2">Produk</th>
                            <th class="text-right pb-2">Qty Terjual</th>
                            <th class="text-right pb-2">Revenue</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100">
                        @forelse($topProducts as $i => $p)
                        <tr>
                            <td class="py-2 text-slate-400 text-xs">{{ $i+1 }}</td>
                            <td class="py-2 font-medium text-slate-800">{{ $p->product_name }}</td>
                            <td class="py-2 text-right font-bold text-blue-600">{{ $p->qty_sold }}</td>
                            <td class="py-2 text-right text-slate-700">Rp {{ number_format($p->total_revenue, 0, ',', '.') }}</td>
                        </tr>
                        @empty
                        <tr><td colspan="4" class="py-8 text-center text-slate-400">Tidak ada data</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    {{-- Grafik Harian --}}
    @if($dailyData->count() > 0)
    <div class="bg-white rounded-2xl border border-slate-200 p-5 shadow-sm">
        <h3 class="font-bold text-slate-700 mb-4">📊 Grafik Penjualan Harian</h3>
        <div class="h-56">
            <canvas id="dailyChart"></canvas>
        </div>
    </div>
    @endif

    {{-- Tabel Transaksi --}}
    <div class="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
        <div class="px-5 py-4 border-b border-slate-200 flex items-center justify-between">
            <h3 class="font-bold text-slate-800">Daftar Transaksi</h3>
            <span class="text-xs text-slate-500">{{ $transactions->total() }} transaksi</span>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead class="bg-slate-50">
                    <tr class="text-xs text-slate-500">
                        <th class="text-left px-4 py-3 font-semibold">No. Invoice</th>
                        <th class="text-left px-4 py-3 font-semibold">Tanggal</th>
                        <th class="text-left px-4 py-3 font-semibold">Kasir</th>
                        <th class="text-left px-4 py-3 font-semibold">Pelanggan</th>
                        <th class="text-center px-4 py-3 font-semibold">Item</th>
                        <th class="text-center px-4 py-3 font-semibold">Metode</th>
                        <th class="text-right px-4 py-3 font-semibold">Total</th>
                        <th class="text-center px-4 py-3 font-semibold">Struk</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse($transactions as $trx)
                    <tr class="hover:bg-slate-50 transition">
                        <td class="px-4 py-3 font-mono text-xs font-semibold text-blue-600">{{ $trx->invoice_number }}</td>
                        <td class="px-4 py-3 text-slate-600">{{ $trx->transaction_date->format('d/m/Y H:i') }}</td>
                        <td class="px-4 py-3">{{ $trx->user->name }}</td>
                        <td class="px-4 py-3 text-slate-600">{{ $trx->customer_name ?? 'Umum' }}</td>
                        <td class="px-4 py-3 text-center text-slate-600">{{ $trx->items->count() }}</td>
                        <td class="px-4 py-3 text-center">
                            <span class="px-2 py-0.5 rounded-full text-xs font-semibold
                                {{ $trx->payment_method === 'cash' ? 'bg-emerald-100 text-emerald-700' :
                                   ($trx->payment_method === 'qris' ? 'bg-purple-100 text-purple-700' : 'bg-blue-100 text-blue-700') }}">
                                {{ strtoupper($trx->payment_method) }}
                            </span>
                        </td>
                        <td class="px-4 py-3 text-right font-bold text-slate-800">Rp {{ number_format($trx->grand_total, 0, ',', '.') }}</td>
                        <td class="px-4 py-3 text-center">
                            <button onclick="showDetail({{ $trx->id }})"
                               class="text-xs px-2 py-1 bg-slate-100 hover:bg-slate-200 text-slate-600 rounded-lg transition">🖨️</button>
                        </td>
                    </tr>
                    @empty
                    <tr><td colspan="8" class="px-4 py-12 text-center text-slate-400">Tidak ada transaksi pada periode ini</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="px-4 py-3 border-t border-slate-200">
            {{ $transactions->withQueryString()->links() }}
        </div>
    </div>
</div>

{{-- Hidden Iframe for Printing --}}
<iframe id="printFrame" style="display:none;"></iframe>

@push('scripts')
{{-- Modal Detail --}}
<div id="detailModal" class="fixed inset-0 z-[100] flex items-center justify-center p-4 hidden bg-slate-900/60 backdrop-blur-sm">
    <div class="bg-white rounded-3xl shadow-2xl w-full max-w-lg overflow-hidden scale-in">
        <div class="px-6 py-4 border-b border-slate-100 flex items-center justify-between bg-slate-50/50">
            <h3 class="font-black text-slate-800 uppercase tracking-tighter">Detail Transaksi</h3>
            <button onclick="closeDetail()" class="text-slate-400 hover:text-slate-600 text-xl font-bold">✕</button>
        </div>
        <div class="p-6 space-y-4" id="detailContent">
            <div class="flex justify-center py-10">
                <div class="w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full animate-spin"></div>
            </div>
        </div>
        <div class="px-6 py-4 bg-slate-50 border-t border-slate-100 flex gap-3">
            <button onclick="closeDetail()" class="flex-1 py-3 bg-white border border-slate-200 text-slate-600 font-bold rounded-2xl text-xs uppercase tracking-widest hover:bg-slate-50 transition">Tutup</button>
            <button id="printBtn" onclick="printTransaction()" class="flex-1 py-3 bg-blue-600 text-white font-bold rounded-2xl text-xs uppercase tracking-widest shadow-xl shadow-blue-600/20 text-center">🖨️ Cetak Struk</button>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const rp = n => 'Rp ' + parseFloat(n||0).toLocaleString('id-ID');
let currentTrxId = null;

async function showDetail(id) {
    const modal = document.getElementById('detailModal');
    const content = document.getElementById('detailContent');
    const printBtn = document.getElementById('printBtn');
    
    currentTrxId = id;
    modal.classList.remove('hidden');
    content.innerHTML = '<div class="flex justify-center py-10"><div class="w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full animate-spin"></div></div>';
    
    try {
        const res = await fetch(`/reports/transaction-detail/${id}`);
        const data = await res.json();
        
        let itemsHtml = '';
        data.items.forEach(item => {
            itemsHtml += `
                <div class="flex justify-between items-start py-2 border-b border-slate-50">
                    <div class="flex-1">
                        <div class="text-sm font-bold text-slate-800">${item.product_name}</div>
                        <div class="text-xs text-slate-500">${item.quantity} x ${rp(item.unit_price)}</div>
                    </div>
                    <div class="text-sm font-black text-slate-700">${rp(item.subtotal)}</div>
                </div>
            `;
        });

        content.innerHTML = `
            <div class="space-y-4">
                <div class="flex justify-between items-center bg-blue-50 p-3 rounded-2xl border border-blue-100">
                    <div>
                        <div class="text-[10px] font-bold text-blue-400 uppercase tracking-widest">Nomor Invoice</div>
                        <div class="text-sm font-black text-blue-700">${data.invoice_number}</div>
                    </div>
                    <div class="text-right">
                        <div class="text-[10px] font-bold text-blue-400 uppercase tracking-widest">Metode</div>
                        <div class="text-xs font-black text-blue-700">${data.payment_method.toUpperCase()}</div>
                    </div>
                </div>

                <div class="max-h-48 overflow-y-auto pr-1">
                    ${itemsHtml}
                </div>

                <div class="space-y-1 bg-slate-50 p-4 rounded-2xl border border-slate-100">
                    <div class="flex justify-between text-xs">
                        <span class="text-slate-500">Subtotal</span>
                        <span class="font-bold text-slate-700">${rp(data.subtotal)}</span>
                    </div>
                    ${data.discount_amount > 0 ? `
                    <div class="flex justify-between text-xs">
                        <span class="text-slate-500">Diskon</span>
                        <span class="font-bold text-red-500">-${rp(data.discount_amount)}</span>
                    </div>` : ''}
                    ${data.tax_amount > 0 ? `
                    <div class="flex justify-between text-xs">
                        <span class="text-slate-500">Pajak (${data.tax_percent}%)</span>
                        <span class="font-bold text-slate-700">${rp(data.tax_amount)}</span>
                    </div>` : ''}
                    <div class="flex justify-between items-center pt-2 border-t border-slate-200 mt-2">
                        <span class="text-sm font-black text-slate-800">GRAND TOTAL</span>
                        <span class="text-lg font-black text-blue-600">${rp(data.grand_total)}</span>
                    </div>
                </div>
            </div>
        `;
        
    } catch (e) {
        console.error(e);
        content.innerHTML = '<div class="text-center py-10"><span class="text-3xl block mb-2">❌</span><p class="text-red-500 font-bold">Gagal memuat detail transaksi.</p></div>';
    }
}

function printTransaction() {
    if (!currentTrxId) return;
    const frame = document.getElementById('printFrame');
    const btn = document.getElementById('printBtn');
    
    const originalText = btn.innerHTML;
    btn.disabled = true;
    btn.innerHTML = '⏳ Menyiapkan...';
    
    frame.src = `/pos/receipt/${currentTrxId}`;
    
    frame.onload = function() {
        setTimeout(() => {
            btn.disabled = false;
            btn.innerHTML = originalText;
            try {
                // Focus dan print dari contentWindow
                frame.contentWindow.focus();
                frame.contentWindow.print();
            } catch (e) {
                console.error("Iframe print error:", e);
                // Fallback jika iframe print diblokir browser
                window.open(frame.src, '_blank');
            }
        }, 500);
    };
}

function closeDetail() {
    document.getElementById('detailModal').classList.add('hidden');
    currentTrxId = null;
    document.getElementById('printFrame').src = 'about:blank';
}
@if($dailyData->count() > 0)
new Chart(document.getElementById('dailyChart'), {
    type: 'line',
    data: {
        labels: @json($dailyData->pluck('date')).map(d => new Date(d).toLocaleDateString('id-ID',{day:'numeric',month:'short'})),
        datasets: [{
            label: 'Penjualan',
            data: @json($dailyData->pluck('sales')),
            borderColor: '#3b82f6', backgroundColor: 'rgba(59,130,246,0.1)',
            borderWidth: 2.5, pointRadius: 4, fill: true, tension: 0.4,
        }]
    },
    options: {
        responsive: true, maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: {
            y: {
                beginAtZero: true,
                ticks: { callback: v => 'Rp' + (v>=1000000 ? (v/1000000).toFixed(1)+'jt' : (v/1000).toFixed(0)+'rb'), font:{size:10} },
                grid: { color: 'rgba(0,0,0,0.04)' }
            },
            x: { grid: { display: false }, ticks: { font: { size:10 } } }
        }
    }
});
@endif
</script>
@endpush
@endsection