{{-- resources/views/admin/sub_categories/index.blade.php --}}
@extends('admin.layouts.app')

@php
  $pageTitle = $pageTitle ?? 'Sub Categories';
@endphp

@section('panel')

@if(session('success'))
  <div class="alert alert--success mb-3">{{ session('success') }}</div>
@endif

<style>
  .table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .table--light th,.table--light td{white-space:nowrap;vertical-align:middle}
  .col-no{min-width:60px;text-align:center;font-weight:600}
  .col-photo{min-width:120px}
  .col-name{min-width:220px}
  .col-category{min-width:200px}
  .col-slug{min-width:180px}
  .col-created{min-width:120px;text-align:center}
  .col-action{min-width:140px;text-align:center}
  .badge{white-space:nowrap;display:inline-block}
</style>

<div class="row">
  <div class="col-12">
    <div class="card b-radius--10">
      <div class="card-body">

        {{-- Filter --}}
        <form method="GET" class="mb-3">
          <div class="row g-2">
            <div class="col-md-4">
              <select class="form-control" name="category_id" onchange="this.form.submit()">
                <option value="">-- All Categories --</option>
                @foreach($categories as $c)
                  <option value="{{ $c->id }}" @selected((string)$qCategory === (string)$c->id)>{{ $c->name }}</option>
                @endforeach
              </select>
            </div>
            <div class="col-md-2">
              <a href="{{ route('admin.sub-categories.index') }}" class="btn btn--secondary w-100">Reset</a>
            </div>
          </div>
        </form>

        <div class="table-responsive">
          <table class="table table--light style--two">
            <thead>
              <tr>
                <th class="col-no">#</th>
                <th class="col-photo">Photo</th>
                <th class="col-name">Sub Category</th>
                <th class="col-category">Category</th>
                <th class="col-slug">Slug</th>
                <th class="col-created">Created</th>
                <th class="col-action">Action</th>
              </tr>
            </thead>

            <tbody>
              @forelse($subCategories as $sc)
                @php
                  $photoSrc = null;
                  if (!empty($sc->photo_url)) {
                    $photoSrc = \Illuminate\Support\Str::startsWith($sc->photo_url, ['http://','https://'])
                      ? $sc->photo_url
                      : asset(ltrim($sc->photo_url, '/'));
                  }
                @endphp

                <tr>
                  <td class="col-no">
                    {{ $loop->iteration + ($subCategories->firstItem() ?? 0) - 1 }}
                  </td>

                  <td class="col-photo">
                    @if($photoSrc)
                      <img src="{{ $photoSrc }}"
                           alt="{{ $sc->name }}"
                           class="rounded"
                           style="height:48px;width:80px;object-fit:cover;border:1px solid #e5e7eb;">
                    @else
                      <span class="text--muted">N/A</span>
                    @endif
                  </td>

                  <td class="col-name">{{ $sc->name }}</td>

                  <td class="col-category">
                    {{ $sc->category?->name ?? 'N/A' }}
                  </td>

                  <td class="col-slug">
                    <span class="badge badge--primary">{{ $sc->slug }}</span>
                  </td>

                  <td class="col-created">{{ $sc->created_at?->format('Y-m-d') }}</td>

                  <td class="col-action">
                    <a href="{{ route('admin.sub-categories.edit', $sc->id) }}"
                       class="btn btn-sm btn-outline--primary" title="Edit">
                      <i class="las la-edit"></i>
                    </a>

                    <form action="{{ route('admin.sub-categories.destroy', $sc->id) }}"
                          method="POST"
                          class="d-inline"
                          onsubmit="return confirm('Are you sure to delete this sub category?')">
                      @csrf
                      <button type="submit" class="btn btn-sm btn-outline--danger" title="Delete">
                        <i class="las la-trash"></i>
                      </button>
                    </form>
                  </td>
                </tr>
              @empty
                <tr>
                  <td colspan="7" class="text-center text--muted">No sub categories found</td>
                </tr>
              @endforelse
            </tbody>
          </table>
        </div>

        @if($subCategories->hasPages())
          <div class="mt-3">{{ $subCategories->links() }}</div>
        @endif

      </div>
    </div>
  </div>
</div>

@endsection

@push('breadcrumb-plugins')
  <a href="{{ route('admin.sub-categories.create') }}" class="btn btn-outline--primary btn-sm">
    <i class="las la-plus"></i> Add Sub Category
  </a>
@endpush