<section class="home-header-area position-relative">
    <div class="container">
        <div class="row d-flex justify-content-center align-items-center">
            <div class="col-lg-8 col-xxl-6 mx-auto mb-5">
                <div class="header-text-area d-flex flex-column text-center">
                    <h1 class="title mb-3 animate animate__fadeIn">
                        {{ widget('home','top_area','title') }}
                    </h1>
                    <p class="text mb-0 animate animate__fadeIn" data-anm-delay="800ms">
                        {{ widget('home','top_area','text') }}
                    </p>
                </div>
            </div>
            <div class="w-100"></div>
            <div class="col-lg-8 col-xxl-6">
                <div class="uploader-card card">
                    <div class="card-body">
                        <div class="upload-methods d-flex gap-3" role="tablist">
                            <a 
                                href="#" 
                                class="active" 
                                data-bs-toggle="pill" 
                                data-bs-target="#upload-file" 
                                role="tab" 
                                aria-controls="upload-file" 
                                aria-selected="true">{{ __('lang.local_files') }}</a>
                            <a 
                                href="#" 
                                class="" 
                                data-bs-toggle="pill" 
                                data-bs-target="#upload-url" 
                                role="tab" 
                                aria-controls="upload-url" 
                                aria-selected="false">{{ __('lang.direct_link') }}</a>
                        </div>
                        @if ($errors->any())
                            <div class="alert alert-1 show mb-2" role="alert">
                                @foreach ($errors->all() as $error)
                                    <p class="m-0">{{ $error }}</p>
                                @endforeach
                            </div>
                        @endif
                        <div class="tab-content my-3">
                            <div class="tab-pane active" id="upload-file" role="tabpanel" tabindex="0">
                                <div class="dropzone dropzone-uploader d-flex">
                                    <div class="dz-message needsclick m-auto">
                                        <i class="uploader-icon fa-solid fa-cloud-arrow-up fa-fw fa-3x"></i>
                                        <div class="mt-2">
                                            <h2>{{ __('lang.drop_file_here') }}</h2>
                                            <span>{{ __(
                                                'lang.upload_up_to', 
                                                [
                                                    'max' => '10',
                                                    'maxsize' => formatKiloBytes(config('upload.MAX_FILE_SIZE'))
                                                ]
                                            ) }}</span>
                                        </div>
                                    </div>
                                    <div class="dropzone-previews dz-clickable position-relative">
                                        <div class="dropzone-previews-inner position-absolute"></div>
                                    </div>
                                </div>
                                @if (setting('recaptcha_status') == 1)
                                    {!! RecaptchaV3::field('upload_file') !!}
                                @endif
                            </div>
                            <div class="tab-pane" id="upload-url" role="tabpanel" tabindex="0">
                                <div class="link-area mb-2">
                                    <textarea 
                                        class="form-control border-0" 
                                        name="file-url" 
                                        id="file-url" 
                                        placeholder="{{ __('lang.write_url_here') }}"></textarea>
                                    @if (setting('recaptcha_status') == 1)
                                        {!! RecaptchaV3::field('upload_url') !!}
                                    @endif
                                </div>
                                <div class="dropzone-results">
                                    <div class="dropzone dropzone-passive d-flex">
                                        <div class="dz-message needsclick m-auto">
                                            <i class="uploader-icon fa-solid fa-cloud-arrow-up fa-fw fa-3x"></i>
                                            <div class="mt-2">
                                                <h2>{{ __('lang.drop_file_here') }}</h2>
                                                <span>{{ __(
                                                    'lang.upload_up_to', 
                                                    [
                                                        'max' => '10',
                                                        'maxsize' => formatKiloBytes(config('upload.MAX_FILE_SIZE'))
                                                    ]
                                                ) }}</span>
                                            </div>
                                        </div>
                                        <div class="dropzone-links dz-clickable position-relative">
                                            <div class="dropzone-previews-inner position-absolute"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="d-flex justify-content-between">
                            <div class="form-switch d-flex gap-2">
                                <input class="form-check-input my-auto" type="checkbox" role="switch" id="advanced-options" data-advanced-options>
                                <label class="form-check-label my-auto" for="advanced-options">{{ __('lang.options') }}</label>
                            </div>
                            <button type="button" class="upload-files btn btn-color-1" id="upload-files">
                                <span class="upload-button-text pe-none">
                                    {{ __('lang.start_upload') }}
                                </span>
                                <span class="spinner-border spinner-border-sm text-light pe-none d-none" role="status"></span>
                            </button>
                        </div>
                        <div class="advanced-options btn-group w-100 mt-3" role="group" aria-label="Advanced options" data-options>
                            <button 
                                type="button" 
                                class="btn" 
                                data-bs-toggle="tooltip" 
                                data-bs-placement="top" 
                                data-bs-custom-class="custom-tooltip" 
                                data-bs-title="{{ __('lang.convert_image_format') }}" 
                                data-modal="convert-modal">
                                <i class="fa-solid fa-photo-film fa-fw pe-none"></i>
                            </button>
                            <button 
                                type="button" 
                                class="btn" 
                                data-bs-toggle="tooltip" 
                                data-bs-placement="top" 
                                data-bs-custom-class="custom-tooltip" 
                                data-bs-title="{{ __('lang.compress_image') }}" 
                                data-modal="compress-modal">
                                <i class="fa-solid fa-down-left-and-up-right-to-center fa-fw pe-none"></i>
                            </button>
                            <button 
                                type="button" 
                                class="btn" 
                                data-bs-toggle="tooltip" 
                                data-bs-placement="top" 
                                data-bs-custom-class="custom-tooltip" 
                                data-bs-title="{{ __('lang.change_image_size') }}" 
                                data-modal="size-modal">
                                <i class="fa-solid fa-compress fa-fw pe-none"></i>
                            </button>
                            <button 
                                type="button" 
                                class="btn" 
                                data-bs-toggle="tooltip" 
                                data-bs-placement="top" 
                                data-bs-custom-class="custom-tooltip" 
                                data-bs-title="{{ __('lang.rotate_or_reflect') }}" 
                                data-modal="rotate-modal">
                                <i class="fa-solid fa-arrows-left-right-to-line fa-fw pe-none"></i>
                            </button>
                            <button 
                                type="button" 
                                class="btn" 
                                data-bs-toggle="tooltip" 
                                data-bs-placement="top" 
                                data-bs-custom-class="custom-tooltip" 
                                data-bs-title="{{ __('lang.add_watermark') }}" 
                                data-modal="watermark-modal">
                                <i class="fa-solid fa-font fa-fw pe-none"></i>
                            </button>
                            <button 
                                type="button" 
                                class="btn" 
                                data-bs-toggle="tooltip" 
                                data-bs-placement="top" 
                                data-bs-custom-class="custom-tooltip" 
                                data-bs-title="{{ __('lang.edit_image_preferences') }}" 
                                data-modal="preference-modal">
                                <i class="fa-solid fa-sliders fa-fw pe-none"></i>
                            </button>
                            <button 
                                type="button" 
                                class="btn" 
                                data-bs-toggle="tooltip" 
                                data-bs-placement="top" 
                                data-bs-custom-class="custom-tooltip" 
                                data-bs-title="{{ __('lang.add_effect') }}" 
                                data-modal="effect-modal">
                                <i class="fa-solid fa-brush fa-fw pe-none"></i>
                            </button>
                            <button 
                                type="button" 
                                class="btn" 
                                data-bs-toggle="tooltip" 
                                data-bs-placement="top" 
                                data-bs-custom-class="custom-tooltip" 
                                data-bs-title="{{ __('lang.set_autoremove') }}" 
                                data-modal="autoremove-modal">
                                <i class="fa-solid fa-trash-can fa-fw pe-none"></i>
                            </button>
                            <button 
                                type="button" 
                                class="btn" 
                                data-bs-toggle="tooltip" 
                                data-bs-placement="top" 
                                data-bs-custom-class="custom-tooltip" 
                                data-bs-title="{{ __('lang.limit_access') }}" 
                                data-modal="access-modal">
                                <i class="fa-solid fa-lock fa-fw pe-none"></i>
                            </button>
                            <button 
                                type="button" 
                                class="btn" 
                                data-bs-toggle="tooltip" 
                                data-bs-placement="top" 
                                data-bs-custom-class="custom-tooltip" 
                                data-bs-title="{{ __('lang.remove_exif') }}" 
                                data-modal="exif-modal">
                                <i class="fa-solid fa-eraser fa-fw pe-none"></i>
                            </button>
                        </div>
                        <div class="mobile-options flex-wrap gap-2 mt-3" data-options>
                            <button type="button" class="btn btn-action flex-fill" data-modal="convert-modal">
                                {{ __('lang.convert') }}
                            </button>
                            <button type="button" class="btn btn-action flex-fill" data-modal="compress-modal">
                                {{ __('lang.compress') }}
                            </button>
                            <button type="button" class="btn btn-action flex-fill" data-modal="size-modal">
                                {{ __('lang.size') }}
                            </button>
                            <button type="button" class="btn btn-action flex-fill" data-modal="rotate-modal">
                                {{ __('lang.rotate') }}
                            </button>
                            <button type="button" class="btn btn-action flex-fill" data-modal="watermark-modal">
                                {{ __('lang.watermark') }}
                            </button>
                            <button type="button" class="btn btn-action flex-fill" data-modal="preference-modal">
                                {{ __('lang.preference') }}
                            </button>
                            <button type="button" class="btn btn-action flex-fill" data-modal="effect-modal">
                                {{ __('lang.effect') }}
                            </button>
                            <button type="button" class="btn btn-action flex-fill" data-modal="autoremove-modal">
                                {{ __('lang.autoremove') }}
                            </button>
                            <button type="button" class="btn btn-action flex-fill" data-modal="access-modal">
                                {{ __('lang.access') }}
                            </button>
                            <button type="button" class="btn btn-action flex-fill" data-modal="exif-modal">
                                {{ __('lang.exif') }}
                            </button>
                        </div>
                        @if (setting('recaptcha_status') == 1)
                            <p class="recaptcha mt-4">
                                {!! __('lang.recaptcha') !!}
                            </p>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="swiper home-slider position-absolute pe-none d-none d-xl-block">
        <div class="swiper-wrapper">
            @foreach ($sliderImages as $sliderImage)
                <div 
                    class="swiper-slide covered" 
                    style="background: url({{ img('page', $sliderImage) }})"></div>  
            @endforeach
        </div>
    </div>
    <div 
        class="home-line-start position-absolute d-none d-xl-block" 
        style="background-image: url({{ url("assets/image/home-line-start.svg") }})"></div>
    <div 
        class="home-line-end position-absolute d-none d-xl-block" 
        style="background-image: url({{ url("assets/image/home-line-end.svg") }})"></div>
</section>