@extends('layouts.client')

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

@push('head')
<style>
        /* Dashboard specific styles */
        .stage-card {
            background: rgba(15, 23, 42, 0.7);
            backdrop-filter: blur(15px);
            border: 1px solid rgba(59, 130, 246, 0.2);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            transition: all 0.3s ease;
        }

        .stage-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
        }

        .stage-completed {
            border-color: rgba(34, 197, 94, 0.5);
            background: rgba(34, 197, 94, 0.1);
        }

        .stage-active {
            border-color: rgba(59, 130, 246, 0.8);
            background: rgba(59, 130, 246, 0.1);
        }
    </style>
@endpush

@section('content')
<div class="min-h-screen py-8 px-4">
        <div class="max-w-6xl mx-auto">
            <!-- Header -->
            <div class="glass-card rounded-xl p-8 mb-8">
                <div class="text-center mb-6">
                    @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">Your Appointment Portal</p>
                </div>

                <!-- Progress Bar -->
                <div class="mb-6">
                    <div class="flex justify-between text-sm text-secondary mb-2">
                        <span>Progress</span>
                        <span>{{ $appointmentLink->getProgressPercentage() }}%</span>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-fill" style="width: {{ $appointmentLink->getProgressPercentage() }}%"></div>
                    </div>
                </div>

                <!-- Appointment Info -->
                <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>
                        <p class="text-secondary">{{ $appointment->client->phone }}</p>
                    </div>
                    <div>
                        <h3 class="text-lg font-medium text-secondary mb-2">Appointment Details</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>
                        <p class="text-secondary capitalize">Status: {{ $appointment->status }}</p>
                    </div>
                </div>
            </div>

            <!-- Appointment Stages -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                @php
                    $stages = [
                        'consent' => [
                            'title' => 'Consent Form',
                            'icon' => 'fa-file-signature',
                            'description' => 'Complete your digital consent form',
                            'time' => '7 days before appointment'
                        ],
                        'confirmation' => [
                            'title' => 'Confirm Appointment',
                            'icon' => 'fa-calendar-check',
                            'description' => 'Confirm your appointment details',
                            'time' => '1 day before appointment'
                        ],
                        'checkin' => [
                            'title' => 'Check-In',
                            'icon' => 'fa-door-open',
                            'description' => 'Check in for your appointment',
                            'time' => 'Day of appointment'
                        ],
                        'aftercare' => [
                            'title' => 'Aftercare',
                            'icon' => 'fa-heart-pulse',
                            'description' => 'View aftercare instructions',
                            'time' => 'After appointment'
                        ],
                        'progress' => [
                            'title' => 'Progress Photos',
                            'icon' => 'fa-camera',
                            'description' => 'Upload healing progress photos',
                            'time' => '1-2 weeks after'
                        ],
                        'review' => [
                            'title' => 'Review',
                            'icon' => 'fa-star',
                            'description' => 'Leave a review of your experience',
                            'time' => '1 month after'
                        ]
                    ];
                @endphp

                @foreach($stages as $stageKey => $stage)
                    @php
                        $isCompleted = $appointmentLink->hasCompletedStage($stageKey);
                        $isActive = $appointmentLink->current_stage === $stageKey;
                        $cardClass = $isCompleted ? 'stage-completed' : ($isActive ? 'stage-active' : '');
                    @endphp

                    <div class="stage-card {{ $cardClass }} rounded-xl p-6">
                        <div class="flex items-start justify-between mb-4">
                            <div class="flex items-center">
                                <div class="w-12 h-12 rounded-full flex items-center justify-center mr-4 {{ $isCompleted ? 'bg-green-500/20' : ($isActive ? '' : 'bg-gray-500/20') }}">
                                    <i class="fas {{ $stage['icon'] }} text-lg {{ $isCompleted ? 'text-success' : ($isActive ? 'text-primary' : 'text-muted') }}"></i>
                                </div>
                                <div>
                                    <h3 class="text-lg font-semibold {{ $isCompleted ? 'text-success' : ($isActive ? 'text-primary' : 'text-secondary') }}">
                                        {{ $stage['title'] }}
                                    </h3>
                                    <p class="text-sm text-muted">{{ $stage['time'] }}</p>
                                </div>
                            </div>
                            @if($isCompleted)
                                <i class="fas fa-check-circle text-success text-xl"></i>
                            @elseif($isActive)
                                <i class="fas fa-clock text-primary text-xl"></i>
                            @endif
                        </div>

                        <p class="text-secondary mb-4">{{ $stage['description'] }}</p>

                        @if($isActive)
                            <a href="{{ route('appointment.show', $appointmentLink->token) }}" class="btn-primary w-full text-center inline-block">
                                <i class="fas fa-arrow-right mr-2"></i>Continue
                            </a>
                        @elseif($isCompleted)
                            <div class="text-success text-sm">
                                <i class="fas fa-check mr-2"></i>Completed
                                @if($appointmentLink->{$stageKey . '_at'})
                                    on {{ $appointmentLink->{$stageKey . '_at'}->format('M j, Y') }}
                                @endif
                            </div>
                        @else
                            <div class="text-muted text-sm">
                                <i class="fas fa-clock mr-2"></i>Coming up
                            </div>
                        @endif
                    </div>
                @endforeach
            </div>

            <!-- Messages -->
            @if(session('success'))
                <div class="glass-card rounded-xl p-6 mt-8 border-green-500/20 bg-green-500/10">
                    <div class="flex items-center">
                        <i class="fas fa-check-circle text-success text-xl mr-3"></i>
                        <p class="text-success">{{ session('success') }}</p>
                    </div>
                </div>
            @endif

            @if(session('error'))
                <div class="glass-card rounded-xl p-6 mt-8 border-red-500/20 bg-red-500/10">
                    <div class="flex items-center">
                        <i class="fas fa-exclamation-circle text-danger text-xl mr-3"></i>
                        <p class="text-danger">{{ session('error') }}</p>
                    </div>
                </div>
            @endif

            <!-- Link Expiry Notice -->
            <div class="text-center mt-8 text-muted text-sm">
                <i class="fas fa-clock mr-2"></i>This link expires on {{ $appointmentLink->expires_at->format('F j, Y \a\t g:i A') }}
            </div>
        </div>
    </div>
@endsection