@extends('admin.layout')

@section('title', 'Invoice ' . $invoice->invoice_number)

@section('content')
<style>
    .modern-invoice {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        min-height: 100vh;
        padding: 20px 0;
    }
    
    .invoice-card {
        background: white;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        border: none;
    }
    
    .invoice-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 30px;
        position: relative;
    }
    
    .invoice-header::after {
        content: '';
        position: absolute;
        bottom: -15px;
        left: 0;
        right: 0;
        height: 15px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);
    }
    
    .invoice-actions {
        gap: 10px;
    }
    
    .btn-modern {
        border-radius: 25px;
        padding: 8px 20px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        transition: all 0.3s ease;
        border: none;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }
    
    .btn-modern:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    }
    
    .btn-download {
        background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
        color: white;
    }
    
    .btn-preview {
        background: linear-gradient(135deg, #17a2b8 0%, #007bff 100%);
        color: white;
    }
    
    .invoice-preview {
        max-width: 900px;
        margin: 0 auto;
        background: white;
        padding: 40px;
        border-radius: 10px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
        position: relative;
    }
    
    .invoice-watermark {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(-45deg);
        font-size: 80px;
        color: rgba(102, 126, 234, 0.03);
        font-weight: bold;
        z-index: 0;
        pointer-events: none;
    }
    
    .invoice-content {
        position: relative;
        z-index: 1;
    }
    
    .invoice-top-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        margin: -40px -40px 30px -40px;
        padding: 25px 40px;
        color: white;
        border-radius: 10px 10px 0 0;
    }
    
    .hotel-logo-modern {
        max-width: 120px;
        max-height: 90px;
        object-fit: contain;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.1);
        padding: 10px;
        margin-bottom: 15px;
    }
    
    .hotel-name-modern {
        font-size: 24px;
        font-weight: 300;
        margin-bottom: 8px;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }
    
    .invoice-title-modern {
        font-size: 36px;
        font-weight: 100;
        letter-spacing: 2px;
        margin-bottom: 10px;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }
    
    .invoice-number-modern {
        font-size: 16px;
        font-weight: 500;
        opacity: 0.9;
    }
    
    .section-card {
        background: #f8f9fa;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 25px;
        border-left: 4px solid #667eea;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
    }
    
    .section-title-modern {
        color: #667eea;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 15px;
        font-size: 14px;
    }
    
    .table-modern {
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        border: none;
    }
    
    .table-modern thead th {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
        padding: 15px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    .table-modern tbody td {
        padding: 15px;
        border: none;
        border-bottom: 1px solid #e9ecef;
        vertical-align: middle;
    }
    
    .table-modern tbody tr:nth-child(even) {
        background-color: #f8f9fa;
    }
    
    .table-modern tbody tr:hover {
        background-color: #e3f2fd;
        transform: scale(1.01);
        transition: all 0.2s ease;
    }
    
    .total-section-modern {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        border-radius: 10px;
        padding: 25px;
        box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
    }
    
    .total-row-modern {
        display: flex;
        justify-content: space-between;
        padding: 8px 0;
        border-bottom: 1px solid #dee2e6;
    }
    
    .grand-total-modern {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 20px;
        margin: 20px -25px -25px -25px;
        border-radius: 0 0 10px 10px;
        font-size: 18px;
        font-weight: 600;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    }
    
    .notes-modern {
        background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
        border-radius: 10px;
        padding: 20px;
        border-left: 4px solid #667eea;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
    }
    
    .status-badge-modern {
        padding: 8px 16px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }
    
    .status-draft { background: linear-gradient(135deg, #ffc107 0%, #ff8f00 100%); color: white; }
    .status-sent { background: linear-gradient(135deg, #17a2b8 0%, #007bff 100%); color: white; }
    .status-paid { background: linear-gradient(135deg, #28a745 0%, #20c997 100%); color: white; }
    .status-cancelled { background: linear-gradient(135deg, #dc3545 0%, #e74c3c 100%); color: white; }
    
    .status-buttons {
        background: white;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
        margin-top: 30px;
    }
    
    .btn-status {
        border-radius: 20px;
        padding: 10px 20px;
        margin: 5px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        transition: all 0.3s ease;
        border: 2px solid;
    }
    
    .btn-status:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }
</style>

<div class="modern-invoice">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card invoice-card">
                    <div class="card-header invoice-header">
                        <div class="d-flex justify-content-between align-items-center">
                            <h4 class="mb-0" style="font-weight: 300; font-size: 28px;">Invoice {{ $invoice->invoice_number }}</h4>
                            <div class="invoice-actions d-flex">
                                <a href="{{ route('admin.invoices.download', $invoice) }}" class="btn btn-modern btn-download">
                                    <i class="fas fa-download me-2"></i> Download PDF
                                </a>
                                <a href="{{ route('admin.invoices.preview', $invoice) }}" class="btn btn-modern btn-preview" target="_blank">
                                    <i class="fas fa-eye me-2"></i> Preview PDF
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="card-body" style="padding: 40px;">
                        <!-- Invoice Preview -->
                        <div class="invoice-preview">
                            <div class="invoice-watermark">{{ strtoupper($invoice->hotel_name) }}</div>
                            
                            <div class="invoice-content">
                                <!-- Header -->
                                <div class="invoice-top-header">
                                    <div class="d-flex justify-content-between align-items-start">
                                        <div>
                                            @if($settings && $settings->hotel_logo)
                                                @if($settings->hotel_logo && Storage::disk('public')->exists($settings->hotel_logo))
                                                    <img src="{{ asset('storage/' . $settings->hotel_logo) }}" alt="Hotel Logo" class="hotel-logo-modern">
                                                @else
                                                    <div class="hotel-logo-placeholder" style="width: 120px; height: 90px; background: rgba(255, 255, 255, 0.1); border: 2px dashed rgba(255, 255, 255, 0.3); display: flex; align-items: center; justify-content: center; font-size: 14px; color: rgba(255, 255, 255, 0.8); text-align: center; margin-bottom: 15px; border-radius: 10px;">
                                                        LOGO<br>HOTEL
                                                    </div>
                                                @endif
                                            @endif
                                            <div class="hotel-name-modern">{{ $invoice->hotel_name }}</div>
                                            <div style="opacity: 0.9; font-size: 14px;">
                                                @if($settings)
                                                    <div>{{ $settings->hotel_address }}</div>
                                                    <div>{{ $settings->hotel_phone }} | {{ $settings->hotel_email }}</div>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="text-end">
                                            <h1 class="invoice-title-modern">INVOICE</h1>
                                            <div class="invoice-number-modern"># {{ $invoice->invoice_number }}</div>
                                            <div style="opacity: 0.8; font-size: 14px; margin-top: 5px;">{{ $invoice->created_at->format('d F Y') }}</div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Billing Section -->
                                <div class="row mb-4">
                                    <div class="col-md-6">
                                        <div class="section-card">
                                            <h6 class="section-title-modern">Bill To:</h6>
                                            <div class="fw-bold mb-2" style="font-size: 16px;">{{ $invoice->guest_name }}</div>
                                            <div class="mb-1">{{ $invoice->guest_email }}</div>
                                            @if($invoice->guest_phone)
                                                <div>{{ $invoice->guest_phone }}</div>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="section-card">
                                            <h6 class="section-title-modern">Booking Details:</h6>
                                            <div class="mb-2"><strong>Booking ID:</strong> {{ $invoice->booking->booking_code ?? 'N/A' }}</div>
                                            <div class="mb-2"><strong>Check-in:</strong> {{ $invoice->check_in_date->format('d/m/Y') }}</div>
                                            <div class="mb-2"><strong>Check-out:</strong> {{ $invoice->check_out_date->format('d/m/Y') }}</div>
                                            <div class="mb-3"><strong>Duration:</strong> {{ $invoice->nights }} {{ $invoice->nights > 1 ? 'nights' : 'night' }}</div>
                                            <div>
                                                @php
                                                    $statusClass = match($invoice->status ?? 'draft') {
                                                        'draft' => 'status-draft',
                                                        'sent' => 'status-sent',
                                                        'paid' => 'status-paid',
                                                        'cancelled' => 'status-cancelled',
                                                        default => 'status-draft'
                                                    };
                                                @endphp
                                                <span class="status-badge-modern {{ $statusClass }}">{{ ucfirst($invoice->status ?? 'Draft') }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Details Table -->
                                <div class="table-responsive mb-4">
                                    <table class="table table-modern">
                                        <thead>
                                            <tr>
                                                <th>Description</th>
                                                <th>Room</th>
                                                <th>Nights</th>
                                                <th>Rate</th>
                                                <th class="text-end">Amount</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td><strong>{{ $invoice->room_type }} Room</strong></td>
                                                <td>{{ $invoice->room_number }}</td>
                                                <td>{{ $invoice->nights }}</td>
                                                <td>Rp {{ number_format($invoice->room_rate, 0, ',', '.') }}</td>
                                                <td class="text-end fw-bold" style="color: #28a745;">Rp {{ number_format($invoice->subtotal, 0, ',', '.') }}</td>
                                            </tr>
                                            @if($invoice->booking && $invoice->booking->roomServices && $invoice->booking->roomServices->count() > 0)
                                                @foreach($invoice->booking->roomServices as $service)
                                                <tr>
                                                    <td>{{ $service->service_name }}</td>
                                                    <td>-</td>
                                                    <td>{{ $service->quantity }}</td>
                                                    <td>Rp {{ number_format($service->unit_price, 0, ',', '.') }}</td>
                                                    <td class="text-end fw-bold" style="color: #28a745;">Rp {{ number_format($service->total_price, 0, ',', '.') }}</td>
                                                </tr>
                                                @endforeach
                                            @endif
                                        </tbody>
                                    </table>
                                </div>
                                
                                <!-- Total Section -->
                                <div class="row">
                                    <div class="col-md-6"></div>
                                    <div class="col-md-6">
                                        <div class="total-section-modern">
                                            <div class="total-row-modern">
                                                <span>Room Subtotal:</span>
                                                <span class="fw-bold">Rp {{ number_format($invoice->subtotal, 0, ',', '.') }}</span>
                                            </div>
                                            @if($invoice->services_total > 0)
                                            <div class="total-row-modern">
                                                <span>Services Total:</span>
                                                <span class="fw-bold">Rp {{ number_format($invoice->services_total, 0, ',', '.') }}</span>
                                            </div>
                                            @endif
                                            @if($invoice->tax_amount > 0)
                                            <div class="total-row-modern">
                                                <span>Tax:</span>
                                                <span class="fw-bold">Rp {{ number_format($invoice->tax_amount, 0, ',', '.') }}</span>
                                            </div>
                                            @endif
                                            <div class="grand-total-modern d-flex justify-content-between">
                                                <span>TOTAL:</span>
                                                <span>Rp {{ number_format($invoice->total_amount, 0, ',', '.') }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Notes -->
                                @if($invoice->notes)
                                <div class="mt-4">
                                    <div class="notes-modern">
                                        <h6 class="section-title-modern mb-3">Special Requests / Notes:</h6>
                                        <div style="font-size: 14px; line-height: 1.6;">{{ $invoice->notes }}</div>
                                    </div>
                                </div>
                                @endif
                                
                                <!-- Footer -->
                                <div class="text-center mt-5 pt-4" style="border-top: 2px solid #e9ecef; color: #6c757d;">
                                    <div class="mb-2" style="font-size: 16px; font-weight: 600; color: #667eea;">Thank you for choosing {{ $invoice->hotel_name }}!</div>
                                    <div class="mb-1" style="font-size: 12px;">This is a computer-generated invoice and does not require a signature.</div>
                                    <div style="font-size: 12px;">Generated on {{ now()->format('d F Y, H:i') }} WIB</div>
                                    @if($settings && $settings->hotel_website)
                                        <div class="mt-2" style="font-size: 12px;">Visit us at: <strong>{{ $settings->hotel_website }}</strong></div>
                                    @endif
                                </div>
                            </div>
                        </div>
                        
                        <!-- Status Update -->
                        <div class="status-buttons text-center">
                            <h6 class="mb-3" style="color: #667eea; font-weight: 600;">Update Invoice Status</h6>
                            <div class="btn-group" role="group">
                                <button type="button" class="btn btn-status btn-outline-warning {{ $invoice->status === 'draft' ? 'active' : '' }}" onclick="updateStatus('draft')">
                                    <i class="fas fa-edit me-1"></i> Draft
                                </button>
                                <button type="button" class="btn btn-status btn-outline-info {{ $invoice->status === 'sent' ? 'active' : '' }}" onclick="updateStatus('sent')">
                                    <i class="fas fa-paper-plane me-1"></i> Sent
                                </button>
                                <button type="button" class="btn btn-status btn-outline-success {{ $invoice->status === 'paid' ? 'active' : '' }}" onclick="updateStatus('paid')">
                                    <i class="fas fa-check-circle me-1"></i> Paid
                                </button>
                                <button type="button" class="btn btn-status btn-outline-danger {{ $invoice->status === 'cancelled' ? 'active' : '' }}" onclick="updateStatus('cancelled')">
                                    <i class="fas fa-times-circle me-1"></i> Cancelled
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function updateStatus(status) {
    if (confirm('Are you sure you want to update the invoice status to ' + status + '?')) {
        fetch('{{ route("invoices.update-status", $invoice) }}', {
            method: 'PATCH',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({ status: status })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('Error updating status: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error updating status');
        });
    }
}
</script>
@endsection