{{-- Booking Widget Component (Integration with existing booking system) --}}
@php
    $title = $component['content']['title'] ?? 'Book Your Appointment';
    $description = $component['content']['description'] ?? 'Select your preferred date and time';
    $serviceType = $component['content']['service_type'] ?? null;
    $showCalendar = $component['content']['show_calendar'] ?? true;
    $bookingId = 'booking-widget-' . uniqid();
@endphp

<div class="booking-widget-wrapper">
    <div class="row">
        <div class="col-lg-6">
            <div class="booking-info">
                @if($title)
                    <h3 class="mb-3" style="font-family: var(--heading-font);">{{ $title }}</h3>
                @endif

                @if($description)
                    <p class="mb-4" style="font-family: var(--body-font);">{{ $description }}</p>
                @endif

                <div class="booking-features">
                    <div class="feature-item mb-3">
                        <i class="bi bi-calendar-check text-primary me-2"></i>
                        <span>Easy online booking</span>
                    </div>
                    <div class="feature-item mb-3">
                        <i class="bi bi-clock text-primary me-2"></i>
                        <span>Instant confirmation</span>
                    </div>
                    <div class="feature-item mb-3">
                        <i class="bi bi-bell text-primary me-2"></i>
                        <span>Email & SMS reminders</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <div class="booking-form-container">
                <form id="{{ $bookingId }}" class="booking-form">
                    @csrf

                    <div class="mb-3">
                        <label for="booking-name" class="form-label">Full Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="booking-name" name="name" required>
                    </div>

                    <div class="mb-3">
                        <label for="booking-email" class="form-label">Email <span class="text-danger">*</span></label>
                        <input type="email" class="form-control" id="booking-email" name="email" required>
                    </div>

                    <div class="mb-3">
                        <label for="booking-phone" class="form-label">Phone <span class="text-danger">*</span></label>
                        <input type="tel" class="form-control" id="booking-phone" name="phone" required>
                    </div>

                    @if(class_exists('\App\Models\BookingService'))
                        <div class="mb-3">
                            <label for="booking-service" class="form-label">Service <span class="text-danger">*</span></label>
                            <select class="form-select" id="booking-service" name="service_id" required>
                                <option value="">Select a service</option>
                                @foreach(\App\Models\BookingService::where('status', 'active')->get() as $service)
                                    <option value="{{ $service->id }}" data-duration="{{ $service->duration }}" data-price="{{ $service->price }}">
                                        {{ $service->name }} - ${{ number_format($service->price, 2) }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    @endif

                    @if($showCalendar)
                        <div class="mb-3">
                            <label for="booking-date" class="form-label">Preferred Date <span class="text-danger">*</span></label>
                            <input type="date" class="form-control" id="booking-date" name="date"
                                   min="{{ date('Y-m-d') }}" required>
                        </div>

                        <div class="mb-3">
                            <label for="booking-time" class="form-label">Preferred Time <span class="text-danger">*</span></label>
                            <select class="form-select" id="booking-time" name="time" required>
                                <option value="">Select a time</option>
                                @for($hour = 9; $hour <= 17; $hour++)
                                    @foreach(['00', '30'] as $minute)
                                        <option value="{{ sprintf('%02d:%s', $hour, $minute) }}">
                                            {{ sprintf('%02d:%s %s', $hour > 12 ? $hour - 12 : $hour, $minute, $hour >= 12 ? 'PM' : 'AM') }}
                                        </option>
                                    @endforeach
                                @endfor
                            </select>
                        </div>
                    @endif

                    <div class="mb-3">
                        <label for="booking-notes" class="form-label">Additional Notes</label>
                        <textarea class="form-control" id="booking-notes" name="notes" rows="3"></textarea>
                    </div>

                    <button type="submit" class="btn btn-primary btn-lg w-100">
                        <i class="bi bi-calendar-plus me-2"></i>Book Appointment
                    </button>
                </form>

                <div id="{{ $bookingId }}-response" class="mt-3" style="display: none;"></div>
            </div>
        </div>
    </div>
</div>

<style>
    .booking-widget-wrapper {
        background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
        padding: 3rem;
        border-radius: 12px;
    }

    .booking-info {
        padding: 2rem;
    }

    .feature-item {
        display: flex;
        align-items: center;
        font-family: var(--body-font);
        font-size: 1.1rem;
    }

    .feature-item i {
        font-size: 1.5rem;
    }

    .booking-form-container {
        background: #fff;
        padding: 2rem;
        border-radius: 12px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    }

    .form-label {
        font-family: var(--body-font);
        font-weight: 500;
        margin-bottom: 0.5rem;
    }

    .form-control,
    .form-select {
        border: 2px solid #e9ecef;
        padding: 0.75rem 1rem;
        border-radius: 8px;
        transition: all 0.3s ease;
    }

    .form-control:focus,
    .form-select:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25);
    }

    .btn-primary {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
        padding: 0.75rem 2rem;
        transition: all 0.3s ease;
    }

    .btn-primary:hover {
        background-color: var(--secondary-color);
        border-color: var(--secondary-color);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
</style>

<script>
document.getElementById('{{ $bookingId }}').addEventListener('submit', function(e) {
    e.preventDefault();

    const form = this;
    const responseDiv = document.getElementById('{{ $bookingId }}-response');
    const submitBtn = form.querySelector('button[type="submit"]');

    submitBtn.disabled = true;
    submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Booking...';

    fetch('/bookings/create', {
        method: 'POST',
        body: new FormData(form),
        headers: {
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(response => response.json())
    .then(data => {
        responseDiv.style.display = 'block';
        if (data.success) {
            responseDiv.className = 'alert alert-success';
            responseDiv.innerHTML = `
                <i class="bi bi-check-circle me-2"></i>
                ${data.message || 'Booking confirmed! We will send you a confirmation email shortly.'}
            `;
            form.reset();
        } else {
            responseDiv.className = 'alert alert-danger';
            responseDiv.textContent = data.message || 'Something went wrong. Please try again.';
        }
    })
    .catch(error => {
        responseDiv.style.display = 'block';
        responseDiv.className = 'alert alert-danger';
        responseDiv.textContent = 'An error occurred. Please try again later.';
    })
    .finally(() => {
        submitBtn.disabled = false;
        submitBtn.innerHTML = '<i class="bi bi-calendar-plus me-2"></i>Book Appointment';
    });
});
</script>