@extends('layouts.admin')

@section('content')
<div class="max-w-4xl mx-auto">
    <div class="mb-6 flex justify-between items-center">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">Marketing Pixels Setup</h1>
            <p class="text-gray-500 text-sm mt-1">Configure tracking and analytics codes for your store.</p>
        </div>
    </div>

    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
        <form action="{{ route('admin.settings.pixels.update') }}" method="POST" class="p-6">
            @csrf
            
            <div class="space-y-8">
                <!-- Facebook Pixel -->
                <div>
                    <div class="flex items-center justify-between mb-4">
                        <div class="flex items-center space-x-3">
                            <div class="h-10 w-10 bg-blue-100 rounded flex items-center justify-center text-blue-600 font-bold">
                                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd"></path></svg>
                            </div>
                            <h3 class="text-lg font-medium leading-6 text-gray-900">Facebook Pixel</h3>
                        </div>
                        <div class="flex items-center">
                            <label class="flex items-center cursor-pointer">
                                <div class="relative">
                                    <input type="checkbox" name="facebook_pixel_active" value="1" class="sr-only" {{ ($settings['facebook_pixel_active']->value ?? 0) ? 'checked' : '' }}>
                                    <div class="block bg-gray-200 w-10 h-6 rounded-full checkbox-bg"></div>
                                    <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition checkbox-dot"></div>
                                </div>
                                <div class="ml-3 text-sm font-medium text-gray-700">Enable</div>
                            </label>
                        </div>
                    </div>
                    
                    <div class="bg-gray-50 p-4 rounded-lg border border-gray-100">
                        <label class="block text-sm font-medium text-gray-700">Facebook Pixel ID</label>
                        <input type="text" name="facebook_pixel_id" value="{{ $settings['facebook_pixel_id']->value ?? '' }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" placeholder="e.g. 123456789012345">
                        <p class="mt-2 text-xs text-gray-500">Only enter the Pixel ID, not the entire tracking code.</p>
                    </div>
                </div>

                <!-- Google Analytics -->
                <div class="pt-6 border-t border-gray-200">
                    <div class="flex items-center justify-between mb-4">
                        <div class="flex items-center space-x-3">
                            <div class="h-10 w-10 bg-yellow-100 rounded flex items-center justify-center text-yellow-600 font-bold">
                                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14H9V9h2v7zm4 0h-2v-4h2v4z"></path></svg>
                            </div>
                            <h3 class="text-lg font-medium leading-6 text-gray-900">Google Analytics (GA4)</h3>
                        </div>
                        <div class="flex items-center">
                            <label class="flex items-center cursor-pointer">
                                <div class="relative">
                                    <input type="checkbox" name="google_analytics_active" value="1" class="sr-only" {{ ($settings['google_analytics_active']->value ?? 0) ? 'checked' : '' }}>
                                    <div class="block bg-gray-200 w-10 h-6 rounded-full checkbox-bg"></div>
                                    <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition checkbox-dot"></div>
                                </div>
                                <div class="ml-3 text-sm font-medium text-gray-700">Enable</div>
                            </label>
                        </div>
                    </div>
                    
                    <div class="bg-gray-50 p-4 rounded-lg border border-gray-100">
                        <label class="block text-sm font-medium text-gray-700">Measurement ID</label>
                        <input type="text" name="google_analytics_id" value="{{ $settings['google_analytics_id']->value ?? '' }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" placeholder="e.g. G-XXXXXXXXXX">
                    </div>
                </div>

                <!-- Google Tag Manager -->
                <div class="pt-6 border-t border-gray-200">
                    <div class="flex items-center justify-between mb-4">
                        <div class="flex items-center space-x-3">
                            <div class="h-10 w-10 bg-green-100 rounded flex items-center justify-center text-green-600 font-bold">
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path></svg>
                            </div>
                            <h3 class="text-lg font-medium leading-6 text-gray-900">Google Tag Manager</h3>
                        </div>
                        <div class="flex items-center">
                            <label class="flex items-center cursor-pointer">
                                <div class="relative">
                                    <input type="checkbox" name="gtm_active" value="1" class="sr-only" {{ ($settings['gtm_active']->value ?? 0) ? 'checked' : '' }}>
                                    <div class="block bg-gray-200 w-10 h-6 rounded-full checkbox-bg"></div>
                                    <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition checkbox-dot"></div>
                                </div>
                                <div class="ml-3 text-sm font-medium text-gray-700">Enable</div>
                            </label>
                        </div>
                    </div>
                    
                    <div class="bg-gray-50 p-4 rounded-lg border border-gray-100">
                        <label class="block text-sm font-medium text-gray-700">GTM Container ID</label>
                        <input type="text" name="gtm_id" value="{{ $settings['gtm_id']->value ?? '' }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" placeholder="e.g. GTM-XXXXXXX">
                    </div>
                </div>
            </div>

            <div class="mt-8 flex justify-end pt-5 border-t border-gray-200">
                <button type="submit" class="bg-blue-600 border border-transparent rounded-md shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                    Save Pixel Settings
                </button>
            </div>
        </form>
    </div>
</div>

<style>
    input:checked ~ .checkbox-bg { background-color: #3b82f6; }
    input:checked ~ .checkbox-dot { transform: translateX(100%); }
</style>
@endsection