@extends('backend.layout.master-tailwind')
@section('title', __('Storage Settings'))

@section('admin_styles')
<style>
.credentials { display:none; }
.cred-grid { display:flex; flex-direction:column; gap:14px; }
</style>
@endsection

@section('content')
<div class="page">

  <div class="page-head">
    <div>
      <h1 class="page-title">{{ __('Storage Settings') }}</h1>
      <p class="page-sub">{{ __('Configure disk driver for media file storage') }}</p>
    </div>
    <div class="page-actions">
      <form action="{{ route('admin.upload.local.file.cloud') }}" method="POST">
        @csrf
        <input type="hidden" name="_action" value="sync_file">
        <button class="btn ghost sm sync-btn" type="submit">
          {{ __('Sync Local Files to Cloud') }}
          <span id="synced_load_spinner"></span>
        </button>
      </form>
    </div>
  </div>

  <div style="max-width:580px;display:flex;flex-direction:column;gap:16px">

    <div style="background:color-mix(in oklch,#f59e0b 10%,transparent);border:1px solid color-mix(in oklch,#f59e0b 30%,transparent);border-radius:8px;padding:12px 14px;font-size:12px;color:#92400e;line-height:1.6">
      {{ __('Notice: By default storage is local. If you have a disk driver you can set it here, otherwise leave this as (Local).') }}
    </div>

    <x-validation.error/>

    <form method="POST" action="{{ route('admin.cloud.storage.settings.update') }}" style="display:flex;flex-direction:column;gap:16px">
      @csrf

      <div class="card" style="padding:20px;display:flex;flex-direction:column;gap:16px">

        <div>
          <label class="field-label" style="display:block;margin-bottom:6px">{{ __('Disk Driver') }}</label>
          <select name="storage_driver" id="storage-driver" class="input wide">
            <option value="">{{ __('Select Driver') }}</option>
            <option value="CustomUploader" {{ get_static_option('storage_driver') == 'CustomUploader' ? 'selected' : '' }}>{{ __('Local') }}</option>
            <option value="cloudFlareR2"   {{ get_static_option('storage_driver') == 'cloudFlareR2'   ? 'selected' : '' }}>{{ __('Cloudflare R2') }}</option>
            <option value="wasabi"         {{ get_static_option('storage_driver') == 'wasabi'         ? 'selected' : '' }}>{{ __('Wasabi S3') }}</option>
            <option value="s3"             {{ get_static_option('storage_driver') == 's3'             ? 'selected' : '' }}>{{ __('AWS S3') }}</option>
          </select>
        </div>

        {{-- Wasabi credentials --}}
        <div class="credentials wasabi cred-grid" @style(['display:flex' => get_static_option('storage_driver') == 'wasabi'])>
          <div><label class="field-label" style="display:block;margin-bottom:6px">{{ __('Access Key ID') }}</label><input type="text" name="wasabi_access_key_id" class="input wide" value="{{ get_static_option('wasabi_access_key_id') }}"></div>
          <div><label class="field-label" style="display:block;margin-bottom:6px">{{ __('Secret Access Key') }}</label><input type="text" name="wasabi_secret_access_key" class="input wide" value="{{ get_static_option('wasabi_secret_access_key') }}"></div>
          <div><label class="field-label" style="display:block;margin-bottom:6px">{{ __('Default Region') }}</label><input type="text" name="wasabi_default_region" class="input wide" value="{{ get_static_option('wasabi_default_region') }}"></div>
          <div><label class="field-label" style="display:block;margin-bottom:6px">{{ __('Bucket') }}</label><input type="text" name="wasabi_bucket" class="input wide" value="{{ get_static_option('wasabi_bucket') }}"></div>
          <div><label class="field-label" style="display:block;margin-bottom:6px">{{ __('Endpoint') }}</label><input type="text" name="wasabi_endpoint" class="input wide" value="{{ get_static_option('wasabi_endpoint') }}"></div>
        </div>

        {{-- Cloudflare R2 credentials --}}
        <div class="credentials cloudFlareR2 cred-grid" @style(['display:flex' => get_static_option('storage_driver') == 'cloudFlareR2'])>
          <div><label class="field-label" style="display:block;margin-bottom:6px">{{ __('Access Key ID') }}</label><input type="text" name="cloudflare_r2_access_key_id" class="input wide" value="{{ get_static_option('cloudflare_r2_access_key_id') }}"></div>
          <div><label class="field-label" style="display:block;margin-bottom:6px">{{ __('Secret Access Key') }}</label><input type="text" name="cloudflare_r2_secret_access_key" class="input wide" value="{{ get_static_option('cloudflare_r2_secret_access_key') }}"></div>
          <div><label class="field-label" style="display:block;margin-bottom:6px">{{ __('Bucket') }}</label><input type="text" name="cloudflare_r2_bucket" class="input wide" value="{{ get_static_option('cloudflare_r2_bucket') }}"></div>
          <div><label class="field-label" style="display:block;margin-bottom:6px">{{ __('URL') }}</label><input type="text" name="cloudflare_r2_url" class="input wide" value="{{ get_static_option('cloudflare_r2_url') }}"></div>
          <div><label class="field-label" style="display:block;margin-bottom:6px">{{ __('Endpoint') }}</label><input type="text" name="cloudflare_r2_endpoint" class="input wide" value="{{ get_static_option('cloudflare_r2_endpoint') }}"></div>
          <div>
            <label class="field-label" style="display:block;margin-bottom:6px">{{ __('Use Path Style Endpoint') }}</label>
            <select class="input wide" name="cloudflare_r2_use_path_style_endpoint">
              <option value="1" {{ get_static_option('cloudflare_r2_use_path_style_endpoint') == 1 ? 'selected' : '' }}>{{ __('Yes') }}</option>
              <option value="0" {{ get_static_option('cloudflare_r2_use_path_style_endpoint') == 0 ? 'selected' : '' }}>{{ __('No') }}</option>
            </select>
          </div>
        </div>

        {{-- AWS S3 credentials --}}
        <div class="credentials s3 cred-grid" @style(['display:flex' => get_static_option('storage_driver') == 's3'])>
          <div><label class="field-label" style="display:block;margin-bottom:6px">{{ __('Access Key ID') }}</label><input type="text" name="aws_access_key_id" class="input wide" value="{{ get_static_option('aws_access_key_id') }}"></div>
          <div><label class="field-label" style="display:block;margin-bottom:6px">{{ __('Secret Access Key') }}</label><input type="text" name="aws_secret_access_key" class="input wide" value="{{ get_static_option('aws_secret_access_key') }}"></div>
          <div><label class="field-label" style="display:block;margin-bottom:6px">{{ __('Default Region') }}</label><input type="text" name="aws_default_region" class="input wide" value="{{ get_static_option('aws_default_region') }}"></div>
          <div><label class="field-label" style="display:block;margin-bottom:6px">{{ __('Bucket') }}</label><input type="text" name="aws_bucket" class="input wide" value="{{ get_static_option('aws_bucket') }}"></div>
          <div><label class="field-label" style="display:block;margin-bottom:6px">{{ __('URL') }}</label><input type="text" name="aws_url" class="input wide" value="{{ get_static_option('aws_url') }}"></div>
          <div><label class="field-label" style="display:block;margin-bottom:6px">{{ __('Endpoint') }}</label><input type="text" name="aws_endpoint" class="input wide" value="{{ get_static_option('aws_endpoint') }}"></div>
          <div>
            <label class="field-label" style="display:block;margin-bottom:6px">{{ __('Use Path Style Endpoint') }}</label>
            <select class="input wide" name="aws_use_path_style_endpoint">
              <option value="1" {{ get_static_option('aws_use_path_style_endpoint') == 1 ? 'selected' : '' }}>{{ __('Yes') }}</option>
              <option value="0" {{ get_static_option('aws_use_path_style_endpoint') == 0 ? 'selected' : '' }}>{{ __('No') }}</option>
            </select>
          </div>
        </div>

      </div>

      <div>
        <button type="submit" class="btn primary sm">{{ __('Save Settings') }}</button>
      </div>

    </form>
  </div>

</div>
@endsection

@section('script')
<script>
(function ($) {
  'use strict';

  $(document).on('change', '#storage-driver', function () {
    var driver = $(this).val();
    $('.credentials').hide();
    if (driver) { $('.credentials.' + driver).css('display', 'flex'); }
  });

  $(document).on('click', '.sync-btn', function () {
    $('#synced_load_spinner').html('<svg style="width:14px;height:14px;animation:spin 1s linear infinite;vertical-align:middle" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>');
    setTimeout(function () { $('#synced_load_spinner').html(''); }, 10000000);
  });

})(jQuery);
</script>
<style>@keyframes spin{to{transform:rotate(360deg)}}</style>
@endsection