@extends('components.customer_layout')

@section('customer-content')
    <div class="container mt-5">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2 class="text-primary">
                <i class="bi bi-megaphone-fill"></i> Complaints
            </h2>
            {{-- <a href="{{ route('complaint.create') }}" class="btn btn-success shadow-sm">
                <i class="bi bi-plus-circle me-1"></i> New Complaint
            </a> --}}
        </div>

        <!-- 🔍 Search Input -->
        <div class="mb-3">
            <input type="text" id="searchInput" class="form-control" placeholder="Search by application number, customer, office, or service...">
        </div>

        <!-- 🗂️ Complaints Table -->
        <div class="table-responsive shadow-sm rounded bg-white p-3">
            <table class="table table-hover table-bordered align-middle" id="complaintsTable">
                <thead class="table-primary">
                <tr>
                    <th>#</th>
                    <th>Application No</th>
                    <th>Customer</th>
                    <th>Office</th>
                    <th>Service</th>
                    <th class="text-center">Actions</th>
                </tr>
                </thead>
                <tbody>
                @forelse ($complains as $complaint)
                    <tr>
                        <td>{{ $loop->iteration }}</td>
                        <td><span class="badge bg-info text-dark">{{ $complaint->application_number }}</span></td>
                        <td>{{ $complaint->customer->full_name }}</td>
                        <td>{{ $complaint->office->name }}</td>
                        <td>{{ $complaint->service->name }}</td>
                        <td class="text-center">
                            <a href="{{ route('complaint.show', $complaint->id) }}" class="btn btn-outline-primary btn-sm me-1" title="View">
                                <i class="bi bi-eye-fill"></i>
                            </a>
                            <a href="{{ route('complaint.edit', $complaint->id) }}" class="btn btn-outline-warning btn-sm me-1" title="Edit">
                                <i class="bi bi-pencil-square"></i>
                            </a>
                            <form action="{{ route('complaint.destroy', $complaint->id) }}" method="POST" class="d-inline">
                                @csrf
                                <button type="submit" class="btn btn-outline-danger btn-sm" onclick="return confirm('Are you sure?')" title="Delete">
                                    <i class="bi bi-trash-fill"></i>
                                </button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="text-center text-muted">No complaints found.</td>
                    </tr>
                @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- 🔎 Live Search Script -->
    <script>
        document.getElementById('searchInput').addEventListener('keyup', function () {
            let filter = this.value.toLowerCase();
            let rows = document.querySelectorAll("#complaintsTable tbody tr");

            rows.forEach(row => {
                let text = row.innerText.toLowerCase();
                row.style.display = text.includes(filter) ? '' : 'none';
            });
        });
    </script>
@endsection