@extends('layouts.app')

@section('title', 'QR Codes Management')

@section('content')
<div class="min-h-screen bg-gray-50 p-4 lg:p-6">
    <div class="max-w-7xl mx-auto">
        @if(session('success'))
            <div class="mb-6 bg-green-50 border border-green-200 rounded-md p-4">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <i class="fas fa-check-circle text-green-400"></i>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm text-green-800">{{ session('success') }}</p>
                    </div>
                </div>
            </div>
        @endif

        @if(session('error'))
            <div class="mb-6 bg-red-50 border border-red-200 rounded-md p-4">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <i class="fas fa-exclamation-circle text-red-400"></i>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm text-red-800">{{ session('error') }}</p>
                    </div>
                </div>
            </div>
        @endif

        <div class="bg-white rounded-lg shadow-sm border border-gray-200">
            <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
                <h5 class="text-lg font-semibold text-gray-900 m-0">
                    <i class="fas fa-qrcode mr-2"></i>
                    QR Codes Management
                </h5>
                <a href="{{ route('patrols.qr-codes.create') }}" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors">
                    <i class="fas fa-plus mr-2"></i>Generate QR Code
                </a>
            </div>
            <div class="p-6">
                @if($qrCodes->isEmpty())
                    <div class="text-center py-12">
                        <i class="fas fa-qrcode text-gray-400 text-4xl mb-4"></i>
                        <p class="text-gray-500 text-lg">No QR codes found</p>
                        <p class="text-gray-400 text-sm mt-2">Start by creating a new QR code for your checkpoints</p>
                    </div>
                @else
                    <div class="overflow-x-auto">
                        <table class="w-full">
                            <thead>
                                <tr class="border-b border-gray-200">
                                    <th class="px-6 py-3 text-left text-sm font-semibold text-gray-900">QR Code</th>
                                    <th class="px-6 py-3 text-left text-sm font-semibold text-gray-900">Checkpoint</th>
                                    <th class="px-6 py-3 text-left text-sm font-semibold text-gray-900">Sites</th>
                                    <th class="px-6 py-3 text-left text-sm font-semibold text-gray-900">Status</th>
                                    <th class="px-6 py-3 text-left text-sm font-semibold text-gray-900">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($qrCodes as $qrCode)
                                    <tr class="border-b border-gray-100 hover:bg-gray-50 transition-colors">
                                        <td class="px-6 py-4 text-sm text-gray-900">
                                            <code class="bg-gray-100 px-2 py-1 rounded text-xs">{{ $qrCode->code }}</code>
                                        </td>
                                        <td class="px-6 py-4 text-sm text-gray-900">
                                            {{ $qrCode->checkpoint?->checkpoint_name ?? 'N/A' }}
                                        </td>
                                        <td class="px-6 py-4 text-sm text-gray-900">
                                            @if($qrCode->checkpoint)
                                                @if($qrCode->checkpoint->service)
                                                    {{ $qrCode->checkpoint->service->service_name }}
                                                @elseif($qrCode->checkpoint->schedules?->first()?->service)
                                                    {{ $qrCode->checkpoint->schedules->first()->service->service_name }}
                                                @else
                                                    <span class="text-gray-400">No Site assigned</span>
                                                @endif
                                            @else
                                                <span class="text-gray-400">No checkpoint</span>
                                            @endif
                                        </td>
                                        <td class="px-6 py-4 text-sm">
                                            @if($qrCode->is_active)
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                                    Active
                                                </span>
                                            @else
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
                                                    Inactive
                                                </span>
                                            @endif
                                        </td>
                                        <td class="px-6 py-4 text-sm">
                                            <div class="flex gap-2">
                                                <a href="{{ route('patrols.qr-codes.show', $qrCode->id) }}" class="inline-flex items-center px-3 py-1 bg-blue-50 text-blue-600 rounded-md hover:bg-blue-100 transition-colors text-xs font-medium">
                                                    <i class="fas fa-eye mr-1"></i>View
                                                </a>
                                                <form action="{{ route('patrols.qr-codes.destroy', $qrCode->id) }}" method="POST" class="inline" onsubmit="return confirm('Are you sure you want to delete this QR code?');">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="inline-flex items-center px-3 py-1 bg-red-50 text-red-600 rounded-md hover:bg-red-100 transition-colors text-xs font-medium">
                                                        <i class="fas fa-trash mr-1"></i>Delete
                                                    </button>
                                                </form>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection