@extends('backend.layout.app')

@section('content')
    <div class="page-content">
        <div class="row justify-content-center">
            <div class="col-md-10">
                <div class="card">
                    <div class="card-header bg-white border-bottom py-3">
                        <h5 class="mb-0">Tracking Settings</h5>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('admin.setting.tracking.update') }}" method="POST">
                            @csrf
                            <div class="row">
                                <div class="col-md-6 mb-4">
                                    <h6 class="text-primary mb-3"><i class="bi bi-google me-2"></i>Google Analytics & GTM</h6>
                                    <div class="mb-3">
                                        <label class="form-label">GA4 Measurement ID (G-XXXXXXXXXX)</label>
                                        <input type="text" name="ga4_measurement_id" class="form-control" 
                                               value="{{ $trackingSetting->ga4_measurement_id }}" placeholder="G-XXXXXXXXXX">
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">GTM Container ID (GTM-XXXXXXX)</label>
                                        <input type="text" name="gtm_container_id" class="form-control" 
                                               value="{{ $trackingSetting->gtm_container_id }}" placeholder="GTM-XXXXXXX">
                                    </div>
                                </div>

                                <div class="col-md-6 mb-4">
                                    <h6 class="text-primary mb-3"><i class="bi bi-meta me-2"></i>Meta Pixel & Conversion API</h6>
                                    <div class="mb-3">
                                        <label class="form-label">Meta Pixel ID</label>
                                        <input type="text" name="meta_pixel_id" class="form-control" 
                                               value="{{ $trackingSetting->meta_pixel_id }}" placeholder="123456789012345">
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Meta Access Token (Conversion API)</label>
                                        <textarea name="meta_access_token" class="form-control" rows="2" 
                                                  placeholder="EAAB... (Long token)">{{ $trackingSetting->meta_access_token }}</textarea>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Meta Test Event Code</label>
                                        <input type="text" name="meta_test_event_code" class="form-control" 
                                               value="{{ $trackingSetting->meta_test_event_code }}" placeholder="TEST-XXXXX">
                                        <small class="text-muted">Required only during development/testing.</small>
                                    </div>
                                </div>

                                <div class="col-12 border-top pt-4">
                                    <div class="d-flex align-items-center justify-content-between">
                                        <div class="form-check form-switch">
                                            <input type="hidden" name="status" value="0">
                                            <input class="form-check-input" type="checkbox" name="status" value="1" 
                                                   id="trackingStatus" {{ $trackingSetting->status ? 'checked' : '' }}>
                                            <label class="form-check-label" for="trackingStatus">Global Tracking Status</label>
                                        </div>
                                        <button type="submit" class="btn btn-primary px-5">
                                            <i class="bi bi-save me-1"></i> Update Settings
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection