@extends('layouts.app')

@section('title', 'Hedef Raporu')

@section('content')
    <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-24">
        <h6 class="fw-semibold mb-0">Hedef Raporu</h6>
        <div class="d-flex align-items-center gap-2">
            <select class="form-select radius-8 h-40-px w-150-px">
                <option>Tüm Branşlar</option>
                <option>Kasko</option>
                <option>Trafik</option>
                <option>Sağlık</option>
            </select>
            <div class="dropdown">
                <button class="btn btn-outline-info-600 radius-8 h-40-px d-flex align-items-center gap-2 dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                    <iconify-icon icon="solar:file-download-outline" class="text-xl"></iconify-icon>
                    Export
                </button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="{{ route('export.hedef.excel') }}">
                        <iconify-icon icon="vscode-icons:file-type-excel" class="me-2"></iconify-icon>
                        Excel (.xlsx)
                    </a></li>
                    <li><a class="dropdown-item" href="{{ route('export.hedef.pdf') }}">
                        <iconify-icon icon="vscode-icons:file-type-pdf2" class="me-2"></iconify-icon>
                        PDF (.pdf)
                    </a></li>
                </ul>
            </div>
        </div>
    </div>

    <div class="row gy-4 mb-24">
        <div class="col-xxl-8">
            <div class="card h-100 radius-12 border-0 shadow-sm">
                <div class="card-header bg-transparent border-bottom p-24">
                    <h6 class="text-md fw-bold mb-0">Aylık Hedef Gerçekleşme Trendi</h6>
                </div>
                <div class="card-body p-24">
                    <div id="hedefTrendChart"></div>
                </div>
            </div>
        </div>
        <div class="col-xxl-4">
            <div class="card h-100 radius-12 border-0 shadow-sm">
                <div class="card-header bg-transparent border-bottom p-24">
                    <h6 class="text-md fw-bold mb-0">Branş Bazlı Hedef Durumu</h6>
                </div>
                <div class="card-body p-24">
                    @php
                        $branslar = [
                            ['ad' => 'Kasko', 'percent' => 105, 'color' => 'success'],
                            ['ad' => 'Trafik', 'percent' => 92, 'color' => 'info'],
                            ['ad' => 'Sağlık', 'percent' => 78, 'color' => 'warning'],
                            ['ad' => 'Konut', 'percent' => 112, 'color' => 'success'],
                            ['ad' => 'Ferdi Kaza', 'percent' => 45, 'color' => 'danger'],
                        ];
                    @endphp
                    <div class="d-flex flex-column gap-24">
                        @foreach($branslar as $brans)
                            <div>
                                <div class="d-flex align-items-center justify-content-between mb-8">
                                    <span class="text-secondary-light fw-medium">{{ $brans['ad'] }}</span>
                                    <span class="text-sm fw-bold text-{{ $brans['color'] }}-600">%{{ $brans['percent'] }}</span>
                                </div>
                                <div class="progress h-8-px radius-4">
                                    <div class="progress-bar bg-{{ $brans['color'] }}-600"
                                        style="width: {{ $brans['percent'] }}%"></div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card radius-12 border-0 shadow-sm overflow-hidden">
        <div class="card-header bg-transparent border-bottom p-24">
            <h6 class="text-md fw-bold mb-0">Satışçı Hedef Gerçekleşme Listesi</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>Satışçı</th>
                            <th class="text-end">Hedef Tutar</th>
                            <th class="text-end">Gerçekleşen Tutar</th>
                            <th class="text-center">İlerleme</th>
                            <th class="text-center">Durum</th>
                        </tr>
                    </thead>
                    <tbody>
                        @php
                            $mockTargets = [
                                ['name' => 'Mehmet Demir', 'target' => 150000, 'actual' => 162000, 'p' => 108, 'color' => 'success'],
                                ['name' => 'Ayşe Kaya', 'target' => 120000, 'actual' => 114000, 'p' => 95, 'color' => 'info'],
                                ['name' => 'Fatma Şahin', 'count' => 180000, 'target' => 180000, 'actual' => 140000, 'p' => 77, 'color' => 'warning'],
                                ['name' => 'Ali Çelik', 'target' => 100000, 'actual' => 105000, 'p' => 105, 'color' => 'success'],
                                ['name' => 'Zeynep Yıldız', 'target' => 200000, 'actual' => 230000, 'p' => 115, 'color' => 'success'],
                            ];
                        @endphp
                        @foreach($mockTargets as $t)
                            <tr>
                                <td class="fw-bold">{{ $t['name'] }}</td>
                                <td class="text-end">₺{{ number_format($t['target'], 0, ',', '.') }}</td>
                                <td class="text-end">₺{{ number_format($t['actual'], 0, ',', '.') }}</td>
                                <td class="text-center" style="width: 250px;">
                                    <div class="progress h-8-px radius-4">
                                        <div class="progress-bar bg-{{ $t['color'] }}-600" style="width: {{ $t['p'] }}%"></div>
                                    </div>
                                </td>
                                <td class="text-center">
                                    <span class="text-sm fw-bold text-{{ $t['color'] }}-600">%{{ $t['p'] }}</span>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    @push('scripts')
        <script>
            var options = {
                series: [{
                    name: 'Hedef',
                    data: [1500, 1500, 1600, 1600, 1800, 1800]
                }, {
                    name: 'Gerçekleşen',
                    data: [1420, 1550, 1650, 1580, 1920, 2050]
                }],
                chart: { type: 'line', height: 350, toolbar: { show: false } },
                colors: ['#487FFF', '#28a745'],
                stroke: { curve: 'smooth', width: 3 },
                markers: { size: 4 },
                xaxis: { categories: ['Ocak', 'Şubat', 'Mart', 'Nisan', 'Mayıs', 'Haziran'] },
                legend: { position: 'top' }
            };
            new ApexCharts(document.querySelector("#hedefTrendChart"), options).render();
        </script>
    @endpush
@endsection