@extends('company.app')
@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
    <div class="row g-6">

        <!-- Earning Reports -->
        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-header pb-0 d-flex justify-content-between">
                    <div class="card-title mb-0">
                        <h5 class="mb-1">Hesap Özeti</h5>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row align-items-center g-md-8">
                        <div class="col-12 col-md-5 d-flex flex-column">
                            <div class="d-flex gap-2 align-items-center mb-3 flex-wrap">
                                <h2 class="mb-0">-₺7.014,89</h2>
                            </div>
                            <small class="text-body">Bu veri aktif bakiyenizi göstermektedir. </small>
                        </div>
                        <div class="col-12 col-md-7 ps-xl-8">
                            <div id="weeklyEarningReports"></div>
                        </div>
                    </div>
                    <div class="border rounded p-5 mt-5">
                        <div class="row gap-4 gap-sm-0">
                            <div class="col-12 col-sm-4">
                                <div class="d-flex gap-2 align-items-center">
                                    <div class="badge rounded bg-label-primary p-1">
                                        <i class="icon-base ti tabler-currency-dollar icon-18px"></i>
                                    </div>
                                    <h6 class="mb-0 fw-normal">Alınan Toplam Hizmet Bedeli</h6>
                                </div>
                                <h4 class="my-2">₺15.780.85</h4>
                                <div class="progress w-75" style="height:4px">
                                    <div
                                        class="progress-bar"
                                        role="progressbar"
                                        style="width: 65%"
                                        aria-valuenow="100"
                                        aria-valuemin="0"
                                        aria-valuemax="100"></div>
                                </div>
                            </div>
                            <div class="col-12 col-sm-4">
                                <div class="d-flex gap-2 align-items-center">
                                    <div class="badge rounded bg-label-info p-1">
                                        <i class="icon-base ti tabler-chart-pie-2 icon-18px"></i>
                                    </div>
                                    <h6 class="mb-0 fw-normal">Yapılan Toplam Ödeme</h6>
                                </div>
                                <h4 class="my-2">₺8.765,96</h4>
                                <div class="progress w-75" style="height:4px">
                                    <div
                                        class="progress-bar bg-info"
                                        role="progressbar"
                                        style="width: 50%"
                                        aria-valuenow="70"
                                        aria-valuemin="0"
                                        aria-valuemax="100"></div>
                                </div>
                            </div>
                            <div class="col-12 col-sm-4">
                                <div class="d-flex gap-2 align-items-center">
                                    <div class="badge rounded bg-label-danger p-1">
                                        <i class="icon-base ti tabler-brand-paypal icon-18px"></i>
                                    </div>
                                    <h6 class="mb-0 fw-normal">Kalan <br> Borç</h6>
                                </div>
                                <h4 class="my-2">₺7.014,89</h4>
                                <div class="progress w-75" style="height:4px">
                                    <div
                                        class="progress-bar bg-danger"
                                        role="progressbar"
                                        style="width: 65%"
                                        aria-valuenow="30"
                                        aria-valuemin="0"
                                        aria-valuemax="100"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--/ Earning Reports -->

        <!-- Support Tracker -->
        <div class="col-12 col-md-6">
            <div class="card h-100">
                <div class="card-header d-flex justify-content-between">
                    <div class="card-title mb-0">
                        <h5 class="mb-1">Destek Özeti</h5>
                    </div>
                </div>
                <div class="card-body row">
                    <div class="col-12 col-sm-4">
                        <div class="mt-lg-4 mt-lg-2 mb-lg-6 mb-2">
                            <h2 class="mb-0">164</h2>
                            <p class="mb-0">Toplam Talep</p>
                        </div>
                        <ul class="p-0 m-0">
                            <li class="d-flex gap-4 align-items-center mb-lg-3 pb-1">
                                <div class="badge rounded bg-label-primary p-1_5">
                                    <i class="icon-base ti tabler-ticket icon-md"></i>
                                </div>
                                <div>
                                    <h6 class="mb-0 text-nowrap">Açık Talepler</h6>
                                    <small class="text-body-secondary">24</small>
                                </div>
                            </li>
                            <li class="d-flex gap-4 align-items-center mb-lg-3 pb-1">
                                <div class="badge rounded bg-label-info p-1_5">
                                    <i class="icon-base ti tabler-circle-check icon-md"></i>
                                </div>
                                <div>
                                    <h6 class="mb-0 text-nowrap">Kapanmış Talepler</h6>
                                    <small class="text-body-secondary">140</small>
                                </div>
                            </li>
                            <li class="d-flex gap-4 align-items-center pb-1">
                                <div class="badge rounded bg-label-warning p-1_5">
                                    <i class="icon-base ti tabler-clock icon-md"></i>
                                </div>
                                <div>
                                    <h6 class="mb-0 text-nowrap">Ortalama Cevap Süresi</h6>
                                    <small class="text-body-secondary">3 Saat</small>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="col-12 col-md-8">
                        <div id="supportTracker"></div>
                    </div>
                </div>
            </div>
        </div>
        <!--/ Support Tracker -->

        <!-- Projects table -->
        <div class="col-xxl-12">
            <div class="card">
                <div class="table-responsive mb-4">
                    <table class="table datatable-project table-sm">
                        <thead class="border-top">
                        <tr>
                            <th></th>
                            <th></th>
                            <th>Başvuran Adı</th>
                            <th>İlan</th>
                            <th>Aksiyon</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
        <!--/ Projects table -->
    </div>
</div>
@endsection
@section('css')

@endsection
@section('js')

@endsection
@section('head')

@endsection