@extends('admin.layout')

@section('title', 'Portfolio')
@section('page-title', 'Portfolio')
@section('page-subtitle', 'Manage portfolio items displayed on your website')

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

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

<div class="tableWrap">
    <table id="dataTable">
        <thead>
            <tr>
                <th>Title</th>
                <th>Category</th>
                <th>Status</th>
                <th>Order</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            @forelse($portfolios as $portfolio)
            <tr>
                <td><b>{{ $portfolio->title }}</b></td>
                <td>{{ $portfolio->category }}</td>
                <td>
                    <span class="badge {{ $portfolio->is_active ? '' : 'draft' }}">
                        {{ $portfolio->is_active ? 'Active' : 'Inactive' }}
                    </span>
                </td>
                <td>{{ $portfolio->order }}</td>
                <td>
                    <a href="{{ route('admin.portfolio.edit', $portfolio->id) }}" style="text-decoration:none">
                        <button>Edit</button>
                    </a>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="5" class="empty">No portfolio items found. Create your first item!</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