<div class="modal fade mb-modal" id="catalog-page-affiliate-modal" tabindex="-1" aria-labelledby="catalog-page-affiliate-title" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form method="POST" action="{{ session('catalog_affiliate_action', '#') }}">
                @csrf
                @method('PATCH')
                <div class="modal-header">
                    <div>
                        <h2 class="mb-modal-title" id="catalog-page-affiliate-title">Affiliate tracking</h2>
                        <p class="mb-modal-sub">Required before the catalog live URL is available. Product clicks use ValidClick with utm_source and utm_campaign for subid.</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="catalog_admedia_campaign_id">Admedia campaign ID</label>
                        <input class="form-control @error('admedia_campaign_id') is-invalid @enderror" id="catalog_admedia_campaign_id" name="admedia_campaign_id" value="{{ old('admedia_campaign_id') }}" placeholder="122609" inputmode="numeric" autocomplete="off">
                        @error('admedia_campaign_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div>
                        <label class="mb-modal-label" for="catalog_affiliate_key">Affiliate</label>
                        <select class="form-select @error('affiliate_key') is-invalid @enderror" id="catalog_affiliate_key" name="affiliate_key">
                            <option value="">Select affiliate…</option>
                            @foreach (config('catalog-affiliates.affiliates', []) as $key => $affiliate)
                                <option value="{{ $key }}" @selected(old('affiliate_key') === $key)>{{ $affiliate['label'] ?? $key }} ({{ $affiliate['aff_id'] ?? '' }})</option>
                            @endforeach
                        </select>
                        @error('affiliate_key')
                            <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 affiliate tracking</button>
                </div>
            </form>
        </div>
    </div>
</div>

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

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

                var form = modal.querySelector('form');
                var campaignId = modal.querySelector('#catalog_admedia_campaign_id');
                var affiliate = modal.querySelector('#catalog_affiliate_key');

                if (form) {
                    form.setAttribute('action', button.getAttribute('data-affiliate-action') || '#');
                }
                if (campaignId) {
                    campaignId.value = button.getAttribute('data-admedia-campaign-id') || '';
                }
                if (affiliate) {
                    affiliate.value = button.getAttribute('data-affiliate-key') || '';
                }
            });

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