@extends('agency.layouts.app')

@section('title', 'Tedarikçiler')
@section('page_title', 'Tedarikçi Yönetimi')

@push('styles')
<style>
/* ─── PAGE VARIABLES ─── */
:root {
    --supplier-primary: #2563eb;
    --supplier-primary-light: #eff6ff;
    --supplier-success: #10b981;
    --supplier-warning: #f59e0b;
    --supplier-danger: #ef4444;
    --supplier-purple: #8b5cf6;
}



/* ─── TOOLBAR ─── */
.suppliers-toolbar {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #f1f5f9;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
}

.search-wrap {
    position: relative;
    flex: 1;
    min-width: 220px;
}

.search-wrap i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 14px;
    pointer-events: none;
}

.search-wrap input {
    padding-left: 36px;
    border-radius: 10px;
    border: 1.5px solid #e2e8f0;
    font-size: .875rem;
    background: #f8fafc;
    height: 40px;
    width: 100%;
    transition: border-color .2s, box-shadow .2s;
}

.search-wrap input:focus {
    outline: none;
    border-color: var(--supplier-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
    background: #fff;
}

.filter-select {
    border-radius: 10px;
    border: 1.5px solid #e2e8f0;
    font-size: .875rem;
    background: #f8fafc;
    height: 40px;
    padding: 0 .75rem;
    transition: border-color .2s;
}

.filter-select:focus {
    outline: none;
    border-color: var(--supplier-primary);
    background: #fff;
}

/* ─── TABLE ─── */
.suppliers-table-wrap {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #f1f5f9;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
    overflow: hidden;
}

.suppliers-table {
    width: 100%;
    border-collapse: collapse;
}

.suppliers-table thead th {
    padding: 13px 16px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #64748b;
    background: #f8fafc;
    border-bottom: 1px solid #f1f5f9;
    white-space: nowrap;
}

.suppliers-table tbody tr {
    border-bottom: 1px solid #f8fafc;
    transition: background .15s;
    cursor: pointer;
}

.suppliers-table tbody tr:last-child {
    border-bottom: none;
}

.suppliers-table tbody tr:hover {
    background: #fafbff;
}

.suppliers-table td {
    padding: 14px 16px;
    vertical-align: middle;
}

/* Avatar */
.s-avatar {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .9rem;
    flex-shrink: 0;
    background: linear-gradient(135deg, #2563eb, #1e40af);
    color: #fff;
}

.s-avatar.corporate {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.s-name {
    font-weight: 600;
    color: #0f172a;
    font-size: .875rem;
}

.s-email {
    font-size: .78rem;
    color: #64748b;
}

/* Badges */
.badge-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: .72rem;
    font-weight: 600;
}

.badge-status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.bs-active {
    background: #d1fae5;
    color: #065f46;
}

.bs-active::before {
    background: #10b981;
}

.bs-inactive {
    background: #f1f5f9;
    color: #475569;
}

.bs-inactive::before {
    background: #94a3b8;
}

.bs-blocked {
    background: #fee2e2;
    color: #991b1b;
}

.bs-blocked::before {
    background: #ef4444;
}

.bs-potential {
    background: #fef3c7;
    color: #92400e;
}

.bs-potential::before {
    background: #f59e0b;
}

/* Supplier Type Badges */
.badge-supplier-type {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: .75rem;
    font-weight: 600;
}

.bst-hotel { background: #eff6ff; color: #2563eb; }
.bst-transportation { background: #ede9fe; color: #8b5cf6; }
.bst-restaurant { background: #fff7ed; color: #ea580c; }
.bst-insurance { background: #ecfdf5; color: #059669; }
.bst-visa { background: #fdf2f8; color: #db2777; }
.bst-airline { background: #f0fdfa; color: #0d9488; }

/* Action buttons */
.row-actions {
    display: flex;
    gap: 6px;
    opacity: 0;
    transition: opacity .15s;
}

.suppliers-table tbody tr:hover .row-actions {
    opacity: 1;
}

.btn-row {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: all .15s;
    cursor: pointer;
}

.btn-row-view {
    background: #eff6ff;
    color: #2563eb;
}

.btn-row-edit {
    background: #f0fdf4;
    color: #16a34a;
}

.btn-row-delete {
    background: #fff1f2;
    color: #e11d48;
}

.btn-row:hover {
    transform: scale(1.1);
}

/* Pagination */
.pagination-wrap {
    padding: 1rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #f1f5f9;
}

/* Bulk action bar */
.bulk-bar {
    background: #2563eb;
    color: #fff;
    border-radius: 12px;
    padding: .75rem 1.25rem;
    display: none;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 4px 20px rgba(37, 99, 235, .3);
}

.bulk-bar.show {
    display: flex;
}

.bulk-count {
    font-weight: 700;
    font-size: .9rem;
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
}

.empty-icon {
    font-size: 3.5rem;
    color: #cbd5e1;
    margin-bottom: 1rem;
}

.empty-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #475569;
}

.empty-desc {
    font-size: .875rem;
    color: #94a3b8;
    margin-top: .4rem;
}


</style>
@endpush

@section('content')
<div class="container-fluid">



    {{-- ─── BULK ACTION BAR ─── --}}
    <div class="bulk-bar" id="bulkBar">
        <span class="bulk-count"><span id="bulkCount">0</span> tedarikçi seçildi</span>
        <div class="d-flex gap-2 ms-auto">
            <button class="btn btn-sm btn-light" onclick="bulkStatus('active')"><i class="fas fa-check me-1"></i>Aktif Et</button>
            <button class="btn btn-sm btn-light" onclick="bulkStatus('inactive')"><i class="fas fa-pause me-1"></i>Pasif Et</button>
            <button class="btn btn-sm" style="background:#ef4444;color:#fff" onclick="bulkDelete()"><i class="fas fa-trash me-1"></i>Sil</button>
        </div>
    </div>

    {{-- ─── TOOLBAR ─── --}}
    <form method="GET" action="{{ route('agency.suppliers.index') }}" id="filterForm">
        <div class="suppliers-toolbar">
            <div class="search-wrap">
                <i class="fas fa-search"></i>
                <input type="text" name="search" value="{{ request('search') }}"
                       placeholder="Tedarikçi adı, yetkili, telefon ara…" id="searchInput">
            </div>

            <select name="status" class="filter-select" onchange="document.getElementById('filterForm').submit()">
                <option value="">Tüm Durumlar</option>
                <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>Aktif</option>
                <option value="inactive" {{ request('status') == 'inactive' ? 'selected' : '' }}>Pasif</option>
                <option value="blocked" {{ request('status') == 'blocked' ? 'selected' : '' }}>Engellenmiş</option>
                <option value="potential" {{ request('status') == 'potential' ? 'selected' : '' }}>Potansiyel</option>
            </select>

            <select name="supplier_type" class="filter-select" onchange="document.getElementById('filterForm').submit()">
                <option value="">Tüm Hizmet Türleri</option>
                @foreach(\App\Models\Supplier\Supplier::supplierTypes() as $val => $label)
                    <option value="{{ $val }}" {{ request('supplier_type') == $val ? 'selected' : '' }}>{{ $label }}</option>
                @endforeach
            </select>

            <select name="type" class="filter-select" onchange="document.getElementById('filterForm').submit()">
                <option value="">Tüm Yapılar</option>
                <option value="individual" {{ request('type') == 'individual' ? 'selected' : '' }}>Kişiler</option>
                <option value="corporate" {{ request('type') == 'corporate' ? 'selected' : '' }}>Şirketler</option>
            </select>

            @if(request()->hasAny(['search', 'status', 'supplier_type', 'type']))
                <a href="{{ route('agency.suppliers.index') }}" class="btn btn-sm btn-outline-secondary"
                   style="border-radius:10px;height:40px;white-space:nowrap;display:inline-flex;align-items:center">
                    <i class="fas fa-times me-1"></i>Temizle
                </a>
            @endif

            <div class="ms-auto d-flex gap-2">
                <a href="{{ route('agency.suppliers.create') }}" class="btn btn-sm text-white"
                   style="background:linear-gradient(135deg,#2563eb,#1e40af);border-radius:10px;height:40px;white-space:nowrap;display:inline-flex;align-items:center">
                    <i class="fas fa-plus me-1"></i>Yeni Tedarikçi
                </a>
            </div>
        </div>
    </form>

    {{-- ─── TABLE ─── --}}
    <div class="suppliers-table-wrap">
        @if($suppliers->isEmpty())
            <div class="empty-state">
                <i class="fas fa-handshake empty-icon"></i>
                <div class="empty-title">Henüz tedarikçi bulunamadı</div>
                <div class="empty-desc">Yeni bir tedarikçi ekleyerek fiyat listelerini yönetmeye başlayın.</div>
                <a href="{{ route('agency.suppliers.create') }}" class="btn mt-3 text-white"
                   style="background:linear-gradient(135deg,#2563eb,#1e40af);border-radius:10px">
                    <i class="fas fa-plus me-1"></i>Tedarikçi Ekle
                </a>
            </div>
        @else
            <table class="suppliers-table">
                <thead>
                    <tr>
                        <th style="width:40px"><input type="checkbox" id="selectAll"
                                  style="width:16px;height:16px;cursor:pointer;accent-color:#2563eb"></th>
                        <th>TEDARİKÇİ</th>
                        <th>YETKİLİ KİŞİ</th>
                        <th>İLETİŞİM</th>
                        <th>YAPI</th>
                        <th>HİZMET TÜRÜ</th>
                        <th>DURUM</th>
                        <th>KAYIT TARİHİ</th>
                        <th style="width:60px">İŞLEMLER</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($suppliers as $supplier)
                        <tr class="supplier-row" data-id="{{ $supplier->id }}">
                            <td onclick="event.stopPropagation()">
                                <input type="checkbox" class="row-check" value="{{ $supplier->id }}"
                                       style="width:16px;height:16px;cursor:pointer;accent-color:#2563eb">
                            </td>
                            <td>
                                <div class="d-flex align-items-center gap-3">
                                    <div class="s-avatar {{ $supplier->type === 'corporate' ? 'corporate' : '' }}">
                                        {{ $supplier->initials }}
                                    </div>
                                    <div>
                                        <div class="s-name">{{ $supplier->full_name }}</div>
                                        @if($supplier->city)
                                            <div class="s-email"><i class="fas fa-map-marker-alt me-1" style="color:#94a3b8"></i>{{ $supplier->city }}@if($supplier->district), {{ $supplier->district }}@endif</div>
                                        @endif
                                    </div>
                                </div>
                            </td>
                            <td>
                                @if($supplier->type === 'corporate' && $supplier->responsible_person_name)
                                    <div class="s-name" style="font-size: .83rem"><i class="fas fa-user-tie me-1 text-muted"></i>{{ $supplier->responsible_person_name }}</div>
                                    @if($supplier->responsible_person_phone)
                                        <div class="s-email mt-1">{{ $supplier->responsible_person_phone }}</div>
                                    @endif
                                @else
                                    <span style="color:#cbd5e1">—</span>
                                @endif
                            </td>
                            <td>
                                @if($supplier->phone)
                                    <div class="s-email"><i class="fas fa-phone me-1"></i>{{ $supplier->phone }}</div>
                                @elseif($supplier->phones && count($supplier->phones) > 0)
                                    <div class="s-email"><i class="fas fa-phone me-1"></i>{{ $supplier->phones[0] }}</div>
                                @endif
                                
                                @if($supplier->emails && count($supplier->emails) > 0)
                                    <div class="s-email mt-1"><i class="fas fa-envelope me-1"></i>{{ $supplier->emails[0] }}</div>
                                @endif
                            </td>
                            <td>
                                <span style="font-size:.78rem;color:#64748b">
                                    {{ $supplier->type === 'corporate' ? '🏢 Şirket' : '👤 Kişi' }}
                                </span>
                            </td>
                            <td>
                                <span class="badge-supplier-type bst-{{ $supplier->supplier_type }}">
                                    @if($supplier->supplier_type === 'hotel') <i class="fas fa-hotel"></i>
                                    @elseif($supplier->supplier_type === 'transportation') <i class="fas fa-shuttle-van"></i>
                                    @elseif($supplier->supplier_type === 'restaurant') <i class="fas fa-utensils"></i>
                                    @elseif($supplier->supplier_type === 'insurance') <i class="fas fa-shield-alt"></i>
                                    @elseif($supplier->supplier_type === 'visa') <i class="fas fa-passport"></i>
                                    @elseif($supplier->supplier_type === 'airline') <i class="fas fa-plane"></i>
                                    @endif
                                    {{ $supplier->supplier_type_label }}
                                </span>
                            </td>
                            <td>
                                <span class="badge-status
                                           @if($supplier->status === 'active') bs-active
                                           @elseif($supplier->status === 'blocked') bs-blocked
                                           @elseif($supplier->status === 'potential') bs-potential
                                           @else bs-inactive @endif">
                                    {{ $supplier->status_label }}
                                </span>
                            </td>
                            <td>
                                <span style="font-size:.75rem;color:#94a3b8">{{ $supplier->created_at->format('d.m.Y') }}</span>
                            </td>
                            <td onclick="event.stopPropagation()">
                                <div class="row-actions">
                                    <button class="btn-row btn-row-delete" title="Sil"
                                            onclick="deleteSupplier({{ $supplier->id }})">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>

            {{-- Pagination --}}
            @if($suppliers->hasPages())
                <div class="pagination-wrap">
                    <div style="font-size:.8rem;color:#64748b">
                        {{ $suppliers->firstItem() }}–{{ $suppliers->lastItem() }} / {{ $suppliers->total() }} tedarikçi
                    </div>
                    {{ $suppliers->withQueryString()->links('vendor.pagination.bootstrap-5') }}
                </div>
            @endif
        @endif
    </div>

</div>

{{-- Delete Form --}}
<form id="deleteForm" method="POST" style="display:none">
    @csrf @method('DELETE')
</form>
@endsection

@push('scripts')
<script>
// Select All checkbox
const selectAll = document.getElementById('selectAll');
const bulkBar = document.getElementById('bulkBar');
const bulkCount = document.getElementById('bulkCount');

function updateBulkBar() {
    const checked = document.querySelectorAll('.row-check:checked');
    if (checked.length > 0) {
        bulkBar.classList.add('show');
        bulkCount.textContent = checked.length;
    } else {
        bulkBar.classList.remove('show');
    }
}

selectAll?.addEventListener('change', function () {
    document.querySelectorAll('.row-check').forEach(cb => cb.checked = this.checked);
    updateBulkBar();
});

document.querySelectorAll('.row-check').forEach(cb => {
    cb.addEventListener('change', updateBulkBar);
});

// Single Delete Action
function deleteSupplier(id) {
    if (!confirm('Bu tedarikçiyi ve ilişkili tüm fiyat listelerini silmek istediğinizden emin misiniz?')) return;
    const form = document.getElementById('deleteForm');
    form.action = `/agency/suppliers/${id}`;
    form.submit();
}

// Bulk Actions
function bulkDelete() {
    const ids = [...document.querySelectorAll('.row-check:checked')].map(cb => cb.value);
    if (!ids.length || !confirm(`${ids.length} tedarikçiyi silmek istediğinizden emin misiniz?`)) return;

    fetch('{{ route("agency.suppliers.bulk-delete") }}', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
        body: JSON.stringify({ ids })
    }).then(r => r.json()).then(d => d.success && location.reload());
}

function bulkStatus(status) {
    const ids = [...document.querySelectorAll('.row-check:checked')].map(cb => cb.value);
    if (!ids.length) return;

    fetch('{{ route("agency.suppliers.bulk-status") }}', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
        body: JSON.stringify({ ids, status })
    }).then(r => r.json()).then(d => d.success && location.reload());
}

// Search debounce
let searchTimer;
document.getElementById('searchInput')?.addEventListener('input', function () {
    clearTimeout(searchTimer);
    searchTimer = setTimeout(() => document.getElementById('filterForm').submit(), 500);
});

// Auto-open drawer if requested
@if(request('open_supplier_id'))
    document.addEventListener('DOMContentLoaded', () => {
        setTimeout(() => {
            openSupplierDrawer({{ request('open_supplier_id') }}, '{{ request('tab', 'general') }}');
        }, 500);
    });
@endif
</script>
@endpush