@extends('master')
@section('content')
    <main class="p-6 flex-1 overflow-hidden">
        <header>
            <h2 class="text-xl font-bold text-gray-900">
                {{ __('Complaints') }}
            </h2>
            <p class="mt-1 text-md text-gray-600">
                {{ __('File a complaint here to report an issue.') }}
            </p>
        </header>

        <section class="mt-2 bg-white shadow sm:rounded-lg p-4 mb-6 text-xs">
            <h2 class="text-lg font-semibold mb-4">File a Complaint</h2>
            <form action="{{ route('complains.store') }}" method="POST">
                @csrf
                <div class="mb-4">
                    <label for="complain" class="block text-sm font-medium text-gray-700">Complain:</label>
                    <textarea id="complain" name="complain" rows="4" class="mt-1 p-2 text-sm border border-gray-300 rounded-md w-full"
                        required></textarea>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                    <div class="mb-2 md:col-span-2">
                        <label for="complainant" class="block text-sm font-medium text-gray-700">Complainant Name:</label>
                        <input type="text" id="complainant" name="complainant"
                            class="mt-1 p-2 text-sm border border-gray-300 rounded-md w-full" required />
                    </div>
                    <div class="mb-2">
                        <label for="complainant_contact" class="block text-sm font-medium text-gray-700">Complainant
                            Contact:</label>
                        <input type="text" id="complainant_contact" name="complainant_contact"
                            class="mt-1 p-2 text-sm border border-gray-300 rounded-md w-full" />
                    </div>
                    <div class="mb-2">
                        <label for="complainant_landline" class="block text-sm font-medium text-gray-700">Complainant
                            Landline:</label>
                        <input type="text" id="complainant_landline" name="complainant_landline"
                            class="mt-1 p-2 text-sm border border-gray-300 rounded-md w-full" />
                    </div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                    <div class="mb-2 md:col-span-2">
                        <label for="violator" class="block text-sm font-medium text-gray-700">Violator Name:</label>
                        <input type="text" id="violator" name="violator"
                            class="mt-1 p-2 text-sm border border-gray-300 rounded-md w-full" required />
                    </div>
                    <div class="mb-2">
                        <label for="violator_contact" class="block text-sm font-medium text-gray-700">Violator
                            Contact:</label>
                        <input type="text" id="violator_contact" name="violator_contact"
                            class="mt-1 p-2 text-sm border border-gray-300 rounded-md w-full" />
                    </div>
                    <div class="mb-2">
                        <label for="violator_landline"
                        class="block text-sm font-medium text-gray-700">Violator Landline:</label>
                        <input type="text" id="violator_landline" name="violator_landline"
                            class="mt-1 p-2 text-sm border border-gray-300 rounded-md w-full" />
                    </div>
                </div>

                <div class="flex justify-center mt-4">
                    <button type="submit"
                        class="bg-main-dark text-main-light active:bg-main-dark active:text-main-light px-6 py-3 rounded-md shadow-lg cursor-pointer">Submit</button>
                </div>
            </form>
        </section>

        <section class="mt-2 bg-white shadow sm:rounded-lg p-4 mb-6 text-xs">
            <h2 class="text-lg font-semibold mb-4">Complaints filed history</h2>
            <div class="overflow-x-auto rounded-lg">
                <table class=" min-w-full rounded bg-main-light">
                    <thead class="bg-main-dark text-main-light text-sm">
                        <tr>
                            <th class="py-2 px-4 text-left whitespace-nowrap">
                                Id
                            </th>
                            <th class="py-2 px-4 text-left whitespace-nowrap">
                                Complainant
                            </th>
                            <th class="py-2 px-4 text-left whitespace-nowrap">
                                Violator
                            </th>
                            <th class="py-2 px-4 text-left whitespace-nowrap">
                                Status
                            </th>
                            <th class="py-2 px-4 text-left whitespace-nowrap">
                                Filed Date
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($complaints as $complain)
                            <tr>
                                <td class="border p-1 px-3 w-10">{{ $complain->id }}</td>
                                <td class="border p-1 px-3">{{ $complain->complainant }}</td>
                                <td class="border p-1 px-3">{{ $complain->violator }}</td>
                                <td class="border p-1 px-3">
                                    @if($complain->is_rejected)
                                        <p class="text-red-600 font-bold">Rejected</p>
                                    @elseif($complain->is_resolved)
                                        <p class="text-green-600 font-bold">Resolved</p>
                                    @elseif($complain->is_accepted)
                                        <p class="text-green-600 font-bold">Accepted</p>
                                    @else
                                        <p class="text-yellow-600 font-bold">Pending</p>
                                    @endif
                                </td>
                                <td class="border p-1 px-3">{{ $complain->created_at->diffForHumans() . ' | ' . $complain->created_at->format('M. d, Y') }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td class="border p-2" colspan="5">No items found.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <div class="mt-4">
                {{ $complaints->links('pagination::tailwind') }}
            </div>
        </section>

    </main>
@endsection