@extends('layouts.app')

@section('content')
<section class="hero">
  <h1>Check a file or link before you trust it.</h1>
  <p class="lede">Upload a file, or paste a URL, domain, IP address or file hash. {{ config('app.name') }} runs it past every engine below and shows you what each one found.</p>

  @php $tab = old('query') !== null || $errors->has('query') ? 'search' : 'file'; @endphp
  <div class="scanner">
    <div class="modes" role="tablist" aria-label="What to scan">
      <button type="button" role="tab" id="t-file" aria-controls="p-file" aria-selected="{{ $tab === 'file' ? 'true' : 'false' }}">File</button>
      <button type="button" role="tab" id="t-search" aria-controls="p-search" aria-selected="{{ $tab === 'search' ? 'true' : 'false' }}">URL, domain, IP or hash</button>
    </div>

    <div class="mode" role="tabpanel" id="p-file" aria-labelledby="t-file" @if($tab !== 'file') hidden @endif>
      <form method="post" action="{{ route('scan.file') }}" enctype="multipart/form-data" id="fileForm">
        @csrf
        <label class="drop" id="drop" for="fileInput">
          <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2.4" aria-hidden="true"><path d="M14 34h-3a8 8 0 0 1-1-15.9A11 11 0 0 1 31.4 15 9 9 0 0 1 37 33h-3"/><path d="M24 40V24m-6 6 6-6 6 6"/></svg>
          <strong>Drop a file here or choose one</strong>
          <span class="dim small">Up to {{ config('vizur.max_upload_mb') }} MB. Any file type.</span>
          <input type="file" name="file" id="fileInput" required>
        </label>
        <div class="chosen" id="chosen" aria-live="polite"></div>
        @error('file')<div class="err">{{ $message }}</div>@enderror
        <div class="opts">
          <div style="display:flex;gap:18px;flex-wrap:wrap">
            <label class="check"><input type="checkbox" name="force" value="1"> Scan again even if already scanned</label>
            @auth<label class="check"><input type="checkbox" name="private" value="1"> Keep the report private</label>@endauth
          </div>
          <button class="btn" type="submit" id="fileBtn" disabled>Scan file</button>
        </div>
      </form>
    </div>

    <div class="mode" role="tabpanel" id="p-search" aria-labelledby="t-search" @if($tab !== 'search') hidden @endif>
      <form method="post" action="{{ route('scan.search') }}">
        @csrf
        <label for="q" class="sr-only">URL, domain, IP address or hash</label>
        <div class="scan-row">
          <input type="text" id="q" name="query" value="{{ old('query') }}" placeholder="https://example.com/login, example.com, 203.0.113.9 or a SHA-256" autocomplete="off" spellcheck="false" required>
          <button class="btn" type="submit">Scan</button>
        </div>
        @error('query')<div class="err">{{ $message }}</div>@enderror
        <div class="opts"><label class="check"><input type="checkbox" name="force" value="1"> Scan again even if already scanned</label></div>
        <p class="hint">Links are opened by our server, not your browser, so it's safe to paste suspicious ones here.</p>
      </form>
    </div>
  </div>

  <div class="facts">
    <span><b>{{ $fileEngines }}</b> engines check files</span>
    <span><b>{{ $urlEngines }}</b> engines check links</span>
    <span><a href="{{ route('engines') }}">See every engine</a></span>
  </div>
</section>

<section style="margin-top:48px">
  <div class="panel flush">
    <div class="panel-head"><h2>Recent public reports</h2></div>
    @if ($recent->isEmpty())
      <div class="empty">Nothing scanned yet. Your first scan will show up here.</div>
    @else
    <div class="table-wrap">
      <table>
        <thead><tr><th>Item</th><th>Type</th><th>Result</th><th>Detections</th><th>When</th></tr></thead>
        <tbody>
        @foreach ($recent as $a)
          <tr>
            <td class="subject"><a href="{{ route('analysis.show', $a) }}" title="{{ $a->title() }}">{{ $a->title() }}</a></td>
            <td>{{ ['file' => 'File', 'url' => 'URL', 'domain' => 'Domain', 'ip' => 'IP address', 'hash' => 'Hash'][$a->type] }}</td>
            <td>@include('partials.chip', ['a' => $a])</td>
            <td>{{ ($a->stats['malicious'] ?? 0) + ($a->stats['suspicious'] ?? 0) }} / {{ $a->engineCount() }}</td>
            <td class="dim" style="white-space:nowrap">{{ $a->created_at->diffForHumans() }}</td>
          </tr>
        @endforeach
        </tbody>
      </table>
    </div>
    @endif
  </div>
</section>
@endsection

@push('scripts')
<script>
(function () {
  var tabs = document.querySelectorAll('.modes [role=tab]');
  tabs.forEach(function (t) {
    t.addEventListener('click', function () {
      tabs.forEach(function (o) {
        var on = o === t;
        o.setAttribute('aria-selected', on);
        document.getElementById(o.getAttribute('aria-controls')).hidden = !on;
      });
      if (t.id === 't-search') document.getElementById('q').focus();
    });
  });
  var input = document.getElementById('fileInput'), drop = document.getElementById('drop'),
      chosen = document.getElementById('chosen'), btn = document.getElementById('fileBtn'),
      max = {{ config('vizur.max_upload_mb') }} * 1024 * 1024;
  function show() {
    var f = input.files[0];
    if (!f) { chosen.textContent = ''; btn.disabled = true; return; }
    var mb = (f.size / 1048576).toFixed(f.size < 1048576 ? 2 : 1);
    if (f.size > max) { chosen.textContent = f.name + ' is ' + mb + ' MB, over the ' + {{ config('vizur.max_upload_mb') }} + ' MB limit.'; btn.disabled = true; return; }
    chosen.textContent = 'Ready to scan: ' + f.name + ' (' + mb + ' MB)';
    btn.disabled = false;
  }
  input.addEventListener('change', show);
  ['dragenter', 'dragover'].forEach(function (e) { drop.addEventListener(e, function (ev) { ev.preventDefault(); drop.classList.add('over'); }); });
  ['dragleave', 'drop'].forEach(function (e) { drop.addEventListener(e, function (ev) { ev.preventDefault(); drop.classList.remove('over'); }); });
  drop.addEventListener('drop', function (ev) { if (ev.dataTransfer.files.length) { input.files = ev.dataTransfer.files; show(); } });
  document.getElementById('fileForm').addEventListener('submit', function () { btn.disabled = true; btn.textContent = 'Uploading…'; });
})();
</script>
@endpush