@extends('layouts.client')

@section('title', 'Aftercare.Blade')

@section('content')
<div class="min-h-screen py-8 px-4">
        <div class="max-w-4xl 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">Aftercare Instructions</p>
                </div>

                <!-- Appointment Info -->
                <div class="glass-card p-6 mb-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <h3 class="text-lg font-medium text-secondary mb-2">Client Information</h3>
                            <p class="text-primary text-xl font-semibold">{{ $appointment->client->name }}</p>
                            <p class="text-secondary">{{ $appointment->client->email }}</p>
                        </div>
                        <div>
                            <h3 class="text-lg font-medium text-secondary mb-2">Appointment Completed</h3>
                            <p class="text-primary text-lg font-semibold">{{ $appointment->scheduled_at->format('F j, Y') }}</p>
                            <p class="text-secondary">{{ $appointment->scheduled_at->format('g:i A') }}</p>
                        </div>
                    </div>
                </div>

                <!-- Aftercare Instructions -->
                <div class="space-y-6">
                    <!-- Immediate Care (First 24 Hours) -->
                    <div class="glass-card p-6">
                        <h3 class="text-xl font-semibold text-primary mb-4">
                            <i class="fas fa-clock mr-2"></i>Immediate Care (First 24 Hours)
                        </h3>
                        <div class="space-y-4">
                            <div class="flex items-start">
                                <i class="fas fa-hand-paper text-warning text-xl mr-3 mt-1"></i>
                                <div>
                                    <h4 class="font-semibold text-secondary mb-1">Keep Bandage On</h4>
                                    <p class="text-muted">Leave the initial bandage on for 2-4 hours, then remove and gently wash with lukewarm water and antibacterial soap.</p>
                                </div>
                            </div>
                            <div class="flex items-start">
                                <i class="fas fa-water text-primary text-xl mr-3 mt-1"></i>
                                <div>
                                    <h4 class="font-semibold text-secondary mb-1">Gentle Washing</h4>
                                    <p class="text-muted">Use your clean hands to gently wash the tattoo with lukewarm water and fragrance-free antibacterial soap. Pat dry with a clean towel.</p>
                                </div>
                            </div>
                            <div class="flex items-start">
                                <i class="fas fa-droplet text-success text-xl mr-3 mt-1"></i>
                                <div>
                                    <h4 class="font-semibold text-secondary mb-1">Apply Thin Layer</h4>
                                    <p class="text-muted">Apply a very thin layer of recommended aftercare product or fragrance-free moisturizer. Don't over-apply.</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Healing Process (Days 2-14) -->
                    <div class="glass-card p-6">
                        <h3 class="text-xl font-semibold text-primary mb-4">
                            <i class="fas fa-heart-pulse mr-2"></i>Healing Process (Days 2-14)
                        </h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div class="space-y-4">
                                <h4 class="font-semibold text-success">DO:</h4>
                                <ul class="space-y-2 text-secondary">
                                    <li class="flex items-start">
                                        <i class="fas fa-check text-success mr-2 mt-1"></i>
                                        <span>Wash 2-3 times daily with antibacterial soap</span>
                                    </li>
                                    <li class="flex items-start">
                                        <i class="fas fa-check text-success mr-2 mt-1"></i>
                                        <span>Apply thin layer of aftercare product</span>
                                    </li>
                                    <li class="flex items-start">
                                        <i class="fas fa-check text-success mr-2 mt-1"></i>
                                        <span>Wear loose, breathable clothing</span>
                                    </li>
                                    <li class="flex items-start">
                                        <i class="fas fa-check text-success mr-2 mt-1"></i>
                                        <span>Stay hydrated and eat well</span>
                                    </li>
                                    <li class="flex items-start">
                                        <i class="fas fa-check text-success mr-2 mt-1"></i>
                                        <span>Get plenty of rest</span>
                                    </li>
                                </ul>
                            </div>
                            <div class="space-y-4">
                                <h4 class="font-semibold text-danger">DON'T:</h4>
                                <ul class="space-y-2 text-secondary">
                                    <li class="flex items-start">
                                        <i class="fas fa-times text-danger mr-2 mt-1"></i>
                                        <span>Pick, scratch, or peel the tattoo</span>
                                    </li>
                                    <li class="flex items-start">
                                        <i class="fas fa-times text-danger mr-2 mt-1"></i>
                                        <span>Soak in baths, pools, or hot tubs</span>
                                    </li>
                                    <li class="flex items-start">
                                        <i class="fas fa-times text-danger mr-2 mt-1"></i>
                                        <span>Expose to direct sunlight</span>
                                    </li>
                                    <li class="flex items-start">
                                        <i class="fas fa-times text-danger mr-2 mt-1"></i>
                                        <span>Use lotions with fragrance or alcohol</span>
                                    </li>
                                    <li class="flex items-start">
                                        <i class="fas fa-times text-danger mr-2 mt-1"></i>
                                        <span>Exercise heavily (first 3-5 days)</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <!-- Warning Signs -->
                    <div class="glass-card p-6 border-red-500/20 bg-red-500/10">
                        <h3 class="text-xl font-semibold text-danger mb-4">
                            <i class="fas fa-exclamation-triangle mr-2"></i>Warning Signs - Contact Us Immediately
                        </h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <ul class="space-y-2 text-secondary">
                                <li class="flex items-start">
                                    <i class="fas fa-thermometer-half text-danger mr-2 mt-1"></i>
                                    <span>Fever or chills</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-fire text-danger mr-2 mt-1"></i>
                                    <span>Excessive redness or swelling</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-tint text-danger mr-2 mt-1"></i>
                                    <span>Pus or unusual discharge</span>
                                </li>
                            </ul>
                            <ul class="space-y-2 text-secondary">
                                <li class="flex items-start">
                                    <i class="fas fa-bolt text-danger mr-2 mt-1"></i>
                                    <span>Red streaks extending from tattoo</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-allergies text-danger mr-2 mt-1"></i>
                                    <span>Excessive itching or rash</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-exclamation text-danger mr-2 mt-1"></i>
                                    <span>Any concerning changes</span>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <!-- Contact Information -->
                    <div class="glass-card p-6">
                        <h3 class="text-xl font-semibold text-primary mb-4">
                            <i class="fas fa-phone mr-2"></i>Contact Information
                        </h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            @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>

                    <!-- Mark as Viewed Button -->
                    <div class="text-center">
                        <form method="POST" action="{{ route('appointment.show', $appointmentLink->token) }}">
                            @csrf
                            <input type="hidden" name="mark_aftercare_viewed" value="1">
                            <button type="submit" class="btn-primary">
                                <i class="fas fa-check mr-2"></i>I've Read the Aftercare Instructions
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection