@extends('layouts.app')

@section('title', 'Satışçı Karnesi - ' . $satisci->ad_soyad)

@section('content')
    <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-24">
        <h6 class="fw-semibold mb-0">Satışçı Karnesi</h6>
        <div class="d-flex align-items-center gap-3">
            <select class="form-select radius-8 h-40-px w-120-px">
                <option>2024</option>
                <option>2023</option>
            </select>
            <select class="form-select radius-8 h-40-px w-150-px">
                <option>Ağustos</option>
                <option>Temmuz</option>
                <option selected>Haziran</option>
            </select>
            <button class="btn btn-outline-primary-600 radius-8 h-40-px d-flex align-items-center gap-2">
                <iconify-icon icon="solar:printer-outline" class="text-xl"></iconify-icon>
                Yazdır
            </button>
        </div>
    </div>

    <div class="row gy-4 mb-24">
        <!-- Profil ve Ana Skor -->
        <div class="col-xxl-4 col-xl-5">
            <div class="card h-100 radius-12 border-0 shadow-sm overflow-hidden">
                <div class="card-body p-0">
                    <div class="p-24 bg-primary-600 text-white d-flex align-items-center justify-content-between">
                        <div>
                            <h5 class="mb-4 text-white">{{ $satisci->ad_soyad }}</h5>
                            <p class="mb-0 text-sm opacity-75">{{ ucfirst($satisci->pozisyon) }}</p>
                        </div>
                        <div class="radius-8 bg-white text-primary-600 p-12 text-center">
                            <span class="d-block text-xs fw-bold">AI SCORE</span>
                            <h4 class="mb-0 fw-bold">88.3</h4>
                        </div>
                    </div>
                    <div class="p-24">
                        <div class="d-flex flex-column gap-3">
                            <div class="d-flex align-items-center justify-content-between">
                                <span class="text-secondary-light">Hedef Gerçekleşme</span>
                                <span class="fw-bold text-success-600">%102.4</span>
                            </div>
                            <div class="progress h-8-px radius-4">
                                <div class="progress-bar bg-success-600" role="progressbar" style="width: 102.4%"
                                    aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>

                            <div class="d-flex align-items-center justify-content-between">
                                <span class="text-secondary-light">Tahsilat Oranı</span>
                                <span class="fw-bold text-info-600">%78.5</span>
                            </div>
                            <div class="progress h-8-px radius-4">
                                <div class="progress-bar bg-info-600" role="progressbar" style="width: 78.5%"
                                    aria-valuenow="78.5" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>

                            <div class="d-flex align-items-center justify-content-between">
                                <span class="text-secondary-light">Kârlılık</span>
                                <span class="fw-bold text-primary-600">%14.2</span>
                            </div>
                            <div class="progress h-8-px radius-4">
                                <div class="progress-bar bg-primary-600" role="progressbar" style="width: 70%"
                                    aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Branş ve Şirket Dağılımı -->
        <div class="col-xxl-8 col-xl-7">
            <div class="row gy-4 h-100">
                <div class="col-sm-6">
                    <div class="card h-100 radius-12 border-0 shadow-sm">
                        <div class="card-header bg-transparent border-bottom p-20">
                            <h6 class="text-sm fw-bold mb-0">BRANŞ BAZLI ÜRETİM</h6>
                        </div>
                        <div class="card-body p-20 d-flex align-items-center justify-content-center">
                            <div id="bransDagilimiChart"></div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="card h-100 radius-12 border-0 shadow-sm">
                        <div class="card-header bg-transparent border-bottom p-20">
                            <h6 class="text-sm fw-bold mb-0">ŞİRKET BAZLI ÜRETİM</h6>
                        </div>
                        <div class="card-body p-20 d-flex align-items-center justify-content-center">
                            <div id="sirketDagilimiChart"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Aylık Performans Trendi -->
    <div class="card radius-12 border-0 shadow-sm mb-24">
        <div class="card-header bg-transparent border-bottom p-24">
            <h6 class="text-md fw-bold mb-0">Performans Trendi (AI Skor & Üretim)</h6>
        </div>
        <div class="card-body p-24">
            <div id="performansTrendChart"></div>
        </div>
    </div>

    <!-- Poliçe Detay Tablosu -->
    <div class="card radius-12 border-0 shadow-sm">
        <div class="card-header bg-transparent border-bottom p-24">
            <h6 class="text-md fw-bold mb-0">Son Gerçekleşen Satışlar</h6>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table hover-table mb-0">
                    <thead class="bg-neutral-50 text-secondary-light">
                        <tr>
                            <th>Tarih</th>
                            <th>Müşteri</th>
                            <th>Branş</th>
                            <th>Şirket</th>
                            <th class="text-end">Prim</th>
                            <th class="text-end">Komisyon</th>
                            <th class="text-center">Durum</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($performans['policeler'] as $police)
                            <tr>
                                <td>{{ $police->islem_tarihi->format('d.m.Y') }}</td>
                                <td>{{ $police->musteri->ad_soyad ?? 'Bilinmeyen' }}</td>
                                <td>{{ $police->brans->ad ?? 'Bilinmeyen' }}</td>
                                <td>{{ $police->sigortaSirketi->ad ?? 'Bilinmeyen' }}</td>
                                <td class="text-end fw-bold text-primary-light">₺{{ number_format($police->prim, 0, ',', '.') }}
                                </td>
                                <td class="text-end fw-bold text-success-600">
                                    ₺{{ number_format($police->komisyon, 0, ',', '.') }}</td>
                                <td class="text-center">
                                    <span class="badge bg-success-focus text-success-main radius-4">Aktif</span>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    @push('scripts')
        <script>
            // Branş Dağılımı Donut
            var bransOptions = {
                series: [40, 30, 20, 10],
                labels: ['Kasko', 'Trafik', 'Konut', 'Diğer'],
                chart: { type: 'donut', height: 250 },
                colors: ['#487FFF', '#28a745', '#ffc107', '#dc3545'],
                legend: { position: 'bottom', fontSize: '12px' },
                plotOptions: { pie: { donut: { size: '60%' } } }
            };
            new ApexCharts(document.querySelector("#bransDagilimiChart"), bransOptions).render();

            // Şirket Dağılımı Donut (Mock based on screenshot)
            var sirketOptions = {
                series: [35, 25, 20, 20],
                labels: ['Anadolu', 'Allianz', 'Aksigorta', 'HDI'],
                chart: { type: 'donut', height: 250 },
                colors: ['#1a1f4e', '#3b448a', '#5c6bc0', '#7986cb'],
                legend: { position: 'bottom', fontSize: '12px' },
                plotOptions: { pie: { donut: { size: '60%' } } }
            };
            new ApexCharts(document.querySelector("#sirketDagilimiChart"), sirketOptions).render();

            // Performans Trend Chart
            var trendOptions = {
                series: [{
                    name: 'AI Skoru',
                    type: 'column',
                    data: [75, 78, 82, 80, 85, 88]
                }, {
                    name: 'Üretim (₺K)',
                    type: 'line',
                    data: [120, 140, 180, 170, 200, 240]
                }],
                chart: { height: 350, type: 'line', toolbar: { show: false } },
                stroke: { width: [0, 4] },
                colors: ['#487FFF66', '#487FFF'],
                dataLabels: { enabled: true, enabledOnSeries: [1] },
                labels: ['Ocak', 'Şubat', 'Mart', 'Nisan', 'Mayıs', 'Haziran'],
                xaxis: { type: 'category' },
                legend: { position: 'top' }
            };
            new ApexCharts(document.querySelector("#performansTrendChart"), trendOptions).render();
        </script>
    @endpush
@endsection