@extends('layouts.app')

@section('content')
<style>
    body { background-color: #f4fdf6; }
    .trainer-table-container { 
        background-color: #fff; 
        border-radius: 15px; 
        box-shadow: 0 6px 20px rgba(46, 125, 50, 0.1); 
        padding: 30px; 
        margin-top: 30px; 
        transition: all 0.3s ease-in-out; 
    }
    h3 { color: #2e7d32; font-weight: 700; letter-spacing: 0.5px; }
    .form-control, .form-select { 
        border-radius: 8px; 
        border: 1px solid #c8e6c9; 
        box-shadow: none; 
        transition: 0.3s; 
    }
    .form-control:focus, .form-select:focus { 
        border-color: #2e7d32; 
        box-shadow: 0 0 8px rgba(46, 125, 50, 0.2); 
        outline: none; 
    }
    .btn-success { background-color: #2e7d32; border-color: #2e7d32; transition: all 0.3s; }
    .btn-success:hover { background-color: #256a28; border-color: #256a28; }
    .btn-primary { background-color: #43a047; border-color: #43a047; }
    .btn-primary:hover { background-color: #388e3c; border-color: #388e3c; }
    .btn-secondary { background-color: #9e9e9e; border-color: #9e9e9e; }
    .btn-secondary:hover { background-color: #757575; border-color: #757575; }
    .btn-view { background-color: #66bb6a; border-color: #66bb6a; }
    .btn-view:hover { background-color: #4caf50; border-color: #4caf50; }
    .table thead { background-color: #e8f5e9; color: #2e7d32; }
    .table tr:hover { background-color: #f1f8f2; }
    .alert-success { background-color: #d0f0c0; color: #2e7d32; border: none; border-radius: 8px; }
    .search-input { max-width: 300px; }
</style>

<div class="container trainer-table-container">
    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap">
        <h3>Deputy Lead Trainers</h3>
        <a href="{{ route('admin.deputy-lead-trainers.create') }}" class="btn btn-success mb-2">Add New</a>
    </div>

    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    <!-- Search Filter -->
    <div class="mb-3">
        <input type="text" id="searchInput" class="form-control search-input" placeholder="Search by name, email, or center...">
    </div>

    <div class="table-responsive">
        <table class="table table-striped table-hover" id="trainersTable">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Phone</th>
                    <th>Center</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($users as $user)
                    <tr>
                        <td>{{ $user->id }}</td>
                        <td>{{ $user->name }}</td>
                        <td>{{ $user->email }}</td>
                        <td>{{ $user->phone }}</td>
                        <td>{{ $user->center?->name ?? '-' }}</td>
                        <td class="d-flex flex-wrap gap-1">
                            <a href="{{ route('admin.deputy-lead-trainers.show', $user->id) }}" class="btn btn-view btn-sm">View</a>
                            <a href="{{ route('admin.deputy-lead-trainers.edit', $user->id) }}" class="btn btn-primary btn-sm">Edit</a>
                            <form action="{{ route('admin.deputy-lead-trainers.destroy', $user->id) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this trainer?');">
                                @csrf
                                @method('DELETE')
                                <button class="btn btn-secondary btn-sm">Delete</button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="text-center">No Deputy Lead Trainers found.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    <div class="mt-3">
        {{ $users->links() }}
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const searchInput = document.getElementById('searchInput');
    const table = document.getElementById('trainersTable');
    const rows = Array.from(table.getElementsByTagName('tbody')[0].getElementsByTagName('tr'));

    searchInput.addEventListener('input', () => {
        const query = searchInput.value.toLowerCase();
        rows.forEach(row => {
            const text = row.textContent.toLowerCase();
            row.style.display = text.includes(query) ? '' : 'none';
        });
    });
});
</script>
@endsection