@php
    $statusSteps = [
        'potential' => ['label' => 'Potansiyel', 'icon' => 'fa-lightbulb'],
        'offer_sent' => ['label' => 'Teklif', 'icon' => 'fa-paper-plane'],
        'confirmed' => ['label' => 'Satış', 'icon' => 'fa-check-circle'],
        'completed' => ['label' => 'Tamamlandı', 'icon' => 'fa-flag-checkered'],
    ];
    $currentStatus = $reservation->status;
    $statusIndex = array_search($currentStatus, array_keys($statusSteps));
    if ($statusIndex === false) $statusIndex = 0;
@endphp

<x-quick-view.layout class="qv-sales-wrapper qv-wrapper">
    {{-- HEADER --}}
    <x-quick-view.header>
        <x-slot:avatar>
            <div class="qv-avatar-big" style="background: {{ $reservation->status_color }}15; color: {{ $reservation->status_color }}">
                <i class="fas {{ $reservation->productType->icon ?? 'fa-shopping-cart' }}"></i>
            </div>
        </x-slot:avatar>

        <x-slot:title>
            <div class="d-flex align-items-center gap-2">
                <h3 class="inline-editable mb-0" data-field="title" data-id="{{ $reservation->id }}" data-url="{{ route('agency.sales.update-field', $reservation) }}">{{ $reservation->title ?? $reservation->reservation_code }}</h3>
                <span class="badge" style="background: {{ $reservation->status_color }}15; color: {{ $reservation->status_color }}; font-size: 0.7rem; border: 1px solid {{ $reservation->status_color }}30;">
                    {{ $reservation->status_label }}
                </span>
            </div>
            <div class="qv-header-subtitle">
                <i class="fas fa-user me-1"></i> <a href="javascript:void(0)" onclick="openCustomerDrawer({{ $reservation->customer_id }})" class="text-decoration-none fw-bold">{{ $reservation->customer->full_name }}</a>
                <span class="mx-2 text-muted">•</span>
                <i class="fas fa-calendar-alt me-1"></i> {{ $reservation->start_date->translatedFormat('d M Y') }}
            </div>
        </x-slot:title>
    </x-quick-view.header>

    {{-- TIMELINE --}}
    <div class="qv-timeline-container p-4 border-bottom bg-white">
        <div class="qv-timeline">
            @php 
                $reached = true;
            @endphp
            @foreach($statusSteps as $key => $step)
                @php 
                    $isCurrent = ($key == $currentStatus);
                    $itemClass = $isCurrent ? 'active' : ($reached ? 'completed' : '');
                @endphp
                <div class="qv-timeline-item {{ $itemClass }}" onclick="updateSaleStatus('{{ $key }}')">
                    <div class="qv-timeline-icon">
                        <i class="fas {{ $step['icon'] }}"></i>
                        <div class="qv-timeline-check"><i class="fas fa-check"></i></div>
                    </div>
                    <div class="qv-timeline-label">{{ $step['label'] }}</div>
                </div>
                @if($isCurrent) @php $reached = false; @endphp @endif
            @endforeach
        </div>
    </div>

    {{-- CONTENT --}}
    <x-quick-view.main>
        <x-slot:sidebar>
            <x-quick-view.tab id="general" label="Genel" icon="fa-th-large" active="true" />
            <x-quick-view.tab id="products" label="Ürünler" icon="fa-box" />
            <x-quick-view.tab id="estimates" label="Tahminler" icon="fa-calculator" />
            <x-quick-view.tab id="invoices" label="Faturalar" icon="fa-file-invoice-dollar" />
            <x-quick-view.tab id="documents" label="Belgeler" icon="fa-folder-open" />
            <x-quick-view.tab id="activities" label="Geçmiş" icon="fa-history" />
        </x-slot:sidebar>

        <x-quick-view.content>
            {{-- TAB: GENEL --}}
            <div id="qv-tab-general" class="qv-tab-panel active">
                <div class="row g-4">
                    <div class="col-md-7">
                        <div class="qv-section mb-4">
                            <h4 class="qv-section-title">Satış Bilgileri</h4>
                            <div class="qv-info-grid">
                                <div class="qv-info-item">
                                    <label>Rezervasyon Kodu</label>
                                    <div>{{ $reservation->reservation_code }}</div>
                                </div>
                                <div class="qv-info-item">
                                    <label>Durum</label>
                                    <div class="inline-editable" data-field="status" data-type="select" data-id="{{ $reservation->id }}" data-options='@json(collect($statusSteps)->map(fn($v,$k)=>['value'=>$k,'label'=>$v['label']])->values())' data-url="{{ route('agency.sales.update-field', $reservation) }}">
                                        {{ $reservation->status_label }}
                                    </div>
                                </div>
                                <div class="qv-info-item">
                                    <label>Başlangıç Tarihi</label>
                                    <div class="inline-editable" data-field="start_date" data-type="date" data-id="{{ $reservation->id }}" data-url="{{ route('agency.sales.update-field', $reservation) }}">
                                        {{ $reservation->start_date->format('Y-m-d') }}
                                    </div>
                                </div>
                                <div class="qv-info-item">
                                    <label>Bitiş Tarihi</label>
                                    <div class="inline-editable" data-field="end_date" data-type="date" data-id="{{ $reservation->id }}" data-url="{{ route('agency.sales.update-field', $reservation) }}">
                                        {{ $reservation->end_date ? $reservation->end_date->format('Y-m-d') : '—' }}
                                    </div>
                                </div>
                                <div class="qv-info-item">
                                    <label>Sorumlu Personel</label>
                                    <div class="inline-editable" data-field="assigned_to" data-type="select" data-id="{{ $reservation->id }}" data-options='@json($agents->map(fn($u)=>['value'=>$u->id,'label'=>$u->full_name])->values())' data-url="{{ route('agency.sales.update-field', $reservation) }}">
                                        {{ $reservation->assignedAgent->full_name ?? 'Atanmamış' }}
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="qv-section">
                            <h4 class="qv-section-title">Finansal Özet</h4>
                            <div class="row g-3">
                                <div class="col-sm-4">
                                    <div class="qv-stat-card">
                                        <label>Toplam Tutar</label>
                                        <div class="value">₺{{ number_format($reservation->total_amount, 2) }}</div>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="qv-stat-card">
                                        <label>Ödenen</label>
                                        <div class="value text-success">₺{{ number_format($reservation->paid_amount, 2) }}</div>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="qv-stat-card">
                                        <label>Kalan</label>
                                        <div class="value text-danger">₺{{ number_format($reservation->remaining_amount, 2) }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-5">
                        <div class="qv-section mb-4">
                            <h4 class="qv-section-title">Özel Alanlar</h4>
                            <div id="salesCustomFields">
                                <p class="text-muted small">Henüz özel alan tanımlanmamış.</p>
                                <button class="btn btn-outline-primary btn-sm w-100 mt-2" onclick="manageCustomFields()">
                                    <i class="fas fa-plus me-1"></i> Alan Ekle
                                </button>
                            </div>
                        </div>

                        <div class="qv-section">
                            <h4 class="qv-section-title">Notlar</h4>
                            <div class="qv-notes-box">
                                <label>Müşteri Notu</label>
                                <div class="inline-editable" data-field="customer_note" data-type="textarea" data-id="{{ $reservation->id }}" data-url="{{ route('agency.sales.update-field', $reservation) }}">
                                    {{ $reservation->customer_note ?? 'Not bulunmuyor...' }}
                                </div>
                                <hr>
                                <label>Dahili Not</label>
                                <div class="inline-editable" data-field="internal_note" data-type="textarea" data-id="{{ $reservation->id }}" data-url="{{ route('agency.sales.update-field', $reservation) }}">
                                    {{ $reservation->internal_note ?? 'Sadece çalışanlar görebilir...' }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- TAB: ÜRÜNLER --}}
            <div id="qv-tab-products" class="qv-tab-panel">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h4 class="qv-section-title mb-0">Satış Kalemleri</h4>
                    <button class="btn btn-primary btn-sm" onclick="showAddItemModal()">
                        <i class="fas fa-plus me-1"></i> Yeni Ürün/Hizmet Ekle
                    </button>
                </div>

                <div class="table-responsive">
                    <table class="table qv-table">
                        <thead>
                            <tr>
                                <th>Ürün / Hizmet</th>
                                <th class="text-center">Adet</th>
                                <th class="text-end">Birim Fiyat</th>
                                <th class="text-end">Toplam</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($reservation->items as $item)
                                <tr>
                                    <td>
                                        <div class="fw-bold">{{ $item->name }}</div>
                                        <div class="text-muted small">{{ $item->productType->name ?? '' }}</div>
                                    </td>
                                    <td class="text-center">{{ (float)$item->quantity }}</td>
                                    <td class="text-end">{{ number_format($item->unit_price, 2) }} {{ $item->currency }}</td>
                                    <td class="text-end fw-bold">{{ number_format($item->total_price, 2) }} {{ $item->currency }}</td>
                                    <td class="text-end">
                                        <button class="btn btn-link btn-sm text-danger" onclick="removeItem({{ $item->id }})"><i class="fas fa-trash"></i></button>
                                    </td>
                                </tr>
                            @empty
                                @if($reservation->product)
                                    <tr>
                                        <td>
                                            <div class="fw-bold">{{ $reservation->product->name }}</div>
                                            <div class="text-muted small">{{ $reservation->productType->name }}</div>
                                        </td>
                                        <td class="text-center">{{ $reservation->adult_count + $reservation->child_count }}</td>
                                        <td class="text-end">{{ number_format($reservation->unit_price, 2) }} {{ $reservation->currency }}</td>
                                        <td class="text-end fw-bold">{{ number_format($reservation->total_amount, 2) }} {{ $reservation->currency }}</td>
                                        <td></td>
                                    </tr>
                                @else
                                    <tr>
                                        <td colspan="5" class="text-center p-4 text-muted">Henüz ürün eklenmemiş.</td>
                                    </tr>
                                @endif
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            <div id="qv-tab-estimates" class="qv-tab-panel">Tahminler modülü yakında...</div>
            <div id="qv-tab-invoices" class="qv-tab-panel">Faturalar modülü yakında...</div>
            <div id="qv-tab-documents" class="qv-tab-panel">Belgeler modülü yakında...</div>

            {{-- TAB: GEÇMİŞ (AKTİVİTELER) --}}
            <div id="qv-tab-activities" class="qv-tab-panel">
                <div class="qv-activities-timeline">
                    @forelse($reservation->activities->sortByDesc('created_at') as $activity)
                        <div class="qv-activity-item">
                            <div class="qv-activity-icon" style="background: var(--cp-light); color: var(--cp);">
                                <i class="fas fa-history"></i>
                            </div>
                            <div class="qv-activity-content">
                                <div class="d-flex justify-content-between">
                                    <div class="fw-bold">{{ $activity->subject }}</div>
                                    <div class="text-muted small">{{ $activity->created_at->diffForHumans() }}</div>
                                </div>
                                <div class="text-muted small">{{ $activity->description }}</div>
                                <div class="text-end mt-1">
                                    <span class="badge bg-light text-muted">{{ $activity->performer->full_name ?? 'Sistem' }}</span>
                                </div>
                            </div>
                        </div>
                    @empty
                        <p class="text-center p-5 text-muted">Henüz aktivite kaydı bulunmuyor.</p>
                    @endforelse
                </div>
            </div>
        </x-quick-view.content>
    </x-quick-view.main>

    {{-- MODAL: ÜRÜN EKLE --}}
    <div class="modal fade" id="qvAddItemModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Yeni Ürün / Hizmet Ekle</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="qvAddItemForm">
                        <div class="mb-3">
                            <label class="form-label">Ürün/Hizmet Adı</label>
                            <input type="text" name="name" class="form-control" required placeholder="Örn: Ekstra Yatak, Boğaz Turu vb.">
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Adet</label>
                                    <input type="number" name="quantity" class="form-control" value="1" step="0.01" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Birim Fiyat</label>
                                    <div class="input-group">
                                        <input type="number" name="unit_price" class="form-control" step="0.01" required>
                                        <select name="currency" class="form-select" style="max-width: 80px;">
                                            <option value="TRY">TRY</option>
                                            <option value="USD">USD</option>
                                            <option value="EUR">EUR</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">İptal</button>
                    <button type="button" class="btn btn-primary" onclick="submitAddItem()">Ekle</button>
                </div>
            </div>
        </div>
    </div>

    <x-quick-view.footer>
        <div class="d-flex justify-content-between w-100 align-items-center">
            <div class="text-muted small">
                Oluşturulma: {{ $reservation->created_at->format('d.m.Y H:i') }} - {{ $reservation->creator->full_name ?? 'Sistem' }}
            </div>
            <div class="d-flex gap-2">
                <button class="btn btn-outline-secondary btn-sm" onclick="closeQuickView()">Kapat</button>
                <a href="{{ route('agency.sales.edit', $reservation) }}" class="btn btn-primary btn-sm">Tam Düzenleme</a>
            </div>
        </div>
    </x-quick-view.footer>
</x-quick-view.layout>

<script>
function updateSaleStatus(newStatus) {
    if (newStatus === '{{ $currentStatus }}') return;

    Swal.fire({
        title: 'Durum Güncellensin mi?',
        text: `Satış aşaması güncellenecektir.`,
        icon: 'question',
        showCancelButton: true,
        confirmButtonText: 'Evet, Güncelle',
        cancelButtonText: 'Vazgeç'
    }).then((result) => {
        if (result.isConfirmed) {
            fetch('{{ route("agency.sales.update-field", $reservation) }}', {
                method: 'PATCH',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({
                    field: 'status',
                    value: newStatus
                })
            })
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    openSaleDrawer({{ $reservation->id }});
                }
            });
        }
    });
}

function showAddItemModal() {
    const modal = new bootstrap.Modal(document.getElementById('qvAddItemModal'));
    modal.show();
}

function submitAddItem() {
    const form = document.getElementById('qvAddItemForm');
    const formData = new FormData(form);
    const data = Object.fromEntries(formData.entries());

    fetch('{{ route("agency.sales.items.store", $reservation) }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify(data)
    })
    .then(res => res.json())
    .then(data => {
        if (data.success) {
            Swal.fire('Başarılı', data.message, 'success');
            bootstrap.Modal.getInstance(document.getElementById('qvAddItemModal')).hide();
            openSaleDrawer({{ $reservation->id }}, 'products');
        } else {
            Swal.fire('Hata', data.message, 'error');
        }
    });
}

function removeItem(itemId) {
    Swal.fire({
        title: 'Emin misiniz?',
        text: "Bu ürün satıştan kaldırılacaktır!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6',
        confirmButtonText: 'Evet, sil!',
        cancelButtonText: 'İptal'
    }).then((result) => {
        if (result.isConfirmed) {
            fetch(`/agency/sales/items/${itemId}`, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            })
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    Swal.fire('Silindi', data.message, 'success');
                    openSaleDrawer({{ $reservation->id }}, 'products');
                }
            });
        }
    });
}

function manageCustomFields() {
    Swal.fire('Bilgi', 'Özel alan yönetimi yakında eklenecek.', 'info');
}
</script>

<style>
.qv-timeline-container { padding: 2.5rem 1rem !important; }
.qv-timeline {
    display: flex;
    justify-content: space-between;
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}
.qv-timeline::before {
    content: '';
    position: absolute;
    top: 22px;
    left: 50px;
    right: 50px;
    height: 2px;
    background: #f1f5f9;
    z-index: 0;
}
.qv-timeline-item {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s;
}
.qv-timeline-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #cbd5e1;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}
.qv-timeline-check {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 18px;
    height: 18px;
    background: #10b981;
    border-radius: 50%;
    color: #fff;
    font-size: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    opacity: 0;
    transform: scale(0);
    transition: all 0.3s;
}
.qv-timeline-label {
    margin-top: 12px;
    font-size: 0.68rem;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
    transition: all 0.3s;
}

/* Completed States */
.qv-timeline-item.completed .qv-timeline-icon {
    border-color: #10b981;
    color: #10b981;
}
.qv-timeline-item.completed .qv-timeline-check {
    opacity: 1;
    transform: scale(1);
}
.qv-timeline-item.completed .qv-timeline-label {
    color: #10b981;
}

/* Active State */
.qv-timeline-item.active .qv-timeline-icon {
    border-color: #10b981;
    background: #10b981;
    color: #fff;
    transform: scale(1.15);
    box-shadow: 0 0 0 5px rgba(16, 185, 129, 0.1);
}
.qv-timeline-item.active .qv-timeline-label {
    color: #065f46;
    font-weight: 900;
}

/* Line Progress Logic (Simplified) */
.qv-timeline-item.completed::after {
    content: '';
    position: absolute;
    top: 22px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: #10b981;
    z-index: -1;
}
.qv-timeline-item:last-child::after { display: none; }

/* Hover Effect */
.qv-timeline-item:hover .qv-timeline-icon {
    border-color: #10b981;
    color: #10b981;
    transform: translateY(-3px);
}

.qv-stat-card {
    background: #f8fafc;
    border-radius: 12px;
    padding: 1rem;
    border: 1px solid #f1f5f9;
}
.qv-stat-card label { font-size: 0.65rem; font-weight: 700; color: #64748b; text-transform: uppercase; display: block; margin-bottom: 0.25rem; }
.qv-stat-card .value { font-size: 1.1rem; font-weight: 800; color: #1e293b; }

.qv-info-grid { display: flex; flex-direction: column; gap: 1rem; }
.qv-info-item label { font-size: 0.75rem; font-weight: 600; color: #94a3b8; margin-bottom: 0.2rem; display: block; }
.qv-info-item div { font-size: 0.9rem; color: #1e293b; font-weight: 500; }

.qv-notes-box { background: #fffbeb; border: 1px solid #fef3c7; border-radius: 12px; padding: 1rem; }
.qv-notes-box label { font-size: 0.7rem; font-weight: 700; color: #b45309; text-transform: uppercase; margin-bottom: 0.5rem; display: block; }

.qv-activities-timeline { display: flex; flex-direction: column; gap: 1.5rem; position: relative; padding-left: 1rem; }
.qv-activities-timeline::before { content: ''; position: absolute; left: 1.5rem; top: 0; bottom: 0; width: 2px; background: #f1f5f9; z-index: 0; }
.qv-activity-item { position: relative; z-index: 1; display: flex; gap: 1rem; }
.qv-activity-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; flex-shrink: 0; border: 2px solid #fff; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
.qv-activity-content { flex: 1; background: #f8fafc; border: 1px solid #f1f5f9; border-radius: 12px; padding: 1rem; }
</style>