@extends('layouts.app')
@section('title', 'Receipt '.$receipt->receipt_number)
@section('page-title', 'Receipt')

@push('styles')
<style>
    @media print {
        body * { visibility: hidden; }
        #receipt-print, #receipt-print * { visibility: visible; }
        #receipt-print { position: absolute; top: 0; left: 0; width: 100%; }
        .no-print { display: none !important; }
        .topbar, .sidebar, .sidebar-overlay, .main-content > *:not(#receipt-wrapper) { display: none !important; }
        .main-content { margin: 0; padding: 0; }
    }
</style>
@endpush

@section('content')
<div class="page-header no-print">
    <div>
        <div class="breadcrumb"><a href="{{ route('hotel.dashboard') }}">Dashboard</a><span>/</span><a href="{{ route('hotel.receipts.index') }}">Receipts</a><span>/</span>{{ $receipt->receipt_number }}</div>
        <h1>Receipt</h1>
    </div>
    <div style="display:flex;gap:8px;">
        <button onclick="printReceipt()" class="btn btn-primary"><i class="fas fa-print"></i> Print Receipt</button>
        @if($receipt->guest_phone && $whatsappLink)
        <a href="{{ $whatsappLink }}" target="_blank" onclick="markWhatsapp()" class="btn btn-success" id="waBtn">
            <i class="fab fa-whatsapp"></i>
            Send via WhatsApp
            @if($receipt->whatsapp_sent) <span style="font-size:11px;opacity:.8;">(Sent {{ $receipt->whatsapp_sent_at->format('d M H:i') }})</span> @endif
        </a>
        @endif
        <a href="{{ route('hotel.bookings.show', $receipt->booking) }}" class="btn btn-outline"><i class="fas fa-arrow-left"></i> Back to Booking</a>
    </div>
</div>

<div id="receipt-wrapper" style="max-width:680px;margin:0 auto;">
<div id="receipt-print" style="background:#fff;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,.08);position:relative;">

    <!-- Watermark -->
    <div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-35deg);font-size:96px;font-weight:900;color:rgba(0,0,0,.04);letter-spacing:8px;pointer-events:none;z-index:0;white-space:nowrap;user-select:none;">RECEIPT</div>

    <!-- Header -->
    <div style="background:linear-gradient(135deg,#0f172a,#1e3a5f);color:#fff;padding:28px 32px;position:relative;z-index:1;">
        <div style="display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;">
            <div>
                @if($receipt->hotel->logo)
                    <img src="{{ asset('storage/'.$receipt->hotel->logo) }}" alt="{{ $receipt->hotel->name }}" style="height:48px;margin-bottom:10px;display:block;">
                @else
                    <div style="width:48px;height:48px;background:#1a56db;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:10px;">
                        <i class="fas fa-hotel" style="font-size:22px;"></i>
                    </div>
                @endif
                <div style="font-size:22px;font-weight:800;letter-spacing:-.3px;">{{ $receipt->hotel->name }}</div>
                @if($receipt->hotel->address)<div style="font-size:13px;opacity:.8;margin-top:4px;">{{ $receipt->hotel->address }}</div>@endif
                @if($receipt->hotel->city)<div style="font-size:13px;opacity:.7;">{{ $receipt->hotel->city }}, {{ $receipt->hotel->state }}</div>@endif
            </div>
            <div style="text-align:right;">
                <div style="font-size:11px;opacity:.6;text-transform:uppercase;letter-spacing:.1em;margin-bottom:4px;">Payment Receipt</div>
                <div style="font-size:22px;font-weight:800;letter-spacing:.5px;">{{ $receipt->receipt_number }}</div>
                <div style="font-size:12px;opacity:.7;margin-top:6px;">{{ $receipt->created_at->format('d M Y, H:i') }}</div>
            </div>
        </div>
    </div>

    <!-- Hotel Contact Bar -->
    <div style="background:#f8fafc;border-bottom:1px solid #e5e7eb;padding:10px 32px;display:flex;gap:20px;flex-wrap:wrap;font-size:12px;color:#6b7280;position:relative;z-index:1;">
        @if($receipt->hotel->phone)<span><i class="fas fa-phone" style="width:14px;"></i> {{ $receipt->hotel->phone }}</span>@endif
        @if($receipt->hotel->email)<span><i class="fas fa-envelope" style="width:14px;"></i> {{ $receipt->hotel->email }}</span>@endif
        @if($receipt->hotel->website)<span><i class="fas fa-globe" style="width:14px;"></i> {{ $receipt->hotel->website }}</span>@endif
    </div>

    <!-- Guest & Booking Info -->
    <div style="padding:24px 32px;display:grid;grid-template-columns:1fr 1fr;gap:24px;border-bottom:1px solid #e5e7eb;position:relative;z-index:1;">
        <div>
            <div style="font-size:11px;font-weight:700;color:#9ca3af;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;">Billed To</div>
            <div style="font-size:16px;font-weight:700;color:#111827;">{{ $receipt->guest_name }}</div>
            @if($receipt->guest_phone)<div style="font-size:13px;color:#6b7280;margin-top:2px;">{{ $receipt->guest_phone }}</div>@endif
            @if($receipt->booking->guest->email)<div style="font-size:13px;color:#6b7280;">{{ $receipt->booking->guest->email }}</div>@endif
        </div>
        <div>
            <div style="font-size:11px;font-weight:700;color:#9ca3af;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;">Booking Details</div>
            <div style="font-size:13.5px;line-height:1.9;color:#374151;">
                <div><strong>Ref:</strong> {{ $receipt->booking->booking_reference }}</div>
                <div><strong>Room:</strong> {{ $receipt->booking->room->room_number }} — {{ $receipt->booking->room->roomType->name }}</div>
                <div><strong>Check-in:</strong> {{ $receipt->booking->check_in_date->format('d M Y') }}</div>
                <div><strong>Check-out:</strong> {{ $receipt->booking->check_out_date->format('d M Y') }}</div>
                <div><strong>Duration:</strong> {{ $receipt->booking->nights }} night{{ $receipt->booking->nights > 1?'s':'' }}</div>
            </div>
        </div>
    </div>

    <!-- Itemized Charges -->
    <div style="padding:24px 32px;border-bottom:1px solid #e5e7eb;position:relative;z-index:1;">
        <div style="font-size:11px;font-weight:700;color:#9ca3af;text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px;">Charges</div>
        <table style="width:100%;font-size:13.5px;border-collapse:collapse;">
            <thead>
                <tr style="border-bottom:1px solid #e5e7eb;">
                    <th style="text-align:left;padding:6px 0;font-size:11px;color:#6b7280;font-weight:700;text-transform:uppercase;">Description</th>
                    <th style="text-align:center;padding:6px 0;font-size:11px;color:#6b7280;font-weight:700;text-transform:uppercase;">Qty</th>
                    <th style="text-align:right;padding:6px 0;font-size:11px;color:#6b7280;font-weight:700;text-transform:uppercase;">Amount</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td style="padding:10px 0;color:#374151;">Room {{ $receipt->booking->room->room_number }} ({{ $receipt->booking->room->roomType->name }})</td>
                    <td style="text-align:center;color:#6b7280;">{{ $receipt->booking->nights }} night{{ $receipt->booking->nights > 1?'s':'' }}</td>
                    <td style="text-align:right;font-weight:600;">₦{{ number_format($receipt->booking->room->roomType->base_price * $receipt->booking->nights, 2) }}</td>
                </tr>
                @foreach($receipt->booking->extras as $extra)
                <tr>
                    <td style="padding:8px 0;color:#374151;">{{ $extra->item_name }}</td>
                    <td style="text-align:center;color:#6b7280;">{{ $extra->quantity }}</td>
                    <td style="text-align:right;">₦{{ number_format($extra->total, 2) }}</td>
                </tr>
                @endforeach
            </tbody>
            <tfoot>
                @if($receipt->invoice->discount > 0)
                <tr><td colspan="2" style="padding:8px 0;color:#059669;">Discount</td><td style="text-align:right;color:#059669;">-₦{{ number_format($receipt->invoice->discount, 2) }}</td></tr>
                @endif
                @if($receipt->invoice->tax > 0)
                <tr><td colspan="2" style="padding:8px 0;color:#6b7280;">Tax</td><td style="text-align:right;">₦{{ number_format($receipt->invoice->tax, 2) }}</td></tr>
                @endif
            </tfoot>
        </table>
    </div>

    <!-- Total -->
    <div style="padding:20px 32px;background:#f8fafc;border-bottom:1px solid #e5e7eb;display:flex;justify-content:space-between;align-items:center;position:relative;z-index:1;">
        <div>
            <div style="font-size:13px;color:#6b7280;margin-bottom:4px;">Payment Method</div>
            <div style="font-size:15px;font-weight:600;color:#374151;display:flex;align-items:center;gap:6px;">
                @if($receipt->payment_method==='cash') <i class="fas fa-money-bill-wave" style="color:#059669;"></i> Cash
                @elseif($receipt->payment_method==='transfer') <i class="fas fa-exchange-alt" style="color:#1a56db;"></i> Bank Transfer
                @elseif($receipt->payment_method==='pos') <i class="fas fa-credit-card" style="color:#7c3aed;"></i> POS
                @else <i class="fas fa-globe" style="color:#d97706;"></i> Online @endif
            </div>
        </div>
        <div style="text-align:right;">
            <div style="font-size:12px;color:#9ca3af;margin-bottom:2px;">Total Amount Paid</div>
            <div style="font-size:28px;font-weight:900;color:#111827;">₦{{ number_format($receipt->total_amount, 2) }}</div>
        </div>
    </div>

    <!-- Footer -->
    <div style="padding:20px 32px;text-align:center;position:relative;z-index:1;">
        <div style="font-size:14px;color:#374151;font-weight:500;margin-bottom:6px;">
            {{ \App\Models\PlatformSetting::get('receipt_footer_message', 'Thank you for your patronage. We look forward to seeing you again!') }}
        </div>
        @if(\App\Models\PlatformSetting::get('receipt_show_powered_by', '1'))
        <div style="font-size:11px;color:#d1d5db;margin-top:12px;">Powered by Hotel Management Board</div>
        @endif
    </div>

    <!-- Print Status -->
    @if($receipt->printed_at)
    <div style="background:#f0fdf4;border-top:1px solid #bbf7d0;padding:8px 32px;font-size:12px;color:#166534;display:flex;align-items:center;gap:6px;position:relative;z-index:1;">
        <i class="fas fa-check-circle"></i> Printed on {{ $receipt->printed_at->format('d M Y H:i') }} by {{ $receipt->issuedBy->name }}
    </div>
    @endif
    @if($receipt->whatsapp_sent)
    <div style="background:#f0fdf4;border-top:1px solid #bbf7d0;padding:8px 32px;font-size:12px;color:#166534;display:flex;align-items:center;gap:6px;position:relative;z-index:1;">
        <i class="fab fa-whatsapp"></i> WhatsApp sent on {{ $receipt->whatsapp_sent_at->format('d M Y H:i') }}
    </div>
    @endif
</div>
</div>

@push('scripts')
<script>
function printReceipt() {
    fetch('{{ route("hotel.receipts.print", $receipt) }}', {
        method: 'POST',
        headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Content-Type': 'application/json'}
    });
    window.print();
}

function markWhatsapp() {
    setTimeout(() => {
        fetch('{{ route("hotel.receipts.whatsapp", $receipt) }}', {
            method: 'POST',
            headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Content-Type': 'application/json'}
        }).then(r => r.json()).then(d => {
            if (d.success) {
                const btn = document.getElementById('waBtn');
                if (btn) btn.innerHTML = '<i class="fab fa-whatsapp"></i> Sent ✓ ' + d.sent_at;
            }
        });
    }, 1000);
}
</script>
@endpush
@endsection