@extends('agency.layouts.app')

@section('title', 'Pazaryeri 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">Pazaryeri Tanımlamaları</h1>
                    <p class="text-muted mb-0">Ürünlerinizi farklı dillerde, para birimlerinde ve kanallarda pazarlamak için satış pazaryerleri tanımlayın.</p>
                </div>
            </div>
            <div class="header-divider mt-4"></div>
        </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ı Pazaryerleri</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 Pazaryeri 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>Pazaryeri Adı</th>
                                    <th>Diller</th>
                                    <th>Para Birimleri</th>
                                    <th class="text-center">Varsayılan Dil / Para</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>
                                            <div class="d-flex flex-wrap gap-1">
                                                @foreach($mp->currencies as $curr)
                                                    <span class="badge bg-soft-warning text-warning fw-bold" style="font-size: 0.65rem; border-radius: 6px; color: #d97706 !important; background-color: rgba(217, 119, 6, 0.1);">{{ $curr->code }}</span>
                                                @endforeach
                                            </div>
                                        </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->currencies->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 pazaryeri tanımlanmamış. Yeni bir pazaryeri 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 Pazaryeri 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;">Pazaryeri 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-6 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 class="col-md-6 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 Para Birimleri *</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="curr_search_add" placeholder="Para birimi ara..." style="font-size: 0.8rem; outline: none; box-shadow: none; background: #fff;">
                                </div>
                                <div class="curr-list-add-container" style="max-height: 150px; overflow-y: auto; padding-right: 5px;">
                                    @foreach($currencies as $curr)
                                        <div class="form-check mb-2 curr-item">
                                            <input class="form-check-input" type="checkbox" name="currencies[]" value="{{ $curr->id }}" id="curr_add_{{ $curr->id }}">
                                            <label class="form-check-label text-dark small" for="curr_add_{{ $curr->id }}">
                                                {{ $curr->code }} ({{ $curr->symbol }})
                                            </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">Pazaryerini 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>Pazaryeri 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;">Pazaryeri 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-6 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 class="col-md-6 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 Para Birimleri *</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="curr_search_edit" placeholder="Para birimi ara..." style="font-size: 0.8rem; outline: none; box-shadow: none; background: #fff;">
                                </div>
                                <div class="curr-list-edit-container" style="max-height: 150px; overflow-y: auto; padding-right: 5px;">
                                    @foreach($currencies as $curr)
                                        <div class="form-check mb-2 curr-item">
                                            <input class="form-check-input edit-curr-checkbox" type="checkbox" name="currencies[]" value="{{ $curr->id }}" id="curr_edit_{{ $curr->id }}">
                                            <label class="form-check-label text-dark small" for="curr_edit_{{ $curr->id }}">
                                                {{ $curr->code }} ({{ $curr->symbol }})
                                            </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">Pazaryerini 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>
    function editMarketplace(mp, selectedLangs, selectedCurrs) {
        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);

        // 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 currency checkboxes to the top
        const currContainer = document.querySelector('.curr-list-edit-container');
        if (currContainer) {
            const currItems = Array.from(currContainer.querySelectorAll('.curr-item'));
            currItems.forEach(item => {
                const cb = item.querySelector('.edit-curr-checkbox');
                cb.checked = selectedCurrs.includes(parseInt(cb.value));
            });

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

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

        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 pazaryerini 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('curr_search_add', 'curr-list-add-container', 'curr-item');

        // Initialize Edit Modal searches
        setupListSearch('lang_search_edit', 'lang-list-edit-container', 'lang-item');
        setupListSearch('curr_search_edit', 'curr-list-edit-container', 'curr-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'));
                    });
                });
            }
        });
    });
</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;
    }
    .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