@props([
    'name' => 'resume',
    'id' => null,
    'label' => null,
    'labelledBy' => null,
    'required' => false,
    'accept' => '.pdf,.doc,.docx,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document',
    'maxSize' => 5242880,
    'hint' => 'PDF, DOC, or DOCX up to 5 MB',
])

@php
    $fieldId = $id ?? $name;
    $maxSizeMb = number_format($maxSize / 1048576, 0);
@endphp

<div
    id="{{ $fieldId }}"
    {{ $attributes->class(['document-upload']) }}
    data-document-upload
    data-max-size="{{ $maxSize }}"
    data-accept-hint="{{ $hint }}"
>
    @if ($label)
        <span class="document-upload-label" id="{{ $fieldId }}-label">{{ $label }}</span>
    @endif

    <input
        type="file"
        id="{{ $fieldId }}-input"
        name="{{ $name }}"
        class="document-upload-input"
        accept="{{ $accept }}"
        @if ($required) required data-required="true" @endif
        @if ($labelledBy) aria-labelledby="{{ $labelledBy }}"
        @elseif ($label) aria-labelledby="{{ $fieldId }}-label"
        @endif
    >

    <div
        class="document-upload-dropzone"
        data-document-upload-dropzone
        role="button"
        tabindex="0"
        aria-controls="{{ $fieldId }}-input"
    >
        <div class="document-upload-empty" data-document-upload-empty>
            <span class="document-upload-icon" aria-hidden="true">
                <x-icon name="file-text" />
            </span>
            <p class="document-upload-title">Drag and drop your file here</p>
            <p class="document-upload-copy">or <button type="button" class="document-upload-browse" data-document-upload-browse>browse your device</button></p>
            <p class="document-upload-hint">{{ $hint }}</p>
        </div>

        <div class="document-upload-file" data-document-upload-file hidden>
            <span class="document-upload-file-icon" aria-hidden="true">
                <x-icon name="file-text" />
            </span>
            <div class="document-upload-file-meta">
                <span class="document-upload-file-name" data-document-upload-name></span>
                <span class="document-upload-file-size" data-document-upload-size></span>
            </div>
            <button type="button" class="document-upload-remove" data-document-upload-remove aria-label="Remove file">
                <x-icon name="close" />
            </button>
        </div>
    </div>

    <p class="document-upload-error" data-document-upload-error hidden role="alert"></p>
</div>