@extends('user::layouts/panel')

{{-- Style --}}
@push('module-links')
<link rel="stylesheet" href="{{ Module::asset('setting:css/setting.css') }}">
@endpush

{{-- Content --}}
@section('module-content')
<div class="d-flex flex-column flex-md-row align-items-start align-items-md-center justify-content-between gap-3 mb-4">
  <div class="d-flex flex-wrap gap-2">
    <button type="button" class="btn btn-primary" id="update_order">
      <i class="fas fa-save me-2"></i>儲存設定
    </button>
    <button type="button" class="btn btn-outline-primary" id="showAllUsers">
      <i class="fas fa-eye me-2"></i>全部顯示
    </button>
    <button type="button" class="btn btn-outline-secondary" id="hideAllUsers">
      <i class="fas fa-eye-slash me-2"></i>全部隱藏
    </button>
  </div>
</div>
<form method="post" id="order">
  <div class="user-list-body">
    <div class="card">
      <div class="card-body p-0">
        <div class="table-responsive">
          <table class="table table-hover mb-0">
            <thead class="table-light">
              <tr class="text-center">
                <th class="col-1 py-3"></th>
                <th class="col-2 py-3">順序</th>
                <th class="col-4 py-3">使用者</th>
                <th class="col-5 py-3">是否顯示</th>
              </tr>
            </thead>
            <tbody id="sortable">
              @foreach($users as $key => $user)
              <tr class="user_tr text-center" id="{{$user->id}}" data-stat="{{$user->status}}">
                <td class="sort py-3">
                  <i class="fas fa-grip-vertical text-secondary cursor-move"></i>
                </td>
                <td data-th="順序" class="order_td py-3">
                  <span class="badge bg-secondary">{{$key+1}}</span>
                  <input type="hidden" name="order[]" value="{{$user->id}}">
                </td>
                <td data-th="使用者" class="py-3">
                  <span class="fw-medium">{{$user->name}}</span>
                </td>
                <td data-th="是否顯示" class="py-3">
                  <div class="d-flex justify-content-center">
                    <div class="form-check form-check-inline">
                      <input class="form-check-input" type="radio" id="visibleY{{$user->id}}" name="visible[{{$user->id}}]" value="是" {{ $user->visible=='是' ? 'checked' : '' }}>
                      <label class="form-check-label" for="visibleY{{$user->id}}">是</label>
                    </div>
                    <div class="form-check form-check-inline">
                      <input class="form-check-input" type="radio" id="visibleN{{$user->id}}" name="visible[{{$user->id}}]" value="否" {{ $user->visible=='否' ? 'checked' : '' }}>
                      <label class="form-check-label" for="visibleN{{$user->id}}">否</label>
                    </div>
                  </div>
                </td>
              </tr>
              @endforeach
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  <input type="hidden" name="action" value="user_order">
</form>
@endsection

{{-- META --}}
@push('meta')
<meta name="setting-update-url" content="{{ route('panel.setting.users.update') }}">
@endpush

{{-- JS --}}
@push('module-scripts')
@vite('resources/js/sortable.js')
<script src="{{ Module::asset('setting:js/users.js') }}"></script>
@endpush