@extends('admin.layouts.app')
@section('content')
    <div class="container-xl">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Staff Position</h3>
                <div class="card-actions">
                    <a href="{{ route('panel.staff-position.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>Municipality</th>
                                <th>Ward</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 nepali-input">{{ $data->name }}</td>
                                    <td class="text-secondary">{{ $data->municipality->name }}</td>
                                    <td class="text-secondary">{{ $data->ward->name }}</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-position.inactive', $data->id) }}"
                                                    class="btn btn-sm btn-danger">Inactive</a>
                                            @else
                                                <a href="{{ route('panel.staff-position.active', $data->id) }}"
                                                    class="btn btn-sm btn-success">Active</a>
                                            @endif
                                            <a href="{{ route('panel.staff-position.edit', $data) }}"
                                                class="btn btn-sm btn-primary ml-2">Edit</a>
                                            <a href="{{ route('panel.staff-position.destroy', $data) }}"
                                                class="btn btn-sm btn-danger ml-2 delete-btn">Delete</a>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach


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

    </div>
@endsection