@extends('crm.layouts.app')

@section('title', 'Appointment #' . $appointment->id)

@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const canvas = document.getElementById('body-canvas-appointment');
    if (!canvas) return;

    const container = canvas.parentElement;
    const highlightRegions = @json($appointment->bodyParts->pluck('region_3d')->filter()->values());

    const scene = new THREE.Scene();
    scene.background = new THREE.Color(0xf9fafb);

    const camera = new THREE.PerspectiveCamera(50, container.clientWidth / container.clientHeight, 0.1, 1000);
    camera.position.set(0, 1, 3);

    const renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true });
    renderer.setSize(container.clientWidth, container.clientHeight);
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.shadowMap.enabled = true;

    const controls = new THREE.OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;
    controls.dampingFactor = 0.05;
    controls.minDistance = 1.5;
    controls.maxDistance = 6;

    scene.add(new THREE.AmbientLight(0x404040, 0.6));
    const dirLight = new THREE.DirectionalLight(0xffffff, 0.8);
    dirLight.position.set(1, 1, 1);
    scene.add(dirLight);
    const pointLight = new THREE.PointLight(0xffffff, 0.4);
    pointLight.position.set(-1, 1, 1);
    scene.add(pointLight);

    const loader = new THREE.GLTFLoader();
    loader.load('/models/male_normal.glb', function(gltf) {
        const model = gltf.scene;

        model.traverse(function(child) {
            if (child.isMesh) {
                const isHighlighted = highlightRegions.includes(child.name);

                child.material = new THREE.MeshStandardMaterial({
                    color: isHighlighted ? 0x4f46e5 : 0xd1d5db,
                    metalness: 0.1,
                    roughness: isHighlighted ? 0.5 : 0.9,
                    transparent: !isHighlighted,
                    opacity: isHighlighted ? 1.0 : 0.4,
                });

                if (isHighlighted) {
                    child.material.emissive = new THREE.Color(0x312e81);
                    child.material.emissiveIntensity = 0.15;
                }

                child.castShadow = true;
                child.receiveShadow = true;
            }
        });

        const box = new THREE.Box3().setFromObject(model);
        const center = box.getCenter(new THREE.Vector3());
        const size = box.getSize(new THREE.Vector3());
        model.position.set(-center.x, -center.y, -center.z);
        const scale = 2 / Math.max(size.x, size.y, size.z);
        model.scale.set(scale, scale, scale);

        scene.add(model);
        const loading = document.getElementById('model-loading');
        if (loading) loading.style.display = 'none';
    }, undefined, function() {
        const loading = document.getElementById('model-loading');
        if (loading) loading.innerHTML = '<p class="text-sm text-gray-500">Could not load 3D model</p>';
    });

    function animate() {
        requestAnimationFrame(animate);
        controls.update();
        renderer.render(scene, camera);
    }
    animate();

    window.addEventListener('resize', function() {
        camera.aspect = container.clientWidth / container.clientHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(container.clientWidth, container.clientHeight);
    });
});
</script>
@endpush

@section('content')
<div class="min-h-screen bg-gray-50">
    <!-- Page Header -->
    <div class="mb-8">
        <div class="sm:flex sm:items-center sm:justify-between">
            <div>
                <nav class="flex mb-4" aria-label="Breadcrumb">
                    <ol class="inline-flex items-center space-x-1 md:space-x-3">
                        <li class="inline-flex items-center">
                            <a href="{{ route('crm.appointments.index') }}" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-indigo-600">
                                <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path>
                                </svg>
                                Appointments
                            </a>
                        </li>
                        <li>
                            <div class="flex items-center">
                                <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
                                </svg>
                                <span class="ml-1 text-sm font-medium text-gray-500 md:ml-2">Appointment #{{ $appointment->id }}</span>
                            </div>
                        </li>
                    </ol>
                </nav>
                <h1 class="text-3xl font-bold text-gray-900">Appointment Details</h1>
                <p class="mt-2 text-sm text-gray-600">{{ $appointment->client->name ?? 'Unknown Client' }} &mdash; {{ $appointment->scheduled_at->format('l, F j, Y') }}</p>
            </div>
            <div class="mt-4 sm:mt-0 flex gap-3">
                <a href="{{ route('crm.appointments.index') }}"
                   class="inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
                    <svg class="-ml-0.5 mr-1.5 h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M17 10a.75.75 0 01-.75.75H5.612l4.158 3.96a.75.75 0 11-1.04 1.08l-5.5-5.25a.75.75 0 010-1.08l5.5-5.25a.75.75 0 111.04 1.08L5.612 9.25H16.25A.75.75 0 0117 10z" clip-rule="evenodd" />
                    </svg>
                    Back
                </a>
                <a href="{{ route('crm.appointments.edit', $appointment) }}"
                   class="inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500">
                    <svg class="-ml-0.5 mr-1.5 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                        <path d="M2.695 14.763l-1.262 3.154a.5.5 0 00.65.65l3.155-1.262a4 4 0 001.343-.885L17.5 5.5a2.121 2.121 0 00-3-3L3.58 13.42a4 4 0 00-.885 1.343z" />
                    </svg>
                    Edit Appointment
                </a>
            </div>
        </div>
    </div>

    @if (session('success'))
        <div class="mb-6 rounded-lg bg-green-50 p-4 border border-green-200">
            <div class="flex">
                <svg class="h-5 w-5 text-green-400 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
                </svg>
                <p class="ml-3 text-sm font-medium text-green-800">{{ session('success') }}</p>
            </div>
        </div>
    @endif

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Main Content -->
        <div class="lg:col-span-2 space-y-6">

            <!-- Appointment Info Card -->
            <div class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-lg p-6">
                <h2 class="text-lg font-semibold text-gray-900 mb-4 pb-2 border-b border-gray-200">Appointment Information</h2>
                <dl class="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-4">
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Client</dt>
                        <dd class="mt-1 text-sm text-gray-900">
                            @if($appointment->client)
                                <a href="{{ route('crm.clients.show', $appointment->client) }}" class="text-indigo-600 hover:text-indigo-500 font-medium">{{ $appointment->client->name }}</a>
                            @else
                                <span class="text-gray-400">Unassigned</span>
                            @endif
                        </dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Status</dt>
                        <dd class="mt-1">
                            @php
                                $statusColors = [
                                    'scheduled' => 'bg-blue-50 text-blue-700 ring-blue-600/20',
                                    'confirmed' => 'bg-indigo-50 text-indigo-700 ring-indigo-600/20',
                                    'in_progress' => 'bg-yellow-50 text-yellow-800 ring-yellow-600/20',
                                    'completed' => 'bg-green-50 text-green-700 ring-green-600/20',
                                    'cancelled' => 'bg-red-50 text-red-700 ring-red-600/20',
                                    'no_show' => 'bg-gray-50 text-gray-600 ring-gray-500/10',
                                ];
                                $color = $statusColors[$appointment->status] ?? 'bg-gray-50 text-gray-600 ring-gray-500/10';
                            @endphp
                            <span class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset {{ $color }}">
                                {{ str_replace('_', ' ', ucfirst($appointment->status)) }}
                            </span>
                        </dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Artist</dt>
                        <dd class="mt-1 text-sm text-gray-900">
                            @if($appointment->artist)
                                <div class="flex items-center gap-2">
                                    <span class="inline-flex h-6 w-6 items-center justify-center rounded-full bg-indigo-100">
                                        <span class="text-xs font-medium text-indigo-700">{{ strtoupper(substr($appointment->artist->name, 0, 1)) }}</span>
                                    </span>
                                    {{ $appointment->artist->name }}
                                </div>
                            @else
                                <span class="text-gray-400">Not assigned</span>
                            @endif
                        </dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Scheduled Date</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ $appointment->scheduled_at->format('l, F j, Y') }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Time</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ $appointment->scheduled_at->format('g:i A') }}</dd>
                    </div>
                </dl>
            </div>

            <!-- Notes Card -->
            @if($appointment->notes)
            <div class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-lg p-6">
                <h2 class="text-lg font-semibold text-gray-900 mb-4 pb-2 border-b border-gray-200">Notes</h2>
                <div class="prose prose-sm max-w-none">
                    <p class="text-gray-700 whitespace-pre-line">{{ $appointment->notes }}</p>
                </div>
            </div>
            @endif

            <!-- Images Gallery -->
            <div class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-lg p-6">
                <div class="flex items-center justify-between mb-4 pb-2 border-b border-gray-200">
                    <h2 class="text-lg font-semibold text-gray-900">Images</h2>
                    <span class="text-sm text-gray-500">{{ $appointment->images->count() }} {{ Str::plural('photo', $appointment->images->count()) }}</span>
                </div>

                @if($appointment->images->count() > 0)
                    <ul role="list" class="grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 lg:grid-cols-4 xl:gap-x-8">
                        @foreach ($appointment->images as $image)
                            <li class="relative" x-data="{ showDelete: false }" @mouseenter="showDelete = true" @mouseleave="showDelete = false">
                                <div class="group overflow-hidden rounded-lg bg-gray-100 focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-indigo-600">
                                    <img src="{{ asset('storage/' . $image->path) }}" alt="{{ ucfirst($image->type) }} image"
                                         class="pointer-events-none aspect-10/7 w-full rounded-lg object-cover outline -outline-offset-1 outline-black/5 group-hover:opacity-75" />
                                </div>
                                <div class="mt-2 flex items-center justify-between">
                                    <div>
                                        <p class="block truncate text-sm font-medium text-gray-900">{{ ucfirst($image->type) }}</p>
                                        <p class="block text-sm text-gray-500">{{ $image->created_at->format('M j, Y') }}</p>
                                    </div>
                                    <form method="POST" action="{{ route('crm.appointments.images.destroy', $image) }}" x-show="showDelete" x-transition
                                          onsubmit="return confirm('Delete this image?')">
                                        @csrf @method('DELETE')
                                        <button type="submit" class="rounded p-1 text-gray-400 hover:text-red-600 hover:bg-red-50 transition-colors">
                                            <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                                                <path fill-rule="evenodd" d="M8.75 1A2.75 2.75 0 006 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 10.23 1.482l.149-.022.841 10.518A2.75 2.75 0 007.596 19h4.807a2.75 2.75 0 002.742-2.53l.841-10.52.149.023a.75.75 0 00.23-1.482A41.03 41.03 0 0014 4.193V3.75A2.75 2.75 0 0011.25 1h-2.5zM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4zM8.58 7.72a.75.75 0 00-1.5.06l.3 7.5a.75.75 0 101.5-.06l-.3-7.5zm4.34.06a.75.75 0 10-1.5-.06l-.3 7.5a.75.75 0 101.5.06l.3-7.5z" clip-rule="evenodd" />
                                            </svg>
                                        </button>
                                    </form>
                                </div>
                            </li>
                        @endforeach
                    </ul>
                @else
                    <div class="text-center py-12">
                        <svg class="mx-auto h-12 w-12 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0 0 22.5 18.75V5.25A2.25 2.25 0 0 0 20.25 3H3.75A2.25 2.25 0 0 0 1.5 5.25v13.5A2.25 2.25 0 0 0 3.75 21Z" />
                        </svg>
                        <h3 class="mt-2 text-sm font-semibold text-gray-900">No images</h3>
                        <p class="mt-1 text-sm text-gray-500">Upload photos from the edit page.</p>
                    </div>
                @endif
            </div>

            <!-- 3D Body Mapping -->
            @php
                $bodyParts = $appointment->bodyParts;
            @endphp
            <div class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-lg overflow-hidden">
                <div class="p-6 pb-0">
                    <div class="flex items-center justify-between mb-4 pb-2 border-b border-gray-200">
                        <h2 class="text-lg font-semibold text-gray-900">Body Mapping</h2>
                        @if($bodyParts->count() > 0)
                            <span class="text-sm text-gray-500">{{ $bodyParts->count() }} {{ Str::plural('zone', $bodyParts->count()) }}</span>
                        @endif
                    </div>
                </div>

                <!-- 3D Model Viewer -->
                <div class="relative bg-gray-50" style="height: 400px;">
                    <canvas id="body-canvas-appointment" class="w-full h-full" style="cursor: grab;"></canvas>
                    <div id="model-loading" class="absolute inset-0 flex items-center justify-center bg-white/80">
                        <div class="text-center">
                            <svg class="animate-spin h-8 w-8 text-indigo-600 mx-auto mb-2" fill="none" viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
                            </svg>
                            <p class="text-sm text-gray-500">Loading 3D model...</p>
                        </div>
                    </div>
                    <div class="absolute bottom-3 left-3 bg-black/60 text-white px-3 py-1.5 rounded-md text-xs">
                        Drag to rotate &middot; Scroll to zoom
                    </div>
                </div>

                <!-- Zone Details List -->
                @if($bodyParts->count() > 0)
                <div class="p-6 pt-4 divide-y divide-gray-200">
                    @foreach($bodyParts as $part)
                        <div class="py-4 first:pt-0 last:pb-0">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center gap-3">
                                    <span class="flex h-8 w-8 items-center justify-center rounded-full bg-indigo-50 ring-1 ring-indigo-600/20">
                                        <svg class="h-4 w-4 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                                        </svg>
                                    </span>
                                    <div>
                                        <p class="text-sm font-semibold text-gray-900">{{ $part->label }}</p>
                                        @if($part->pivot->notes)
                                            <p class="text-sm text-gray-500 mt-0.5">{{ $part->pivot->notes }}</p>
                                        @endif
                                    </div>
                                </div>
                                @php
                                    $zoneColors = [
                                        'todo' => 'bg-gray-50 text-gray-600 ring-gray-500/10',
                                        'in_progress' => 'bg-yellow-50 text-yellow-800 ring-yellow-600/20',
                                        'completed' => 'bg-green-50 text-green-700 ring-green-600/20',
                                        'healed' => 'bg-blue-50 text-blue-700 ring-blue-600/20',
                                    ];
                                    $zoneColor = $zoneColors[$part->pivot->status] ?? 'bg-gray-50 text-gray-600 ring-gray-500/10';
                                @endphp
                                <span class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset {{ $zoneColor }}">
                                    {{ str_replace('_', ' ', ucfirst($part->pivot->status)) }}
                                </span>
                            </div>
                            @if($part->pivot->photo_path)
                                <div class="mt-3 ml-11">
                                    <img src="{{ asset('storage/' . $part->pivot->photo_path) }}" alt="{{ $part->label }}"
                                         class="h-24 w-24 rounded-lg object-cover ring-1 ring-gray-900/5" />
                                </div>
                            @endif
                        </div>
                    @endforeach
                </div>
                @else
                <div class="px-6 pb-6 pt-2">
                    <p class="text-sm text-gray-500">No body zones mapped yet. Add zones from the edit page.</p>
                </div>
                @endif
            </div>

        </div>

        <!-- Sidebar -->
        <div class="space-y-6">

            <!-- Financial Summary -->
            <div class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-lg p-6">
                <h2 class="text-lg font-semibold text-gray-900 mb-4 pb-2 border-b border-gray-200">Financials</h2>
                <dl class="space-y-3">
                    <div class="flex justify-between">
                        <dt class="text-sm text-gray-500">Price</dt>
                        <dd class="text-sm font-semibold text-gray-900">${{ number_format($appointment->price, 2) }}</dd>
                    </div>
                    @if($appointment->tip_amount > 0)
                    <div class="flex justify-between">
                        <dt class="text-sm text-gray-500">Tip</dt>
                        <dd class="text-sm font-semibold text-green-600">${{ number_format($appointment->tip_amount, 2) }}</dd>
                    </div>
                    @endif
                    @if($appointment->earnings > 0)
                    <div class="flex justify-between">
                        <dt class="text-sm text-gray-500">Earnings</dt>
                        <dd class="text-sm font-semibold text-gray-900">${{ number_format($appointment->earnings, 2) }}</dd>
                    </div>
                    @endif
                    <div class="flex justify-between pt-3 border-t border-gray-200">
                        <dt class="text-sm font-medium text-gray-900">Total</dt>
                        <dd class="text-sm font-bold text-gray-900">${{ number_format($appointment->price + ($appointment->tip_amount ?? 0), 2) }}</dd>
                    </div>
                </dl>
            </div>

            <!-- Client Quick Info -->
            @if($appointment->client)
            <div class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-lg p-6">
                <h2 class="text-lg font-semibold text-gray-900 mb-4 pb-2 border-b border-gray-200">Client</h2>
                <div class="flex items-center gap-3 mb-4">
                    <span class="inline-flex h-10 w-10 items-center justify-center rounded-full bg-indigo-100">
                        <span class="text-sm font-medium text-indigo-700">{{ strtoupper(substr($appointment->client->name, 0, 1)) }}</span>
                    </span>
                    <div>
                        <p class="text-sm font-semibold text-gray-900">{{ $appointment->client->name }}</p>
                        @if($appointment->client->email)
                            <p class="text-sm text-gray-500">{{ $appointment->client->email }}</p>
                        @endif
                    </div>
                </div>
                @if($appointment->client->phone)
                    <div class="flex items-center gap-2 text-sm text-gray-500">
                        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                        </svg>
                        {{ $appointment->client->phone }}
                    </div>
                @endif
                <div class="mt-4">
                    <a href="{{ route('crm.clients.show', $appointment->client) }}"
                       class="text-sm font-medium text-indigo-600 hover:text-indigo-500">View full profile &rarr;</a>
                </div>
            </div>
            @endif

            <!-- Consent Form -->
            @php
                $consentForm = $appointment->images->firstWhere('type', 'consent_form');
                $consentSignature = $appointment->consentSignature;
            @endphp
            <div class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-lg p-6">
                <h2 class="text-lg font-semibold text-gray-900 mb-4 pb-2 border-b border-gray-200">Consent</h2>
                @if($consentSignature)
                    <div class="flex items-center gap-2 text-sm text-green-700">
                        <svg class="h-5 w-5 text-green-500" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
                        </svg>
                        <span class="font-medium">Signed on {{ $consentSignature->created_at->format('M j, Y') }}</span>
                    </div>
                @elseif($consentForm)
                    <a href="{{ asset('storage/' . $consentForm->path) }}" target="_blank"
                       class="inline-flex items-center gap-2 text-sm font-medium text-indigo-600 hover:text-indigo-500">
                        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                        </svg>
                        View Consent Form
                    </a>
                @else
                    <div class="flex items-center gap-2 text-sm text-gray-500">
                        <svg class="h-5 w-5 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                        </svg>
                        No consent form on file
                    </div>
                @endif
            </div>

            <!-- Deposit -->
            @if($appointment->deposit)
            <div class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-lg p-6">
                <h2 class="text-lg font-semibold text-gray-900 mb-4 pb-2 border-b border-gray-200">Deposit</h2>
                <dl class="space-y-2">
                    <div class="flex justify-between">
                        <dt class="text-sm text-gray-500">Amount</dt>
                        <dd class="text-sm font-semibold text-gray-900">${{ number_format($appointment->deposit->amount, 2) }}</dd>
                    </div>
                    <div class="flex justify-between">
                        <dt class="text-sm text-gray-500">Status</dt>
                        <dd>
                            <span class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset {{ $appointment->deposit->status === 'paid' ? 'bg-green-50 text-green-700 ring-green-600/20' : 'bg-yellow-50 text-yellow-800 ring-yellow-600/20' }}">
                                {{ ucfirst($appointment->deposit->status) }}
                            </span>
                        </dd>
                    </div>
                </dl>
            </div>
            @endif

        </div>
    </div>
</div>

@endsection