@extends("user.layouts.dashboard")
@section("content")
<div class="row">
    <div class="col-lg-9 col-xxl-7">
        <div class="uploader-card card">
            <div class="card-body">
                @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="file-dropdown-add btn-group mb-2 d-none">
                    <button 
                        type="button" 
                        class="btn btn-color-4 dropdown-toggle"
                        data-bs-toggle="dropdown" 
                        aria-expanded="false">
                        {{ __('lang.add_more_files') }}
                    </button>
                    <div class="file-dropdown dropdown-menu">
                        <div class="file-dropdown-item">
                            <div class="dropzone-select dropdown-item">
                                {{ __('lang.from_device') }}
                            </div>
                        </div>
                        <div class="file-dropdown-item">
                            <div 
                                class="dropdown-item" 
                                data-bs-toggle="modal" 
                                data-bs-target="#from-link-modal">
                                {{ __('lang.from_url') }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="dropzone dropzone-uploader d-flex">
                    <div class="dropzone-intro dz-message m-auto">
                        <h2 class="mb-3">{{ __('lang.drop_file_here') }}</h2>
                        <div class="btn-group">
                            <button 
                                type="button" 
                                class="btn btn-color-1 dropdown-toggle" 
                                data-bs-toggle="dropdown" 
                                aria-expanded="false">
                                {{ __('lang.select_files') }}
                            </button>
                            <div class="file-dropdown dropdown-menu">
                                <div class="file-dropdown-item">
                                    <div class="dropdown-item dropzone-select">
                                        {{ __('lang.from_device') }}
                                    </div>
                                </div>
                                <div class="file-dropdown-item">
                                    <div 
                                        class="dropdown-item" 
                                        data-bs-toggle="modal" 
                                        data-bs-target="#from-link-modal">
                                        {{ __('lang.from_url') }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mt-3">
                            <span class="upload-info-text">{{ __(
                                'lang.upload_up_to', 
                                [
                                    'max' => config('upload.MAX_FILE_COUNT'),
                                    'maxsize' => formatKiloBytes(config('upload.MAX_FILE_SIZE'))
                                ]
                            ) }}</span>
                        </div>
                    </div>
                    <div class="dropzone-scroll w-100 d-none">
                        <div class="dropzone-previews w-100 d-none">
                            <div class="dropzone-previews-inner mt-2">
                                <div class="row align-items-center">
                                    <div class="col-5 col-sm-4 col-md-2">
                                        <div class="file-extension d-flex">
                                            <span class="m-auto"></span>
                                        </div>
                                        <div class="file-thumb covered d-none"></div>
                                    </div>
                                    <div class="col-7 col-sm-8 col-md-4 dropzone-file">
                                        <div class="dropzone-file-info">
                                            <div class="file-name" data-dz-name></div>
                                            <div class="file-size" data-dz-size></div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 dropzone-toolbar mt-2 mt-md-0">
                                        <div class="d-flex gap-1 gap-md-2 align-items-center justify-content-sm-end flex-wrap flex-sm-nowrap">
                                            <div class="dropzone-output">
                                                <div class="dropzone-output-selector btn-group"></div>
                                            </div>
                                            <a 
                                                href="#"
                                                class="dropzone-settings btn btn-link p-0" 
                                                data-bs-toggle="modal" 
                                                data-bs-target="#settings-modal">
                                                <span 
                                                    class="dropzone-tools" 
                                                    data-bs-toggle="tooltip" 
                                                    data-bs-placement="top" 
                                                    data-bs-custom-class="custom-tooltip" 
                                                    data-bs-title="{{ __('lang.settings') }}">
                                                    <i class="fa-solid fa-gear fa-lg pe-none"></i>
                                                </span>
                                            </a>
                                            <a 
                                                href="#"
                                                class="dropzone-delete btn btn-link p-0" 
                                                aria-label="Remove" 
                                                data-dz-remove>
                                                <span 
                                                    class="delete-tooltip dropzone-tools" 
                                                    data-bs-toggle="tooltip" 
                                                    data-bs-placement="top" 
                                                    data-bs-custom-class="custom-tooltip" 
                                                    data-bs-title="{{ __('lang.remove') }}">
                                                    <i class="fa-regular fa-circle-xmark fa-lg pe-none"></i>
                                                </span>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="dropzone-progress-bar mt-3 d-none">
                                        <div class="progress" role="progressbar" aria-label="Progress" 
                                            aria-valuenow="1" aria-valuemin="0" aria-valuemax="100">
                                            <div class="progress-bar" style="width: 1%"></div>
                                        </div>
                                    </div>
                                    <div class="dropzone-processing mt-2 d-none">
                                        <span class="spinner-border spinner-border-sm pe-none" role="status"></span>
                                        <span>{{ __('lang.processing') }}</span>
                                    </div>
                                    <div class="dropzone-error mt-1 d-none">
                                        <div>
                                            <i class="fa-solid fa-triangle-exclamation"></i>
                                            <span data-dz-errormessage></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="d-flex flex-column flex-sm-row justify-content-sm-between">
                    <button 
                        type="button" 
                        class="file-dropdown-copy file-dropdown-button copy-this btn btn-color-4 mt-3 d-none"
                        data-copy="">
                        {{ __('lang.copy_all') }}
                    </button>
                    <button 
                        type="button" 
                        class="file-dropdown-download file-dropdown-button btn btn-color-4 ms-sm-2 mt-3 d-none" 
                        data-action="{{ LaravelLocalization::localizeUrl('/download-single') }}" 
                        data-action-zip="{{ LaravelLocalization::localizeUrl('/download-zip') }}" 
                        data-keys="">
                        <span class="spinner-border spinner-border-sm pe-none d-none" role="status"></span>
                        <span class="pe-none">{{ __('lang.download_all') }}</span>
                    </button>
                    <button 
                        type="button" 
                        class="upload-files btn btn-color-1 ms-sm-auto mt-3 d-none" 
                        id="upload-files">
                        <span class="upload-button-text pe-none">
                            <span class="d-none d-md-block">{{ __('lang.start_upload') }}</span>
                            <span class="d-md-none">{{ __('lang.upload') }}</span>
                        </span>
                        <span class="spinner-border spinner-border-sm text-light pe-none d-none" role="status"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<form 
    action="{{ LaravelLocalization::localizeUrl('/get-file') }}" 
    id="add-file-url-form" 
    method="POST">
    <div 
        class="modal fade" 
        id="from-link-modal" 
        tabindex="-1" 
        aria-hidden="true"
        aria-modal="true">
        <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-body">
                    <label class="form-label" for="file-url">
                        {{ __('lang.add_file_url') }}
                    </label>
                    <input 
                        type="text" 
                        class="form-control" 
                        id="file-url" 
                        name="url" 
                        placeholder="{{ __('lang.write_url') }}">
                    <div class="url-input-error dropzone-error mt-2 d-none"></div>
                </div>
                <div class="modal-footer">
                    <button 
                        type="submit" 
                        class="btn btn-color-1">
                        <span 
                            class="spinner-border spinner-border-sm text-light d-none" 
                            role="status">
                        </span>
                        {{ __('lang.save') }}
                    </button>
                </div>
            </div>
        </div>
    </div>
</form>
<form 
    action="#" 
    id="settings-form" 
    class="file-settings-form" 
    method="POST">
    <div 
        class="modal fade" 
        id="settings-modal" 
        tabindex="-1" 
        aria-hidden="true"
        aria-modal="true" 
        aria-labelledby="fileModalLabel">
        <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title m-0" id="fileModalLabel">
                        {{ __('lang.settings') }}
                    </h5>
                </div>
                <div class="modal-body scroll-light py-0">
                    @if (toolsSetting('compress') == 1)
                        <div class="settings-container row mb-3 p-2">
                            <div class="col-md-5 d-flex">
                                <label for="compress" class="form-label my-md-auto">
                                    {{ __('lang.compress_img') }} <span class="d-none" id="compress-rate">(0%)</span>
                                </label>
                            </div>
                            <div class="col-md-7">
                                <input 
                                    type="range" 
                                    class="form-range file-compress my-auto" 
                                    min="0" 
                                    max="100" 
                                    step="1" 
                                    value="0" 
                                    id="compress" 
                                    name="compress" 
                                    data-default="0">
                            </div>
                        </div>
                    @endif
                    @if (toolsSetting('resize') == 1)
                        <div class="settings-container row mb-3 p-2">
                            <div class="col-md-5 d-flex">
                                <label class="form-label my-md-auto">
                                    {{ __('lang.width_and_height') }}
                                </label>
                            </div>
                            <div class="col-md-7 d-flex gap-2 my-auto">
                                <input 
                                    type="number" 
                                    class="form-control w-50" 
                                    id="size-width" 
                                    name="size[width]" 
                                    placeholder="{{ __('lang.width') }}">
                                <input 
                                    type="number" 
                                    class="form-control w-50" 
                                    id="size-height" 
                                    name="size[height]" 
                                    placeholder="{{ __('lang.height') }}">
                            </div>
                        </div>
                    @endif
                    @if (toolsSetting('rotate_reflect') == 1)
                        <div class="settings-container row mb-3 p-2">
                            <div class="col-md-5 d-flex">
                                <label for="rotation_reflect" class="form-label my-md-auto">
                                    {{ __('lang.rotate_reflect') }}
                                </label>
                            </div>
                            <div class="col-md-7">
                                <select class="form-select my-auto" id="rotation_reflect" name="rotation-reflect">
                                    <option value="" selected>{{ __('lang.select') }}</option>
                                    <option value="reflect-h">{{ __('lang.reflect_horizontally') }}</option>
                                    <option value="reflect-v">{{ __('lang.reflect_vertically') }}</option>
                                    <optgroup label="{{ __('lang.rotate_left') }}">
                                        <option value="rotate-l-90">90</option>
                                        <option value="rotate-l-180">180</option>
                                        <option value="rotate-l-270">270</option>
                                    </optgroup>
                                    <optgroup label="{{ __('lang.rotate_right') }}">
                                        <option value="rotate-r-90">90</option>
                                        <option value="rotate-r-180">180</option>
                                        <option value="rotate-r-270">270</option>
                                    </optgroup>
                                </select>
                            </div>
                        </div>
                    @endif
                    @if (toolsSetting('watermark') == 1)
                        <div class="settings-container row mb-3 p-2">
                            <div class="col-md-5 d-flex">
                                <label for="watermark" class="form-label my-md-auto">
                                    {{ __('lang.watermark') }}
                                </label>
                            </div>
                            <div class="col-md-7">
                                <input 
                                    type="text" 
                                    class="form-control my-auto" 
                                    id="watermark" 
                                    name="watermark" 
                                    placeholder="{{ __('lang.watermark_text') }}">
                            </div>
                        </div>
                    @endif
                    @if (toolsSetting('preferences') == 1)
                        <div class="settings-container row mb-3 p-2">
                            <div class="col-md-5 d-flex">
                                <label class="form-label my-md-auto">
                                    {{ __('lang.preferences') }}
                                </label>
                            </div>
                            <div class="col-md-7">
                                <div class="mb-3">
                                    <label for="brightness" class="form-label fw-normal">
                                        {{ __('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-3">
                                    <label for="contrast" class="form-label fw-normal">
                                        {{ __('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-3">
                                    <label for="gamma" class="form-label fw-normal">
                                        {{ __('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 class="mb-3">
                                    <label for="red" class="form-label fw-normal">
                                        {{ __('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-3">
                                    <label for="green" class="form-label fw-normal">
                                        {{ __('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 fw-normal">
                                        {{ __('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>
                    @endif
                    @if (toolsSetting('effects') == 1)
                        <div class="settings-container row mb-3 p-2">
                            <div class="col-md-5 d-flex">
                                <label class="form-label my-md-auto">
                                    {{ __('lang.effects') }}
                                </label>
                            </div>
                            <div class="col-md-7">
                                <div class="form-check d-flex align-items-center mb-3">
                                    <input 
                                        class="form-check-input" 
                                        type="checkbox" 
                                        value="1" 
                                        id="grayscale" 
                                        name="effects[grayscale]" 
                                        data-default="false">
                                    <label class="form-check-label fw-normal ms-2" for="grayscale">
                                        {{ __('lang.convert_to_grayscale') }}
                                    </label>
                                </div>
                                <div class="form-check d-flex align-items-center mb-3">
                                    <input 
                                        class="form-check-input" 
                                        type="checkbox" 
                                        value="1" 
                                        id="blur" 
                                        name="effects[blur]" 
                                        data-default="false">
                                    <label class="form-check-label fw-normal ms-2" for="blur">
                                        {{ __('lang.blur') }}
                                    </label>
                                </div>
                                <div class="form-check d-flex align-items-center mb-3">
                                    <input 
                                        class="form-check-input" 
                                        type="checkbox" 
                                        value="1" 
                                        id="invert" 
                                        name="effects[invert]" 
                                        data-default="false">
                                    <label class="form-check-label fw-normal ms-2" for="invert">
                                        {{ __('lang.invert_colors') }}
                                    </label>
                                </div>
                                <div class="form-check d-flex align-items-center mb-3">
                                    <input 
                                        class="form-check-input" 
                                        type="checkbox" 
                                        value="1" 
                                        id="pixelation" 
                                        name="effects[pixelation]" 
                                        data-default="false">
                                    <label class="form-check-label fw-normal ms-2" for="pixelation">
                                        {{ __('lang.pixelation_effect') }}
                                    </label>
                                </div>
                                <div class="form-check d-flex align-items-center">
                                    <input 
                                        class="form-check-input" 
                                        type="checkbox" 
                                        value="1" 
                                        id="reduce" 
                                        name="effects[reduce]" 
                                        data-default="false">
                                    <label class="form-check-label fw-normal ms-2" for="reduce">
                                        {{ __('lang.reduce_colors') }}
                                    </label>
                                </div>
                            </div>
                        </div>
                    @endif
                    @if (toolsSetting('autoremove') == 1)
                        <div class="settings-container row mb-3 p-2">
                            <div class="col-md-5 d-flex">
                                <label for="auto-remove" class="form-label my-md-auto">
                                    {{ __('lang.auto_remove') }}
                                </label>
                            </div>
                            <div class="col-md-7">
                                <select class="form-select my-auto" 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>
                    @endif
                    @if (toolsSetting('password') == 1)
                        <div class="settings-container row mb-3 p-2">
                            <div class="col-md-5 d-flex">
                                <label for="password" class="form-label my-md-auto">
                                    {{ __('lang.set_password') }}
                                </label>
                            </div>
                            <div class="col-md-7">
                                <input 
                                    type="text" 
                                    class="form-control my-auto" 
                                    id="password" 
                                    name="password" 
                                    placeholder="{{ __('lang.password') }}">
                            </div>
                        </div>
                    @endif
                    @if (toolsSetting('exif_cleaner') == 1)
                        <div class="settings-container row p-2">
                            <div class="col-md-5 d-flex">
                                <label class="form-label my-md-auto">
                                    {{ __('lang.exif_cleaner') }}
                                </label>
                            </div>
                            <div class="col-md-7">
                                <div class="form-check d-flex align-items-center mb-3">
                                    <input 
                                        class="form-check-input" 
                                        type="checkbox" 
                                        name="exif[basic]" 
                                        value="1" 
                                        id="exif" 
                                        data-default="false">
                                    <label class="form-check-label fw-normal ms-2" for="exif">
                                        {{ __('lang.remove_exif_data') }}
                                    </label>
                                </div>
                                <div class="form-check d-flex align-items-center">
                                    <input 
                                        class="form-check-input" 
                                        type="checkbox" 
                                        name="exif[deep]" 
                                        value="1" 
                                        id="exif-deep" 
                                        data-default="false">
                                    <label class="form-check-label fw-normal ms-2" for="exif-deep">
                                        {{ __('lang.remove_exif_data_deep') }}
                                    </label>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
                <div class="modal-footer">
                    <button 
                        type="button" 
                        class="btn btn-color-4 modal-cancel" 
                        data-modal-id="settings-modal" 
                        data-bs-dismiss="modal">{{ __('lang.reset_settings') }}</button>
                    <button 
                        type="button" 
                        class="save-settings btn btn-color-1" 
                        data-current-form="#settings-form" 
                        data-bs-dismiss="modal">
                        {{ __('lang.apply_settings') }}
                    </button>
                </div>
            </div>
        </div>
    </div>
</form>
@stop