{{-- filepath: c:\xampp\htdocs\sites\KoBone\resources\views\dashboard.blade.php --}}
@extends('layouts.app', ['showThemeToggle' => false])

@section('title', 'Dashboard')

@section('content')
<div class="py-12">
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
            <div class="p-6 text-gray-900 dark:text-gray-100">
                @if (session('success'))
                    <div class="mb-4 text-green-500">
                        {{ session('success') }}
                    </div>
                @endif

                <h3 class="text-lg font-bold mb-4">All Submissions:</h3>
                @if ($formData->count() > 0)
                    <table class="table-auto w-full text-left border-collapse border border-gray-500">
                        <thead class="bg-blue-500 text-white">
                            <tr>
                                <th class="border border-gray-500 px-4 py-2">Name</th>
                                <th class="border border-gray-500 px-4 py-2">Visa Type</th>
                                <th class="border border-gray-500 px-4 py-2">Nearest Station</th>
                                <th class="border border-gray-500 px-4 py-2">City</th>
                                <th class="border border-gray-500 px-4 py-2">Phone</th>
                                <th class="border border-gray-500 px-4 py-2">Facebook</th>
                                <th class="border border-gray-500 px-4 py-2">School Time</th>
                                <th class="border border-gray-500 px-4 py-2">Region</th>
                                <th class="border border-gray-500 px-4 py-2">Status</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-300">
                            @foreach ($formData as $data)
                                <tr class="hover:bg-gray-400">
                                    <td class="border border-gray-500 px-4 py-2">{{ $data->name }}</td>
                                    <td class="border border-gray-500 px-4 py-2">{{ $data->visa_type }}</td>
                                    <td class="border border-gray-500 px-4 py-2">{{ $data->nearest_station }}</td>
                                    <td class="border border-gray-500 px-4 py-2">{{ $data->city }}</td>
                                    <td class="border border-gray-500 px-4 py-2">{{ $data->phone }}</td>
                                    <td class="border border-gray-500 px-4 py-2">
                                        <a href="{{ $data->facebook }}" target="_blank" class="text-blue-500 hover:bg-blue-500 hover:text-white">Profile</a>
                                    </td>
                                    <td class="border border-gray-500 px-4 py-2">{{ $data->school_time ?? 'N/A' }}</td>
                                    <td class="border border-gray-500 px-4 py-2">{{ $data->region }}</td>
                                    <td class="border border-gray-500 px-4 py-2">
                                        <form method="POST" action="{{ route('form.toggle', $data->id) }}">
                                            @csrf
                                            @method('PATCH')
                                            <label class="inline-flex items-center">
                                                <input type="checkbox" name="done" onchange="this.form.submit()" {{ $data->done ? 'checked' : '' }}>
                                                <span class="ml-2">{{ $data->done ? 'Done' : 'Undone' }}</span>
                                            </label>
                                        </form>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                    <div class="mt-4">
                        {{ $formData->links() }} <!-- Pagination Links -->
                    </div>
                @else
                    <p>No details submitted yet. <a href="{{ route('form') }}" class="text-blue-500">Submit your details here.</a></p>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection