@extends('admin.layout')

@section('title', 'Buat Invoice Baru')

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">Buat Invoice Baru</h1>
            <p class="mb-0 text-muted">Buat invoice untuk booking yang belum memiliki invoice</p>
        </div>
        <div>
            <a href="{{ route('admin.invoices.index') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> Kembali
            </a>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <!-- Create Invoice Form -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Form Invoice Baru</h6>
                </div>
                <div class="card-body">
                    <form action="{{ route('admin.invoices.store') }}" method="POST" id="invoice-form">
                        @csrf
                        
                        <!-- Booking Selection -->
                        <div class="form-group">
                            <label for="booking_id" class="form-label">Pilih Booking <span class="text-danger">*</span></label>
                            <select class="form-control @error('booking_id') is-invalid @enderror" 
                                    id="booking_id" name="booking_id" required>
                                <option value="">-- Pilih Booking --</option>
                                @foreach($availableBookings as $booking)
                                    <option value="{{ $booking->id }}" 
                                            data-guest-name="{{ $booking->guest_name }}"
                                            data-hotel-name="{{ $booking->room->hotel->name ?? 'N/A' }}"
                                            data-room-name="{{ $booking->room->name }}"
                                            data-checkin="{{ $booking->check_in_date }}"
                                            data-checkout="{{ $booking->check_out_date }}"
                                            data-total="{{ $booking->total_amount }}"
                                            {{ old('booking_id') == $booking->id ? 'selected' : '' }}>
                                        {{ $booking->booking_code }} - {{ $booking->guest_name }} 
                                        ({{ $booking->room->hotel->name ?? 'N/A' }})
                                    </option>
                                @endforeach
                            </select>
                            @error('booking_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Invoice Details -->
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="invoice_date" class="form-label">Tanggal Invoice <span class="text-danger">*</span></label>
                                    <input type="date" class="form-control @error('invoice_date') is-invalid @enderror" 
                                           id="invoice_date" name="invoice_date" 
                                           value="{{ old('invoice_date', date('Y-m-d')) }}" required>
                                    @error('invoice_date')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="due_date" class="form-label">Tanggal Jatuh Tempo</label>
                                    <input type="date" class="form-control @error('due_date') is-invalid @enderror" 
                                           id="due_date" name="due_date" 
                                           value="{{ old('due_date') }}">
                                    @error('due_date')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="status" class="form-label">Status Invoice</label>
                            <select class="form-control @error('status') is-invalid @enderror" 
                                    id="status" name="status">
                                <option value="draft" {{ old('status', 'draft') == 'draft' ? 'selected' : '' }}>Draft</option>
                                <option value="sent" {{ old('status') == 'sent' ? 'selected' : '' }}>Terkirim</option>
                                <option value="paid" {{ old('status') == 'paid' ? 'selected' : '' }}>Dibayar</option>
                            </select>
                            @error('status')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="notes" class="form-label">Catatan</label>
                            <textarea class="form-control @error('notes') is-invalid @enderror" 
                                      id="notes" name="notes" rows="3" 
                                      placeholder="Catatan tambahan untuk invoice ini...">{{ old('notes') }}</textarea>
                            @error('notes')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> Buat Invoice
                            </button>
                            <a href="{{ route('admin.invoices.index') }}" class="btn btn-secondary">
                                <i class="fas fa-times"></i> Batal
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <!-- Booking Preview -->
            <div class="card shadow" id="booking-preview" style="display: none;">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Preview Booking</h6>
                </div>
                <div class="card-body">
                    <div class="booking-info">
                        <div class="mb-3">
                            <strong>Nama Tamu:</strong>
                            <div id="preview-guest-name" class="text-muted">-</div>
                        </div>
                        <div class="mb-3">
                            <strong>Hotel:</strong>
                            <div id="preview-hotel-name" class="text-muted">-</div>
                        </div>
                        <div class="mb-3">
                            <strong>Kamar:</strong>
                            <div id="preview-room-name" class="text-muted">-</div>
                        </div>
                        <div class="mb-3">
                            <strong>Check-in:</strong>
                            <div id="preview-checkin" class="text-muted">-</div>
                        </div>
                        <div class="mb-3">
                            <strong>Check-out:</strong>
                            <div id="preview-checkout" class="text-muted">-</div>
                        </div>
                        <div class="mb-3">
                            <strong>Total Booking:</strong>
                            <div id="preview-total" class="text-success font-weight-bold">-</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Help Card -->
            <div class="card shadow mt-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-info">Bantuan</h6>
                </div>
                <div class="card-body">
                    <div class="text-sm">
                        <p><strong>Tips:</strong></p>
                        <ul class="mb-0">
                            <li>Pilih booking yang belum memiliki invoice</li>
                            <li>Tanggal invoice otomatis diisi hari ini</li>
                            <li>Status "Draft" untuk invoice yang belum final</li>
                            <li>Status "Terkirim" untuk invoice yang sudah dikirim ke tamu</li>
                            <li>Status "Dibayar" untuk invoice yang sudah lunas</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Handle booking selection change
    $('#booking_id').change(function() {
        const selectedOption = $(this).find('option:selected');
        
        if (selectedOption.val()) {
            // Show booking preview
            $('#booking-preview').show();
            
            // Update preview data
            $('#preview-guest-name').text(selectedOption.data('guest-name'));
            $('#preview-hotel-name').text(selectedOption.data('hotel-name'));
            $('#preview-room-name').text(selectedOption.data('room-name'));
            
            // Format dates
            const checkinDate = new Date(selectedOption.data('checkin'));
            const checkoutDate = new Date(selectedOption.data('checkout'));
            
            $('#preview-checkin').text(checkinDate.toLocaleDateString('id-ID'));
            $('#preview-checkout').text(checkoutDate.toLocaleDateString('id-ID'));
            
            // Format total amount
            const total = selectedOption.data('total');
            $('#preview-total').text('Rp ' + new Intl.NumberFormat('id-ID').format(total));
            
            // Auto set due date (7 days from invoice date)
            const invoiceDate = new Date($('#invoice_date').val());
            const dueDate = new Date(invoiceDate);
            dueDate.setDate(dueDate.getDate() + 7);
            
            $('#due_date').val(dueDate.toISOString().split('T')[0]);
        } else {
            // Hide booking preview
            $('#booking-preview').hide();
            $('#due_date').val('');
        }
    });
    
    // Handle invoice date change
    $('#invoice_date').change(function() {
        if ($('#booking_id').val()) {
            // Auto update due date (7 days from invoice date)
            const invoiceDate = new Date($(this).val());
            const dueDate = new Date(invoiceDate);
            dueDate.setDate(dueDate.getDate() + 7);
            
            $('#due_date').val(dueDate.toISOString().split('T')[0]);
        }
    });
    
    // Form validation
    $('#invoice-form').submit(function(e) {
        const bookingId = $('#booking_id').val();
        const invoiceDate = $('#invoice_date').val();
        
        if (!bookingId) {
            e.preventDefault();
            Swal.fire({
                icon: 'error',
                title: 'Error!',
                text: 'Silakan pilih booking terlebih dahulu.'
            });
            return false;
        }
        
        if (!invoiceDate) {
            e.preventDefault();
            Swal.fire({
                icon: 'error',
                title: 'Error!',
                text: 'Tanggal invoice harus diisi.'
            });
            return false;
        }
        
        // Show loading
        Swal.fire({
            title: 'Membuat Invoice...',
            text: 'Mohon tunggu sebentar.',
            allowOutsideClick: false,
            showConfirmButton: false,
            willOpen: () => {
                Swal.showLoading();
            }
        });
    });
});
</script>
@endpush