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

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

<div class="card border shadow-none mb-4">
    <div class="card-body">
        <div class="row g-4">
            {{-- Images --}}
            <div class="col-md-6">
                <div class="d-flex align-items-center gap-2 mb-1">
                    <span class="badge bg-label-primary rounded-2 p-2 lh-1"><i class="ti tabler-camera ti-sm"></i></span>
                    <h6 class="mb-0 fw-bold text-uppercase text-primary">{{ __('Machine images') }}</h6>
                </div>
                <p class="text-muted small mb-3 ms-1">{{ __('Maximum 5 images, each up to 3 MB.') }}</p>

                <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/*" />

                @error($photosPath) <div class="text-danger small mt-2">{{ $message }}</div> @enderror
                @foreach ($errors->get($photosPath . '.*') as $errorMessages)
                    @foreach ((array) $errorMessages as $message)
                        <div class="text-danger small mt-1">{{ $message }}</div>
                    @endforeach
                @endforeach
            </div>

            {{-- Video --}}
            <div class="col-md-6">
                <div class="d-flex align-items-center gap-2 mb-1">
                    <span class="badge bg-label-primary rounded-2 p-2 lh-1"><i class="ti tabler-video ti-sm"></i></span>
                    <h6 class="mb-0 fw-bold text-uppercase text-primary">{{ __('Machine video (optional)') }}</h6>
                </div>
                <p class="text-muted small mb-3 ms-1">{{ __('Maximum 1 video, up to 20 MB.') }}</p>

                <livewire:dropzone wire:model="{{ $videoPath }}" name="video"
                    :rules="['mimes:mp4', 'max:20480', 'nullable']" :multiple="false"
                    :key="'dropzone-video-' . $prefix" accept="video/*" />

                @error($videoPath) <div class="text-danger small mt-2">{{ $message }}</div> @enderror
                @foreach ($errors->get($videoPath . '.*') as $error)
                    @foreach ((array) $error as $message)
                        <div class="text-danger small mt-1">{{ $message }}</div>
                    @endforeach
                @endforeach
            </div>
        </div>
    </div>
</div>