@extends('layouts.app')

@section('title', 'Connections')

@section('content')
    <div class="max-w-5xl mx-auto py-10">
        <h1 class="text-2xl font-bold mb-6">TeamViewer Connections</h1>

        <p class="mb-4">Total Connections: {{ count($records) }}</p>
        <p class="mb-6">Total Duration:
            {{ floor($totalDurationCarbon->totalHours) }}h
            {{ $totalDurationCarbon->minutes }}m
            {{ $totalDurationCarbon->seconds }}s
        </p>

        <div class="flex items-center gap-4 mb-6">
            <a href="{{ route('teamviewer.connections.csv', request()->query()) }}"
                class="inline-block bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700">
                Export CSV
            </a>

            <form action="{{ route('teamviewer.connections.upload', request()->query()) }}" method="POST">
                @csrf
                <button type="submit" class="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700">
                    Upload to cPanel
                </button>
            </form>
        </div>

        {{-- 検索フォーム --}}
        <form method="GET" action="{{ route('teamviewer.connections') }}" class="mb-6">
            <div class="flex flex-wrap items-center gap-4">
                <div>
                    <label for="from_date" class="text-sm">From Date:</label>
                    <input type="date" name="from_date" id="from_date" value="{{ request('from_date', $fromDate) }}"
                        class="border rounded px-2 py-1">
                </div>

                <div>
                    <label for="to_date" class="text-sm">To Date:</label>
                    <input type="date" name="to_date" id="to_date" value="{{ request('to_date', $toDate) }}"
                        class="border rounded px-2 py-1">
                </div>

                <button type="submit" class="bg-blue-500 text-white px-4 py-1 rounded">
                    Search
                </button>
            </div>
        </form>

        {{-- 並び替え用ヘルパ --}}
        @php
            function sortIcon($field, $currentSort, $direction)
            {
                if ($field !== $currentSort) {
                    return '';
                }
                return $direction === 'asc' ? '↑' : '↓';
            }

            function sortUrl($field)
            {
                $dir = request('sort_by') === $field && request('direction') === 'asc' ? 'desc' : 'asc';
                return request()->fullUrlWithQuery(['sort_by' => $field, 'direction' => $dir]);
            }
        @endphp

        <table class="min-w-full divide-y divide-gray-200 shadow-sm border rounded-lg text-sm">
            <thead class="bg-gray-100">
                <tr>
                    <th class="px-4 py-2 text-left font-medium text-gray-700">
                        <a href="{{ sortUrl('devicename') }}">
                            Computer Name {{ sortIcon('devicename', $sortBy, $direction) }}
                        </a>
                    </th>
                    <th class="px-4 py-2 text-left font-medium text-gray-700">
                        <a href="{{ sortUrl('deviceid') }}">
                            ID {{ sortIcon('deviceid', $sortBy, $direction) }}
                        </a>
                    </th>
                    <th class="px-4 py-2 text-left font-medium text-gray-700">
                        <a href="{{ sortUrl('start_date') }}">
                            Start Date {{ sortIcon('start_date', $sortBy, $direction) }}
                        </a>
                    </th>
                    <th class="px-4 py-2 text-left font-medium text-gray-700">
                        <a href="{{ sortUrl('duration_minutes') }}">
                            Duration {{ sortIcon('duration_minutes', $sortBy, $direction) }}
                        </a>
                    </th>
                    <th class="px-4 py-2 text-left font-medium text-gray-700">
                        <a href="{{ sortUrl('groupname') }}">
                            Group Name {{ sortIcon('groupname', $sortBy, $direction) }}
                        </a>
                    </th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-100">
                @foreach ($records as $i => $record)
                    <tr @if ($i % 2 == 0) style="background-color: #e6e5e5;" @endif>
                        <td class="px-4 py-2 text-gray-800">{{ $record['devicename'] ?? 'Unknown' }}</td>
                        <td class="px-4 py-2 text-gray-800">{{ $record['deviceid'] ?? 'Unknown' }}</td>
                        <td class="px-4 py-2 text-gray-800">
                            {{ isset($record['start_date']) ? \Carbon\Carbon::parse($record['start_date'])->setTimezone('Australia/Sydney')->format('M j, Y g:i A') : '-' }}
                        </td>
                        <td class="px-4 py-2 text-gray-800">
                            {{ isset($record['duration_minutes']) ? floor($record['duration_minutes']) . ' min' : '-' }}
                        </td>
                        <td class="px-4 py-2 text-gray-800">{{ $record['groupname'] ?? 'Unknown' }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
@endsection