@extends('layouts.admin')
@section('content')
@php use App\Support\Ui; @endphp
<div class="grid g-kpi" style="margin-bottom:20px;">
  @foreach($kpis as $k)@include('admin.partials.kpi', ['k' => $k])@endforeach
</div>
<div class="card">
  <div class="card-pad" style="padding-bottom:16px;">
    <div class="card-head">
      <div><div class="section-title">Media library</div><div class="section-sub" style="margin-bottom:0;">Images, videos and files used across every module</div></div>
      <div style="display:flex;gap:8px;">
        <form method="get" class="filter-bar"><select name="module" onchange="this.form.submit()"><option value="">Filter by module</option>@foreach($modules as $k => $l)<option value="{{ $k }}" {{ request('module')===$k?'selected':'' }}>{{ $l }}</option>@endforeach</select></form>
        <button class="btn btn-primary btn-sm" type="button" data-open-modal="uploadModal">{!! Ui::icon('plus') !!} Upload media</button>
      </div>
    </div>
  </div>
  <div class="card-pad" style="padding-top:0;">
    @if($files->count())
    <div class="media-grid">
      @foreach($files as $f)
        @php $pair = ['image' => ['#0073CF','#005CA6'], 'video' => ['#7B4FD1','#5A34A8'], 'file' => ['#F5A623','#B5780C']][$f->type]; $size = $f->size > 1048576 ? number_format($f->size/1048576,1).' MB' : number_format($f->size/1024).' KB'; @endphp
        <div class="media-tile">
          <a class="media-thumb" href="{{ route('media.stream', $f->id) }}" target="_blank" rel="noopener" style="background:linear-gradient(135deg,{{ $pair[0] }},{{ $pair[1] }});text-decoration:none;{{ $f->type==='image' ? 'background-image:url('.route('media.stream',$f->id).');background-size:cover;background-position:center;' : '' }}">
            @if($f->type==='video'){!! Ui::icon('bolt', 'stroke="#fff"') !!}@elseif($f->type==='file'){!! Ui::icon('layers', 'stroke="#fff"') !!}@endif
            <span class="media-badge">{{ $modules[$f->module] ?? ucfirst($f->module) }}</span>
          </a>
          <div class="media-info">
            <div class="mname" title="{{ $f->name }}">{{ $f->name }}</div>
            <div class="mmeta" style="display:flex;justify-content:space-between;align-items:center;"><span>{{ $size }} · {{ $f->type }}</span><button type="button" class="btn btn-danger btn-sm" style="padding:2px 8px;" data-role="delete" data-id="{{ $f->id }}">Delete</button></div>
          </div>
        </div>
      @endforeach
    </div>
    @else<div class="empty">No media uploaded yet.</div>@endif
  </div>
  @include('admin.partials.pager', ['rows' => $files])
</div>
@endsection
@section('modals')
<div class="modal" id="uploadModal" style="display:none">
  <form method="post" action="{{ route('admin.media.store') }}" enctype="multipart/form-data">@csrf
    <div class="modal-head"><h3>Upload media</h3><button type="button" class="icon-btn" onclick="ehCloseModal()">✕</button></div>
    <div class="modal-body"><div class="form-grid">
      <div class="f full"><label>File (images, video, PDF, ZIP — max 50 MB)</label><input type="file" name="file" required></div>
      <div class="f"><label>Module</label><select name="module">@foreach($modules as $k => $l)<option value="{{ $k }}">{{ $l }}</option>@endforeach</select></div>
    </div></div>
    <div class="modal-foot"><button type="button" class="btn btn-ghost btn-sm" onclick="ehCloseModal()">Cancel</button><button class="btn btn-primary btn-sm" type="submit">Upload</button></div>
  </form>
</div>
@endsection