@props(['form', 'mode', 'prefix' => 'form'])

@php
    $photosPath = $prefix ? $prefix . '.photos' : 'photos';
    $videoPath = $prefix ? $prefix . '.video' : 'video';
@endphp

<div class="tw-wrapper">
    <div
        class="bg-white/50 dark:bg-gray-800 rounded-2xl border border-gray-100 dark:border-gray-700 p-6 mb-8 shadow-sm transition-colors duration-300">

        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
            {{-- Sección de Imágenes --}}
            <div class="space-y-4">
                <div>
                    <div class="flex items-center gap-4 mb-2">
                        <h2
                            class="text-xl font-black uppercase tracking-widest text-main-two dark:text-main-one flex items-center gap-2">
                            <i class="fas fa-camera text-sm"></i> {{ __('Machine images') }}
                        </h2>
                        <div class="h-[1px] flex-1 bg-gray-100 dark:bg-gray-700"></div>
                    </div>
                    <p class="text-sm text-gray-500 dark:text-gray-400 italic">
                        {{ __('Maximum 5 images, each up to 3 MB.') }}
                    </p>
                </div>

                <div
                    class="rounded-xl overflow-hidden border border-dashed border-gray-200 dark:border-gray-600 bg-white/40 dark:bg-gray-900/40 p-1">
                    <livewire:dropzone wire:model="{{ $photosPath }}" name="photos" :max-files="5"
                        :rules="['image', 'mimes:png,jpeg,jpg', 'max:3072']" :multiple="true" :key="'dropzone-photos-' . $prefix" accept="image/*" />
                </div>

                <div class="space-y-1">
                    <x-input-error :messages="$errors->get($photosPath)" class="mt-2" />
                    @foreach ($errors->get($photosPath . '.*') as $errorMessages)
                        @foreach ((array) $errorMessages as $message)
                            <x-input-error :messages="[$message]" class="mt-2" />
                        @endforeach
                    @endforeach
                </div>
            </div>

            {{-- Sección de Video --}}
            <div class="space-y-4">
                <div>
                    <div class="flex items-center gap-4 mb-2">
                        <h2
                            class="text-xl font-black uppercase tracking-widest text-main-two dark:text-main-one flex items-center gap-2">
                            <i class="fas fa-video text-sm"></i> {{ __('Machine video (optional)') }}
                        </h2>
                        <div class="h-[1px] flex-1 bg-gray-100 dark:bg-gray-700"></div>
                    </div>
                    <p class="text-sm text-gray-500 dark:text-gray-400 italic">
                        {{ __('Maximum 1 video, up to 5 MB.') }}
                    </p>
                </div>

                <div
                    class="rounded-xl overflow-hidden border border-dashed border-gray-200 dark:border-gray-600 bg-white/40 dark:bg-gray-900/40 p-1">
                    <livewire:dropzone wire:model="{{ $videoPath }}" name="video" :rules="['mimes:mp4', 'max:5120', 'nullable']"
                        :multiple="false" :key="'dropzone-video-' . $prefix" accept="video/*" />
                </div>

                <div class="space-y-1">
                    <x-input-error :messages="$errors->get($videoPath)" class="mt-2" />
                    @foreach ($errors->get($videoPath . '.*') as $error)
                        <x-input-error :messages="(array) $error" class="mt-2" />
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>