@extends('agency.layouts.app')

@section('title', 'Pazar Tanımlamaları')

@section('content')
<div class="container-fluid py-4">
    <!-- Header Section -->
    <div class="row mb-5">
        <div class="col-12">
            <div class="d-flex align-items-center gap-3 mb-2">
                <a href="{{ route('agency.settings') }}" class="btn btn-outline-secondary btn-sm px-3 py-2" style="border-radius: 12px; border-color: #e2e8f0; font-weight: 600;">
                    <i class="fas fa-arrow-left me-1"></i> Ayarlara Dön
                </a>
                <div class="settings-icon-wrapper ms-2">
                    <i class="fas fa-store text-info"></i>
                </div>
                <div>
                    <h1 class="h3 fw-800 text-dark mb-0">Pazar Tanımlamaları</h1>
                    <p class="text-muted mb-0">Ürünlerinizi farklı dillerde, para birimlerinde ve kanallarda pazarlamak için satış pazarları tanımlayın.</p>
                </div>
            </div>
            <div class="header-divider mt-4"></div>
        </div>
    </div>

    <!-- Pasaport Çakışması / Hata Uyarısı -->
    @if(session('error'))
        <div class="alert alert-danger d-flex align-items-start gap-2 border-0 shadow-sm mb-4" role="alert" style="border-radius: 14px; background: rgba(239, 68, 68, 0.08); color: #b91c1c;">
            <i class="fas fa-triangle-exclamation mt-1"></i>
            <div class="fw-600" style="font-size: 0.9rem;">{{ session('error') }}</div>
        </div>
    @endif

    <!-- Bilgilendirme -->
    <div class="alert alert-info d-flex align-items-center gap-2 border-0 mb-4" role="alert" style="border-radius: 14px; background: rgba(14, 165, 233, 0.08); color: #0369a1;">
        <i class="fas fa-circle-info"></i>
        <div style="font-size: 0.85rem;">Bir ülke pasaport kodu yalnızca <strong>tek bir pazarda</strong> tanımlanabilir. Başka bir pazarda kullanılan ülkeler seçim listesinde devre dışı görünür.</div>
    </div>

    <!-- Main Content -->
    <div class="row g-4">
        <div class="col-12">
            <div class="settings-card shadow-sm h-100" style="background: white; border-radius: 20px; border: 1px solid rgba(0,0,0,0.03);">
                <div class="card-body p-4">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h4 class="fw-bold text-dark mb-0">Tanımlı Pazarlar</h4>
                        <button type="button" class="btn btn-sm btn-primary fw-bold py-2 px-3 shadow-sm" data-bs-toggle="modal" data-bs-target="#addMarketplaceModal" style="border-radius: 10px; background: linear-gradient(135deg, #0ea5e9, #0284c7); border: none;">
                            <i class="fas fa-plus me-1"></i> Yeni Pazar Ekle
                        </button>
                    </div>

                    <div class="table-responsive">
                        <table class="table align-middle table-hover">
                            <thead class="table-light">
                                <tr style="font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700;">
                                    <th>Pazar Adı</th>
                                    <th>Diller</th>
                                    <th>Pasaport Kısıtlamaları</th>
                                    <th class="text-center">Dil / Para Birimi</th>
                                    <th class="text-center" style="width: 100px;">Durum</th>
                                    <th class="text-end" style="width: 150px;">İşlemler</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($marketplaces as $mp)
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center gap-2">
                                                <div class="avatar-circle-sm bg-soft-info text-info">
                                                    <i class="fas fa-store"></i>
                                                </div>
                                                <div>
                                                    <span class="fw-bold text-dark d-block" style="font-size: 0.95rem;">{{ $mp->name }}</span>
                                                    <span class="text-muted small">Slug: {{ $mp->slug }}</span>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="d-flex flex-wrap gap-1" style="max-width: 250px;">
                                                @foreach($mp->languages as $lang)
                                                    <span class="badge bg-soft-primary text-primary fw-bold" style="font-size: 0.65rem; border-radius: 6px;">{{ $lang->code }}</span>
                                                @endforeach
                                            </div>
                                        </td>
                                        <td>
                                            @if($mp->is_local_only)
                                                <span class="badge bg-soft-warning text-warning fw-bold px-2 py-1" style="font-size: 0.7rem; border-radius: 6px; background-color: rgba(245, 158, 11, 0.1);">
                                                    <i class="fas fa-home me-1"></i> Sadece Yerel (T.C.)
                                                </span>
                                            @elseif($mp->countries->isEmpty())
                                                <span class="text-muted small">Herkes (Kısıtlamasız)</span>
                                            @else
                                                <div class="d-flex flex-wrap gap-1" style="max-width: 250px;">
                                                    @foreach($mp->countries as $country)
                                                        <span class="badge bg-soft-secondary text-secondary fw-bold px-1 py-0.5" style="font-size: 0.65rem; border-radius: 6px; background-color: rgba(107, 114, 128, 0.1);" title="{{ $country->name }}">
                                                            {{ $country->passport_code ?? $country->code }}
                                                        </span>
                                                    @endforeach
                                                </div>
                                            @endif
                                        </td>
                                        <td class="text-center">
                                            <div class="small">
                                                <span class="fw-bold text-dark">{{ $mp->defaultLanguage?->code ?? '—' }}</span>
                                                <span class="text-muted">/</span>
                                                <span class="fw-bold text-dark">{{ $mp->defaultCurrency?->code ?? '—' }}</span>
                                            </div>
                                        </td>
                                        <td class="text-center">
                                            @if($mp->is_active)
                                                <span class="badge bg-soft-success text-success fw-bold px-2 py-1" style="font-size: 0.7rem; border-radius: 6px; background-color: rgba(16, 185, 129, 0.1);">Aktif</span>
                                            @else
                                                <span class="badge bg-soft-danger text-danger fw-bold px-2 py-1" style="font-size: 0.7rem; border-radius: 6px; background-color: rgba(239, 68, 68, 0.1);">Pasif</span>
                                            @endif
                                        </td>
                                        <td class="text-end">
                                            <div class="d-flex justify-content-end gap-2">
                                                <button type="button" class="btn btn-outline-primary btn-sm px-2 py-1" onclick="editMarketplace({{ json_encode($mp) }}, {{ json_encode($mp->languages->pluck('id')) }}, {{ json_encode($mp->countries->pluck('id')) }})" style="border-radius: 8px;">
                                                    <i class="fas fa-edit"></i>
                                                </button>
                                                <button type="button" class="btn btn-outline-danger btn-sm px-2 py-1" onclick="deleteMarketplace({{ $mp->id }})" style="border-radius: 8px;">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="7" class="text-center text-muted py-5">
                                            <i class="fas fa-store-slash d-block fs-1 mb-2 text-light"></i>
                                            Henüz bir pazar tanımlanmamış. Yeni bir pazar ekleyerek başlayın.
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Add Marketplace Modal -->
<div class="modal fade" id="addMarketplaceModal" tabindex="-1" aria-labelledby="addMarketplaceModalLabel" aria-hidden="true" style="z-index: 1060;">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content" style="border-radius: 20px; border: none; box-shadow: 0 10px 30px rgba(0,0,0,0.15);">
            <div class="modal-header border-0 bg-light py-3" style="border-radius: 20px 20px 0 0;">
                <h5 class="modal-title fw-bold text-dark" id="addMarketplaceModalLabel"><i class="fas fa-plus-circle text-info me-2"></i>Yeni Pazar Ekle</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('agency.settings.marketplaces.store') }}" method="POST">
                @csrf
                <div class="modal-body p-4">
                    <div class="row">
                        <div class="col-md-12 mb-3">
                            <label class="form-label small fw-bold text-muted mb-1" style="font-size:0.75rem; text-transform:uppercase;">Pazar Adı *</label>
                            <input type="text" name="name" class="form-control" placeholder="Örn: Avrupa Pazarı" required style="border-radius: 8px;">
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label small fw-bold text-muted mb-1" style="font-size:0.75rem; text-transform:uppercase;">Varsayılan Dil *</label>
                            <select name="default_language_id" class="form-select" required style="border-radius: 8px;">
                                <option value="">Seçin...</option>
                                @foreach($languages as $lang)
                                    <option value="{{ $lang->id }}">{{ $lang->name }} ({{ $lang->code }})</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label small fw-bold text-muted mb-1" style="font-size:0.75rem; text-transform:uppercase;">Varsayılan Para Birimi *</label>
                            <select name="default_currency_id" class="form-select" required style="border-radius: 8px;">
                                <option value="">Seçin...</option>
                                @foreach($currencies as $curr)
                                    <option value="{{ $curr->id }}">{{ $curr->code }} ({{ $curr->symbol }})</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="row mt-2">
                        <div class="col-md-12 mb-3">
                            <label class="form-label small fw-bold text-muted mb-2 d-block" style="font-size:0.75rem; text-transform:uppercase;">Hizmet Verilecek Diller *</label>
                            <div class="border p-3" style="border-radius: 8px; background: #fafafa;">
                                <div class="input-group input-group-sm mb-2 shadow-sm" style="border-radius: 6px; overflow: hidden; border: 1px solid #dee2e6;">
                                    <span class="input-group-text border-0 bg-white"><i class="fas fa-search text-muted small"></i></span>
                                    <input type="text" class="form-control border-0 ps-0" id="lang_search_add" placeholder="Dil ara..." style="font-size: 0.8rem; outline: none; box-shadow: none; background: #fff;">
                                </div>
                                <div class="lang-list-add-container" style="max-height: 150px; overflow-y: auto; padding-right: 5px;">
                                    @foreach($languages as $lang)
                                        <div class="form-check mb-2 lang-item">
                                            <input class="form-check-input" type="checkbox" name="languages[]" value="{{ $lang->id }}" id="lang_add_{{ $lang->id }}">
                                            <label class="form-check-label text-dark small" for="lang_add_{{ $lang->id }}">
                                                {{ $lang->name }} ({{ $lang->code }})
                                            </label>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-check form-switch mb-3 mt-3">
                        <input class="form-check-input" type="checkbox" name="is_local_only" id="add_local_only" value="1" onchange="toggleCountrySelection('add')">
                        <label class="form-check-label small fw-bold text-dark" for="add_local_only" style="font-weight: 600;">Sadece Yerel Pazara Açık (T.C. Vatandaşları Pasaportsuz Başvurabilir)</label>
                    </div>

                    <div class="row mt-2" id="country_selection_add_wrapper">
                        <div class="col-md-12 mb-3">
                            <label class="form-label small fw-bold text-muted mb-2 d-block" style="font-size:0.75rem; text-transform:uppercase;">İzin Verilen Ülke Pasaportları</label>
                            <div class="border p-3" style="border-radius: 8px; background: #fafafa;">
                                <div class="input-group input-group-sm mb-2 shadow-sm" style="border-radius: 6px; overflow: hidden; border: 1px solid #dee2e6;">
                                    <span class="input-group-text border-0 bg-white"><i class="fas fa-search text-muted small"></i></span>
                                    <input type="text" class="form-control border-0 ps-0" id="country_search_add" placeholder="Ülke ara..." style="font-size: 0.8rem; outline: none; box-shadow: none; background: #fff;">
                                </div>
                                <div class="country-list-add-container" style="max-height: 150px; overflow-y: auto; padding-right: 5px;">
                                    @foreach($countries as $country)
                                        <div class="form-check mb-2 country-item">
                                            <input class="form-check-input" type="checkbox" name="countries[]" value="{{ $country->id }}" id="country_add_{{ $country->id }}">
                                            <label class="form-check-label text-dark small" for="country_add_{{ $country->id }}">
                                                {{ $country->name }} ({{ $country->passport_code ?? $country->code }})
                                            </label>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-check form-switch mt-2">
                        <input class="form-check-input" type="checkbox" name="is_active" id="add_active" checked value="1">
                        <label class="form-check-label small fw-bold text-muted" for="add_active">Pazarı Aktifleştir</label>
                    </div>
                </div>
                <div class="modal-footer border-0 bg-light py-3" style="border-radius: 0 0 20px 20px;">
                    <button type="button" class="btn btn-sm btn-light fw-bold px-3 py-2" data-bs-dismiss="modal" style="border-radius: 8px;">Vazgeç</button>
                    <button type="submit" class="btn btn-sm btn-primary fw-bold px-4 py-2" style="border-radius: 8px; background: linear-gradient(135deg, #0ea5e9, #0284c7); border: none;">Kaydet</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Marketplace Modal -->
<div class="modal fade" id="editMarketplaceModal" tabindex="-1" aria-labelledby="editMarketplaceModalLabel" aria-hidden="true" style="z-index: 1060;">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content" style="border-radius: 20px; border: none; box-shadow: 0 10px 30px rgba(0,0,0,0.15);">
            <div class="modal-header border-0 bg-light py-3" style="border-radius: 20px 20px 0 0;">
                <h5 class="modal-title fw-bold text-dark" id="editMarketplaceModalLabel"><i class="fas fa-edit text-primary me-2"></i>Pazar Düzenle</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="editMarketplaceForm" action="" method="POST">
                @csrf
                @method('PUT')
                <div class="modal-body p-4">
                    <div class="row">
                        <div class="col-md-12 mb-3">
                            <label class="form-label small fw-bold text-muted mb-1" style="font-size:0.75rem; text-transform:uppercase;">Pazar Adı *</label>
                            <input type="text" name="name" id="edit_name" class="form-control" required style="border-radius: 8px;">
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label small fw-bold text-muted mb-1" style="font-size:0.75rem; text-transform:uppercase;">Varsayılan Dil *</label>
                            <select name="default_language_id" id="edit_default_language" class="form-select" required style="border-radius: 8px;">
                                <option value="">Seçin...</option>
                                @foreach($languages as $lang)
                                    <option value="{{ $lang->id }}">{{ $lang->name }} ({{ $lang->code }})</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label small fw-bold text-muted mb-1" style="font-size:0.75rem; text-transform:uppercase;">Varsayılan Para Birimi *</label>
                            <select name="default_currency_id" id="edit_default_currency" class="form-select" required style="border-radius: 8px;">
                                <option value="">Seçin...</option>
                                @foreach($currencies as $curr)
                                    <option value="{{ $curr->id }}">{{ $curr->code }} ({{ $curr->symbol }})</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="row mt-2">
                        <div class="col-md-12 mb-3">
                            <label class="form-label small fw-bold text-muted mb-2 d-block" style="font-size:0.75rem; text-transform:uppercase;">Hizmet Verilecek Diller *</label>
                            <div class="border p-3" style="border-radius: 8px; background: #fafafa;">
                                <div class="input-group input-group-sm mb-2 shadow-sm" style="border-radius: 6px; overflow: hidden; border: 1px solid #dee2e6;">
                                    <span class="input-group-text border-0 bg-white"><i class="fas fa-search text-muted small"></i></span>
                                    <input type="text" class="form-control border-0 ps-0" id="lang_search_edit" placeholder="Dil ara..." style="font-size: 0.8rem; outline: none; box-shadow: none; background: #fff;">
                                </div>
                                <div class="lang-list-edit-container" style="max-height: 150px; overflow-y: auto; padding-right: 5px;">
                                    @foreach($languages as $lang)
                                        <div class="form-check mb-2 lang-item">
                                            <input class="form-check-input edit-lang-checkbox" type="checkbox" name="languages[]" value="{{ $lang->id }}" id="lang_edit_{{ $lang->id }}">
                                            <label class="form-check-label text-dark small" for="lang_edit_{{ $lang->id }}">
                                                {{ $lang->name }} ({{ $lang->code }})
                                            </label>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-check form-switch mb-3 mt-3">
                        <input class="form-check-input" type="checkbox" name="is_local_only" id="edit_local_only" value="1" onchange="toggleCountrySelection('edit')">
                        <label class="form-check-label small fw-bold text-dark" for="edit_local_only" style="font-weight: 600;">Sadece Yerel Pazara Açık (T.C. Vatandaşları Pasaportsuz Başvurabilir)</label>
                    </div>

                    <div class="row mt-2" id="country_selection_edit_wrapper">
                        <div class="col-md-12 mb-3">
                            <label class="form-label small fw-bold text-muted mb-2 d-block" style="font-size:0.75rem; text-transform:uppercase;">İzin Verilen Ülke Pasaportları</label>
                            <div class="border p-3" style="border-radius: 8px; background: #fafafa;">
                                <div class="input-group input-group-sm mb-2 shadow-sm" style="border-radius: 6px; overflow: hidden; border: 1px solid #dee2e6;">
                                    <span class="input-group-text border-0 bg-white"><i class="fas fa-search text-muted small"></i></span>
                                    <input type="text" class="form-control border-0 ps-0" id="country_search_edit" placeholder="Ülke ara..." style="font-size: 0.8rem; outline: none; box-shadow: none; background: #fff;">
                                </div>
                                <div class="country-list-edit-container" style="max-height: 150px; overflow-y: auto; padding-right: 5px;">
                                    @foreach($countries as $country)
                                        <div class="form-check mb-2 country-item">
                                            <input class="form-check-input edit-country-checkbox" type="checkbox" name="countries[]" value="{{ $country->id }}" id="country_edit_{{ $country->id }}">
                                            <label class="form-check-label text-dark small" for="country_edit_{{ $country->id }}">
                                                {{ $country->name }} ({{ $country->passport_code ?? $country->code }})
                                            </label>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-check form-switch mt-2">
                        <input class="form-check-input" type="checkbox" name="is_active" id="edit_active" value="1">
                        <label class="form-check-label small fw-bold text-muted" for="edit_active">Pazarı Aktifleştir</label>
                    </div>
                </div>
                <div class="modal-footer border-0 bg-light py-3" style="border-radius: 0 0 20px 20px;">
                    <button type="button" class="btn btn-sm btn-light fw-bold px-3 py-2" data-bs-dismiss="modal" style="border-radius: 8px;">Vazgeç</button>
                    <button type="submit" class="btn btn-sm btn-primary fw-bold px-4 py-2" style="border-radius: 8px; background: linear-gradient(135deg, #4f46e5, #3730a3); border: none;">Değişiklikleri Kaydet</button>
                </div>
            </form>
        </div>
    </div>
</div>

<form id="delete-marketplace-form" action="" method="POST" style="display: none;">
    @csrf
    @method('DELETE')
</form>

<script>
    // Hangi ülke hangi pazarda kullanımda (country_id => {marketplace_id, marketplace_name})
    const countryAssignments = @json($countryAssignments);

    // Başka pazarda kullanılan ülkeleri devre dışı bırakır ve uyarı rozeti ekler.
    function applyCountryRestrictions(mode, currentMarketplaceId = null) {
        const container = document.querySelector(`.country-list-${mode}-container`);
        if (!container) return;

        container.querySelectorAll('.country-item').forEach(item => {
            const cb = item.querySelector('input[type="checkbox"]');
            if (!cb) return;

            const countryId = parseInt(cb.value);
            const label = item.querySelector('label');

            const oldNote = item.querySelector('.country-used-note');
            if (oldNote) oldNote.remove();

            const assignment = countryAssignments[countryId];
            const usedElsewhere = assignment && Number(assignment.marketplace_id) !== Number(currentMarketplaceId);

            if (usedElsewhere) {
                cb.checked = false;
                cb.disabled = true;
                item.classList.add('country-disabled');
                if (label) {
                    const note = document.createElement('span');
                    note.className = 'country-used-note badge ms-2';
                    note.style.cssText = 'font-size:0.6rem; background: rgba(245, 158, 11, 0.15); color:#b45309; border-radius:6px; font-weight:700;';
                    note.innerHTML = `<i class="fas fa-lock me-1"></i>${assignment.marketplace_name} pazarında kullanımda`;
                    label.appendChild(note);
                }
            } else {
                cb.disabled = false;
                item.classList.remove('country-disabled');
            }
        });
    }

    function toggleCountrySelection(mode) {
        const isLocalOnly = document.getElementById(`${mode}_local_only`).checked;
        const wrapper = document.getElementById(`country_selection_${mode}_wrapper`);
        if (wrapper) {
            if (isLocalOnly) {
                wrapper.style.setProperty('display', 'none', 'important');
            } else {
                wrapper.style.setProperty('display', '', 'important');
            }
        }
    }

    function editMarketplace(mp, selectedLangs, selectedCountries) {
        document.getElementById('edit_name').value = mp.name;
        document.getElementById('edit_default_language').value = mp.default_language_id || '';
        document.getElementById('edit_default_currency').value = mp.default_currency_id || '';
        document.getElementById('edit_active').checked = Boolean(mp.is_active);

        const isLocalOnly = Boolean(mp.is_local_only);
        document.getElementById('edit_local_only').checked = isLocalOnly;
        toggleCountrySelection('edit');

        // Reset, check, and sort language checkboxes to the top
        const langContainer = document.querySelector('.lang-list-edit-container');
        if (langContainer) {
            const langItems = Array.from(langContainer.querySelectorAll('.lang-item'));
            langItems.forEach(item => {
                const cb = item.querySelector('.edit-lang-checkbox');
                cb.checked = selectedLangs.includes(parseInt(cb.value));
            });

            // Sort: checked items first, then others
            langItems.sort((a, b) => {
                const aChecked = a.querySelector('.edit-lang-checkbox').checked;
                const bChecked = b.querySelector('.edit-lang-checkbox').checked;
                return (bChecked ? 1 : 0) - (aChecked ? 1 : 0);
            });

            // Re-append sorted elements
            langItems.forEach(item => langContainer.appendChild(item));
        }

        // Reset, check, and sort country checkboxes to the top
        const countryContainer = document.querySelector('.country-list-edit-container');
        if (countryContainer) {
            const countryItems = Array.from(countryContainer.querySelectorAll('.country-item'));
            countryItems.forEach(item => {
                const cb = item.querySelector('.edit-country-checkbox');
                cb.checked = selectedCountries.includes(parseInt(cb.value));
            });

            // Sort: checked items first, then others
            countryItems.sort((a, b) => {
                const aChecked = a.querySelector('.edit-country-checkbox').checked;
                const bChecked = b.querySelector('.edit-country-checkbox').checked;
                return (bChecked ? 1 : 0) - (aChecked ? 1 : 0);
            });

            // Re-append sorted elements
            countryItems.forEach(item => countryContainer.appendChild(item));
        }

        // Başka pazarda kullanılan ülkeleri devre dışı bırak (bu pazar hariç)
        applyCountryRestrictions('edit', mp.id);

        const form = document.getElementById('editMarketplaceForm');
        form.action = `/agency/settings/marketplaces/${mp.id}`;

        const editModal = new bootstrap.Modal(document.getElementById('editMarketplaceModal'));
        editModal.show();
    }

    function deleteMarketplace(id) {
        Swal.fire({
            title: 'Emin misiniz?',
            text: "Bu pazarı silmek istediğinize emin misiniz?",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Evet, Sil!',
            cancelButtonText: 'Vazgeç'
        }).then((result) => {
            if (result.isConfirmed) {
                const form = document.getElementById('delete-marketplace-form');
                form.action = `/agency/settings/marketplaces/${id}`;
                form.submit();
            }
        });
    }

    // Interactive Search Logic for Modals
    document.addEventListener('DOMContentLoaded', function () {
        // Setup Search Helper function
        function setupListSearch(searchBoxId, listContainerClass, itemClass) {
            const searchInput = document.getElementById(searchBoxId);
            if (!searchInput) return;

            searchInput.addEventListener('input', function () {
                const query = this.value.toLowerCase().trim();
                const container = this.closest('.border').querySelector('.' + listContainerClass);
                if (!container) return;

                const items = container.querySelectorAll('.' + itemClass);
                items.forEach(item => {
                    const textContent = item.querySelector('label').textContent.toLowerCase();
                    if (textContent.includes(query)) {
                        item.style.setProperty('display', '', 'important');
                    } else {
                        item.style.setProperty('display', 'none', 'important');
                    }
                });
            });
        }

        // Initialize Add Modal searches
        setupListSearch('lang_search_add', 'lang-list-add-container', 'lang-item');
        setupListSearch('country_search_add', 'country-list-add-container', 'country-item');

        // Initialize Edit Modal searches
        setupListSearch('lang_search_edit', 'lang-list-edit-container', 'lang-item');
        setupListSearch('country_search_edit', 'country-list-edit-container', 'country-item');

        // Reset search inputs on modal open/hidden to avoid search state persisting
        const modals = ['addMarketplaceModal', 'editMarketplaceModal'];
        modals.forEach(modalId => {
            const modalEl = document.getElementById(modalId);
            if (modalEl) {
                modalEl.addEventListener('hidden.bs.modal', function () {
                    const searchInputs = modalEl.querySelectorAll('input[type="text"][id$="_search_add"], input[type="text"][id$="_search_edit"]');
                    searchInputs.forEach(input => {
                        input.value = '';
                        input.dispatchEvent(new Event('input'));
                    });
                });

                // Specifically for add modal, reset toggle state
                if (modalId === 'addMarketplaceModal') {
                    modalEl.addEventListener('show.bs.modal', function () {
                        document.getElementById('add_local_only').checked = false;
                        toggleCountrySelection('add');
                        // Başka pazarda kullanılan ülkeleri devre dışı bırak
                        applyCountryRestrictions('add', null);
                    });
                }
            }
        });
    });
</script>

<style>
    .settings-icon-wrapper {
        width: 54px;
        height: 54px;
        background: white;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.8rem;
        box-shadow: 0 10px 25px rgba(99, 102, 241, 0.1);
    }
    .fw-800 { font-weight: 800; }
    .header-divider {
        height: 3px;
        width: 60px;
        background: linear-gradient(to right, var(--bs-primary), transparent);
        border-radius: 10px;
    }
    .avatar-circle-sm {
        width: 38px;
        height: 38px;
        background-color: rgba(14, 165, 233, 0.1);
        color: #0ea5e9;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-size: 1.1rem;
    }
    .country-item.country-disabled label { opacity: 0.6; cursor: not-allowed; }
    .country-item.country-disabled .form-check-input { cursor: not-allowed; }
    .bg-soft-info { background-color: rgba(14, 165, 233, 0.1); }
    .bg-soft-primary { background-color: rgba(99, 102, 241, 0.1); }
    .bg-soft-success { background-color: rgba(16, 185, 129, 0.1); }
    .bg-soft-danger { background-color: rgba(239, 68, 68, 0.1); }
</style>
@endsection