<div class="modal fade mb-modal" id="prompt-page-pixels-modal" tabindex="-1" aria-labelledby="prompt-page-pixels-title" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form method="POST" action="{{ session('pixels_action', '#') }}">
                @csrf
                @method('PATCH')
                <div class="modal-header">
                    <div>
                        <h2 class="mb-modal-title" id="prompt-page-pixels-title">Tracking pixels</h2>
                        <p class="mb-modal-sub">Used on the public page when utm_source is Google or Meta.</p>
                    </div>
                    <button type="button" class="mb-modal-close" data-bs-dismiss="modal" aria-label="Close"><i class="bi bi-x-lg"></i></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="mb-modal-label" for="google_conversion_send_to">Google Ads send_to</label>
                        <input class="form-control @error('google_conversion_send_to') is-invalid @enderror" id="google_conversion_send_to" name="google_conversion_send_to" value="{{ old('google_conversion_send_to') }}" placeholder="AW-1234567890/AbCdEfGh" autocomplete="off">
                        @error('google_conversion_send_to')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div>
                        <label class="mb-modal-label" for="meta_pixel_id">Meta Pixel ID</label>
                        <input class="form-control @error('meta_pixel_id') is-invalid @enderror" id="meta_pixel_id" name="meta_pixel_id" value="{{ old('meta_pixel_id') }}" placeholder="1234567890" inputmode="numeric" autocomplete="off">
                        @error('meta_pixel_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="mb-btn-ghost" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="mb-btn-primary">Save pixels</button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
    <script>
        (function () {
            var modal = document.getElementById('prompt-page-pixels-modal');
            if (!modal) {
                return;
            }

            modal.addEventListener('show.bs.modal', function (event) {
                var button = event.relatedTarget;
                if (!button) {
                    return;
                }

                var form = modal.querySelector('form');
                var google = modal.querySelector('#google_conversion_send_to');
                var meta = modal.querySelector('#meta_pixel_id');

                if (form) {
                    form.setAttribute('action', button.getAttribute('data-pixels-action') || '#');
                }
                if (google) {
                    google.value = button.getAttribute('data-google-send-to') || '';
                }
                if (meta) {
                    meta.value = button.getAttribute('data-meta-pixel-id') || '';
                }
            });

            @if ($errors->hasAny(['google_conversion_send_to', 'meta_pixel_id']))
                document.addEventListener('DOMContentLoaded', function () {
                    bootstrap.Modal.getOrCreateInstance(modal).show();
                });
            @endif
        })();
    </script>
@endpush
