@extends('layouts.admin')

@section('title', 'Operators')
@section('page-title', 'Operators')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h5 class="fw-bold mb-1">Operator Management</h5>
        <p class="text-muted small mb-0">Create and manage operator accounts</p>
    </div>
    <a href="{{ route('admin.operators.create') }}" class="btn px-4 py-2" style="background:linear-gradient(135deg, #780045, #F54927); color:#fff; font-weight:600; border-radius:12px;">
        <i class="bi bi-person-plus me-2"></i>Add Operator
    </a>
</div>

@if(session('success'))
    <div class="alert border-0 alert-dismissible fade show mb-4" role="alert"
         style="background:rgba(16,185,129,.08); color:#059669; border-radius:12px;">
        <i class="bi bi-check-circle-fill me-2"></i>{{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" style="font-size:.7rem;"></button>
    </div>
@endif

<div class="premium-card overflow-hidden">
    <div class="table-responsive">
        <table class="table align-middle mb-0" style="font-size:.9rem;">
            <thead>
                <tr style="background:#f8f9fb;">
                    <th class="text-muted fw-semibold ps-4" style="font-size:.75rem; text-transform:uppercase; letter-spacing:.5px;">#</th>
                    <th class="text-muted fw-semibold" style="font-size:.75rem; text-transform:uppercase; letter-spacing:.5px;">Name</th>
                    <th class="text-muted fw-semibold" style="font-size:.75rem; text-transform:uppercase; letter-spacing:.5px;">Email</th>
                    <th class="text-muted fw-semibold" style="font-size:.75rem; text-transform:uppercase; letter-spacing:.5px;">Phone</th>
                    <th class="text-muted fw-semibold" style="font-size:.75rem; text-transform:uppercase; letter-spacing:.5px;">Created</th>
                    <th class="text-muted fw-semibold text-center" style="font-size:.75rem; text-transform:uppercase; letter-spacing:.5px; width:140px;">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($operators as $operator)
                    <tr style="border-bottom:1px solid #f0f2f5;">
                        <td class="text-muted ps-4">{{ $operator->id }}</td>
                        <td>
                            <div class="d-flex align-items-center gap-3">
                                <div class="rounded-3 d-flex align-items-center justify-content-center" style="width:36px; height:36px; background:linear-gradient(135deg, #667eea, #764ba2); color:#fff; font-weight:700; font-size:.8rem; flex-shrink:0;">
                                    {{ strtoupper(substr($operator->name, 0, 1)) }}
                                </div>
                                <span class="fw-semibold">{{ $operator->name }}</span>
                            </div>
                        </td>
                        <td>{{ $operator->email }}</td>
                        <td>{{ $operator->phone ?? '—' }}</td>
                        <td>{{ $operator->created_at->format('d M Y') }}</td>
                        <td class="text-center">
                            <a href="{{ route('admin.operators.edit', $operator) }}"
                               class="btn btn-sm px-2 py-1 me-1" style="background:#fef3cd; color:#92400e; border-radius:8px;" title="Edit">
                                <i class="bi bi-pencil-square"></i>
                            </a>
                            <form action="{{ route('admin.operators.destroy', $operator) }}"
                                  method="POST" class="d-inline"
                                  onsubmit="return confirm('Are you sure you want to delete this operator?')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-sm px-2 py-1" style="background:#fee2e2; color:#dc2626; border-radius:8px;" title="Delete">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="text-center text-muted py-5">
                            <i class="bi bi-inbox fs-2 d-block mb-2" style="opacity:.3;"></i>
                            No operators found. Click "Add Operator" to create one.
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($operators->hasPages())
        <div class="p-3 d-flex justify-content-center border-top">
            {{ $operators->links() }}
        </div>
    @endif
</div>
@endsection
