<div>
    <div class="d-flex flex-wrap justify-content-between align-items-center mb-2">
        <div>
            <h2 class="loot-section-title mb-25">Providers</h2>
            <p class="loot-muted mb-0">Configure provider launch URLs and optional GET offer feeds.</p>
        </div>
        <button class="btn btn-loot" data-bs-toggle="modal" data-bs-target="#inlineForm">
            <i data-feather="plus" class="me-50"></i>
            New Provider
        </button>
    </div>

    <div class="card">
        <div class="card-body border-bottom">
            <div class="row align-items-center g-1">
                <div class="col-md-4">
                    <select wire:model.defer="bulkAction" class="form-select">
                        <option value="">Bulk actions</option>
                        <option value="activate">Activate selected</option>
                        <option value="deactivate">Deactivate selected</option>
                        <option value="offer">Set as offer</option>
                        <option value="survey">Set as survey</option>
                        <option value="delete">Delete selected</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <button type="button" class="btn btn-outline-light w-100" wire:click="applyBulkAction">
                        Apply to selected
                    </button>
                </div>
                <div class="col-md-5">
                    <span class="loot-muted">{{ count($selectedProviders) }} selected on this page</span>
                </div>
            </div>
        </div>
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead>
                <tr>
                    <th style="width: 44px;">
                        <input class="form-check-input" type="checkbox" wire:model="selectPage" aria-label="Select all providers on this page">
                    </th>
                    <th>Provider</th>
                    <th>Type</th>
                    <th>Launch</th>
                    <th>URL</th>
                    <th>Rate</th>
                    <th>Status</th>
                    <th>Action</th>
                </tr>
                </thead>
                <tbody>
                @foreach($offerwalls as $offerwall)
                    <tr>
                        <td>
                            <input class="form-check-input" type="checkbox" wire:model="selectedProviders" value="{{ $offerwall->id }}" aria-label="Select {{ $offerwall->name }}">
                        </td>
                        <td>
                            <div class="d-flex align-items-center">
                                <div class="loot-brand-mark me-1" style="background: {{ $offerwall->background_color ?? '#202637' }}">
                                    <img src="{{ Storage::url($offerwall->photo_path) }}" alt="{{ $offerwall->name }}"
                                         style="max-width: 26px; max-height: 26px;">
                                </div>
                                <div>
                                    <strong>{{ $offerwall->name }}</strong>
                                    <div class="loot-muted small">
                                        Level {{ $offerwall->unlock_level ?? 1 }}
                                        @if($offerwall->is_mobile) · Mobile @endif
                                    </div>
                                    @php
                                        $feedData = $offerwall->sdk_data ?? [];
                                        $feedEnabled = array_key_exists('offer_feed_enabled', $feedData)
                                            ? filter_var($feedData['offer_feed_enabled'], FILTER_VALIDATE_BOOLEAN)
                                            : (filled($feedData['offer_feed_url'] ?? null) || str_contains(strtolower($offerwall->name), 'upwall'));
                                        $feedConfigured = filled($feedData['offer_feed_url'] ?? null) || str_contains(strtolower($offerwall->name), 'upwall');
                                    @endphp
                                    <div class="mt-25">
                                        <span class="loot-status {{ $feedEnabled && $feedConfigured ? 'success' : 'warning' }}">
                                            {{ !$feedEnabled ? 'API off' : ($feedConfigured ? 'API ready' : 'Iframe only') }}
                                        </span>
                                        @if($offerwall->provider_offers_count)
                                            <span class="loot-muted small ms-50">{{ number_format($offerwall->provider_offers_count) }} offers</span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td><span class="loot-status">{{ ucfirst($offerwall->type ?? 'offer') }}</span></td>
                        <td><span class="loot-status">{{ ucfirst($offerwall->launch_mode ?? 'iframe') }}</span></td>
                        <td class="text-truncate" style="max-width: 320px;">{{ $offerwall->iframe_url }}</td>
                        <td>
                            @if($offerwall->show_rate)
                                <span class="loot-status warning">{{ $offerwall->rate ?? '5' }}</span>
                            @else
                                <span class="loot-muted">Hidden</span>
                            @endif
                        </td>
                        <td>
                            @if($offerwall->is_active)
                                <span class="loot-status success">Active</span>
                            @else
                                <span class="loot-status danger">Inactive</span>
                            @endif
                        </td>
                        <td>
                            <button class="btn btn-sm btn-outline-light" data-bs-toggle="modal"
                                    data-bs-target="#viewForm" wire:click="select({{ $offerwall->id }})">
                                Edit
                            </button>
                            <button class="btn btn-sm btn-outline-danger"
                                    onclick="confirm('Delete this provider?') || event.stopImmediatePropagation()"
                                    wire:click="delete({{ $offerwall->id }})">
                                Delete
                            </button>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    </div>

    <div class="mt-2">
        {{ $offerwalls->links() }}
    </div>

    <div wire:ignore.self class="modal fade text-start" id="inlineForm" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title loot-section-title">Create Provider</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form wire:submit.prevent="save" enctype="multipart/form-data">
                    @include('livewire.partials.offerwall-form', ['photoRequired' => true])
                </form>
            </div>
        </div>
    </div>

    <div wire:ignore.self class="modal fade text-start" id="viewForm" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title loot-section-title">Edit Provider</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form wire:submit.prevent="update" enctype="multipart/form-data">
                    @include('livewire.partials.offerwall-form', ['photoRequired' => false])
                </form>
            </div>
        </div>
    </div>
</div>

@push('scripts')
    <script>
        document.addEventListener('toasts', event => {
            toastr[event.detail.type](event.detail.message, event.detail.title);
            $('#inlineForm').modal('hide');
            $('#viewForm').modal('hide');
        });
    </script>
@endpush
