@extends('admin.layouts.app')

@php
  $pageTitle = $pageTitle ?? 'Certificate Settings';
@endphp

@section('panel')

<div class="mb-3">
  <div class="input-group" id="certificateSearchWrap">
    <input type="text" id="certificateSearch" class="form-control" placeholder="Search...">
    <button class="btn btn--primary input-group-text" type="button">
      <i class="fa fa-search"></i>
    </button>
  </div>
</div>

<div class="row">
  <div class="col-12">
    <div class="card b-radius--10">
      <div class="card-body p-0">
        <div class="table-responsive--sm table-responsive">
          <table class="table table--light style--two" id="certificateTable">
            <thead>
              <tr>
                <th style="width:70px">#</th>
                <th>Title</th>
                <th>Image</th>
                <th style="width:90px">Sort</th>
                <th style="width:100px">Status</th>
                <th style="width:150px">Action</th>
              </tr>
            </thead>

            <tbody>
              @forelse($items as $i => $item)
                @php
                  $searchKey = strtolower(($item->title ?? '') . ' ' . ($item->sort_order ?? '') . ' ' . ($item->is_active ? 'active' : 'hidden'));
                @endphp

                <tr data-search="{{ $searchKey }}">
                  <td data-label="#">#{{ $i+1 }}</td>

                  <td data-label="Title">
                    <span class="fw-bold">{{ $item->title }}</span>
                  </td>

                  <td data-label="Image">
                    <img src="{{ asset($item->image_path) }}" class="rounded" style="width:120px;height:68px;object-fit:cover;">
                  </td>

                  <td data-label="Sort">{{ $item->sort_order }}</td>

                  <td data-label="Status">
                    @if($item->is_active)
                      <span class="badge badge--success">Active</span>
                    @else
                      <span class="badge badge--warning">Hidden</span>
                    @endif
                  </td>

                  <td data-label="Action">
                    <div class="button--group">
                      <a href="{{ route('admin.certificates.edit',$item->id) }}" class="btn btn-sm btn-outline--primary">
                        <i class="la la-edit"></i> Edit
                      </a>

                      <form action="{{ route('admin.certificates.destroy',$item->id) }}" method="POST" class="d-inline">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-sm btn-outline--danger"
                                onclick="return confirm('Delete this certificate?')">
                          <i class="la la-trash"></i> Delete
                        </button>
                      </form>
                    </div>
                  </td>
                </tr>
              @empty
                <tr>
                  <td colspan="6" class="text-center py-4 text-muted">
                    No certificates found.
                  </td>
                </tr>
              @endforelse
            </tbody>

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

@endsection

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

@push('page_css')
<style>
  #certificateSearchWrap .form-control{
    background:#fff !important;
    opacity:1 !important;
    color:#111 !important;
    border:1px solid #ced4da;
  }
  #certificateSearchWrap .input-group-text{
    background:#fff;
    border:1px solid #ced4da;
  }
</style>
@endpush

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

  $(document).on('input','#certificateSearch',function(){
    let q = ($(this).val() || '').toLowerCase().trim();
    $('#certificateTable tbody tr').each(function(){
      let hay = (($(this).data('search') || '') + '').toLowerCase();
      $(this).toggle(hay.indexOf(q) !== -1);
    });
  });
})(jQuery);
</script>
@endpush