@extends('layouts.app')

@section('title', 'Kârlılık 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">Kârlılık Raporu</h6>
        <div class="d-flex align-items-center gap-2">
            <select class="form-select radius-8 h-40-px w-120-px">
                <option>2024</option>
                <option>2023</option>
            </select>
            <div class="dropdown">
                <button class="btn btn-outline-success-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.karlilik.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.karlilik.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-6">
            <div class="card p-24 radius-12 border-0 shadow-sm h-100">
                <h6 class="text-md fw-bold mb-16">AYLIK GELİR/GİDER DENGESİ</h6>
                <div id="gelirGiderChart"></div>
            </div>
        </div>
        <div class="col-xxl-6">
            <div class="card p-24 radius-12 border-0 shadow-sm h-100">
                <h6 class="text-md fw-bold mb-16">GİDER DAĞILIMI (PASTA)</h6>
                <div id="giderDagilimiChart"></div>
            </div>
        </div>
    </div>

    <div class="card radius-12 border-0 shadow-sm overflow-hidden mb-24">
        <div class="card-header bg-indigo-600 text-white p-20">
            <h6 class="text-white mb-0">Yıllık Finansal Özet Tablosu</h6>
        </div>
        <div class="table-responsive">
            <table class="table bordered-table mb-0">
                <thead class="bg-neutral-100 text-secondary-light">
                    <tr>
                        <th class="bg-indigo-light text-white">Ay</th>
                        <th class="text-end">Brüt Komisyon</th>
                        <th class="text-end">Ek Gelirler</th>
                        <th class="text-end text-danger-main">Operasyonel Gider</th>
                        <th class="text-end text-danger-main">Satıcı Payları</th>
                        <th class="text-end fw-bold">Net Kâr</th>
                        <th class="text-center">Kâr Marjı</th>
                    </tr>
                </thead>
                <tbody>
                    @php
                        $months = ['Ocak', 'Şubat', 'Mart', 'Nisan', 'Mayıs', 'Haziran', 'Temmuz', 'Ağustos'];
                    @endphp
                    @foreach($months as $month)
                        <tr>
                            <td class="fw-bold bg-neutral-50">{{ $month }}</td>
                            <td class="text-end">₺242.000</td>
                            <td class="text-end">₺18.500</td>
                            <td class="text-end text-danger-main">₺45.000</td>
                            <td class="text-end text-danger-main">₺96.800</td>
                            <td class="text-end fw-bold text-success-600">₺118.700</td>
                            <td class="text-center">
                                <span class="text-sm fw-bold">%45.6</span>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
                <tfoot class="bg-neutral-200 fw-bold">
                    <tr>
                        <td>TOPLAM</td>
                        <td class="text-end">₺1.936.000</td>
                        <td class="text-end">₺148.000</td>
                        <td class="text-end text-danger-main">₺360.000</td>
                        <td class="text-end text-danger-main">₺774.400</td>
                        <td class="text-end text-success-600">₺949.600</td>
                        <td class="text-center">%46.8</td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>

    @push('styles')
        <style>
            .bg-indigo-600 {
                background-color: #3f51b5 !important;
            }

            .bg-indigo-light {
                background-color: #5c6bc0 !important;
            }
        </style>
    @endpush

    @push('scripts')
        <script>
            var gelirGiderOptions = {
                series: [{
                    name: 'Gelir',
                    data: [220, 240, 210, 250, 280, 260, 242, 230]
                }, {
                    name: 'Gider',
                    data: [110, 115, 105, 120, 140, 130, 123, 118]
                }],
                chart: { type: 'bar', height: 350, toolbar: { show: false } },
                colors: ['#28a745', '#dc3545'],
                plotOptions: { bar: { columnWidth: '55%', borderRadius: 4 } },
                xaxis: { categories: ['Oca', 'Şub', 'Mar', 'Nis', 'May', 'Haz', 'Tem', 'Ağu'] },
                legend: { position: 'top' }
            };
            new ApexCharts(document.querySelector("#gelirGiderChart"), gelirGiderOptions).render();

            var giderOptions = {
                series: [45, 30, 15, 10],
                labels: ['Satıcı Payları', 'Faaliyet Giderleri', 'Tedarikçi Payı', 'Diğer'],
                chart: { type: 'donut', height: 350 },
                colors: ['#3f51b5', '#ff9800', '#f44336', '#9e9e9e'],
                legend: { position: 'bottom' }
            };
            new ApexCharts(document.querySelector("#giderDagilimiChart"), giderOptions).render();
        </script>
    @endpush
@endsection