@extends('layouts.app')

@section('title', 'Walk-in Check-in - Hotel Management System')
@section('page-title', 'Walk-in Check-in')

@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-user-plus me-2"></i>
                    Form Walk-in Check-in
                </h6>
                <small class="text-muted">Untuk tamu yang datang langsung tanpa booking sebelumnya</small>
            </div>
            <div class="card-body">
                <form action="{{ route('bookings.walkin') }}" method="POST">
                    @csrf
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="room_id" class="form-label">Pilih Kamar <span class="text-danger">*</span></label>
                                <select class="form-select @error('room_id') is-invalid @enderror" 
                                        id="room_id" name="room_id" required>
                                    <option value="">Pilih Kamar</option>
                                    @foreach($rooms as $room)
                                        <option value="{{ $room->id }}" 
                                                data-price="{{ $room->price_per_night }}"
                                                data-type="{{ $room->room_type }}"
                                                {{ old('room_id') == $room->id ? 'selected' : '' }}>
                                            {{ $room->room_number }} - {{ $room->room_type }} (Rp {{ number_format($room->price_per_night, 0, ',', '.') }}/malam)
                                        </option>
                                    @endforeach
                                </select>
                                @error('room_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="number_of_guests" class="form-label">Jumlah Tamu <span class="text-danger">*</span></label>
                                <input type="number" class="form-control @error('number_of_guests') is-invalid @enderror" 
                                       id="number_of_guests" name="number_of_guests" value="{{ old('number_of_guests') }}" 
                                       min="1" max="10" required>
                                @error('number_of_guests')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="check_in_date" class="form-label">Tanggal Check-in <span class="text-danger">*</span></label>
                                <input type="date" class="form-control @error('check_in_date') is-invalid @enderror" 
                                       id="check_in_date" name="check_in_date" value="{{ old('check_in_date', date('Y-m-d')) }}" 
                                       min="{{ date('Y-m-d') }}" required>
                                @error('check_in_date')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="check_out_date" class="form-label">Tanggal Check-out <span class="text-danger">*</span></label>
                                <input type="date" class="form-control @error('check_out_date') is-invalid @enderror" 
                                       id="check_out_date" name="check_out_date" value="{{ old('check_out_date') }}" 
                                       min="{{ date('Y-m-d', strtotime('+1 day')) }}" required>
                                @error('check_out_date')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="guest_name" class="form-label">Nama Tamu <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('guest_name') is-invalid @enderror" 
                                       id="guest_name" name="guest_name" value="{{ old('guest_name') }}" required>
                                @error('guest_name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="guest_email" class="form-label">Email Tamu</label>
                                <input type="email" class="form-control @error('guest_email') is-invalid @enderror" 
                                       id="guest_email" name="guest_email" value="{{ old('guest_email') }}">
                                @error('guest_email')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="guest_phone" class="form-label">No. Telepon <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('guest_phone') is-invalid @enderror" 
                                       id="guest_phone" name="guest_phone" value="{{ old('guest_phone') }}" required>
                                @error('guest_phone')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="guest_identity_number" class="form-label">No. KTP/Identitas</label>
                                <input type="text" class="form-control @error('guest_identity_number') is-invalid @enderror" 
                                       id="guest_identity_number" name="guest_identity_number" value="{{ old('guest_identity_number') }}">
                                @error('guest_identity_number')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="platform" class="form-label">Platform</label>
                                <select class="form-select @error('platform') is-invalid @enderror" 
                                        id="platform" name="platform">
                                    <option value="">Pilih Platform</option>
                                    <option value="Walk-In" {{ old('platform') == 'Walk-In' ? 'selected' : '' }}>Walk-In</option>
                                    <option value="Traveloka" {{ old('platform') == 'Traveloka' ? 'selected' : '' }}>Traveloka</option>
                                    <option value="tiket.com" {{ old('platform') == 'tiket.com' ? 'selected' : '' }}>tiket.com</option>
                                    <option value="agoda" {{ old('platform') == 'agoda' ? 'selected' : '' }}>Agoda</option>
                                    <option value="booking.com" {{ old('platform') == 'booking.com' ? 'selected' : '' }}>Booking.com</option>
                                    <option value="lainnya" {{ old('platform') == 'lainnya' ? 'selected' : '' }}>Lainnya</option>
                                </select>
                                @error('platform')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <!-- Empty column for layout balance -->
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="special_requests" class="form-label">Permintaan Khusus</label>
                        <textarea class="form-control @error('special_requests') is-invalid @enderror" 
                                  id="special_requests" name="special_requests" rows="3">{{ old('special_requests') }}</textarea>
                        @error('special_requests')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Price Calculation -->
                    <div class="alert alert-info">
                        <h6><i class="fas fa-calculator me-2"></i>Perhitungan Harga:</h6>
                        <div id="price-calculation">
                            <p>Pilih kamar dan tanggal untuk melihat perhitungan harga</p>
                        </div>
                    </div>

                    <!-- Payment Section -->
                    <div class="card border-warning">
                        <div class="card-header bg-warning text-dark">
                            <h6 class="m-0 font-weight-bold">
                                <i class="fas fa-credit-card me-2"></i>
                                Pembayaran
                            </h6>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="paid_amount" class="form-label">Jumlah Pembayaran <span class="text-danger">*</span></label>
                                        <div class="input-group">
                                            <span class="input-group-text">Rp</span>
                                            <input type="number" class="form-control @error('paid_amount') is-invalid @enderror" 
                                                   id="paid_amount" name="paid_amount" value="{{ old('paid_amount') }}" 
                                                   min="0" step="1000" required>
                                        </div>
                                        <small class="form-text text-muted">Masukkan jumlah yang dibayar tamu (bisa sebagian atau lunas)</small>
                                        @error('paid_amount')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Sisa Pembayaran</label>
                                        <div class="input-group">
                                            <span class="input-group-text">Rp</span>
                                            <input type="text" class="form-control" id="remaining_amount" readonly>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="d-flex justify-content-end">
                        <a href="{{ route('bookings.index') }}" class="btn btn-secondary me-2">
                            <i class="fas fa-arrow-left me-2"></i>Kembali
                        </a>
                        <button type="submit" class="btn btn-success">
                            <i class="fas fa-check me-2"></i>Proses Check-in
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const roomSelect = document.getElementById('room_id');
        const checkInDate = document.getElementById('check_in_date');
        const checkOutDate = document.getElementById('check_out_date');
        const priceCalculation = document.getElementById('price-calculation');
        const paidAmount = document.getElementById('paid_amount');
        const remainingAmount = document.getElementById('remaining_amount');

        function calculatePrice() {
            const selectedRoom = roomSelect.options[roomSelect.selectedIndex];
            const pricePerNight = selectedRoom ? parseFloat(selectedRoom.dataset.price) : 0;
            const checkIn = new Date(checkInDate.value);
            const checkOut = new Date(checkOutDate.value);

            if (pricePerNight && checkIn && checkOut && checkOut > checkIn) {
                const nights = Math.ceil((checkOut - checkIn) / (1000 * 60 * 60 * 24));
                const totalPrice = pricePerNight * nights;
                
                priceCalculation.innerHTML = `
                    <p><strong>Harga per malam:</strong> Rp ${pricePerNight.toLocaleString('id-ID')}</p>
                    <p><strong>Jumlah malam:</strong> ${nights} malam</p>
                    <p><strong>Total harga:</strong> Rp ${totalPrice.toLocaleString('id-ID')}</p>
                `;

                // Update remaining amount
                updateRemainingAmount(totalPrice);
            } else {
                priceCalculation.innerHTML = '<p>Pilih kamar dan tanggal untuk melihat perhitungan harga</p>';
                remainingAmount.value = '';
            }
        }

        function updateRemainingAmount(totalPrice) {
            const paid = parseFloat(paidAmount.value) || 0;
            const remaining = totalPrice - paid;
            remainingAmount.value = remaining.toLocaleString('id-ID');
            
            if (remaining < 0) {
                remainingAmount.classList.add('is-invalid');
            } else {
                remainingAmount.classList.remove('is-invalid');
            }
        }

        roomSelect.addEventListener('change', calculatePrice);
        checkInDate.addEventListener('change', function() {
            // Update minimum check-out date
            const checkIn = new Date(this.value);
            const nextDay = new Date(checkIn);
            nextDay.setDate(nextDay.getDate() + 1);
            checkOutDate.min = nextDay.toISOString().split('T')[0];
            calculatePrice();
        });
        checkOutDate.addEventListener('change', calculatePrice);
        paidAmount.addEventListener('input', function() {
            const selectedRoom = roomSelect.options[roomSelect.selectedIndex];
            const pricePerNight = selectedRoom ? parseFloat(selectedRoom.dataset.price) : 0;
            const checkIn = new Date(checkInDate.value);
            const checkOut = new Date(checkOutDate.value);
            
            if (pricePerNight && checkIn && checkOut && checkOut > checkIn) {
                const nights = Math.ceil((checkOut - checkIn) / (1000 * 60 * 60 * 24));
                const totalPrice = pricePerNight * nights;
                updateRemainingAmount(totalPrice);
            }
        });

        // Set default check-out date to tomorrow
        const tomorrow = new Date();
        tomorrow.setDate(tomorrow.getDate() + 1);
        checkOutDate.value = tomorrow.toISOString().split('T')[0];
    });
</script>
@endsection