@extends('layouts.panel')

@push('css')
@endpush

@section('breadcrumb')
<x-admin.breadcrumb />
@endsection

@section('content')
    <x-admin.panel-card>
        @slot('tools')
            <a href="{{ route('operator.create') }}" class="btn btn-primary d-inline-flex align-items-center gap-1">
                <svg viewbox="0 0 20 20" fill="currentColor" aria-hidden="true">
                    <path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" />
                </svg>
                @lang('Add Operator')
            </a>
        @endslot
        @slot('actions')
            <form>
                <input type="text" class="form-control" placeholder="@lang('Search Operator')">
            </form>
        @endslot

        <div class="table-responsive my-1">
            <table class="table align-middle">
                <thead>
                    <tr>
                        <th scope="col" nowrap>@lang('Name')</th>
                        {{-- <th scope="col" nowrap>@lang('Operator ID')</th> --}}
                        <th scope="col" nowrap>@lang('Email')</th>
                        <th scope="col" nowrap>@lang('Actions')</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($operators as $operator)
                    <tr>
                        <td>
                            <div class="d-flex align-items-center gap-3">
                                <img src="{{ $operator->image_url }}" alt width="42" height="42" class="rounded-circle border" loading="lazy">
                                <div class="d-flex flex-column">
                                    <h6>{{ $operator->full_name }}</h6>
                                </div>
                            </div>
                        </td>
                        <td>{{ $operator->email }}</td>
                        <td>
                            <div class="btn-group btn-group-sm" role="group">
                                @can('update-operator')
                                <a href="{{ route('operator.edit', $operator->id) }}" class="btn btn-light d-flex" title="@lang('Edit')">
                                    <svg width="17" height="17" fill="none" viewbox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
                                    </svg>
                                </a>
                                @endcan
                                @can('remove-operator')
                                <button type="submit" class="btn btn-light d-flex text-danger" form="deletefrm{{ $operator->id }}" onclick="return confirm('@lang('Are you sure?')')" title="@lang('Delete')">
                                    <svg width="17" height="17" fill="none" viewbox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                    </svg>
                                </button>
                                <form action="{{ route('operator.destroy', $operator->id) }}" method="POST" id="deletefrm{{ $operator->id }}">@csrf @method("DELETE")</form>
                                @endcan
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
            <x-admin.pagination :paginator="$operators" />
        </div>
    </x-admin.panel-card>
@endsection

@push('js')
@endpush