@extends('admin.master')

@section('content')
<div class="container mx-auto px-4 py-6">
    <div class="flex justify-between items-center mb-6">
        <div class="flex items-center gap-4">
            <a href="{{ route('admin.facebook-pixels.index') }}" class="text-gray-600 border border-gray-300 px-3 py-1.5 rounded bg-white font-semibold flex items-center gap-2 shadow-sm hover:bg-gray-50">
                &larr; Back
            </a>
            <h2 class="text-2xl font-bold text-gray-800">Add Facebook Pixel</h2>
        </div>
        <button type="submit" form="pixel-form" class="bg-green-600 text-white font-bold py-2 px-6 rounded shadow flex items-center gap-2 hover:bg-green-700">
            <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="M5 13l4 4L19 7"></path></svg> Add
        </button>
    </div>

    @if ($errors->any())
        <div class="bg-red-100 text-red-700 px-4 py-3 rounded mb-4">
            <ul class="list-disc pl-5">@foreach ($errors->all() as $error) <li>{{ $error }}</li> @endforeach</ul>
        </div>
    @endif

    <form id="pixel-form" action="{{ route('admin.facebook-pixels.store') }}" method="POST" class="bg-white rounded-lg border border-gray-200 shadow-sm">
        @csrf
        
        <div class="px-6 py-4 border-b border-gray-200 bg-gray-50 font-bold text-gray-700 flex items-center gap-2">
            <div class="bg-green-600 rounded-full p-1 w-5 h-5 flex items-center justify-center text-white">
                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24"><path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"/></svg>
            </div>
            Pixel Configuration
        </div>
        
        <div class="p-6 flex flex-col gap-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">Dataset ID (Pixel ID)</label>
                    <input type="text" name="dataset_id" value="{{ old('dataset_id') }}" placeholder="Meta Dataset ID (Pixel ID)" class="w-full border border-gray-300 rounded px-4 py-2.5 outline-none focus:border-green-500 text-gray-700" required>
                </div>
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">Catalog</label>
                    <input type="text" name="catalog_id" value="{{ old('catalog_id') }}" placeholder="Meta Catalog" class="w-full border border-gray-300 rounded px-4 py-2.5 outline-none focus:border-green-500 text-gray-700">
                </div>
            </div>

            <div>
                <label class="block text-sm font-bold text-gray-700 mb-2">Access Token</label>
                <textarea name="access_token" rows="4" placeholder="Access Token here" class="w-full border border-gray-300 rounded px-4 py-2.5 outline-none focus:border-green-500 text-gray-700" required>{{ old('access_token') }}</textarea>
            </div>

            <div>
                <label class="block text-sm font-bold text-gray-700 mb-2">Test Event Code (optional)</label>
                <input type="text" name="test_event_code" value="{{ old('test_event_code') }}" placeholder="Test Event Code eg: TEST74434" class="w-full border border-gray-300 rounded px-4 py-2.5 outline-none focus:border-green-500 text-gray-700">
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-2">
                <!-- Browser Side Tracking Toggle Box -->
                <div class="bg-green-50 border border-green-200 rounded-lg p-5 flex items-center justify-between">
                    <div class="flex items-center gap-4">
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" name="is_browser_active" value="1" class="sr-only peer" checked>
                            <div class="w-11 h-6 bg-gray-200 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
                        </label>
                        <div>
                            <p class="font-bold text-gray-700">Browser Side Tracking</p>
                            <p class="text-xs font-semibold text-green-600">Enabled</p>
                        </div>
                    </div>
                </div>

                <!-- Server Side Tracking Toggle Box -->
                <div class="bg-green-50 border border-green-200 rounded-lg p-5 flex items-center justify-between">
                    <div class="flex items-center gap-4">
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" name="is_server_active" value="1" class="sr-only peer" checked>
                            <div class="w-11 h-6 bg-gray-200 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
                        </label>
                        <div>
                            <p class="font-bold text-gray-700">Server Side Tracking</p>
                            <p class="text-xs font-semibold text-green-600">Enabled</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<script>
    // Simple script to toggle text between Enabled (green) / Disabled (gray) based on checkbox state
    document.querySelectorAll('.peer').forEach(function(toggle) {
        toggle.addEventListener('change', function() {
            let statusText = this.closest('.flex').querySelector('p:nth-child(2)');
            if(this.checked) {
                statusText.textContent = 'Enabled';
                statusText.className = 'text-xs font-semibold text-green-600';
            } else {
                statusText.textContent = 'Disabled';
                statusText.className = 'text-xs font-semibold text-gray-500';
            }
        });
    });
</script>
@endsection