@extends('layouts.app')

@section('content')
<div class="container mt-5">
    <div class="card shadow-sm border-0">
        <div class="card-header bg-success text-white d-flex justify-content-between align-items-center">
            <h4 class="mb-0">🖥️ ICT Agents</h4>
            <a href="{{ route('ict_agents.create') }}" class="btn btn-light btn-sm fw-bold">
                + Add New ICT Agent
            </a>
        </div>

        <div class="card-body">
            {{-- Success Message --}}
            @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            {{-- Search Bar --}}
            <form method="GET" action="{{ route('ict_agents.index') }}" class="mb-4">
                <div class="input-group">
                    <input type="text" name="search" value="{{ request('search') }}"
                           class="form-control border-success"
                           placeholder="Search by name, email, or phone...">
                    <button class="btn btn-success fw-bold" type="submit">Search</button>
                </div>
            </form>

            @if($ictAgents->isEmpty())
                <p class="text-muted text-center">No ICT Agents found.</p>
            @else
                <div class="table-responsive">
                    <table class="table table-bordered align-middle table-striped">
                        <thead class="table-success text-center">
                            <tr>
                                <th>#</th>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Center</th>
                                <th>Phone</th>
                                <th>Created At</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($ictAgents as $agent)
                                <tr>
                                    <td class="text-center">{{ $loop->iteration }}</td>
                                    <td>{{ $agent->name }}</td>
                                    <td>{{ $agent->email ?? 'N/A' }}</td>
                                    <td>{{ $agent->center->name ?? '—' }}</td>
                                    <td>{{ $agent->phone ?? 'N/A' }}</td>
                                    <td class="text-center">{{ $agent->created_at ? $agent->created_at->format('Y-m-d') : '-' }}</td>

                                    {{-- Actions --}}
                                    <td class="text-center">

                                        {{-- Hide actions for admins --}}
                                        @if($agent->role !== 'admin')

                                            <a href="{{ route('ict_agents.edit', $agent->id) }}" 
                                               class="btn btn-warning btn-sm text-white">Edit</a>

                                            <form action="{{ route('ict_agents.destroy', $agent->id) }}" method="POST" class="d-inline">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-danger btn-sm"
                                                        onclick="return confirm('Are you sure you want to delete this ICT Agent?')">
                                                    Delete
                                                </button>
                                            </form>

                                        @else
                                            <span class="badge bg-secondary px-3 py-2">Admin</span>
                                        @endif

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

                {{-- Pagination --}}
                <div class="d-flex justify-content-center mt-3">
                    {{ $ictAgents->links() }}
                </div>
            @endif
        </div>
    </div>
</div>

{{-- Custom Styling --}}
<style>
    .card-header {
        background: linear-gradient(90deg, #198754, #157347);
    }

    .btn-warning {
        background-color: #ffc107;
        border: none;
    }
    .btn-warning:hover {
        background-color: #e0a800;
    }

    .btn-danger {
        background-color: #dc3545;
        border: none;
    }
    .btn-danger:hover {
        background-color: #bb2d3b;
    }

    svg.w-5.h-5 { display: none !important; }

    .pagination {
        margin-top: 15px;
        justify-content: center;
    }

    .pagination .page-link {
        color: #198754;
        border-radius: 6px;
        margin: 0 3px;
    }

    .pagination .page-item.active .page-link {
        background-color: #198754;
        border-color: #198754;
        color: #fff;
    }

    .pagination .page-link:hover {
        background-color: #157347;
        color: #fff;
    }
</style>
@endsection