<section class="tools-dropzone-area">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-xxl-6 mx-auto">
                <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 mt-3 mb-4">
                            <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="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="row gx-5">
                            <div class="col-sm-6 mb-4 mb-sm-0">
                                <div class="mb-4">
                                    <label for="brightness" class="form-label">{{ __('lang.brightness') }}</label>
                                    <input 
                                        type="range" 
                                        class="form-range" 
                                        min="-100" 
                                        max="100" 
                                        step="1" 
                                        value="0" 
                                        id="brightness" 
                                        name="preferences[brightness]" 
                                        data-default="0">
                                </div>
                                <div class="mb-4">
                                    <label for="contrast" class="form-label">{{ __('lang.contrast') }}</label>
                                    <input 
                                        type="range" 
                                        class="form-range" 
                                        min="-100" 
                                        max="100" 
                                        step="1" 
                                        value="0" 
                                        id="contrast" 
                                        name="preferences[contrast]" 
                                        data-default="0">
                                </div>
                                <div class="mb-4">
                                    <label for="gamma" class="form-label">{{ __('lang.gamma') }}</label>
                                    <input 
                                        type="range" 
                                        class="form-range" 
                                        min="0.8" 
                                        max="2.3" 
                                        step=".1" 
                                        value="1" 
                                        id="gamma" 
                                        name="preferences[gamma]" 
                                        data-default="1">
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="mb-4">
                                    <label for="red" class="form-label">{{ __('lang.red') }}</label>
                                    <input 
                                        type="range" 
                                        class="form-range" 
                                        min="-100" 
                                        max="100" 
                                        step="1" 
                                        value="0" 
                                        id="red" 
                                        name="preferences[red]"
                                        data-default="0">
                                </div>
                                <div class="mb-4">
                                    <label for="green" class="form-label">{{ __('lang.green') }}</label>
                                    <input 
                                        type="range" 
                                        class="form-range" 
                                        min="-100" 
                                        max="100" 
                                        step="1" 
                                        value="0" 
                                        id="green" 
                                        name="preferences[green]" 
                                        data-default="0">
                                </div>
                                <div>
                                    <label for="blue" class="form-label">{{ __('lang.blue') }}</label>
                                    <input 
                                        type="range" 
                                        class="form-range" 
                                        min="-100" 
                                        max="100" 
                                        step="1" 
                                        value="0" 
                                        id="blue" 
                                        name="preferences[blue]" 
                                        data-default="0">
                                </div>
                            </div>
                        </div>
                        <div class="text-center mt-4">
                            <button 
                                type="button" 
                                class="upload-files btn btn-color-1{{ setting('recaptcha_status') == 1 ? ' disabled' : '' }}" 
                                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>
                        @if (setting('recaptcha_status') == 1)
                            <p class="recaptcha mt-4">
                                {!! __('lang.recaptcha') !!}
                            </p>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>