@extends('admin.master')

@section('content')
<div class="container mx-auto px-4 py-6">
    <div class="flex justify-between items-center mb-6">
        <h2 class="text-2xl font-bold text-gray-800 flex items-center gap-2">
            Google Tag Manager
        </h2>
        <a href="{{ route('admin.google-tags.create') }}" class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded shadow flex items-center gap-1">
            + Add Tag
        </a>
    </div>

    @if(session('success'))
        <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">{{ session('success') }}</div>
    @endif

    <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden min-h-[400px]">
        @if($tags->isEmpty())
            <div class="flex flex-col items-center justify-center h-full py-24 text-center">
                <!-- Google "G" Logo SVG -->
                <svg class="w-16 h-16 text-gray-200 mb-4" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M12.24 10.285V14.4h6.806c-.275 1.765-2.056 5.174-6.806 5.174-4.095 0-7.439-3.389-7.439-7.574s3.345-7.574 7.439-7.574c2.33 0 3.891.989 4.785 1.849l3.254-3.138C18.189 1.186 15.479 0 12.24 0c-6.635 0-12 5.365-12 12s5.365 12 12 12c6.926 0 11.52-4.869 11.52-11.726 0-.788-.085-1.39-.189-1.989H12.24z"/>
                </svg>
                <h3 class="text-lg font-bold text-gray-500 mb-1">No Google Tags Available</h3>
                <p class="text-sm text-gray-400 mb-6">Add a Google Tag Manager to track your marketing campaigns</p>
                <a href="{{ route('admin.google-tags.create') }}" class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-6 rounded shadow">
                    + Add Tag
                </a>
            </div>
        @else
            <!-- Standard Table View when tags exist -->
            <table class="w-full text-left text-sm">
                <thead class="bg-gray-50 text-xs uppercase text-gray-500 font-bold border-b">
                    <tr>
                        <th class="px-6 py-4">TAG ID</th>
                        <th class="px-6 py-4">MEASUREMENT ID</th>
                        <th class="px-6 py-4">MERCHANT</th>
                        <th class="px-6 py-4">TEST EVENT</th>
                        <th class="px-6 py-4 text-right">ACTIONS</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100 text-gray-700">
                    @foreach($tags as $tag)
                        <tr class="hover:bg-gray-50">
                            <td class="px-6 py-4 font-bold text-green-600">{{ $tag->tag_id }}</td>
                            <td class="px-6 py-4">{{ $tag->measurement_id ?? '-' }}</td>
                            <td class="px-6 py-4">{{ $tag->merchant ?? '-' }}</td>
                            <td class="px-6 py-4">{{ $tag->test_event_code ?? '-' }}</td>
                            <td class="px-6 py-4">
                                <div class="flex items-center justify-end gap-2">
                                    <a href="{{ route('admin.google-tags.edit', $tag->id) }}" class="p-2 text-gray-400 hover:text-blue-600 border border-gray-200 rounded bg-white">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>
                                    </a>
                                    <form action="{{ route('admin.google-tags.destroy', $tag->id) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this Google Tag?');">
                                        @csrf @method('DELETE')
                                        <button type="submit" class="p-2 text-gray-400 hover:text-red-600 border border-gray-200 rounded bg-white">
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        @endif
    </div>
</div>
@endsection