@extends('layouts.main')
@section('main-container')

<div class="page-header d-print-none">
	<div class="container-xl">
		<div class="row g-2 align-items-center">
            <div class="col">
                <div class="page-pretitle">WHS</div>
                <h3 class="page-title">Project List</h3>
            </div>

            <div class="col-auto ms-auto d-print-none">
                <div class="btn-list">
                    <span class="d-none d-sm-inline">
                        <a href="#" class="btn btn-1">PDF Download</a>
                    </span>
                    <a href="#" class="btn btn-primary btn-5 d-none d-sm-inline-block">
                        Project Report
                    </a>
                </div>
            </div>
        </div>
	</div>
</div>


<!-- Page body -->
<div class="page-body">
	<div class="container-xl">
        <div class="row row-cards">
            <div class="col-12">

                <div class="card shadow-lg">
                    <div class="card-header bg-primary text-white">
                        <h4 class="card-title mb-0">Project Report</h4>
                    </div>

                    <!-- Search -->
                    <div class="card-body pb-0">
                        <input type="text" id="searchProject" class="form-control"
                               placeholder="Search Project Name, Type or Status...">
                    </div>

                    <div class="card-body table-responsive">
                        <table class="table table-bordered table-striped table-hover text-center align-middle" id="projectTable">
                            <thead class="table-primary">
                                <tr>
                                    <th>Name</th>
                                    <th>Type</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody id="projectTbody">
                                @foreach ($projects as $project)
                                    <tr>
                                        <td>{{ $project->name }}</td>
                                        <td>{{ $project->type }}</td>
                                        <td>{{ $project->status }}</td>
                                        <td>
                                            <a href="{{ route('project.show', $project->id) }}" class="btn btn-sm btn-info">View</a>
                                            <a href="{{ route('project.edit', $project->id) }}" class="btn btn-sm btn-warning">Edit</a>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                </div>

            </div>
        </div>
	</div>
</div>


<!-- Live Search Script -->
<script>
document.addEventListener('DOMContentLoaded', function () {
    const input = document.getElementById('searchProject');
    const tbody = document.getElementById('projectTbody');

    input.addEventListener('input', function () {
        let q = this.value.toLowerCase().trim();

        tbody.querySelectorAll('tr').forEach(row => {
            let name = (row.children[0].textContent || '').toLowerCase();
            let type = (row.children[1].textContent || '').toLowerCase();
            let status = (row.children[2].textContent || '').toLowerCase();

            let match = name.includes(q) || type.includes(q) || status.includes(q);
            row.style.display = match ? '' : 'none';
        });
    });
});
</script>

@endsection