@extends('layouts.app')

@section('title', 'Ancillary Revenue')
@section('nav_reports', 'bg-teal-50 text-teal-700 font-semibold')
@section('page_title', 'Reports')
@section('page_subtitle', 'Ancillary Revenue')

@section('content')

@include('reports._filter', [
    'active' => 'reports.ancillary', 'mode' => 'range', 'from' => $from, 'to' => $to,
    'title' => 'Ancillary / Folio Revenue by Category',
    'subtitle' => 'Folio charges dated ' . \Carbon\Carbon::parse($from)->format('M j') . ' – ' . \Carbon\Carbon::parse($to)->format('M j, Y'),
])

{{-- Summary tiles --}}
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-5">
    <div class="bg-white border-[0.5px] border-gray-200 rounded-xl px-5 py-4">
        <p class="text-gray-400 text-xs">Ancillary Revenue</p>
        <p class="text-teal-700 font-bold text-2xl mt-1">₱{{ number_format($ancillaryTotal, 2) }}</p>
        <p class="text-gray-400 text-xs mt-1">non-room folio charges</p>
    </div>
    <div class="bg-white border-[0.5px] border-gray-200 rounded-xl px-5 py-4">
        <p class="text-gray-400 text-xs">Share of Total</p>
        <p class="text-gray-800 font-bold text-2xl mt-1">{{ number_format($ancillaryShare, 1) }}%</p>
        <p class="text-gray-400 text-xs mt-1">of room + ancillary</p>
    </div>
    <div class="bg-white border-[0.5px] border-gray-200 rounded-xl px-5 py-4">
        <p class="text-gray-400 text-xs">Room Revenue</p>
        <p class="text-gray-800 font-bold text-2xl mt-1">₱{{ number_format($roomRevenue, 2) }}</p>
        <p class="text-gray-400 text-xs mt-1">check-ins in period</p>
    </div>
    <div class="bg-white border-[0.5px] border-gray-200 rounded-xl px-5 py-4">
        <p class="text-gray-400 text-xs">Posted from POS</p>
        <p class="text-gray-800 font-bold text-2xl mt-1">₱{{ number_format($fromPosTotal, 2) }}</p>
        <p class="text-gray-400 text-xs mt-1">rest posted manually</p>
    </div>
</div>

{{-- By category --}}
<div class="bg-white border-[0.5px] border-gray-200 rounded-xl overflow-hidden">
    <div class="px-5 py-4 border-b border-gray-100">
        <h2 class="text-sm font-semibold text-gray-700">Revenue by Category</h2>
        <p class="text-xs text-gray-400 mt-0.5">F&B, minibar, laundry, telephone, damage and other charges</p>
    </div>
    @if($byCategory->isEmpty())
    <p class="px-5 py-10 text-center text-gray-300 text-sm">No folio charges for this period.</p>
    @else
    <div class="overflow-x-auto">
        <table class="w-full text-sm min-w-[640px]">
            <thead>
                <tr class="border-b border-gray-100 bg-gray-50/50">
                    <th class="px-5 py-2.5 text-left text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Category</th>
                    <th class="px-4 py-2.5 text-right text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Charges</th>
                    <th class="px-4 py-2.5 text-right text-[10px] font-semibold text-gray-400 uppercase tracking-wider">POS / Manual</th>
                    <th class="px-5 py-2.5 text-left text-[10px] font-semibold text-gray-400 uppercase tracking-wider w-40">Share</th>
                    <th class="px-5 py-2.5 text-right text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Revenue</th>
                </tr>
            </thead>
            <tbody>
                @foreach($byCategory as $row)
                <tr class="{{ !$loop->last ? 'border-b border-gray-50' : '' }} hover:bg-gray-50/50 transition-colors">
                    <td class="px-5 py-3 font-medium text-gray-700">{{ $row['label'] }}</td>
                    <td class="px-4 py-3 text-right text-gray-600">{{ $row['count'] }}</td>
                    <td class="px-4 py-3 text-right text-gray-500 text-xs">{{ $row['from_pos'] }} / {{ $row['manual'] }}</td>
                    <td class="px-5 py-3">
                        <div class="flex items-center gap-2">
                            <div class="flex-1 bg-gray-100 rounded-full h-1.5">
                                <div class="bg-teal-500 h-1.5 rounded-full" style="width: {{ $row['share'] }}%"></div>
                            </div>
                            <span class="text-[10px] text-gray-500 w-8 text-right">{{ $row['share'] }}%</span>
                        </div>
                    </td>
                    <td class="px-5 py-3 text-right font-semibold text-gray-800">₱{{ number_format($row['revenue'], 2) }}</td>
                </tr>
                @endforeach
            </tbody>
            <tfoot>
                <tr class="border-t-2 border-gray-200 bg-gray-50/70">
                    <td class="px-5 py-3 text-xs font-bold text-gray-500 uppercase tracking-wider">Total Ancillary</td>
                    <td class="px-4 py-3 text-right font-bold text-gray-700">{{ $byCategory->sum('count') }}</td>
                    <td class="px-4 py-3"></td>
                    <td class="px-5 py-3"></td>
                    <td class="px-5 py-3 text-right font-bold text-teal-700">₱{{ number_format($ancillaryTotal, 2) }}</td>
                </tr>
            </tfoot>
        </table>
    </div>
    @endif
</div>

@endsection