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

@section('admin_styles')
<x-select2.select2-css />
<style>
span.select2-search.select2-search--inline { display: none; }
.select2-container--default .select2-selection--multiple {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    min-height: 38px;
    padding: 2px 6px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: color-mix(in oklch,var(--accent,#6366f1) 12%,transparent);
    border: 1px solid color-mix(in oklch,var(--accent,#6366f1) 30%,transparent);
    border-radius: 4px;
    font-size: 11px;
    padding: 2px 8px 2px 20px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    color: var(--accent,#6366f1);
    font-size: 11px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--accent,#6366f1);
    border-right-color: color-mix(in oklch,var(--accent,#6366f1) 30%,transparent);
}
.select2-container--default .select2-selection--single {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    height: 38px;
    display: flex;
    align-items: center;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text);
    font-size: 13px;
    padding: 0 32px 0 12px;
    line-height: 38px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px;
    right: 8px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--text-3) transparent transparent;
}
.select2-dropdown {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 13px;
    padding: 6px 10px;
    outline: none;
}
.select2-container--default .select2-results__option {
    font-size: 13px;
    color: var(--text);
    padding: 7px 12px;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: color-mix(in oklch,var(--accent,#6366f1) 12%,transparent);
    color: var(--accent,#6366f1);
}
.select2-container--default .select2-results__option[aria-selected=true] {
    background: color-mix(in oklch,var(--accent,#6366f1) 8%,transparent);
}
</style>
@endsection

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

  <div class="page-head">
    <div>
      <h1 class="page-title">{{ __('File Extension Settings') }}</h1>
      <p class="page-sub">{{ __('Configure allowed file types per upload context and maximum upload size') }}</p>
    </div>
  </div>

  @if($errors->any())
  <div style="max-width:680px;background:color-mix(in oklch,var(--danger,#ef4444) 8%,transparent);border:1px solid color-mix(in oklch,var(--danger,#ef4444) 30%,transparent);border-radius:8px;padding:10px 14px;font-size:12px;color:var(--danger,#ef4444);display:flex;flex-direction:column;gap:4px;margin-bottom:16px">
    @foreach($errors->all() as $error)<div>{{ $error }}</div>@endforeach
  </div>
  @endif

  @php
    $allExtensions = [
      'image'    => ['png','jpg','jpeg','gif','bmp','webp','svg','tiff','ico','heic','avif'],
      'document' => ['pdf','doc','docx','txt','rtf','odt','md','csv','xlsx','xls','ods','ppt','pptx','odp','key'],
      'archive'  => ['zip','rar','7z','tar','gz','bz2'],
      'audio'    => ['mp3','wav','aac','ogg','flac','m4a','wma'],
      'video'    => ['mp4','avi','mov','mkv','wmv','flv','webm','m4v'],
    ];
    $fileSizes = ['1024','2048','3072','4096','5120','10240','20480','30720','40960','51200','102400','204800','307200','409600','512000','1048576','2097152'];

    $contexts = [
      'chat'  => ['label' => __('Chat Attachments'),    'icon' => 'ti tabler-message-2',   'key' => 'chat_extensions',  'var' => $chat_extensions,  'desc' => __('Files users can send in live chat messages.')],
      'job'   => ['label' => __('Job Attachments'),     'icon' => 'ti tabler-briefcase',    'key' => 'job_extensions',   'var' => $job_extensions,   'desc' => __('Files clients can attach when posting or applying for jobs.')],
      'order' => ['label' => __('Order Deliverables'),  'icon' => 'ti tabler-package',      'key' => 'order_extensions', 'var' => $order_extensions, 'desc' => __('Files freelancers can upload when delivering order work.')],
    ];
  @endphp

  <form action="{{ route('admin.file.extension.settings') }}" method="POST" style="display:flex;flex-direction:column;gap:20px;max-width:680px">
    @csrf

    {{-- Per-context extension cards --}}
    @foreach($contexts as $ctxKey => $ctx)
    <div class="card" style="padding:20px">
      <div style="display:flex;align-items:center;gap:10px;margin-bottom:4px">
        <i class="icon-base {{ $ctx['icon'] }} icon-18px" style="color:var(--accent,#6366f1)"></i>
        <span style="font-size:14px;font-weight:600;color:var(--text)">{{ $ctx['label'] }}</span>
      </div>
      <p style="font-size:12px;color:var(--text-3);margin-bottom:14px">{{ $ctx['desc'] }}</p>

      @foreach($allExtensions as $typeLabel => $typeExts)
      <div style="margin-bottom:12px">
        <label style="display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-3);margin-bottom:5px">{{ ucfirst($typeLabel) }}</label>
        <select name="{{ $ctxKey }}_file_extensions[]" class="ext-select" multiple style="width:100%" data-placeholder="{{ __('Select :type extensions', ['type' => ucfirst($typeLabel)]) }}">
          @foreach($typeExts as $ext)
            <option value="{{ $ext }}" {{ in_array($ext, $ctx['var']) ? 'selected' : '' }}>{{ $ext }}</option>
          @endforeach
        </select>
      </div>
      @endforeach
    </div>
    @endforeach

    {{-- Max upload size --}}
    <div class="card" style="padding:20px">
      <div style="display:flex;align-items:center;gap:10px;margin-bottom:14px">
        <i class="icon-base ti tabler-database icon-18px" style="color:var(--accent,#6366f1)"></i>
        <span style="font-size:14px;font-weight:600;color:var(--text)">{{ __('Max Upload File Size') }}</span>
      </div>
      <select name="max_upload_size" id="max_upload_size" style="width:100%">
        <option value="">{{ __('Select size') }}</option>
        @foreach($fileSizes as $size)
          <option value="{{ $size }}" {{ get_static_option('max_upload_size') === $size ? 'selected' : '' }}>
            {{ ($size / 1024) <= 1023 ? ($size / 1024) . ' MB' : round($size / (1024 * 1024), 1) . ' GB' }}
          </option>
        @endforeach
      </select>
    </div>

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

  </form>

</div>
@endsection

@section('script')
<x-select2.select2-js />
<script>
(function () {
  $('.ext-select').each(function () {
    $(this).select2({ placeholder: $(this).data('placeholder') });
  });
  $('#max_upload_size').select2({
    placeholder: '{{ __("Select size") }}',
    allowClear: false
  });
}());
</script>
@endsection