@extends('layouts.client')

@section('title', 'Confirmation.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">Confirm Your Appointment</p>
                </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>

                <!-- Confirmation Form -->
                <form method="POST" action="{{ route('appointment.confirm.submit', $appointmentLink->token) }}">
                    @csrf

                    <!-- Confirmation Options -->
                    <div class="mb-6">
                        <h3 class="text-lg font-semibold text-secondary mb-4">Please confirm your appointment:</h3>
                        <div class="space-y-4">
                            <label class="flex items-center p-4 glass-card rounded-lg cursor-pointer hover:bg-green-500/10 transition-colors">
                                <input type="radio" name="action" value="confirm" class="w-5 h-5 text-[var(--stencil)] border-2 border-blue-500 focus:ring-blue-500 bg-transparent" required>
                                <div class="ml-4">
                                    <div class="text-success font-semibold">Confirm Appointment</div>
                                    <div class="text-muted text-sm">I will be there at the scheduled time</div>
                                </div>
                            </label>

                            <label class="flex items-center p-4 glass-card rounded-lg cursor-pointer hover:bg-yellow-500/10 transition-colors">
                                <input type="radio" name="action" value="reschedule" class="w-5 h-5 text-[var(--stencil)] border-2 border-blue-500 focus:ring-blue-500 bg-transparent" required>
                                <div class="ml-4">
                                    <div class="text-warning font-semibold">Request Reschedule</div>
                                    <div class="text-muted text-sm">I need to change the appointment time</div>
                                </div>
                            </label>
                        </div>
                    </div>

                    <!-- Optional Notes -->
                    <div class="mb-6">
                        <label for="notes" class="block text-secondary font-semibold mb-2">Notes (optional):</label>
                        <textarea
                            id="notes"
                            name="notes"
                            rows="4"
                            class="w-full p-3 glass-card rounded-lg border rule bg-transparent text-[var(--ink)] placeholder-gray-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/50 focus:outline-none resize-none"
                            placeholder="Any additional notes or special requests..."
                        ></textarea>
                    </div>

                    <!-- Important Reminders -->
                    <div class="glass-card p-6 mb-6 rule">
                        <h3 class="text-lg font-semibold text-primary mb-4">
                            <i class="fas fa-info-circle mr-2"></i>Important Reminders
                        </h3>
                        <ul class="space-y-2 text-secondary">
                            <li class="flex items-start">
                                <i class="fas fa-clock text-primary mr-2 mt-1"></i>
                                <span>Please arrive 10-15 minutes early</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-utensils text-primary mr-2 mt-1"></i>
                                <span>Eat a good meal before your appointment</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-tint text-primary mr-2 mt-1"></i>
                                <span>Stay hydrated and avoid alcohol 24 hours before</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-id-card text-primary mr-2 mt-1"></i>
                                <span>Bring valid ID for verification</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-credit-card text-primary mr-2 mt-1"></i>
                                <span>Payment methods accepted: Cash, Card</span>
                            </li>
                        </ul>
                    </div>

                    <!-- Submit Button -->
                    <div class="text-center">
                        <button type="submit" class="btn-primary w-full">
                            <i class="fas fa-check mr-2"></i>Submit Response
                        </button>
                    </div>
                </form>

                <!-- Contact Information -->
                <div class="mt-6 pt-6 border-t rule">
                    <h3 class="text-lg font-semibold text-secondary mb-4">Questions? Contact Us</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->email)
                            <div class="flex items-center">
                                <i class="fas fa-envelope text-primary mr-3"></i>
                                <div>
                                    <p class="text-secondary">Email</p>
                                    <p class="text-primary font-semibold">{{ $studio->email }}</p>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
        // Auto-expand textarea
        const textarea = document.getElementById('notes');
        textarea.addEventListener('input', function() {
            this.style.height = 'auto';
            this.style.height = (this.scrollHeight) + 'px';
        });
    </script>
@endpush