@php
    use App\Models\GeneralSetting;
    $i = isset($i) ? $i : '';
    $col = isset($col) ? $col : '6';
    $src =
        $folder == 'header' || $folder == 'logo'
            ? asset('storage/images/' . $folder . GeneralSetting::getValueForKey($name . $i))
            : $src;
            $display = $folder == 'header' || $folder == 'logo'? GeneralSetting::getValueForKey($name . $i) : $src;
@endphp
<div class="col-{{ $col }} mb-2">
    <div class="upload-image-container">
        <div id="{{ 'uploadArea' . $i }}" class="upload-area upload-area--circular">
            <div class="upload-area__header">
                <h4 class="upload-area__title--compact">{{ __('dashboard.' . $name) }}</h4>
                <p class="upload-area__paragraph upload-area__paragraph--compact">
                    {{ __('dashboard.uploaded_file_image') }}
                </p>
            </div>
            <div id="{{ 'dropZoon' . $i }}" onclick="openFileInput('#fileInput{{ $i }}')" role="button"
                tabindex="0"
                onkeypress="if(event.key==='Enter'||event.key===' '){event.preventDefault();openFileInput('#fileInput{{ $i }}');}"
                class="upload-area__drop-zoon drop-zoon drop-zoon--circular">
                <span class="drop-zoon__icon drop-zoon__icon--compact">
                    <i class='bx bxs-file-image'></i>
                </span>
                <p class="drop-zoon__paragraph drop-zoon__paragraph--compact">{{ __('dashboard.click_to_upload_image') }}</p>
                <span id="loadingText{{ $i }}" class="drop-zoon__loading-text">{{ __('dashboard.please_wait') }}</span>
                <img src="{{ $src }}" alt="Preview" id="previewImage{{ $i }}"
                    class="drop-zoon__preview-image drop-zoon__preview-image--circular" draggable="false"
                    style="display:{{ $display ? ' block' : 'none' }}">
                <input type="file" id="fileInput{{ $i }}" name="{{ $name . $i }}"
                    onchange="changeFileInput('dropZoon{{ $i }}','loadingText{{ $i }}','previewImage{{ $i }}','uploaded-file__counter{{ $i }}','uploadedFile{{ $i }}','uploadedFileInfo{{ $i }}','uploadArea{{ $i }}','fileDetails{{ $i }}','uploaded-file__name{{ $i }}','uploaded-file__icon-text{{ $i }}',event)"
                    class="drop-zoon__file-input" accept="image/jpeg,image/png,image/webp,image/gif,image/svg+xml">
            </div>
            <!-- End Drop Zoon -->
            <div class="image-upload-feedback">
                <span class="text-danger image-upload-error d-block mt-2"
                    data-image-upload-error="fileInput{{ $i }}"
                    style="display: none;"></span>
                @error($name . $i)
                    <span class="text-danger d-block mt-2">{{ $message }}</span>
                @enderror
            </div>

            <!-- File Details -->
            <div id="fileDetails{{ $i }}" class="upload-area__file-details file-details">
                {{-- <h3 class="file-details__title file-details__title--compact">Uploaded File</h3> --}}

                <div id="uploadedFile{{ $i }}" class="uploaded-file">
                    <div class="uploaded-file__icon-container">
                        <i class='bx bxs-file-blank uploaded-file__icon uploaded-file__icon--compact'></i>
                        <span class="uploaded-file__icon-text{{ $i }}"></span>
                    </div>

                    <div id="uploadedFileInfo{{ $i }}" class="uploaded-file__info">
                        <span class="uploaded-file__name{{ $i }}"></span>
                        <span class="uploaded-file__counter{{ $i }}">0%</span>
                    </div>
                </div>
            </div>
            <!-- End File Details -->
        </div>

    </div>
</div>
@section('styles')
    <style>
        .upload-image-container {
            display: flex;
            justify-content: center;
        }

        .upload-area--circular {
            max-width: 14rem;
            padding: 1rem;
            border-radius: 16px;
            margin: auto;
        }

        .image-upload-feedback {
            margin-top: 0.75rem;
            width: 100%;
            text-align: center;
        }

        .image-upload-error {
            display: inline-block;
            width: 100%;
            padding: 0.65rem 0.8rem;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 0.75rem;
            position: relative;
            z-index: 20;
            line-height: 1.4;
        }

        .upload-area__title--compact {
            font-size: .95rem;
            margin-bottom: .25rem;
        }

        .upload-area__paragraph--compact {
            font-size: .7rem;
            margin: 0;
        }

        .drop-zoon--circular {
            width: 9rem;
            height: 9rem;
            border-radius: 50%;
            margin: .2rem auto 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }

        .drop-zoon__icon--compact {
            font-size: 1.8rem;
            margin-bottom: .25rem;
        }

        .drop-zoon__paragraph--compact {
            font-size: .65rem;
            text-align: center;
        }

        .drop-zoon__preview-image--circular {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
            position: absolute;
            inset: 0;
        }

        .drop-zoon__loading-text {
            font-size: .65rem;
        }
    </style>
@endsection

@section('script')
    <script>
        function fillTextarea() {
            var content = document.querySelector(".ql-editor").innerHTML;
            $('#copyright').empty();
            $('#copyright').val(content);
        }
    </script>
@endsection