@extends("user.layouts.dashboard")
@section("content")
<div class="row">
    <div class="col-lg-7 col-xxl-5">
        <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' => config('upload.MAX_FILE_COUNT'),
                                            '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' => config('upload.MAX_FILE_COUNT'),
                                                '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="upload-options" data-options>
                        <button type="button" class="btn action-button" data-bg="gray" data-modal="options-modal">
                            {{ __('lang.options') }}
                        </button>
                    </div>
                    <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">
                            <span class="d-none d-sm-block">{{ __('lang.start_upload') }}</span>
                            <span class="d-sm-none">{{ __('lang.upload') }}</span>
                        </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 
    class="modal fade" 
    id="options-modal" 
    data-bs-backdrop="static" 
    data-bs-keyboard="false" 
    tabindex="-1" 
    aria-hidden="true"
    aria-modal="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body">
                <div class="mb-4">
                    <label for="auto-remove" class="form-label">{{ __('lang.auto_remove') }}</label>
                    <select class="form-select" name="auto-remove" id="auto-remove">
                        <option value="" selected>{{ __('lang.select_time') }}</option>
                        <option value="5m">5 {{ __('lang.minutes') }}</option>
                        <option value="30m">30 {{ __('lang.minutes') }}</option>
                        <option value="1h">1 {{ __('lang.hour') }}</option>
                        <option value="6h">6 {{ __('lang.hours') }}</option>
                        <option value="12h">12 {{ __('lang.hours') }}</option>
                        <option value="1d">1 {{ __('lang.day') }}</option>
                        <option value="1w">1 {{ __('lang.week') }}</option>
                        <option value="1m">1 {{ __('lang.month') }}</option>
                    </select>
                </div>
                <div>
                    <label for="password" class="form-label">{{ __('lang.set_password') }}</label>
                    <input 
                        type="text" 
                        class="form-control" 
                        id="password" 
                        name="password" 
                        placeholder="{{ __('lang.password') }}">
                </div>
            </div>
            <div class="modal-footer">
                <button 
                    type="button" 
                    class="btn btn-color-4 modal-cancel" 
                    data-bs-dismiss="modal" 
                    data-modal-id="options-modal">
                    {{ __('lang.reset') }}
                </button>
                <button 
                    type="button" 
                    class="btn btn-color-1" 
                    data-bs-dismiss="modal">
                    {{ __('lang.save') }}
                </button>
            </div>
        </div>
    </div>
</div>
@stop