@extends('layouts.layout')

@section('title', 'İşletme Havuzu')
@section('header_title', 'İşletme Havuzu')
@section('header_subtitle', 'Taranmış ve sisteme kaydedilmiş tüm potansiyel müşteri veritabanı.')

@section('header_actions')
    <a href="{{ route('companies.export', request()->all()) }}" class="btn btn-success">
        <ion-icon name="download-outline"></ion-icon>
        Excel/CSV Olarak Dışa Aktar
    </a>
@endsection

@section('content')
<!-- Stats Grid -->
<div class="stats-grid" style="margin-bottom: 2rem;">
    <div class="stat-card" style="--card-accent: var(--primary); --card-accent-glow: rgba(93, 164, 107, 0.3);">
        <div class="stat-info">
            <h3>Toplam İşletme</h3>
            <div class="stat-value">{{ $totalCompanies }}</div>
        </div>
        <div class="stat-icon">
            <ion-icon name="business-outline"></ion-icon>
        </div>
    </div>
    <div class="stat-card" style="--card-accent: #33b3ff; --card-accent-glow: rgba(51, 179, 255, 0.3);">
        <div class="stat-info">
            <h3>Arama Bekleyen</h3>
            <div class="stat-value">{{ $pendingCount }}</div>
        </div>
        <div class="stat-icon">
            <ion-icon name="time-outline"></ion-icon>
        </div>
    </div>
    <div class="stat-card" style="--card-accent: var(--warning); --card-accent-glow: rgba(245, 158, 11, 0.3);">
        <div class="stat-info">
            <h3>Arananlar</h3>
            <div class="stat-value">{{ $calledCount }}</div>
        </div>
        <div class="stat-icon">
            <ion-icon name="call-outline"></ion-icon>
        </div>
    </div>
    <div class="stat-card" style="--card-accent: var(--success); --card-accent-glow: rgba(93, 164, 107, 0.3);">
        <div class="stat-info">
            <h3>İşlem Yapılanlar</h3>
            <div class="stat-value">{{ $processedCount }}</div>
        </div>
        <div class="stat-icon">
            <ion-icon name="checkmark-circle-outline"></ion-icon>
        </div>
    </div>
</div>

<!-- Filter Bar -->
<form action="{{ route('companies.index') }}" method="GET" class="filter-bar">
    <div class="filter-item">
        <label for="search">Arama Kelimesi</label>
        <input type="text" name="search" id="search" value="{{ request('search') }}" class="form-control" placeholder="Firma adı, tel, site, mail...">
    </div>

    <div class="filter-item">
        <label for="country">Ülke</label>
        <select name="country" id="country" class="form-select">
            <option value="">Tüm Ülkeler</option>
            @foreach($countries as $c)
                <option value="{{ $c }}" {{ request('country') == $c ? 'selected' : '' }}>{{ $c }}</option>
            @endforeach
        </select>
    </div>

    <div class="filter-item">
        <label for="city">Şehir</label>
        <select name="city" id="city" class="form-select">
            <option value="">Tüm Şehirler</option>
            @foreach($cities as $c)
                <option value="{{ $c }}" {{ request('city') == $c ? 'selected' : '' }}>{{ $c }}</option>
            @endforeach
        </select>
    </div>

    <div class="filter-item">
        <label for="category">Kategori</label>
        <select name="category" id="category" class="form-select">
            <option value="">Tüm Kategoriler</option>
            @foreach($categories as $c)
                <option value="{{ $c }}" {{ request('category') == $c ? 'selected' : '' }}>{{ $c }}</option>
            @endforeach
        </select>
    </div>

    <div class="filter-buttons">
        <button type="submit" class="btn btn-primary">
            <ion-icon name="funnel-outline"></ion-icon>
            Filtrele
        </button>
        @if(request()->anyFilled(['search', 'country', 'city', 'category']))
            <a href="{{ route('companies.index') }}" class="btn btn-secondary">
                Temizle
            </a>
        @endif
    </div>
</form>

<!-- Table Card -->
<div class="card">
    <div class="table-responsive">
        <table class="table">
            <thead>
                <tr>
                    <th>Firma Adı</th>
                    <th>Telefon</th>
                    <th>Web Sitesi</th>
                    <th>E-mail</th>
                    <th>Sosyal Medya</th>
                    <th>Arama Durumu</th>
                    <th>Konum (Ülke/Şehir)</th>
                    <th>Kategori</th>
                    <th>Kayıt Tarihi</th>
                </tr>
            </thead>
            <tbody>
                @forelse($companies as $company)
                    <tr class="company-row" style="cursor: pointer;"
                        data-id="{{ $company->id }}"
                        data-name="{{ $company->name }}"
                        data-phone="{{ $company->phone }}"
                        data-website="{{ $company->website }}"
                        data-email="{{ $company->email }}"
                        data-location="{{ $company->country }} / {{ $company->city }}"
                        data-category="{{ $company->category }}"
                        data-instagram="{{ $company->instagram }}"
                        data-facebook="{{ $company->facebook }}"
                        data-org-status="{{ $company->org_status }}"
                        data-org-notes="{{ $company->org_notes }}">
                        <td>
                            <div style="display: flex; align-items: center; gap: 8px;">
                                <ion-icon name="business-outline" style="color: var(--primary); font-size: 1.1rem;"></ion-icon>
                                <strong>{{ $company->name }}</strong>
                            </div>
                        </td>
                        <td>
                            @if($company->phone && $company->phone !== '-')
                                <a href="tel:{{ $company->phone }}" style="color: var(--text-primary); text-decoration: none; display: flex; align-items: center; gap: 4px;">
                                    <ion-icon name="call-outline" style="color: var(--primary);"></ion-icon>
                                    {{ $company->phone }}
                                </a>
                            @else
                                <span style="opacity: 0.5;">-</span>
                            @endif
                        </td>
                        <td>
                            @if($company->website && $company->website !== '-')
                                <a href="{{ $company->website }}" target="_blank" style="color: var(--primary); text-decoration: none; display: inline-flex; align-items: center; gap: 4px;" title="{{ $company->website }}">
                                    <ion-icon name="globe-outline"></ion-icon>
                                    Siteyi Aç
                                </a>
                            @else
                                <span style="opacity: 0.5;">-</span>
                            @endif
                        </td>
                        <td>
                            @if($company->email && $company->email !== '-')
                                <a href="mailto:{{ $company->email }}" style="color: var(--primary); text-decoration: none; display: inline-flex; align-items: center; gap: 4px;">
                                    <ion-icon name="mail-outline"></ion-icon>
                                    {{ $company->email }}
                                </a>
                            @else
                                <span style="opacity: 0.5;">-</span>
                            @endif
                        </td>
                        <td>
                            <div style="display: flex; gap: 8px;">
                                @if($company->instagram && $company->instagram !== '-')
                                    <a href="{{ $company->instagram }}" target="_blank" class="social-icon-btn" style="color: #e1306c; background: rgba(225, 48, 108, 0.1); width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem;" title="Instagram">
                                        <ion-icon name="logo-instagram"></ion-icon>
                                    </a>
                                @endif
                                @if($company->facebook && $company->facebook !== '-')
                                    <a href="{{ $company->facebook }}" target="_blank" class="social-icon-btn" style="color: #1877f2; background: rgba(24, 119, 242, 0.1); width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem;" title="Facebook">
                                        <ion-icon name="logo-facebook"></ion-icon>
                                    </a>
                                @endif
                                @if(($company->instagram == '-' || !$company->instagram) && ($company->facebook == '-' || !$company->facebook))
                                    <span style="opacity: 0.5;">-</span>
                                @endif
                            </div>
                        </td>
                        <td>
                            @if($company->org_status === 'Arandı')
                                <span class="badge badge-pending">Arandı</span>
                            @elseif($company->org_status === 'İşlem Yapıldı')
                                <span class="badge badge-completed">İşlem Yapıldı</span>
                            @else
                                <span class="badge" style="background-color: rgba(100, 110, 120, 0.1); border: 1px solid rgba(100, 110, 120, 0.2); color: var(--text-secondary);">Bekliyor</span>
                            @endif
                        </td>
                        <td>
                            <div style="display: flex; align-items: center; gap: 6px;">
                                <ion-icon name="location-outline" style="color: var(--primary);"></ion-icon>
                                <span>{{ $company->country }} / <strong>{{ $company->city }}</strong></span>
                            </div>
                        </td>
                        <td>
                            <span class="badge badge-processing" style="font-size: 0.75rem;">
                                {{ $company->category }}
                            </span>
                        </td>
                        <td>
                            <div style="display: flex; align-items: center; gap: 4px; opacity: 0.8; font-size: 0.85rem;">
                                <ion-icon name="time-outline"></ion-icon>
                                {{ $company->created_at->format('d.m.Y H:i') }}
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="9" style="text-align: center; color: var(--text-secondary); padding: 3rem;">
                            <ion-icon name="search-outline" style="font-size: 40px; opacity: 0.3; margin-bottom: 10px;"></ion-icon>
                            <p>Aradığınız kriterlere uygun hiçbir işletme bulunamadı.</p>
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <!-- Custom styled Laravel Pagination -->
    @if($companies->hasPages())
        <div class="pagination-wrapper">
            <div style="color: var(--text-secondary); font-size: 0.9rem;">
                Toplam <strong>{{ $companies->total() }}</strong> kayıttan <strong>{{ $companies->firstItem() }}-{{ $companies->lastItem() }}</strong> arası gösteriliyor.
            </div>
            <div>
                {{ $companies->links() }}
            </div>
        </div>
    @endif
</div>

<!-- Lead Details Modal -->
<div id="lead-details-modal" class="modal-backdrop" style="display: none;">
    <div class="modal-content">
        <button class="modal-close-btn">&times;</button>
        <div class="modal-header-section">
            <div class="modal-pin-icon"><ion-icon name="business-outline"></ion-icon></div>
            <div>
                <h3 id="modal-company-name" style="margin: 0; font-family: var(--font-title); font-size: 1.6rem; color: var(--text-primary);">Firma Adı</h3>
                <span id="modal-company-category" class="badge badge-completed" style="margin-top: 0.35rem; display: inline-block;">Kategori</span>
            </div>
        </div>
        <div class="modal-body-section">
            <div class="info-group">
                <label>Telefon</label>
                <div id="modal-company-phone" class="info-val">Telefon</div>
            </div>
            <div class="info-group">
                <label>E-Posta</label>
                <div id="modal-company-email" class="info-val">E-Posta</div>
            </div>
            <div class="info-group">
                <label>Web Sitesi</label>
                <div id="modal-company-website" class="info-val">Web Sitesi</div>
            </div>
            <div class="info-group">
                <label>Konum</label>
                <div id="modal-company-location" class="info-val">Konum</div>
            </div>
            
            <!-- Call Status & Note Editing form -->
            <div class="info-group" style="grid-column: span 2; margin-top: 0.5rem; border-top: 1px solid var(--border-color); padding-top: 1rem;">
                <label style="margin-bottom: 0.5rem; display: block;">Arama Durumu ve Görüşme Notu</label>
                <form id="update-status-form" style="display: flex; flex-direction: column; gap: 0.75rem;">
                    @csrf
                    <input type="hidden" id="status-company-id">
                    
                    <div style="display: flex; gap: 10px;">
                        <div style="flex: 1;">
                            <select id="status-select" class="form-select" style="padding: 0.6rem 0.8rem; font-size: 0.9rem;">
                                <option value="Bekliyor">Bekliyor</option>
                                <option value="Arandı">Arandı</option>
                                <option value="İşlem Yapıldı">İşlem Yapıldı</option>
                            </select>
                        </div>
                        <div>
                            <button type="submit" class="btn btn-primary" style="padding: 0.6rem 1.2rem; font-size: 0.9rem; height: 100%; display: flex; align-items: center; justify-content: center;">
                                <ion-icon name="save-outline" style="margin-right: 4px;"></ion-icon> Kaydet
                            </button>
                        </div>
                    </div>
                    
                    <div>
                        <textarea id="status-notes" class="form-control" rows="2" placeholder="Görüşme notlarını buraya yazın..." style="font-size: 0.9rem; resize: vertical;"></textarea>
                    </div>
                </form>
            </div>
            
            <div class="info-group" style="grid-column: span 2; margin-top: 0.5rem; border-top: 1px solid var(--border-color); padding-top: 1rem;">
                <label>Sosyal Medya Bağlantıları</label>
                <div class="social-links-flex" style="margin-top: 0.75rem; display: flex; gap: 10px;">
                    <a id="modal-company-instagram" href="#" target="_blank" class="btn btn-secondary btn-sm" style="display: inline-flex; align-items: center; gap: 6px; color: #e1306c;">
                        <ion-icon name="logo-instagram" style="font-size: 1.1rem;"></ion-icon> Instagram Profilini Aç
                    </a>
                    <a id="modal-company-facebook" href="#" target="_blank" class="btn btn-secondary btn-sm" style="display: inline-flex; align-items: center; gap: 6px; color: #1877f2;">
                        <ion-icon name="logo-facebook" style="font-size: 1.1rem;"></ion-icon> Facebook Sayfasını Aç
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Company Details Modal Handler
        document.querySelectorAll('.company-row').forEach(function(row) {
            row.addEventListener('click', function(e) {
                // Prevent trigger if clicking on links or buttons
                if (e.target.closest('a') || e.target.closest('button') || e.target.closest('ion-icon') || e.target.closest('select') || e.target.closest('form')) {
                    return;
                }
                
                const data = this.dataset;
                document.getElementById('modal-company-name').textContent = data.name;
                document.getElementById('modal-company-category').textContent = data.category;
                document.getElementById('modal-company-phone').textContent = data.phone || '-';
                document.getElementById('modal-company-email').textContent = data.email || '-';
                document.getElementById('modal-company-website').textContent = data.website || '-';
                document.getElementById('modal-company-location').textContent = data.location || '-';
                
                // Set status form values
                document.getElementById('status-company-id').value = data.id;
                document.getElementById('status-select').value = data.orgStatus || 'Bekliyor';
                document.getElementById('status-notes').value = data.orgNotes || '';
                
                const instaBtn = document.getElementById('modal-company-instagram');
                if (data.instagram && data.instagram !== '-') {
                    instaBtn.href = data.instagram;
                    instaBtn.style.display = 'inline-flex';
                } else {
                    instaBtn.style.display = 'none';
                }
                
                const fbBtn = document.getElementById('modal-company-facebook');
                if (data.facebook && data.facebook !== '-') {
                    fbBtn.href = data.facebook;
                    fbBtn.style.display = 'inline-flex';
                } else {
                    fbBtn.style.display = 'none';
                }
                
                const modal = document.getElementById('lead-details-modal');
                modal.style.display = 'flex';
                setTimeout(function() {
                    modal.querySelector('.modal-content').style.transform = 'scale(1)';
                }, 10);
            });
        });

        // AJAX Form submit for status update
        const statusForm = document.getElementById('update-status-form');
        if (statusForm) {
            statusForm.addEventListener('submit', function(e) {
                e.preventDefault();
                
                const companyId = document.getElementById('status-company-id').value;
                const status = document.getElementById('status-select').value;
                const notes = document.getElementById('status-notes').value;
                
                const saveBtn = this.querySelector('button[type="submit"]');
                saveBtn.disabled = true;
                saveBtn.innerHTML = 'Kaydediliyor...';
                
                fetch(`/companies/${companyId}/status`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({ status, notes })
                })
                .then(res => res.json())
                .then(data => {
                    if (data.status === 'success') {
                        // Reload page to keep counts and list completely in sync
                        window.location.reload();
                    } else {
                        alert('Güncelleme sırasında hata oluştu.');
                        saveBtn.disabled = false;
                        saveBtn.innerHTML = '<ion-icon name="save-outline" style="margin-right: 4px;"></ion-icon> Kaydet';
                    }
                })
                .catch(err => {
                    console.error(err);
                    alert('Bir bağlantı hatası oluştu.');
                    saveBtn.disabled = false;
                    saveBtn.innerHTML = '<ion-icon name="save-outline" style="margin-right: 4px;"></ion-icon> Kaydet';
                });
            });
        }

        // Close modal handlers
        const closeBtn = document.querySelector('.modal-close-btn');
        if (closeBtn) {
            closeBtn.addEventListener('click', closeModal);
        }
        
        const modalBackdrop = document.getElementById('lead-details-modal');
        if (modalBackdrop) {
            modalBackdrop.addEventListener('click', function(e) {
                if (e.target === this) closeModal();
            });
        }

        function closeModal() {
            const modal = document.getElementById('lead-details-modal');
            if (modal) {
                modal.querySelector('.modal-content').style.transform = 'scale(0.95)';
                setTimeout(function() {
                    modal.style.display = 'none';
                }, 150);
            }
        }
    });
</script>
@endpush