use App\Models\Ticket;
use Illuminate\Support\Facades\Storage;
use Livewire\Component;
use Livewire\WithFileUploads;

class TicketDocuments extends Component
{
    use WithFileUploads;

    public Ticket $ticket;

    /** @var array<int, \Livewire\Features\SupportFileUploads\TemporaryUploadedFile> */
    public array $documents = [];

    /** @var array<int, int> Saved documents to delete on save */
    public array $toDelete = [];

    protected function rules(): array
    {
        return [
            // 5 documents in total: saved ones count, the ones to delete do not.
            'documents' => ['array', 'max:'.max(0, 5 - $this->saved()->count())],
            'documents.*' => ['file', 'mimes:pdf,jpg,png', 'max:2048'],
        ];
    }

    public function updatedDocuments(): void
    {
        $this->validate(['documents.*' => $this->rules()['documents.*']]);
    }

    public function removeSavedDocument(int $id): void
    {
        $this->toDelete[] = $id;
    }

    public function save(): void
    {
        $this->validate();

        $this->ticket->documents()->whereKey($this->toDelete)->get()->each->delete();

        foreach ($this->documents as $document) {
            $this->ticket->documents()->create([
                'name' => $document->getClientOriginalName(),
                'path' => $document->store('tickets/'.$this->ticket->id, 'public'),
                'size' => $document->getSize(),
            ]);
        }

        $this->reset('documents', 'toDelete');
    }

    private function saved()
    {
        return $this->ticket->documents()->whereKeyNot($this->toDelete);
    }

    public function render()
    {
        return view('livewire.ticket-documents', [
            'savedDocuments' => $this->saved()->get()->map(fn ($document) => [
                'id' => $document->id,
                'name' => $document->name,
                'url' => Storage::disk('public')->url($document->path),
                'size' => $document->size,
            ]),
        ]);
    }
}

public function sortPhotos(array $order): void
{
    foreach ($order as $position => $item) {
        if ($item['type'] === 'existing') {
            $this->product->photos()->whereKey($item['id'])->update(['position' => $position]);
        }
    }

    // Temporary uploads in the same order too (id = getFilename()).
    $uploadOrder = collect($order)->where('type', 'upload')->pluck('id')->flip();

    $this->photos = collect($this->photos)
        ->sortBy(fn ($photo) => $uploadOrder[$photo->getFilename()] ?? PHP_INT_MAX)
        ->values()
        ->all();
}

public function update(Request $request, Ticket $ticket): RedirectResponse
{
    $removed = $request->input('removed_attachments', []);
    $remaining = 5 - $ticket->attachments()->whereKeyNot($removed)->count();

    $request->validate([
        'attachments' => ['array', 'max:'.max(0, $remaining)],
        'attachments.*' => ['file', 'mimes:pdf,jpg,png', 'max:2048'],
        'removed_attachments' => ['array'],
        'removed_attachments.*' => ['integer'],
    ]);

    $ticket->attachments()->whereKey($removed)->get()->each->delete();

    foreach ($request->file('attachments', []) as $attachment) {
        $ticket->attachments()->create([
            'name' => $attachment->getClientOriginalName(),
            'path' => $attachment->store('tickets/'.$ticket->id),
            'size' => $attachment->getSize(),
        ]);
    }

    return back();
}

<acun:file-upload model="documents" multiple />

<div class="mt-4 flex justify-end gap-2">
    <acun:button variant="white" x-data x-on:click="$dispatch('file-upload-reset', { model: 'documents' })">Cancel</acun:button>
    <acun:button wire:click="save" wire:loading.attr="disabled" wire:target="documents,save">Save</acun:button>
</div>

import { registerFileUpload } from '@acunsoft/acun-ui-pro';

document.addEventListener('alpine:init', () => {
    registerFileUpload(window.Alpine, {
        transport: {
            concurrency: 3,
            upload(file, { onProgress }) {
                const request = new XMLHttpRequest();
                const promise = new Promise((resolve, reject) => {
                    request.upload.onprogress = (event) => onProgress((event.loaded / event.total) * 100);
                    request.onload = () => (request.status < 300 ? resolve(JSON.parse(request.response).id) : reject(new Error('failed')));
                    request.onerror = () => reject(new Error('failed'));
                    request.onabort = () => reject(Object.assign(new Error('cancelled'), { cancelled: true }));
                });
                const body = new FormData();
                body.append('file', file);
                request.open('POST', '/uploads');
                request.setRequestHeader('X-CSRF-TOKEN', document.querySelector('meta[name=csrf-token]').content);
                request.send(body);

                return { promise, cancel: () => request.abort() };
            },
        },
    });
});