@extends('layouts.app')

@section('title', __('Book Appointment'))

@section('content')
    <!-- Booking Header -->
    <section class="booking-header bg-primary text-white py-5">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 mx-auto text-center">
                    <h1 class="fw-bold mb-3">{{ __('Book Your Appointment') }}</h1>
                    <p class="lead">{{ __('Complete the steps below to book your appointment with') }} {{ $service->provider->name }}</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Booking Process -->
    <section class="booking-process py-5">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 mx-auto">
                    <!-- Booking Steps -->
                    <div class="booking-steps mb-5">
                        <div class="row text-center">
                            <div class="col-4">
                                <div class="step {{ $currentStep >= 1 ? 'active' : '' }}">
                                    <div class="step-icon">
                                        <i class="bi bi-calendar-date"></i>
                                    </div>
                                    <div class="step-label">{{ __('Date & Time') }}</div>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="step {{ $currentStep >= 2 ? 'active' : '' }}">
                                    <div class="step-icon">
                                        <i class="bi bi-person-lines-fill"></i>
                                    </div>
                                    <div class="step-label">{{ __('Your Details') }}</div>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="step {{ $currentStep >= 3 ? 'active' : '' }}">
                                    <div class="step-icon">
                                        <i class="bi bi-credit-card"></i>
                                    </div>
                                    <div class="step-label">{{ __('Payment') }}</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Step Content -->
                    <div class="booking-content">
                        <!-- Step 1: Date & Time Selection -->
                        @if($currentStep == 1)
                            <div class="card border-0 shadow-sm">
                                <div class="card-header bg-white">
                                    <h5 class="mb-0">{{ __('Select Date & Time') }}</h5>
                                </div>
                                <div class="card-body p-4">
                                    <div class="row">
                                        <!-- Service Summary -->
                                        <div class="col-md-12 mb-4">
                                            <div class="service-summary d-flex align-items-center">
                                                <img src="{{ asset($service->image ?? 'images/service-placeholder.jpg') }}" class="rounded me-3" width="80" height="80" alt="{{ $service->name }}">
                                                <div>
                                                    <h5 class="mb-1">{{ $service->name }}</h5>
                                                    <div class="d-flex align-items-center mb-2">
                                                        <div class="rating text-warning me-2">
                                                            @for($i = 1; $i <= 5; $i++)
                                                                <i class="bi bi-star-fill {{ $i <= $service->rating ? '' : 'text-muted' }}"></i>
                                                            @endfor
                                                        </div>
                                                        <span>{{ $service->rating }} ({{ $service->reviews_count }})</span>
                                                    </div>
                                                    <div class="d-flex align-items-center">
                                                        <span class="me-3"><i class="bi bi-clock me-1"></i> {{ $service->duration }} {{ __('min') }}</span>
                                                        <span class="fw-bold">{{ $service->price_formatted }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Date Picker -->
                                        <div class="col-md-6 mb-4">
                                            <label class="form-label">{{ __('Select Date') }}</label>
                                            <div id="datepicker" class="date-picker"></div>
                                            <input type="hidden" id="selected_date" name="selected_date" value="{{ $selectedDate ?? '' }}">
                                        </div>

                                        <!-- Time Slots -->
                                        <div class="col-md-6 mb-4">
                                            <label class="form-label">{{ __('Available Time Slots') }}</label>
                                            <div class="time-slots" id="time-slots-container">
                                                @if(isset($timeSlots) && count($timeSlots) > 0)
                                                    @foreach($timeSlots as $slot)
                                                        <div class="form-check time-slot-item">
                                                            <input class="form-check-input" type="radio" name="time_slot" id="slot-{{ $loop->index }}" value="{{ $slot }}" {{ $selectedTime == $slot ? 'checked' : '' }}>
                                                            <label class="form-check-label" for="slot-{{ $loop->index }}">
                                                                {{ $slot }}
                                                            </label>
                                                        </div>
                                                    @endforeach
                                                @else
                                                    <div class="alert alert-info">
                                                        <i class="bi bi-info-circle me-2"></i>
                                                        {{ __('Please select a date to view available time slots.') }}
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <form action="{{ route('booking.confirm') }}" method="POST" id="datetime-form">
                                        @csrf
                                        <input type="hidden" name="service_id" value="{{ $service->id }}">
                                        <input type="hidden" name="selected_date" id="form_selected_date" value="{{ $selectedDate ?? '' }}">
                                        <input type="hidden" name="selected_time" id="form_selected_time" value="{{ $selectedTime ?? '' }}">
                                        
                                        <div class="d-flex justify-content-between mt-4">
                                            <a href="{{ route('booking.service.details', $service->slug) }}" class="btn btn-outline-secondary">{{ __('Back to Service') }}</a>
                                            <button type="submit" class="btn btn-primary" id="continue-btn" {{ !isset($selectedDate) || !isset($selectedTime) ? 'disabled' : '' }}>{{ __('Continue') }}</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        @endif

                        <!-- Step 2: Customer Details -->
                        @if($currentStep == 2)
                            <div class="card border-0 shadow-sm">
                                <div class="card-header bg-white">
                                    <h5 class="mb-0">{{ __('Your Details') }}</h5>
                                </div>
                                <div class="card-body p-4">
                                    <form action="{{ route('booking.process') }}" method="POST" id="details-form">
                                        @csrf
                                        <input type="hidden" name="service_id" value="{{ $service->id }}">
                                        <input type="hidden" name="selected_date" value="{{ $selectedDate }}">
                                        <input type="hidden" name="selected_time" value="{{ $selectedTime }}">
                                        
                                        <!-- Booking Summary -->
                                        <div class="booking-summary mb-4">
                                            <h6 class="fw-bold mb-3">{{ __('Booking Summary') }}</h6>
                                            <div class="card bg-light">
                                                <div class="card-body">
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <p class="mb-1"><strong>{{ __('Service') }}:</strong> {{ $service->name }}</p>
                                                            <p class="mb-1"><strong>{{ __('Provider') }}:</strong> {{ $service->provider->name }}</p>
                                                            <p class="mb-0"><strong>{{ __('Duration') }}:</strong> {{ $service->duration }} {{ __('minutes') }}</p>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <p class="mb-1"><strong>{{ __('Date') }}:</strong> {{ \Carbon\Carbon::parse($selectedDate)->format('F j, Y') }}</p>
                                                            <p class="mb-1"><strong>{{ __('Time') }}:</strong> {{ $selectedTime }}</p>
                                                            <p class="mb-0"><strong>{{ __('Price') }}:</strong> {{ $service->price_formatted }}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Customer Information -->
                                        <h6 class="fw-bold mb-3">{{ __('Personal Information') }}</h6>
                                        <div class="row g-3 mb-4">
                                            <div class="col-md-6">
                                                <label for="name" class="form-label">{{ __('Full Name') }} <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control @error('name') is-invalid @enderror" id="name" name="name" value="{{ auth()->check() ? auth()->user()->name : old('name') }}" required>
                                                @error('name')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                            <div class="col-md-6">
                                                <label for="email" class="form-label">{{ __('Email Address') }} <span class="text-danger">*</span></label>
                                                <input type="email" class="form-control @error('email') is-invalid @enderror" id="email" name="email" value="{{ auth()->check() ? auth()->user()->email : old('email') }}" required>
                                                @error('email')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                            <div class="col-md-6">
                                                <label for="phone" class="form-label">{{ __('Phone Number') }} <span class="text-danger">*</span></label>
                                                <input type="tel" class="form-control @error('phone') is-invalid @enderror" id="phone" name="phone" value="{{ auth()->check() ? auth()->user()->phone : old('phone') }}" required>
                                                @error('phone')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>

                                        <!-- Additional Notes -->
                                        <div class="mb-4">
                                            <label for="notes" class="form-label">{{ __('Additional Notes') }} <span class="text-muted">({{ __('Optional') }})</span></label>
                                            <textarea class="form-control" id="notes" name="notes" rows="3">{{ old('notes') }}</textarea>
                                        </div>

                                        <!-- Terms and Conditions -->
                                        <div class="mb-4">
                                            <div class="form-check">
                                                <input class="form-check-input @error('terms') is-invalid @enderror" type="checkbox" id="terms" name="terms" required>
                                                <label class="form-check-label" for="terms">
                                                    {{ __('I agree to the') }} <a href="{{ route('terms') }}" target="_blank">{{ __('Terms and Conditions') }}</a>
                                                </label>
                                                @error('terms')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="d-flex justify-content-between">
                                            <a href="{{ route('booking.select-datetime', $service->id) }}" class="btn btn-outline-secondary">{{ __('Back') }}</a>
                                            <button type="submit" class="btn btn-primary">{{ __('Continue to Payment') }}</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        @endif

                        <!-- Step 3: Payment -->
                        @if($currentStep == 3)
                            <div class="card border-0 shadow-sm">
                                <div class="card-header bg-white">
                                    <h5 class="mb-0">{{ __('Payment') }}</h5>
                                </div>
                                <div class="card-body p-4">
                                    <!-- Booking Summary -->
                                    <div class="booking-summary mb-4">
                                        <h6 class="fw-bold mb-3">{{ __('Booking Summary') }}</h6>
                                        <div class="card bg-light">
                                            <div class="card-body">
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <p class="mb-1"><strong>{{ __('Service') }}:</strong> {{ $booking->service->name }}</p>
                                                        <p class="mb-1"><strong>{{ __('Provider') }}:</strong> {{ $booking->service->provider->name }}</p>
                                                        <p class="mb-0"><strong>{{ __('Duration') }}:</strong> {{ $booking->service->duration }} {{ __('minutes') }}</p>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <p class="mb-1"><strong>{{ __('Date') }}:</strong> {{ \Carbon\Carbon::parse($booking->appointment_date)->format('F j, Y') }}</p>
                                                        <p class="mb-1"><strong>{{ __('Time') }}:</strong> {{ $booking->appointment_time }}</p>
                                                        <p class="mb-0"><strong>{{ __('Customer') }}:</strong> {{ $booking->customer_name }}</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Payment Details -->
                                    <div class="payment-details mb-4">
                                        <h6 class="fw-bold mb-3">{{ __('Payment Details') }}</h6>
                                        <div class="card">
                                            <div class="card-body">
                                                <div class="d-flex justify-content-between mb-2">
                                                    <span>{{ __('Service Price') }}</span>
                                                    <span>{{ $booking->service->price_formatted }}</span>
                                                </div>
                                                @if($booking->discount_amount > 0)
                                                    <div class="d-flex justify-content-between mb-2 text-success">
                                                        <span>{{ __('Discount') }}</span>
                                                        <span>-{{ $booking->discount_formatted }}</span>
                                                    </div>
                                                @endif
                                                @if($booking->tax_amount > 0)
                                                    <div class="d-flex justify-content-between mb-2">
                                                        <span>{{ __('Tax') }}</span>
                                                        <span>{{ $booking->tax_formatted }}</span>
                                                    </div>
                                                @endif
                                                <hr>
                                                <div class="d-flex justify-content-between fw-bold">
                                                    <span>{{ __('Total Amount') }}</span>
                                                    <span>{{ $booking->total_amount_formatted }}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Payment Methods -->
                                    <div class="payment-methods mb-4">
                                        <h6 class="fw-bold mb-3">{{ __('Select Payment Method') }}</h6>
                                        
                                        <div class="payment-tabs">
                                            <ul class="nav nav-tabs" id="paymentTab" role="tablist">
                                                <li class="nav-item" role="presentation">
                                                    <button class="nav-link active" id="card-tab" data-bs-toggle="tab" data-bs-target="#card-content" type="button" role="tab" aria-controls="card-content" aria-selected="true">
                                                        <i class="bi bi-credit-card me-2"></i> {{ __('Credit Card') }}
                                                    </button>
                                                </li>
                                                <li class="nav-item" role="presentation">
                                                    <button class="nav-link" id="paypal-tab" data-bs-toggle="tab" data-bs-target="#paypal-content" type="button" role="tab" aria-controls="paypal-content" aria-selected="false">
                                                        <i class="bi bi-paypal me-2"></i> {{ __('PayPal') }}
                                                    </button>
                                                </li>
                                                @if($booking->service->provider->accepts_cash)
                                                    <li class="nav-item" role="presentation">
                                                        <button class="nav-link" id="cash-tab" data-bs-toggle="tab" data-bs-target="#cash-content" type="button" role="tab" aria-controls="cash-content" aria-selected="false">
                                                            <i class="bi bi-cash me-2"></i> {{ __('Pay Later') }}
                                                        </button>
                                                    </li>
                                                @endif
                                            </ul>
                                            
                                            <div class="tab-content p-3 border border-top-0 rounded-bottom" id="paymentTabContent">
                                                <!-- Credit Card Payment -->
                                                <div class="tab-pane fade show active" id="card-content" role="tabpanel" aria-labelledby="card-tab">
                                                    <form id="card-payment-form" action="{{ route('payment.process', $booking->id) }}" method="POST">
                                                        @csrf
                                                        <input type="hidden" name="payment_method" value="card">
                                                        
                                                        <div class="mb-3">
                                                            <label for="card-element" class="form-label">{{ __('Credit or Debit Card') }}</label>
                                                            <div id="card-element" class="form-control p-3">
                                                                <!-- Stripe Card Element will be inserted here -->
                                                            </div>
                                                            <div id="card-errors" class="text-danger mt-2"></div>
                                                        </div>
                                                        
                                                        <button type="submit" class="btn btn-primary w-100" id="card-button">
                                                            {{ __('Pay') }} {{ $booking->total_amount_formatted }}
                                                        </button>
                                                    </form>
                                                </div>
                                                
                                                <!-- PayPal Payment -->
                                                <div class="tab-pane fade" id="paypal-content" role="tabpanel" aria-labelledby="paypal-tab">
                                                    <p class="mb-3">{{ __('You will be redirected to PayPal to complete your payment.') }}</p>
                                                    <form action="{{ route('payment.process', $booking->id) }}" method="POST">
                                                        @csrf
                                                        <input type="hidden" name="payment_method" value="paypal">
                                                        <button type="submit" class="btn btn-primary w-100">
                                                            {{ __('Pay with PayPal') }}
                                                        </button>
                                                    </form>
                                                </div>
                                                
                                                <!-- Pay Later Option -->
                                                @if($booking->service->provider->accepts_cash)
                                                    <div class="tab-pane fade" id="cash-content" role="tabpanel" aria-labelledby="cash-tab">
                                                        <div class="alert alert-info mb-3">
                                                            <i class="bi bi-info-circle me-2"></i>
                                                            {{ __('You will pay directly to the service provider at the time of your appointment.') }}
                                                        </div>
                                                        <form action="{{ route('payment.process', $booking->id) }}" method="POST">
                                                            @csrf
                                                            <input type="hidden" name="payment_method" value="cash">
                                                            <button type="submit" class="btn btn-primary w-100">
                                                                {{ __('Confirm Pay Later') }}
                                                            </button>
                                                        </form>
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="d-flex justify-content-between">
                                        <a href="{{ route('booking.confirm') }}" class="btn btn-outline-secondary">{{ __('Back') }}</a>
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('scripts')
<script>
    $(document).ready(function() {
        // Date Picker Initialization
        $('#datepicker').datepicker({
            format: 'yyyy-mm-dd',
            startDate: new Date(),
            autoclose: true,
            todayHighlight: true,
            daysOfWeekDisabled: {!! json_encode($disabledDays ?? []) !!},
            datesDisabled: {!! json_encode($disabledDates ?? []) !!}
        }).on('changeDate', function(e) {
            const selectedDate = e.format('yyyy-mm-dd');
            $('#selected_date').val(selectedDate);
            $('#form_selected_date').val(selectedDate);
            
            // AJAX call to get available time slots
            $.ajax({
                url: '{{ route("booking.get-time-slots") }}',
                type: 'GET',
                data: {
                    service_id: '{{ $service->id }}',
                    date: selectedDate
                },
                success: function(response) {
                    let html = '';
                    if (response.timeSlots && response.timeSlots.length > 0) {
                        response.timeSlots.forEach(function(slot, index) {
                            html += `
                                <div class="form-check time-slot-item">
                                    <input class="form-check-input time-slot-radio" type="radio" name="time_slot" id="slot-${index}" value="${slot}">
                                    <label class="form-check-label" for="slot-${index}">
                                        ${slot}
                                    </label>
                                </div>
                            `;
                        });
                    } else {
                        html = `
                            <div class="alert alert-info">
                                <i class="bi bi-info-circle me-2"></i>
                                {{ __('No available time slots for this date.') }}
                            </div>
                        `;
                    }
                    $('#time-slots-container').html(html);
                    
                    // Add event listener to newly created radio buttons
                    $('.time-slot-radio').on('change', function() {
                        const selectedTime = $(this).val();
                        $('#form_selected_time').val(selectedTime);
                        $('#continue-btn').prop('disabled', false);
                    });
                },
                error: function() {
                    $('#time-slots-container').html(`
                        <div class="alert alert-danger">
                            <i class="bi bi-exclamation-triangle me-2"></i>
                            {{ __('Error loading time slots. Please try again.') }}
                        </div>
                    `);
                }
            });
        });
        
        // Time slot selection
        $(document).on('change', 'input[name="time_slot"]', function() {
            const selectedTime = $(this).val();
            $('#form_selected_time').val(selectedTime);
            $('#continue-btn').prop('disabled', false);
        });
        
        // Initialize Stripe elements if on payment step
        @if($currentStep == 3 && isset($stripeKey))
            const stripe = Stripe('{{ $stripeKey }}');
            const elements = stripe.elements();
            const cardElement = elements.create('card', {
                style: {
                    base: {
                        fontSize: '16px',
                        color: '#32325d',
                    }
                }
            });
            
            cardElement.mount('#card-element');
            
            const cardButton = document.getElementById('card-button');
            const cardForm = document.getElementById('card-payment-form');
            
            cardForm.addEventListener('submit', async (e) => {
                e.preventDefault();
                cardButton.disabled = true;
                cardButton.textContent = '{{ __("Processing...") }}';
                
                try {
                    const { paymentMethod, error } = await stripe.createPaymentMethod({
                        type: 'card',
                        card: cardElement,
                    });
                    
                    if (error) {
                        document.getElementById('card-errors').textContent = error.message;
                        cardButton.disabled = false;
                        cardButton.textContent = '{{ __("Pay") }} {{ $booking->total_amount_formatted }}';
                    } else {
                        const hiddenInput = document.createElement('input');
                        hiddenInput.setAttribute('type', 'hidden');
                        hiddenInput.setAttribute('name', 'payment_method_id');
                        hiddenInput.setAttribute('value', paymentMethod.id);
                        cardForm.appendChild(hiddenInput);
                        
                        cardForm.submit();
                    }
                } catch (err) {
                    document.getElementById('card-errors').textContent = err.message;
                    cardButton.disabled = false;
                    cardButton.textContent = '{{ __("Pay") }} {{ $booking->total_amount_formatted }}';
                }
            });
        @endif
    });
</script>
@endsection