@extends('layouts.client')

@section('title', 'Confirmation Complete.Blade')

@section('content')
<div class="min-h-screen py-8 px-4">
        <div class="max-w-2xl mx-auto">
            <!-- Back to Dashboard -->
            <div class="mb-6">
                <a href="{{ route('appointment.show', $appointmentLink->token) }}" class="inline-flex items-center text-primary hover:text-[var(--stencil-deep)] transition-colors">
                    <i class="fas fa-arrow-left mr-2"></i>Back to Dashboard
                </a>
            </div>

            <div class="glass-card rounded-xl p-8">
                <!-- Header -->
                <div class="text-center mb-8 pb-6 border-b rule">
                    @if($studio->logo_url)
                        <img src="{{ $studio->logo_url }}" alt="Studio Logo" class="h-20 mx-auto mb-4 rounded-lg">
                    @endif
                    <h1 class="text-3xl font-bold text-primary mb-2">{{ $studio->studio_name ?: 'Tattoo Studio' }}</h1>
                    <p class="text-secondary">Appointment Confirmed</p>
                </div>

                <!-- Confirmation Success -->
                <div class="text-center mb-8">
                    <div class="glass-card p-8 border-green-500/20 bg-green-500/10 celebration">
                        <i class="fas fa-check-circle text-success text-6xl mb-4"></i>
                        <h2 class="text-3xl font-bold text-success mb-4">Confirmed!</h2>
                        <p class="text-secondary text-lg mb-6">
                            Your appointment has been successfully confirmed. We're excited to see you!
                        </p>
                        <div class="text-muted">
                            <i class="fas fa-clock mr-1"></i>
                            Confirmed on {{ now()->format('F j, Y \a\t g:i A') }}
                        </div>
                    </div>
                </div>

                <!-- Appointment Details -->
                <div class="glass-card p-6 mb-6">
                    <h3 class="text-xl font-semibold text-primary mb-4">
                        <i class="fas fa-calendar-check mr-2"></i>Appointment Details
                    </h3>
                    <div class="space-y-4">
                        <div class="flex justify-between items-center">
                            <span class="text-secondary">Date:</span>
                            <span class="text-primary font-semibold">{{ $appointment->scheduled_at->format('F j, Y') }}</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-secondary">Time:</span>
                            <span class="text-primary font-semibold">{{ $appointment->scheduled_at->format('g:i A') }}</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-secondary">Artist:</span>
                            <span class="text-primary font-semibold">{{ $appointment->user->name }}</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-secondary">Client:</span>
                            <span class="text-primary font-semibold">{{ $appointment->client->name }}</span>
                        </div>
                        @if($appointment->service)
                            <div class="flex justify-between items-center">
                                <span class="text-secondary">Service:</span>
                                <span class="text-primary font-semibold">{{ $appointment->service }}</span>
                            </div>
                        @endif
                        @if($appointment->estimated_duration)
                            <div class="flex justify-between items-center">
                                <span class="text-secondary">Duration:</span>
                                <span class="text-primary font-semibold">{{ $appointment->estimated_duration }} minutes</span>
                            </div>
                        @endif
                        @if($appointment->price)
                            <div class="flex justify-between items-center">
                                <span class="text-secondary">Price:</span>
                                <span class="text-primary font-semibold">${{ number_format($appointment->price, 2) }}</span>
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Next Steps -->
                <div class="glass-card p-6 mb-6">
                    <h3 class="text-xl font-semibold text-primary mb-4">
                        <i class="fas fa-list-check mr-2"></i>What's Next?
                    </h3>
                    <div class="space-y-4">
                        <div class="flex items-start">
                            <i class="fas fa-bell text-success mr-3 mt-1"></i>
                            <div>
                                <h4 class="font-semibold text-secondary">Appointment Reminder</h4>
                                <p class="text-muted text-sm">You'll receive a reminder 24 hours before your appointment</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <i class="fas fa-clock text-warning mr-3 mt-1"></i>
                            <div>
                                <h4 class="font-semibold text-secondary">Arrive Early</h4>
                                <p class="text-muted text-sm">Please arrive 10-15 minutes before your scheduled time</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <i class="fas fa-mobile-alt text-primary mr-3 mt-1"></i>
                            <div>
                                <h4 class="font-semibold text-secondary">Day of Appointment</h4>
                                <p class="text-muted text-sm">Use this link to check in when you arrive at the studio</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Pre-Appointment Reminders -->
                <div class="glass-card p-6 mb-6 rule">
                    <h3 class="text-xl font-semibold text-primary mb-4">
                        <i class="fas fa-exclamation-circle mr-2"></i>Pre-Appointment Reminders
                    </h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <h4 class="font-semibold text-success mb-2">DO:</h4>
                            <ul class="space-y-1 text-secondary text-sm">
                                <li class="flex items-start">
                                    <i class="fas fa-check text-success mr-2 mt-1"></i>
                                    <span>Eat a good meal before coming</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-check text-success mr-2 mt-1"></i>
                                    <span>Stay hydrated</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-check text-success mr-2 mt-1"></i>
                                    <span>Bring valid ID</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-check text-success mr-2 mt-1"></i>
                                    <span>Wear comfortable clothing</span>
                                </li>
                            </ul>
                        </div>
                        <div>
                            <h4 class="font-semibold text-warning mb-2">AVOID:</h4>
                            <ul class="space-y-1 text-secondary text-sm">
                                <li class="flex items-start">
                                    <i class="fas fa-times text-warning mr-2 mt-1"></i>
                                    <span>Alcohol 24 hours before</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-times text-warning mr-2 mt-1"></i>
                                    <span>Blood thinning medications</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-times text-warning mr-2 mt-1"></i>
                                    <span>Excessive caffeine</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-times text-warning mr-2 mt-1"></i>
                                    <span>Being tired or stressed</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- Quick Actions -->
                <div class="text-center space-y-4">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <a href="{{ route('appointment.show', $appointmentLink->token) }}" class="btn-primary">
                            <i class="fas fa-tachometer-alt mr-2"></i>View Dashboard
                        </a>
                        @if($studio->phone)
                            <a href="tel:{{ $studio->phone }}" class="btn-primary">
                                <i class="fas fa-phone mr-2"></i>Call Studio
                            </a>
                        @endif
                    </div>

                    @if($studio->email)
                        <a href="mailto:{{ $studio->email }}" class="btn-primary">
                            <i class="fas fa-envelope mr-2"></i>Email Studio
                        </a>
                    @endif
                </div>

                <!-- Studio Contact Info -->
                <div class="mt-8 pt-6 border-t rule">
                    <h3 class="text-lg font-semibold text-secondary mb-4">Studio Information</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        @if($studio->phone)
                            <div class="flex items-center">
                                <i class="fas fa-phone text-primary mr-3"></i>
                                <div>
                                    <p class="text-secondary">Phone</p>
                                    <p class="text-primary font-semibold">{{ $studio->phone }}</p>
                                </div>
                            </div>
                        @endif
                        @if($studio->address)
                            <div class="flex items-center">
                                <i class="fas fa-map-marker-alt text-primary mr-3"></i>
                                <div>
                                    <p class="text-secondary">Address</p>
                                    <p class="text-primary font-semibold">{{ $studio->address }}</p>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
        // Add celebration animation on page load
        document.addEventListener('DOMContentLoaded', function() {
            const celebrationElement = document.querySelector('.celebration');
            if (celebrationElement) {
                celebrationElement.classList.add('celebration');
            }
        });
    </script>
@endpush