@php
    $photosBeforeRaw = $record->photos_before ?? [];
    $photosAfterRaw  = $record->photos_after  ?? [];
    $videosRaw       = $record->videos        ?? [];
    $audioRaw        = $record->audio_files   ?? [];

    $toUrls = fn($files) => collect((array) $files)
        ->filter()
        ->map(fn($f) => Storage::disk('public')->url($f))
        ->values();

    $photosBefore = $toUrls($photosBeforeRaw);
    $photosAfter  = $toUrls($photosAfterRaw);
    $videos       = $toUrls($videosRaw);
    $audios       = $toUrls($audioRaw);
@endphp

<div class="space-y-6 p-2" dir="rtl">

    {{-- Photos Before --}}
    @if($photosBefore->isNotEmpty())
    <div>
        <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{{ __('patients.fields.photos_before') }}</h3>
        <div class="fi-lb-gallery" style="display:flex;flex-wrap:wrap;gap:6px;">
            @foreach($photosBefore as $i => $url)
            <div class="relative rounded-lg overflow-hidden bg-gray-800 cursor-pointer group" style="width:80px;height:45px;flex-shrink:0;"
                 data-lb-group="modal-before-{{ $record->id }}"
                 data-lb-idx="{{ $i }}"
                 data-lb-src="{{ $url }}">
                <img src="{{ $url }}" class="w-full h-full object-cover transition group-hover:scale-105 duration-200" loading="lazy" />
                <div class="absolute inset-0 bg-black/0 group-hover:bg-black/25 transition duration-200"></div>
            </div>
            @endforeach
        </div>
    </div>
    @endif

    {{-- Photos After --}}
    @if($photosAfter->isNotEmpty())
    <div>
        <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{{ __('patients.fields.photos_after') }}</h3>
        <div class="fi-lb-gallery" style="display:flex;flex-wrap:wrap;gap:6px;">
            @foreach($photosAfter as $i => $url)
            <div class="relative rounded-lg overflow-hidden bg-gray-800 cursor-pointer group" style="width:80px;height:45px;flex-shrink:0;"
                 data-lb-group="modal-after-{{ $record->id }}"
                 data-lb-idx="{{ $i }}"
                 data-lb-src="{{ $url }}">
                <img src="{{ $url }}" class="w-full h-full object-cover transition group-hover:scale-105 duration-200" loading="lazy" />
                <div class="absolute inset-0 bg-black/0 group-hover:bg-black/25 transition duration-200"></div>
            </div>
            @endforeach
        </div>
    </div>
    @endif

    {{-- Videos --}}
    @if($videos->isNotEmpty())
    <div>
        <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{{ __('patients.fields.videos') }}</h3>
        <div class="space-y-3">
            @foreach($videos as $i => $url)
            @php $vid = 'patient-video-'.$i.'-'.uniqid(); @endphp
            <div class="rounded-lg overflow-hidden">
                <video id="{{ $vid }}" src="{{ $url }}" controls class="w-full max-h-64"></video>
                <div class="flex items-center gap-2 bg-gray-900 px-3 py-1">
                    <span class="text-xs text-gray-400">سرعت:</span>
                    @foreach([0.5, 1, 1.5, 2] as $speed)
                    <button
                        onclick="(function(){ var v=document.getElementById('{{ $vid }}'); v.playbackRate={{ $speed }}; this.closest('.flex').querySelectorAll('[data-speed]').forEach(function(b){b.classList.remove('bg-blue-600','text-white'); b.classList.add('text-gray-300');}); this.classList.add('bg-blue-600','text-white'); this.classList.remove('text-gray-300'); }).call(this)"
                        data-speed="{{ $speed }}"
                        class="text-xs px-2 py-0.5 rounded {{ $speed == 1 ? 'bg-blue-600 text-white' : 'text-gray-300' }} hover:bg-blue-500 hover:text-white transition"
                    >{{ $speed }}x</button>
                    @endforeach
                    <a href="{{ $url }}" download class="mr-auto text-gray-400 hover:text-white transition" title="دانلود">
                        <svg xmlns="http://www.w3.org/2000/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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                        </svg>
                    </a>
                </div>
            </div>
            @endforeach
        </div>
    </div>
    @endif

    {{-- Audio Files --}}
    @if($audios->isNotEmpty())
    <div>
        <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{{ __('patients.fields.audio_files') }}</h3>
        <div class="space-y-2">
            @foreach($audios as $i => $url)
            @php $aid = 'patient-audio-'.$i.'-'.uniqid(); @endphp
            <div class="rounded-lg p-3">
                <audio id="{{ $aid }}" src="{{ $url }}" controls class="w-full mb-2"></audio>
                <div class="flex items-center gap-2">
                    <span class="text-xs text-gray-500 dark:text-gray-400">سرعت:</span>
                    @foreach([0.5, 1, 1.5, 2] as $speed)
                    <button
                        onclick="(function(){ var a=document.getElementById('{{ $aid }}'); a.playbackRate={{ $speed }}; this.closest('.flex').querySelectorAll('[data-speed]').forEach(function(b){b.classList.remove('bg-blue-600','text-white'); b.classList.add('text-gray-500');}); this.classList.add('bg-blue-600','text-white'); this.classList.remove('text-gray-500'); }).call(this)"
                        data-speed="{{ $speed }}"
                        class="text-xs px-2 py-0.5 rounded {{ $speed == 1 ? 'bg-blue-600 text-white' : 'text-gray-500' }} hover:bg-blue-500 hover:text-white transition"
                    >{{ $speed }}x</button>
                    @endforeach
                    <a href="{{ $url }}" download class="mr-auto text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition" title="دانلود">
                        <svg xmlns="http://www.w3.org/2000/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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                        </svg>
                    </a>
                </div>
            </div>
            @endforeach
        </div>
    </div>
    @endif

</div>