@extends('layouts.app')

@section('title', 'Pesan Layanan Kamar - Hotel Management System')
@section('page-title', 'Pesan Layanan Kamar - ' . $booking->guest_name)

@section('page-actions')
<div class="btn-toolbar mb-2 mb-md-0">
    <a href="{{ route('bookings.show', $booking) }}" class="btn btn-secondary">
        <i class="fas fa-arrow-left me-2"></i>Kembali ke Detail Booking
    </a>
</div>
@endsection

@section('content')
<div class="row">
    <div class="col-12">
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">
                    <i class="fas fa-concierge-bell me-2"></i>Layanan Kamar
                </h6>
                <small class="text-muted">Kamar: {{ $booking->room->room_number }} - {{ $booking->room->room_type }}</small>
            </div>
            <div class="card-body">
                @if($services->count() > 0)
                    @foreach($services as $category => $categoryServices)
                    <div class="mb-4">
                        <h5 class="text-primary mb-3">
                            <i class="fas fa-concierge-bell me-2"></i>{{ $category }}
                        </h5>
                        <div class="row">
                            @foreach($categoryServices as $service)
                            <div class="col-md-6 col-lg-4 mb-3">
                                <div class="card h-100">
                                    <div class="card-body">
                                        <h6 class="card-title">{{ $service->name }}</h6>
                                        <p class="card-text text-muted small">{{ $service->description }}</p>
                                        <div class="d-flex justify-content-between align-items-center mb-3">
                                            <span class="h5 text-primary mb-0">Rp {{ number_format($service->price, 0, ',', '.') }}</span>
                                            <span class="badge bg-success">Tersedia</span>
                                        </div>
                                        <button class="btn btn-primary btn-sm w-100" 
                                                data-bs-toggle="modal" 
                                                data-bs-target="#orderModal"
                                                data-service-id="{{ $service->id }}"
                                                data-service-name="{{ $service->name }}"
                                                data-service-price="{{ $service->price }}"
                                                data-service-description="{{ $service->description }}">
                                            <i class="fas fa-plus me-2"></i>Pesan
                                        </button>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                    @endforeach
                @else
                    <div class="text-center py-5">
                        <i class="fas fa-concierge-bell fa-3x text-muted mb-3"></i>
                        <h5 class="text-muted">Belum ada layanan kamar</h5>
                        <p class="text-muted">Silakan hubungi resepsionis untuk informasi layanan</p>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

<!-- Order Modal -->
<div class="modal fade" id="orderModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Pesan Layanan Kamar</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('guest-services.room-service.order', $booking) }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Layanan</label>
                        <input type="text" class="form-control" id="service-name" readonly>
                        <input type="hidden" name="room_service_id" id="service-id">
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Harga per item</label>
                        <input type="text" class="form-control" id="service-price" readonly>
                    </div>
                    
                    <div class="mb-3">
                        <label for="quantity" class="form-label">Jumlah <span class="text-danger">*</span></label>
                        <input type="number" class="form-control @error('quantity') is-invalid @enderror" 
                               id="quantity" name="quantity" value="1" min="1" max="10" required>
                        @error('quantity')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="mb-3">
                        <label for="notes" class="form-label">Catatan Khusus</label>
                        <textarea class="form-control @error('notes') is-invalid @enderror" 
                                  id="notes" name="notes" rows="3" placeholder="Contoh: Waktu yang diinginkan, permintaan khusus, dll"></textarea>
                        @error('notes')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Opsi Pembayaran <span class="text-danger">*</span></label>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="payment_option" id="pay_now" value="pay_now" checked>
                            <label class="form-check-label" for="pay_now">
                                <strong>Bayar Sekarang</strong>
                                <small class="text-muted d-block">Pembayaran langsung saat memesan</small>
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="payment_option" id="pay_later" value="pay_later">
                            <label class="form-check-label" for="pay_later">
                                <strong>Bayar Saat Check-out</strong>
                                <small class="text-muted d-block">Ditambahkan ke tagihan kamar</small>
                            </label>
                        </div>
                        @error('payment_option')
                            <div class="text-danger small">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="alert alert-info">
                        <h6>Ringkasan Pesanan:</h6>
                        <div id="order-summary">
                            <p><strong>Layanan:</strong> <span id="summary-service">-</span></p>
                            <p><strong>Jumlah:</strong> <span id="summary-quantity">1</span> item</p>
                            <p><strong>Harga per item:</strong> Rp <span id="summary-price">0</span></p>
                            <p><strong>Total:</strong> Rp <span id="summary-total">0</span></p>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-check me-2"></i>Konfirmasi Pesanan
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const orderModal = document.getElementById('orderModal');
        const quantityInput = document.getElementById('quantity');
        const summaryService = document.getElementById('summary-service');
        const summaryQuantity = document.getElementById('summary-quantity');
        const summaryPrice = document.getElementById('summary-price');
        const summaryTotal = document.getElementById('summary-total');

        orderModal.addEventListener('show.bs.modal', function (event) {
            const button = event.relatedTarget;
            const serviceId = button.getAttribute('data-service-id');
            const serviceName = button.getAttribute('data-service-name');
            const servicePrice = button.getAttribute('data-service-price');
            const serviceDescription = button.getAttribute('data-service-description');

            document.getElementById('service-id').value = serviceId;
            document.getElementById('service-name').value = serviceName;
            document.getElementById('service-price').value = 'Rp ' + parseInt(servicePrice).toLocaleString('id-ID');
            
            summaryService.textContent = serviceName;
            summaryPrice.textContent = parseInt(servicePrice).toLocaleString('id-ID');
            
            updateOrderSummary();
        });

        quantityInput.addEventListener('input', updateOrderSummary);

        function updateOrderSummary() {
            const quantity = parseInt(quantityInput.value) || 1;
            const price = parseInt(document.getElementById('summary-price').textContent.replace(/[^\d]/g, '')) || 0;
            const total = price * quantity;

            summaryQuantity.textContent = quantity;
            summaryTotal.textContent = total.toLocaleString('id-ID');
        }
    });
</script>
@endsection