@extends('layouts.client')

@section('title', 'Checkin.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">Welcome! You're Ready to Check In</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>Today's Appointment
                    </h3>
                    <div class="space-y-4">
                        <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">Estimated Duration:</span>
                                <span class="text-primary font-semibold">{{ $appointment->estimated_duration }} minutes</span>
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Check-in Status -->
                <div class="text-center mb-8">
                    @if($appointment->status === 'confirmed')
                        <div class="glass-card p-6 border-green-500/20 bg-green-500/10">
                            <i class="fas fa-check-circle text-success text-4xl mb-4"></i>
                            <h3 class="text-2xl font-semibold text-success mb-2">Ready for Your Session!</h3>
                            <p class="text-secondary mb-4">
                                Your appointment is confirmed and you're all set. Please let the front desk know you've arrived.
                            </p>
                            <div class="text-muted text-sm">
                                <i class="fas fa-clock mr-1"></i>
                                Current time: {{ now()->format('g:i A') }}
                            </div>
                        </div>
                    @else
                        <div class="glass-card p-6 rule">
                            <i class="fas fa-clock text-primary text-4xl mb-4"></i>
                            <h3 class="text-2xl font-semibold text-primary mb-2">Check-In Information</h3>
                            <p class="text-secondary mb-4">
                                Please inform the front desk that you've arrived for your appointment.
                            </p>
                        </div>
                    @endif
                </div>

                <!-- Pre-Appointment Checklist -->
                <div class="glass-card p-6 mb-6">
                    <h3 class="text-xl font-semibold text-primary mb-4">
                        <i class="fas fa-clipboard-check mr-2"></i>Pre-Appointment Checklist
                    </h3>
                    <div class="space-y-3">
                        <div class="flex items-center">
                            <i class="fas fa-check text-success mr-3"></i>
                            <span class="text-secondary">Consent form signed</span>
                        </div>
                        <div class="flex items-center">
                            <i class="fas fa-check text-success mr-3"></i>
                            <span class="text-secondary">Appointment confirmed</span>
                        </div>
                        <div class="flex items-center">
                            <i class="fas fa-utensils text-warning mr-3"></i>
                            <span class="text-secondary">Had a good meal recently</span>
                        </div>
                        <div class="flex items-center">
                            <i class="fas fa-tint text-warning mr-3"></i>
                            <span class="text-secondary">Stayed hydrated</span>
                        </div>
                        <div class="flex items-center">
                            <i class="fas fa-id-card text-warning mr-3"></i>
                            <span class="text-secondary">Brought valid ID</span>
                        </div>
                        <div class="flex items-center">
                            <i class="fas fa-credit-card text-warning mr-3"></i>
                            <span class="text-secondary">Have payment ready</span>
                        </div>
                    </div>
                </div>

                <!-- What to Expect -->
                <div class="glass-card p-6 mb-6">
                    <h3 class="text-xl font-semibold text-primary mb-4">
                        <i class="fas fa-info-circle mr-2"></i>What to Expect Today
                    </h3>
                    <div class="space-y-4">
                        <div class="flex items-start">
                            <i class="fas fa-comments text-primary mr-3 mt-1"></i>
                            <div>
                                <h4 class="font-semibold text-secondary">Consultation</h4>
                                <p class="text-muted text-sm">Final design review and placement discussion</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <i class="fas fa-paint-brush text-primary mr-3 mt-1"></i>
                            <div>
                                <h4 class="font-semibold text-secondary">Preparation</h4>
                                <p class="text-muted text-sm">Skin preparation and stencil application</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <i class="fas fa-magic text-primary mr-3 mt-1"></i>
                            <div>
                                <h4 class="font-semibold text-secondary">Tattoo Session</h4>
                                <p class="text-muted text-sm">The actual tattooing process</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <i class="fas fa-heart text-primary mr-3 mt-1"></i>
                            <div>
                                <h4 class="font-semibold text-secondary">Aftercare</h4>
                                <p class="text-muted text-sm">Instructions for proper healing</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Contact Studio -->
                <div class="text-center">
                    <p class="text-secondary mb-4">Need assistance? Contact the studio:</p>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        @if($studio->phone)
                            <a href="tel:{{ $studio->phone }}" class="btn-primary">
                                <i class="fas fa-phone mr-2"></i>Call {{ $studio->phone }}
                            </a>
                        @endif
                        @if($studio->email)
                            <a href="mailto:{{ $studio->email }}" class="btn-primary">
                                <i class="fas fa-envelope mr-2"></i>Email Studio
                            </a>
                        @endif
                    </div>
                </div>

                <!-- Studio Location -->
                @if($studio->address)
                    <div class="mt-6 pt-6 border-t rule">
                        <h3 class="text-lg font-semibold text-secondary mb-2">Studio Location</h3>
                        <p class="text-primary">{{ $studio->address }}</p>
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
        // Auto-refresh the current time
        function updateCurrentTime() {
            const now = new Date();
            const timeString = now.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
            const timeElement = document.querySelector('.text-muted .fas.fa-clock').parentElement;
            if (timeElement) {
                timeElement.innerHTML = '<i class="fas fa-clock mr-1"></i>Current time: ' + timeString;
            }
        }

        // Update time every minute
        setInterval(updateCurrentTime, 60000);
    </script>
@endpush