@extends('admin.layout')

@section('title', 'Testimonials')
@section('page-title', 'Testimonials')
@section('page-subtitle', 'Manage client testimonials and reviews')

@section('header-actions')
<a href="{{ route('admin.testimonials.create') }}" class="primary" style="text-decoration:none">+ Add Testimonial</a>
@endsection

@section('content')
<div class="toolbar">
    <input class="search" id="search" placeholder="Search testimonials..." onkeyup="filterTable()">
</div>

<div class="tableWrap">
    <table id="dataTable">
        <thead>
            <tr>
                <th>Client Name</th>
                <th>Title</th>
                <th>Rating</th>
                <th>Status</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            @forelse($testimonials as $testimonial)
            <tr>
                <td><b>{{ $testimonial->client_name }}</b></td>
                <td>{{ $testimonial->client_title }}</td>
                <td>
                    @for($i = 1; $i <= 5; $i++)
                        @if($i <= $testimonial->rating)
                            ⭐
                        @else
                            ☆
                        @endif
                    @endfor
                </td>
                <td>
                    <span class="badge {{ $testimonial->is_active ? '' : 'draft' }}">
                        {{ $testimonial->is_active ? 'Active' : 'Inactive' }}
                    </span>
                </td>
                <td>
                    <a href="{{ route('admin.testimonials.edit', $testimonial->id) }}" style="text-decoration:none">
                        <button>Edit</button>
                    </a>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="5" class="empty">No testimonials found. Create your first testimonial!</td>
            </tr>
            @endforelse
        </tbody>
    </table>
</div>
@endsection

@push('scripts')
<script>
function filterTable() {
    const input = document.getElementById('search');
    const filter = input.value.toLowerCase();
    const table = document.getElementById('dataTable');
    const rows = table.getElementsByTagName('tr');
    
    for (let i = 1; i < rows.length; i++) {
        const title = rows[i].getElementsByTagName('td')[0];
        if (title) {
            const textValue = title.textContent || title.innerText;
            rows[i].style.display = textValue.toLowerCase().indexOf(filter) > -1 ? '' : 'none';
        }
    }
}
</script>
@endpush