ImageLibrary Component

<x-artisanpack-image-library 
    wire:model="images" 
    wire:library="productImages" 
    label="Product Images"
/>

<x-artisanpack-image-library 
    wire:model="images" 
    wire:library="productImages" 
    label="Product Images"
/>

<x-artisanpack-image-library 
    wire:model="images" 
    wire:library="productImages" 
    label="Product Images"
    hint="Upload up to 5 images. Recommended size: 1200x800px."
/>

<x-artisanpack-image-library 
    wire:model="images" 
    wire:library="productImages" 
    label="Product Images"
    addFilesText="Upload Images"
    changeText="Replace"
    cropText="Edit"
    removeText="Delete"
    cropTitleText="Edit Image"
    cropCancelText="Discard"
    cropSaveText="Apply Changes"
/>

@php
$cropConfig = [
    'aspectRatio' => 16/9,
    'viewMode' => 2,
    'guides' => true,
    'rotatable' => true,
];
@endphp

<x-artisanpack-image-library 
    wire:model="images" 
    wire:library="productImages" 
    label="Product Images"
    :cropConfig="$cropConfig"
/>

<x-artisanpack-image-library 
    wire:model="images" 
    wire:library="productImages" 
    label="Product Images"
    :hideProgress="true"
/>

<x-artisanpack-image-library 
    wire:model="images" 
    wire:library="productImages" 
    label="Product Images"
    :hideErrors="true"
/>

<x-artisanpack-image-library 
    wire:model="images" 
    wire:library="productImages" 
    label="Product Images"
    accept="image/png, image/jpeg, image/gif"
/>

<x-artisanpack-image-library 
    wire:model="images" 
    wire:library="productImages" 
    label="Product Images"
    :with-drag-drop="true"
/>

<x-artisanpack-image-library 
    wire:model="images" 
    wire:library="productImages" 
    label="Product Images"
    :with-drag-drop="true"
    drag-drop-text="Drop your images here"
    drag-drop-multiple-text="Drop {count} images here"
/>

<x-artisanpack-image-library 
    wire:model="images" 
    wire:library="productImages" 
    label="Product Images"
    :with-drag-drop="true"
    drag-drop-text="Drop images to upload"
    drag-drop-class="border-info bg-info/10"
/>

<?php

namespace App\Livewire;

use Livewire\Component;
use Livewire\WithFileUploads;
use Illuminate\Support\Collection;

class ProductForm extends Component
{
    use WithFileUploads;

    public $images = [];
    public $productImages;
    
    public function mount($product = null)
    {
        if ($product) {
            $this->productImages = $product->getMedia('images')->map(function ($media) {
                return [
                    'uuid' => $media->uuid,
                    'url' => $media->getUrl(),
                ];
            });
        } else {
            $this->productImages = new Collection();
        }
    }
    
    // Required method to remove media
    public function removeMedia($uuid, $model, $library, $url)
    {
        // Logic to remove the media with the given UUID
        // Example: Media::where('uuid', $uuid)->delete();
        
        // Update the preview collection
        $this->$library = $this->$library->filter(function ($item) use ($uuid) {
            return $item['uuid'] !== $uuid;
        });
    }
    
    // Required method to refresh media order
    public function refreshMediaOrder($order, $library)
    {
        // Logic to update the order of media items
        // $order contains an array of UUIDs in the new order
        
        // Example: Update the order in your database
    }
    
    // Required method to refresh media sources
    public function refreshMediaSources($model, $library)
    {
        // Logic to refresh the media sources after uploads or changes
        // This should update the preview collection with the latest media items
        
        // Example: Reload media from database and update the preview collection
    }
    
    public function render()
    {
        return view('livewire.product-form');
    }
}