@extends('layouts.app')

@section('title', 'Billing & Folios')
@section('nav_folio', 'bg-teal-50 text-teal-700 font-semibold')
@section('page_title', 'Billing & Folios')
@section('page_subtitle', 'Folio overview for active and recently checked-out reservations')

@section('content')

@if (session('success'))
<div class="mb-5 flex items-center gap-3 bg-teal-50 border-[0.5px] border-teal-200 rounded-xl px-5 py-3.5">
    <svg class="w-4 h-4 text-teal-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
    </svg>
    <p class="text-teal-700 text-sm font-medium">{{ session('success') }}</p>
</div>
@endif

@php
    $statusBadge = [
        'confirmed'   => 'bg-teal-50 text-teal-700 border-[0.5px] border-teal-200',
        'checked_in'  => 'bg-green-50 text-green-700 border-[0.5px] border-green-200',
        'checked_out' => 'bg-gray-50 text-gray-500 border-[0.5px] border-gray-200',
    ];
    $statusLabel = [
        'confirmed'   => 'Confirmed',
        'checked_in'  => 'In-House',
        'checked_out' => 'Checked Out',
    ];
@endphp

{{-- Stats --}}
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-5">
    <div class="bg-white border-[0.5px] border-gray-200 rounded-xl p-5">
        <p class="text-gray-400 text-xs font-semibold uppercase tracking-wider mb-2">Outstanding Balance</p>
        <p class="text-2xl font-black text-red-600">&#8369;{{ number_format($stats['outstanding_amount'], 0) }}</p>
        <p class="text-gray-400 text-xs mt-1">
            {{ $stats['outstanding_count'] }} account{{ $stats['outstanding_count'] !== 1 ? 's' : '' }} with balance due
            @if($hasFilters) <span class="text-gray-300">· filtered</span> @endif
        </p>
    </div>
    <div class="bg-white border-[0.5px] border-gray-200 rounded-xl p-5">
        <p class="text-gray-400 text-xs font-semibold uppercase tracking-wider mb-2">Settled Accounts</p>
        <p class="text-2xl font-black text-green-600">{{ $stats['settled_count'] }}</p>
        <p class="text-gray-400 text-xs mt-1">
            Fully paid — no balance
            @if($hasFilters) <span class="text-gray-300">· filtered</span> @endif
        </p>
    </div>
    <div class="bg-white border-[0.5px] border-gray-200 rounded-xl p-5">
        <p class="text-gray-400 text-xs font-semibold uppercase tracking-wider mb-2">Showing</p>
        <p class="text-2xl font-black text-gray-700">{{ $reservations->count() }}</p>
        <p class="text-gray-400 text-xs mt-1">
            {{ $hasFilters ? 'matching records' : 'confirmed, in-house & checked-out' }}
        </p>
    </div>
</div>

{{-- Search & Filter bar --}}
<div class="bg-white border-[0.5px] border-gray-200 rounded-xl mb-4">
    <form method="GET" action="{{ route('billing.index') }}" class="p-4">
        <div class="flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center">

            {{-- Search --}}
            <div class="relative w-full sm:flex-1 sm:min-w-48">
                <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-300 pointer-events-none"
                     fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                </svg>
                <input type="text" name="search" value="{{ $search }}"
                       placeholder="Search guest, booking no., room, phone…"
                       class="w-full pl-9 pr-3 py-2 text-sm border-[0.5px] border-gray-200 rounded-lg text-gray-700 placeholder-gray-300 focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
            </div>

            {{-- Status --}}
            <select name="status"
                    class="w-full sm:w-auto border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-600 focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400 bg-white">
                <option value="">All Statuses</option>
                <option value="checked_in"  {{ $status === 'checked_in'  ? 'selected' : '' }}>In-House</option>
                <option value="confirmed"   {{ $status === 'confirmed'   ? 'selected' : '' }}>Confirmed</option>
                <option value="checked_out" {{ $status === 'checked_out' ? 'selected' : '' }}>Checked Out</option>
            </select>

            {{-- Balance --}}
            <select name="balance"
                    class="w-full sm:w-auto border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-600 focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400 bg-white">
                <option value="">Any Balance</option>
                <option value="due"     {{ $balance === 'due'     ? 'selected' : '' }}>Balance Due</option>
                <option value="settled" {{ $balance === 'settled' ? 'selected' : '' }}>Settled</option>
            </select>

            {{-- Check-out from --}}
            <div class="flex items-center gap-2 w-full sm:w-auto">
                <label class="text-xs text-gray-400 whitespace-nowrap">Check-out</label>
                <input type="date" name="from" value="{{ $from }}"
                       class="border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-600 focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                <span class="text-gray-300 text-xs">to</span>
                <input type="date" name="to" value="{{ $to }}"
                       class="border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-600 focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
            </div>

            {{-- Apply --}}
            <button type="submit"
                    class="w-full sm:w-auto px-4 py-2 text-sm font-medium bg-teal-600 hover:bg-teal-700 text-white rounded-lg transition-colors whitespace-nowrap">
                Apply
            </button>

            {{-- Clear --}}
            @if($hasFilters)
            <a href="{{ route('billing.index') }}"
               class="px-3 py-2 text-sm text-gray-400 hover:text-gray-600 transition-colors whitespace-nowrap flex items-center gap-1">
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
                Clear
            </a>
            @endif

        </div>

        {{-- Active filter pills --}}
        @if($hasFilters)
        <div class="flex items-center gap-2 mt-3 pt-3 border-t border-gray-100 flex-wrap">
            <span class="text-xs text-gray-400">Active filters:</span>
            @if($search !== '')
            <span class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium bg-teal-50 text-teal-700 border-[0.5px] border-teal-200 rounded-full">
                Search: "{{ $search }}"
            </span>
            @endif
            @if($status !== '')
            <span class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium bg-teal-50 text-teal-700 border-[0.5px] border-teal-200 rounded-full">
                Status: {{ $statusLabel[$status] ?? $status }}
            </span>
            @endif
            @if($balance !== '')
            <span class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium bg-teal-50 text-teal-700 border-[0.5px] border-teal-200 rounded-full">
                Balance: {{ $balance === 'due' ? 'Balance Due' : 'Settled' }}
            </span>
            @endif
            @if($from !== '')
            <span class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium bg-teal-50 text-teal-700 border-[0.5px] border-teal-200 rounded-full">
                From: {{ \Carbon\Carbon::parse($from)->format('M j, Y') }}
            </span>
            @endif
            @if($to !== '')
            <span class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium bg-teal-50 text-teal-700 border-[0.5px] border-teal-200 rounded-full">
                To: {{ \Carbon\Carbon::parse($to)->format('M j, Y') }}
            </span>
            @endif
        </div>
        @endif

    </form>
</div>

{{-- Table --}}
<div class="bg-white border-[0.5px] border-gray-200 rounded-xl overflow-hidden">
    <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="text-left px-5 py-3 text-xs font-semibold text-gray-400 uppercase tracking-wider">Guest</th>
                <th class="text-left px-3 py-3 text-xs font-semibold text-gray-400 uppercase tracking-wider">Room</th>
                <th class="hidden md:table-cell text-left px-3 py-3 text-xs font-semibold text-gray-400 uppercase tracking-wider">Check-out</th>
                <th class="hidden md:table-cell text-left px-3 py-3 text-xs font-semibold text-gray-400 uppercase tracking-wider">Status</th>
                <th class="text-right px-3 py-3 text-xs font-semibold text-gray-400 uppercase tracking-wider">Charges</th>
                <th class="text-right px-3 py-3 text-xs font-semibold text-gray-400 uppercase tracking-wider">Paid</th>
                <th class="text-right px-3 py-3 text-xs font-semibold text-gray-400 uppercase tracking-wider">Balance</th>
                <th class="px-5 py-3"></th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-50">
            @forelse($reservations as $res)
            @php
                $resBalance     = $res->balanceDue();
                $resTotalPaid   = $res->totalPaid();
                $resTotalCharge = $res->totalCharges();
                $isSettled      = $resBalance <= 0;
            @endphp
            <tr class="hover:bg-gray-50/50 transition-colors">
                <td class="px-5 py-3.5">
                    <p class="text-gray-800 font-medium">{{ $res->guest_name }}</p>
                    <p class="text-gray-400 text-xs font-mono mt-0.5">{{ $res->booking_no }}</p>
                </td>
                <td class="px-3 py-3.5">
                    <p class="text-gray-700">{{ $res->room_no }}</p>
                    <p class="text-gray-400 text-xs">{{ $res->room_type }}</p>
                </td>
                <td class="hidden md:table-cell px-3 py-3.5">
                    <p class="text-gray-700">{{ $res->check_out->format('M j, Y') }}</p>
                    <p class="text-gray-400 text-xs">{{ $res->nights }} night{{ $res->nights > 1 ? 's' : '' }}</p>
                </td>
                <td class="hidden md:table-cell px-3 py-3.5">
                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold
                                 {{ $statusBadge[$res->status] ?? 'bg-gray-50 text-gray-400 border-[0.5px] border-gray-200' }}">
                        {{ $statusLabel[$res->status] ?? $res->status }}
                    </span>
                </td>
                <td class="px-3 py-3.5 text-right">
                    <p class="text-gray-700 font-medium">&#8369;{{ number_format($resTotalCharge, 2) }}</p>
                    @if($res->folioCharges->isNotEmpty())
                    <p class="text-gray-400 text-xs">incl. {{ $res->folioCharges->count() }} extra{{ $res->folioCharges->count() > 1 ? 's' : '' }}</p>
                    @endif
                </td>
                <td class="px-3 py-3.5 text-right">
                    <p class="text-teal-700 font-medium">&#8369;{{ number_format($resTotalPaid, 2) }}</p>
                </td>
                <td class="px-3 py-3.5 text-right">
                    @if($isSettled)
                    <span class="inline-flex items-center gap-1 text-xs font-semibold text-green-600">
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                        </svg>
                        Settled
                    </span>
                    @else
                    <p class="text-red-600 font-bold">&#8369;{{ number_format($resBalance, 2) }}</p>
                    @endif
                </td>
                <td class="px-5 py-3.5 text-right">
                    <a href="{{ route('reservations.folio', $res->id) }}"
                       class="text-xs font-semibold text-teal-600 hover:text-teal-700 transition-colors whitespace-nowrap">
                        View Folio →
                    </a>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="8" class="px-5 py-14 text-center">
                    <svg class="w-8 h-8 text-gray-200 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                              d="M9 14l6-6m-5.5.5h.01m4.99 5h.01M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16l3.5-2 3.5 2 3.5-2 3.5 2z"/>
                    </svg>
                    <p class="text-gray-400 text-sm">No billing records found.</p>
                    @if($hasFilters)
                    <a href="{{ route('billing.index') }}" class="text-xs text-teal-600 hover:text-teal-700 mt-1 inline-block">
                        Clear filters to see all records
                    </a>
                    @endif
                </td>
            </tr>
            @endforelse
        </tbody>
    </table>
    </div>
    @if($reservations->hasPages())
    <div class="px-5 py-3 border-t border-gray-100">
        {{ $reservations->links() }}
    </div>
    @endif
</div>

@endsection