<div>
    <div class="modal-body">
        <div class="row">
            <div class="col-md-6 mb-1">
                <label class="form-label">Name<span class="text-danger">*</span></label>
                <input type="text" wire:model.defer="name" class="form-control"/>
                @error('name')<span class="text-danger">{{ $message }}</span>@enderror
            </div>
            <div class="col-md-6 mb-1">
                <label class="form-label">Background Color</label>
                <div class="input-group">
                    <input type="text" wire:model.defer="backgroundColor" class="form-control"/>
                    <input type="color" wire:model.defer="backgroundColor" class="form-control form-control-color"/>
                </div>
            </div>
        </div>

        <label class="form-label">Type</label>
        <div class="row mb-1">
            <div class="col-md-6">
                <label class="loot-action-card d-block">
                    <input type="radio" wire:model.defer="type" value="offer" class="me-1">
                    <i data-feather="star" class="me-50"></i>
                    Offer
                </label>
            </div>
            <div class="col-md-6">
                <label class="loot-action-card d-block">
                    <input type="radio" wire:model.defer="type" value="survey" class="me-1">
                    <i data-feather="crosshair" class="me-50"></i>
                    Survey
                </label>
            </div>
        </div>

        <label class="form-label">Launch Mode</label>
        <div class="row mb-1">
            <div class="col-md-6">
                <label class="loot-action-card d-block">
                    <input type="radio" wire:model.defer="launchMode" value="iframe" class="me-1">
                    Open inside iframe modal
                </label>
            </div>
            <div class="col-md-6">
                <label class="loot-action-card d-block">
                    <input type="radio" wire:model.defer="launchMode" value="external" class="me-1">
                    Open as external link
                </label>
            </div>
        </div>

        <div class="mb-1">
            <label class="form-label">Image <span class="loot-muted">(optional)</span></label>
            <input class="form-control" type="file" wire:model="photo" accept="image/*"/>
            @error('photo')<span class="text-danger">{{ $message }}</span>@enderror
        </div>

        <div class="row">
            <div class="col-md-6 mb-1">
                <label class="form-label">Badge</label>
                <input type="text" wire:model.defer="badge" class="form-control" placeholder="Featured, Hot, New"/>
                <small class="loot-muted">Badge shown on the top right corner of the provider card.</small>
            </div>
            <div class="col-md-6 mb-1">
                <label class="form-label">Badge Background Color</label>
                <div class="input-group">
                    <input type="text" wire:model.defer="badgeColor" class="form-control"/>
                    <input type="color" wire:model.defer="badgeColor" class="form-control form-control-color"/>
                </div>
            </div>
        </div>

        <div class="mb-1">
            <label class="form-label">URL<span class="text-danger">*</span></label>
            <input type="text" wire:model.defer="iframe" class="form-control"/>
            <small class="loot-muted">Supported placeholders: {user_id}, {username}, {email}</small>
            @error('iframe')<span class="text-danger">{{ $message }}</span>@enderror
        </div>

        <div class="row">
            <div class="col-md-6 mb-1">
                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" wire:model.defer="showRate" id="showRate">
                    <label class="form-check-label" for="showRate">Show Rate</label>
                </div>
                <small class="loot-muted">Show rate stars or score on offer card.</small>
            </div>
            <div class="col-md-6 mb-1">
                <label class="form-label">Rate</label>
                <input type="text" wire:model.defer="rate" class="form-control" placeholder="5 or 4.8/5"/>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6 mb-1">
                <label class="form-label">Unlock level</label>
                <input type="number" wire:model.defer="unlockLevel" min="1" class="form-control"/>
            </div>
            <div class="col-md-6 mb-1">
                <div class="form-check form-switch mt-2">
                    <input class="form-check-input" type="checkbox" wire:model.defer="isMobile" id="isMobile">
                    <label class="form-check-label" for="isMobile">Mobile only</label>
                </div>
            </div>
        </div>

        <div class="mb-1">
            <label class="form-label">Description</label>
            <textarea wire:model.defer="description" class="form-control" rows="3"
                      placeholder="Short message shown on the marketplace card."></textarea>
        </div>

        <div class="loot-action-card mb-1">
            <div class="d-flex justify-content-between align-items-start gap-1 mb-1">
                <div>
                    <h5 class="loot-section-title mb-25">API GET Offers</h5>
                    <p class="loot-muted mb-0">Add the provider's official GET offers API. Synced offers appear in Admin Offers and can be shown, hidden, featured, or marked hot.</p>
                </div>
                <div class="form-check form-switch flex-shrink-0">
                    <input class="form-check-input" type="checkbox" wire:model="offerFeedEnabled" id="offerFeedEnabled-{{ $photoRequired ? 'create' : 'edit' }}">
                    <label class="form-check-label" for="offerFeedEnabled-{{ $photoRequired ? 'create' : 'edit' }}">Enable API feed</label>
                </div>
            </div>
            <div class="row {{ $offerFeedEnabled ? '' : 'opacity-50' }}">
                <div class="col-md-8 mb-1">
                    <label class="form-label">API GET URL</label>
                    <input type="url" wire:model.defer="offerFeedUrl" class="form-control" placeholder="https://provider.com/api/offers"/>
                    @error('offerFeedUrl')<span class="text-danger d-block mt-25">{{ $message }}</span>@enderror
                </div>
                <div class="col-md-4 mb-1">
                    <label class="form-label">Offers root path</label>
                    <input type="text" wire:model.defer="offerFeedRoot" class="form-control" placeholder="offers"/>
                    <small class="loot-muted">Use <code>offers</code> for Upwall/Gemi-style responses.</small>
                </div>
                <div class="col-12 mb-1">
                    <div class="d-flex justify-content-between align-items-center mb-50">
                        <label class="form-label mb-0">Parameters</label>
                        <button type="button" class="btn btn-sm btn-outline-light" wire:click="addOfferFeedQueryRow"><i data-feather="plus" class="me-50"></i>Add parameter</button>
                    </div>
                    @foreach($offerFeedQueryRows as $index => $row)
                        <div class="api-parameter-row">
                            <div>
                                <label class="form-label d-md-none">Parameter</label>
                                <input class="form-control" wire:model.defer="offerFeedQueryRows.{{ $index }}.key" placeholder="app_id, apiKey, placementId, country, os">
                            </div>
                            <div>
                                <label class="form-label d-md-none">Value</label>
                                <input class="form-control" wire:model.defer="offerFeedQueryRows.{{ $index }}.value" placeholder="Value or {user_id}, {country}, {os}">
                            </div>
                            <div>
                                <button type="button" class="btn btn-outline-danger api-parameter-remove" title="Remove parameter" aria-label="Remove parameter" wire:click="removeOfferFeedQueryRow({{ $index }})"><i data-feather="trash-2"></i></button>
                            </div>
                        </div>
                    @endforeach
                    <small class="loot-muted">
                        Supported placeholders: <code>{user_id}</code>, <code>{username}</code>, <code>{email}</code>, <code>{country}</code>, <code>{country_code}</code>, <code>{os}</code>.
                        Offer fields are detected automatically from common names like <code>offer_id</code>, <code>title</code>, <code>icon</code>, <code>link</code>, <code>payout</code>, <code>devices</code>, and <code>countries</code>.
                    </small>
                </div>
                <div class="col-12">
                    <div class="d-flex flex-wrap align-items-center gap-1">
                        <button type="button" class="btn btn-outline-light" wire:click="testOfferFeedConnection"
                                wire:loading.attr="disabled" wire:target="testOfferFeedConnection" {{ $offerFeedEnabled ? '' : 'disabled' }}>
                            <span wire:loading.remove wire:target="testOfferFeedConnection"><i data-feather="wifi" class="me-50"></i>Check connection</span>
                            <span wire:loading wire:target="testOfferFeedConnection">Checking...</span>
                        </button>
                        @if($offerFeedConnectionStatus)
                            <span class="loot-status {{ $offerFeedConnectionStatus === 'success' ? 'success' : 'danger' }}">
                                {{ $offerFeedConnectionMessage }}
                                @if($offerFeedConnectionStatus === 'success') ({{ number_format($offerFeedConnectionCount) }} offers found) @endif
                            </span>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button type="submit" class="btn btn-loot">{{ $photoRequired ? 'Create' : 'Save changes' }}</button>
        @unless($photoRequired)
            <button wire:click="changeStatus" type="button" class="btn btn-outline-warning">Toggle Status</button>
        @endunless
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
    </div>
</div>
