@extends('admin.layouts.app')
@section('content')
    <div class="container-xl">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Staff</h3>
                <div class="card-actions">
                    <a href="{{ route('panel.staff.create') }}" class="btn btn-primary btn-3">
                        <!-- Download SVG icon from http://tabler.io/icons/icon/plus -->
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" class="icon icon-2">
                            <path d="M12 5l0 14"></path>
                            <path d="M5 12l14 0"></path>
                        </svg>
                        Add new
                    </a>
                </div>
            </div>
            <div class="card-body p-0">
               <div class="table-responsive">
                    <table class="table table-vcenter card-table">
                      <thead>
                        <tr>
                            <th>S.N</th>
                          <th>Name</th>
                           <th>Email</th>
                           <th>Municipality</th>
                           <th>Ward</th>
                          <th>Image</th>
                           <th>Status</th>
                          <th class="w-1"></th>
                        </tr>
                      </thead>
                      <tbody>
                         @foreach($datas as $keys=>$data)
                        <tr>
                          <td>{{ $keys+1 }}</td>
                          <td class="text-secondary">{{ $data->name }}</td>
                            <td class="text-secondary">{{ $data->email }}</td>
                              <td class="text-secondary">{{ $data->municipality->name }}</td>
                                <td class="text-secondary">{{ $data->ward->name }}</td>
                           <td class="text-secondary">
                            <img src="{{ asset($data->image )
                            }}" style="width:50px; height:50px;">
                          </td>

                          @if ($data->status == 'active')
                            <td class="text-secondary"><span class="badge bg-success-lt">{{  $data->status }}</span></td>
                            @else
                            <td class="text-secondary"><span class="badge bg-danger-lt">{{  $data->status }}</span></td>
                          @endif

                              <td>
                                <div class="btn-group" role="group">
                                    @if ($data->status == 'active')
                                    <a href="{{ route('panel.staff.inactive',$data->id) }}" class="btn btn-sm btn-danger">Inactive</a>
                                    @else
                                    <a href="{{ route('panel.staff.active',$data->id) }}" class="btn btn-sm btn-success ">Active</a>
                                    @endif
                                    <a href="{{ route('panel.staff.edit', $data->id) }}" class="btn btn-sm btn-primary ml-2">Edit</a>
                                     <a href="{{ route('panel.staff.destroy', $data->id) }}" class="btn btn-sm btn-danger ml-2" id="delete">Delete</a>

                                </div>
                            </td>
                        </tr>
                        @endforeach


                      </tbody>
                    </table>
                  </div>
                  <div class="card-footer">
                     {{ $datas->links() }}
                  </div>
            </div>
        </div>

    </div>
@endsection