@use('Illuminate\Support\Str')
@props([
    'name',
    'label' => $name ?? '',
    'required' => false,
    'label' => '',
    'icon' => 'fa fa-plus',
    'accept' => null,
    'continue' => false,
    'caption1' => '',
    'caption2' => '',
])

@push('styles')
    <style>
        .highlight {
            background-color: #c5f9fc;
        }
    </style>
@endpush

<div {{ $attributes->class(['is-invalid' => $errors->has($name), 'drop-zone']) }}  data-name="{{$name}}" data-accept="{{$accept}}" id="{{ $name }}-zone">
    {!!  $caption1 ? $caption1 . '<br><br>' : '' !!}
    <div class="drop text-muted">Drag and drop file or click to upload</div>
    <div id="selected-file-{{$name}}"></div>
    <button type="button" class="btn btn-sm btn-primary" id="btn-trigger" data-name="{{ $name }}">
        <i class="{{$icon}}"></i> {{$label}}</button>

    <input type="file" class="form-control" id="file-import-{{$name}}" name="{{$name}}" @required($required) accept="{{ $accept }}" hidden />
    @if($continue)
        <button type="button" class="btn btn-alt-success btn-sm" id="btn-continue-{{$name}}" hidden> Continue
            <i class="fa fa-arrow-right"></i></button>
    @endif
    <small class="text-muted d-block mt-2">
        {!!  $caption2 ?? '' !!}
    </small>
</div>

@push('scripts')
    <script type="module">

        document.querySelectorAll('.drop-zone').forEach(zone => {
            const name = zone.dataset.name
            const fileInput = document.getElementById(`file-import-${name}`)
            const selectedFileName = document.getElementById(`selected-file-${name}`)
            const btnContinue = document.getElementById(`btn-continue-${name}`)
            const accept = (zone.dataset.accept || '').split(',').map(ext => ext.trim().toLowerCase())

            function handleFile(file) {
                const fileName = file.name.toLowerCase()
                const isValid = accept.some(ext => fileName.endsWith(ext))

                if (!isValid) {
                    Swal.fire({
                        title: 'Invalid file type',
                        text: `Only  ${zone.dataset.accept} files are allowed`,
                        icon: 'error',
                    })
                    selectedFileName.innerHTML = ''
                    fileInput.value = '' // reset input
                    if (btnContinue) btnContinue.setAttribute('hidden', '')
                    return
                }

                const dt = new DataTransfer()
                dt.items.add(file)
                fileInput.files = dt.files

                selectedFileName.innerHTML = fileName
                if (btnContinue) {
                    btnContinue.removeAttribute('hidden')
                    btnContinue.disabled = false
                }
            }

            zone.addEventListener('dragover', e => {
                e.preventDefault()
                zone.classList.add('highlight')
            })

            zone.addEventListener('dragleave', e => {
                e.preventDefault()
                zone.classList.remove('highlight')
            })

            zone.addEventListener('drop', e => {
                e.preventDefault()
                zone.classList.remove('highlight')

                const files = e.dataTransfer?.files
                if (!files || files.length === 0) return

                if (files.length > 1) {
                    Swal.fire({
                        title: 'Only 1 file allowed',
                        icon: 'error',
                    })
                    return
                }

                handleFile(files[0])

            })
            fileInput.addEventListener('change', () => {
                const files = fileInput.files
                if (!files || files.length === 0) return

                if (files.length > 1) {
                    Swal.fire({
                        title: 'Only 1 file allowed',
                        icon: 'error',
                    })
                    fileInput.value = '' // reset
                    return
                }

                handleFile(files[0])

            })
            document.getElementById('btn-trigger').addEventListener('click', e => {
                const name = e.currentTarget.getAttribute('data-name')
                document.getElementById('file-import-' + name).click()
            })
        })
    </script>
@endpush