@extends('admin.layouts.app')

@php
  $pageTitle = $pageTitle ?? 'Management Members';
@endphp

@section('panel')

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

<div id="memberSearchWrap" class="mb-3">
  <div class="input-group">
    <input type="text" id="memberSearch" class="form-control" placeholder="Search members...">
    <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">

        @if(empty($items) || count($items) === 0)
          <div class="text-center text-muted py-5">
            <i class="las la-users f-size--48 d-block mb-2"></i>
            <h6 class="fw-bold mb-1">No members found</h6>
            <p class="small mb-3">Click “Add New” to create your first management member.</p>
            <a href="{{ route('admin.management.create') }}" class="btn btn--primary btn-sm">
              <i class="las la-plus me-1"></i> Add New
            </a>
          </div>
        @else
          <div class="table-responsive--sm table-responsive">
            <table class="table table--light style--two mb-0" id="memberTable">
              <thead>
                <tr>
                  <th style="width:70px;">#</th>
                  <th style="width:90px;">Photo</th>
                  <th>Name</th>
                  <th>Role</th>
                  <th style="width:90px;">Sort</th>
                  <th style="width:110px;">Status</th>
                  <th style="width:170px;">Action</th>
                </tr>
              </thead>

              <tbody>
                @foreach($items as $i => $m)
                  @php
                    $photo = $m->photo_path
                      ? (filter_var($m->photo_path, FILTER_VALIDATE_URL) ? $m->photo_path : asset($m->photo_path))
                      : null;

                    $searchKey = strtolower(
                      ($m->name ?? '') . ' ' .
                      ($m->role ?? '') . ' ' .
                      ($m->sort_order ?? '')
                    );
                  @endphp

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

                    <td data-label="Photo">
                      @if($photo)
                        <img src="{{ $photo }}"
                             class="rounded"
                             style="width:52px;height:52px;object-fit:cover;border-radius:12px;">
                      @else
                        <span class="d-inline-flex align-items-center justify-content-center"
                              style="width:52px;height:52px;border-radius:12px;background:#f7f8fa;border:1px solid #e5e7eb;">
                          <i class="las la-user text-muted"></i>
                        </span>
                      @endif
                    </td>

                    <td data-label="Name">
                      <span class="fw-bold">{{ $m->name }}</span>
                    </td>

                    <td data-label="Role">
                      <span class="text-muted">{{ $m->role }}</span>
                    </td>

                    <td data-label="Sort">
                      {{ (int) $m->sort_order }}
                    </td>

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

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

                        <form method="POST"
                              action="{{ route('admin.management.destroy',$m->id) }}"
                              class="d-inline">
                          @csrf
                          @method('DELETE')
                          <button type="submit"
                                  class="btn btn-sm btn-outline--danger ms-1 mb-2"
                                  onclick="return confirm('Delete this member?')">
                            <i class="la la-trash"></i> Delete
                          </button>
                        </form>
                      </div>
                    </td>
                  </tr>
                @endforeach
              </tbody>

            </table>
          </div>
        @endif

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

@endsection

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

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

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

  $(document).on('input', '#memberSearch', function(){
    let q = ($(this).val() || '').toLowerCase().trim();
    $('#memberTable tbody tr').each(function(){
      let hay = ($(this).data('search') || '').toString();
      $(this).toggle(hay.indexOf(q) !== -1);
    });
  });

})(jQuery);
</script>
@endpush