@extends('admin.dashboard.layouts.app')


@section('title', panel_setting_title('Yönetici Paneli'))



@push('style-libraries')
    <!-- Feather CSS -->
    <link rel="stylesheet" href="{{ asset('dashboard/plugins/feather/feather.css') }}">
    <!-- Datepicker CSS -->
    <link rel="stylesheet" href="{{ asset('dashboard/css/bootstrap-datetimepicker.min.css') }}">
    <!-- Datatables CSS -->
    <link rel="stylesheet" href="{{ asset('dashboard/plugins/datatables/datatables.min.css') }}">
    <link rel="stylesheet" href="{{ asset('dashboard/css/dashboard.css') }}">
@endpush



@push('styles')

@endpush

@section('content')

    <div class="page-wrapper">
        <div class="content container-fluid">
            <div class="py-4">
                <div class="row">
                    <div class="col-lg-3 col-md-6 col-12 mb-3">
                        <div class="mini-card-bg-custom h-100">
                            <div class="d-flex flex-column">
                                <div class="svg-icon-bg mb-3">
                                    <div class="svg-icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"
                                            viewBox="0 0 32 32" fill="none">
                                            <path
                                                d="M29.3333 16.8267V19.5733C29.3333 20.32 28.72 20.9333 27.96 20.9333H25.3867C23.9467 20.9333 22.6267 19.88 22.5067 18.44C22.4267 17.6 22.7467 16.8133 23.3067 16.2667C23.8 15.76 24.48 15.4667 25.2267 15.4667H27.96C28.72 15.4667 29.3333 16.08 29.3333 16.8267Z"
                                                fill="#1126aa" />
                                            <path
                                                d="M20.5067 18.6133C20.3867 17.2133 20.8933 15.84 21.9067 14.84C22.76 13.9733 23.9467 13.4667 25.2267 13.4667H25.9867C26.36 13.4667 26.6667 13.16 26.6133 12.7867C26.2533 10.2 24.0133 8.20001 21.3333 8.20001H7.99999C5.05332 8.20001 2.66666 10.5867 2.66666 13.5333V22.8667C2.66666 25.8133 5.05332 28.2 7.99999 28.2H21.3333C24.0267 28.2 26.2533 26.2 26.6133 23.6133C26.6667 23.24 26.36 22.9333 25.9867 22.9333H25.3867C22.8533 22.9333 20.72 21.04 20.5067 18.6133ZM17.3333 15.8667H9.33332C8.78666 15.8667 8.33332 15.4267 8.33332 14.8667C8.33332 14.3067 8.78666 13.8667 9.33332 13.8667H17.3333C17.88 13.8667 18.3333 14.32 18.3333 14.8667C18.3333 15.4133 17.88 15.8667 17.3333 15.8667Z"
                                                fill="#1126aa" />
                                            <path
                                                d="M18.9467 5.30665C19.2933 5.66665 18.9867 6.19999 18.48 6.19999H8.04001C6.58668 6.19999 5.22668 6.62665 4.09334 7.35999C3.57334 7.69332 2.86668 7.33332 3.12001 6.75999C3.86668 5.01332 5.61334 3.79999 7.62668 3.79999H15.12C16.6667 3.79999 18.04 4.34665 18.9467 5.30665Z"
                                                fill="#1126aa" />
                                        </svg>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <p class="p-0 m-0 mini-card-title "> Toplam Varlıklar</p>
                                </div>
                                <div class="d-flex align-items-center justify-content-between">
                                    <p class="price">592,323₺</p>
                                    <div class="bg-danger-custom p-3 rounded-3">
                                        -0.89%
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 col-12 mb-3">
                        <div class="mini-card-bg-custom h-100">
                            <div class="d-flex flex-column">
                                <div class="svg-icon-bg mb-3">
                                    <div class="svg-icon">
                                        <i class="fas fa-thumbs-up" style="font-size: 28px"></i>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <p class="p-0 m-0 mini-card-title ">
                                        Başarılı İşlemler</p>
                                </div>
                                <div class="d-flex align-items-center justify-content-between">
                                    <p class="success-item">5</p>
                                    {{-- <div class="bg-danger-custom">
                                            -0.89%
                                        </div> --}}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 col-12 mb-3">
                        <div class="mini-card-bg-custom h-100">
                            <div class="d-flex flex-column">
                                <div class="svg-icon-bg mb-3">
                                    <i class="fas fa-handshake" style="font-size: 28px"></i>
                                </div>
                                <div class="mb-3">
                                    <p class="p-0 m-0 mini-card-title ">
                                        Toplam Bireysel</p>
                                </div>
                                <div class="d-flex align-items-center justify-content-between">
                                    <p class="success-item">66</p>
                                    {{-- <div class="bg-danger-custom">
                                            -0.89%
                                        </div> --}}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 col-12 mb-3">
                        <div class="mini-card-bg-custom h-100">
                            <div class="d-flex flex-column">
                                <div class="svg-icon-bg mb-3">
                                    <div class="svg-icon">
                                        <i class="fas fa-gem" style="font-size: 28px"></i>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <p class="p-0 m-0 mini-card-title ">
                                        Toplam Varlıklar</p>
                                </div>
                                <div class="d-flex align-items-center justify-content-between">
                                    <p class="success-item">108,532₺</p>
                                    {{-- <div class="bg-danger-custom">
                                            -0.89%
                                        </div> --}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-8 col-12">
                    <div class="card">
                        <canvas id="animatedChart" height="400" class="p-4"></canvas>
                    </div>
                </div>
                <div class="col-lg-4 col-12">
                    <div class="card">
                        <canvas id="polarChart" class="p-4" height="300"></canvas>
                    </div>
                </div>
                <div class="col-lg-8 col-12">

                    <div class="card p-4">
                        <div class="position-sticky">
                            <div class="px-2 mb-3 d-flex align-items-center justify-content-between flex-wrap">
                                <p class="m-0 p-0 h5 text-white-primary-color">Cüzdan İşlemleri</p>
                                <a href="#" class="text-decoration-none btn btn-yellow-custom">Tümünü Gör <i
                                        class="fa-solid fa-arrow-right"></i></a>
                            </div>
                            <hr style="border-bottom: 1px solid #1126aa !important;  ">
                            <table id="dashboardHomeTable">
                                <thead>
                                    <tr>
                                        <th>Müşteri</th>
                                        <th>Alıcı</th>
                                        <th>Tutar</th>
                                        <th>Tarih</th>
                                        <th>Durum</th>
                                        <th>Detay</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>Ahmet Yılmaz</td>
                                        <td>Garanti Bankası</td>
                                        <td>₺500</td>
                                        <td>15/02/2025</td>
                                        <td><span class="btn-success-custom  rounded-1">Başarılı</span></td>
                                        <td class="d-flex align-items-start justify-content-start"><button
                                                data-bs-toggle="modal" data-bs-target="#exampleModal2"
                                                class="btn-details p-0 m-0"> <i class="fa-solid fa-eye"></i></button></td>
                                    </tr>
                                    <tr>
                                        <td>Ayşe Demir</td>
                                        <td>Garanti Bankası</td>
                                        <td>₺1200</td>
                                        <td>16/02/2025</td>
                                        <td><span class="btn-danger-custom  rounded-1">Başarısız</span></td>
                                        <td class="d-flex align-items-start justify-content-start"><button
                                                data-bs-toggle="modal" data-bs-target="#exampleModal2"
                                                class="btn-details p-0 m-0"><i class="fa-solid fa-eye"></i></button></td>
                                    </tr>
                                    <tr>
                                        <td>Murat Kaya</td>
                                        <td>Garanti Bankası</td>
                                        <td>₺800</td>
                                        <td>17/02/2025</td>
                                        <td><span class="btn-warning-custom  rounded-1">Beklemede</span></td>
                                        <td class="d-flex align-items-start justify-content-start"><button
                                                data-bs-toggle="modal" data-bs-target="#exampleModal2"
                                                class="btn-details p-0 m-0"><i class="fa-solid fa-eye"></i></button></td>
                                    </tr>
                                    <tr>
                                        <td>Elif Korkmaz</td>
                                        <td>Garanti Bankası</td>
                                        <td>₺400</td>
                                        <td>18/02/2025</td>
                                        <td><span class="btn-info-custom  rounded-1">İade</span></td>
                                        <td class="d-flex align-items-start justify-content-start"><button
                                                data-bs-toggle="modal" data-bs-target="#exampleModal2"
                                                class="btn-details p-0 m-0"><i class="fa-solid fa-eye"></i></button></td>
                                    </tr>
                                </tbody>
                            </table>
                            <!-- Modal -->
                        </div>
                        <div class="modal fade z-3" id="exampleModal2" tabindex="-1"
                            aria-labelledby="exampleModalLabel2" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h1 class="modal-title fs-5" id="exampleModalLabel2">Detay</h1>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                            aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        ...
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-danger-custom py-2 px-3"
                                            data-bs-dismiss="modal"><i class="fa-solid fa-xmark me-2"></i>Kapat</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-12 h-100 ">

                    <div class="height-custom-test p-4">
                        <div class="position-sticky">
                            <div class="px-2 mb-3 d-flex align-items-center justify-content-between flex-wrap">
                                <p class="m-0 p-0 h5 text-white-primary-color">Pos İşlemleri</p>
                                <a href="#" class="text-decoration-none btn btn-yellow-custom">Tümünü Gör <i
                                        class="fa-solid fa-arrow-right"></i></a>
                            </div>
                            <hr style="border-bottom: 1px solid #1126aa !important; ">
                        </div>
                        <div class="height-custom">
                            <div>
                                <div class="d-flex align-items-center justify-content-between mb-2">
                                    <p class="p-0 m-0 username-last">Akın Demir</p>
                                    <p class="m-0 p-0 date-last">24.02.2025</p>
                                </div>
                                <div class="d-flex align-items-center justify-content-between">
                                    <div class="d-flex align-items-start flex-column gap-2">
                                        <p class="p-0 m-0 price-last">100₺</p>
                                        <p class="p-0 m-0 btn-danger-custom py-1 px-3 rounded-2">Başarısız</p>
                                    </div>
                                    <div>
                                        <button class="btn-details p-0 m-0" data-bs-toggle="modal"
                                            data-bs-target="#exampleModal1">
                                            <i class="fa-solid fa-eye"></i>
                                        </button>
                                    </div>
                                </div>
                                <hr>
                            </div>
                            <div>
                                <div class="d-flex align-items-center justify-content-between mb-2">
                                    <p class="p-0 m-0 username-last">Akın Demir</p>
                                    <p class="m-0 p-0 date-last">24.02.2025</p>
                                </div>
                                <div class="d-flex align-items-center justify-content-between">
                                    <div class="d-flex align-items-start flex-column gap-2">
                                        <p class="p-0 m-0 price-last">1.241,00₺</p>
                                        <p class="p-0 m-0 btn-success-custom py-1 px-3 rounded-2">Başarılı</p>
                                    </div>
                                    <div>
                                        <button class="btn-details p-0 m-0" data-bs-toggle="modal"
                                            data-bs-target="#exampleModal1">
                                            <i class="fa-solid fa-eye"></i>
                                        </button>
                                    </div>
                                </div>
                                <hr>
                            </div>
                            <div>
                                <div class="d-flex align-items-center justify-content-between mb-2">
                                    <p class="p-0 m-0 username-last">Akın Demir</p>
                                    <p class="m-0 p-0 date-last">24.02.2025</p>
                                </div>
                                <div class="d-flex align-items-center justify-content-between">
                                    <div class="d-flex align-items-start flex-column gap-2">
                                        <p class="p-0 m-0 price-last">1.000₺</p>
                                        <p class="p-0 m-0 btn-warning-custom py-1 px-3 rounded-2">Bekleniyor</p>
                                    </div>
                                    <div>
                                        <button class="btn-details p-0 m-0" data-bs-toggle="modal"
                                            data-bs-target="#exampleModal1">
                                            <i class="fa-solid fa-eye"></i>
                                        </button>
                                    </div>
                                </div>
                                <hr>
                            </div>
                            <div>
                                <div class="d-flex align-items-center justify-content-between mb-2">
                                    <p class="p-0 m-0 username-last">Akın Demir</p>
                                    <p class="m-0 p-0 date-last">24.02.2025</p>
                                </div>
                                <div class="d-flex align-items-center justify-content-between">
                                    <div class="d-flex align-items-start flex-column gap-2">
                                        <p class="p-0 m-0 price-last">23.100₺</p>
                                        <p class="p-0 m-0 btn-info-custom py-1 px-3 rounded-2">İade</p>
                                    </div>
                                    <div>
                                        <button class="btn-details p-0 m-0" data-bs-toggle="modal"
                                            data-bs-target="#exampleModal1">
                                            <i class="fa-solid fa-eye"></i>
                                        </button>
                                    </div>
                                </div>
                                <hr>
                            </div>
                            <div>
                                <div class="d-flex align-items-center justify-content-between mb-2">
                                    <p class="p-0 m-0 username-last">Akın Demir</p>
                                    <p class="m-0 p-0 date-last">24.02.2025</p>
                                </div>
                                <div class="d-flex align-items-center justify-content-between">
                                    <div class="d-flex align-items-start flex-column gap-2">
                                        <p class="p-0 m-0 price-last">100₺</p>
                                        <p class="p-0 m-0 btn-danger-custom py-1 px-3 rounded-2">Başarısız</p>
                                    </div>
                                    <div>
                                        <button class="btn-details p-0 m-0" data-bs-toggle="modal"
                                            data-bs-target="#exampleModal1">
                                            <i class="fa-solid fa-eye"></i>
                                        </button>
                                    </div>
                                </div>
                                <hr>
                            </div>
                        </div>
                    </div>

                    <!-- Modal -->
                    <div class="modal fade" id="exampleModal1" tabindex="-1" aria-labelledby="exampleModalLabel1"
                        aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h1 class="modal-title fs-5" id="exampleModalLabel1">Son İşlemler Detay</h1>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    ...
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-danger-custom" data-bs-dismiss="modal"><i
                                            class="fa-solid fa-xmark me-2"></i>Kapat</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('script-libraries')
    <!-- Feather Icon JS -->
    <script src="{{ asset('dashboard/js/feather.min.js') }}"></script>
    <!-- Slimscroll JS -->
    <script src="{{ asset('dashboard/plugins/slimscroll/jquery.slimscroll.min.js') }}"></script>
    <!-- Chart JS -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="{{ asset('dashboard/plugins/apexchart/apexcharts.min.js') }}"></script>
    <script src="{{ asset('dashboard/plugins/apexchart/chart-data.js') }}?t={{ time() }}"></script>
    <script>
        // Birinci grafik (Line Chart)
        const ctx1 = document.getElementById('animatedChart').getContext('2d');
        const myChart1 = new Chart(ctx1, {
            type: 'line',
            data: {
                labels: ['Ocak', 'Şubat', 'Mart', 'Nisan', 'Mayıs', "Haziran", "Temmuz", "Ağustos", "Eylül", "Ekim",
                    "Kasım", "Aralık"
                ],
                datasets: [{
                        label: 'Toplam İşlem',
                        data: [10, 20, 15, 25, 30, 22, 35, 40, 30, 28, 36, 42],
                        borderColor: 'rgba(54, 162, 235, 1)', // Mavi
                        backgroundColor: 'rgba(54, 162, 235, 0.2)',
                        borderWidth: 2,
                        borderCapStyle: 'round',
                        borderJoinStyle: 'round',
                        tension: 0.4
                    },
                    {
                        label: 'Başarılı İşlem',
                        data: [5, 15, 10, 20, 25, 30, 28, 32, 25, 27, 29, 31],
                        borderColor: 'rgba(75, 192, 192, 1)', // Yeşil
                        backgroundColor: 'rgba(75, 192, 192, 0.2)',
                        borderWidth: 2,
                        borderCapStyle: 'round',
                        borderJoinStyle: 'round',
                        tension: 0.4
                    },
                    {
                        label: 'Başarısız İşlem',
                        data: [8, 12, 20, 22, 28, 25, 29, 35, 33, 30, 31, 37],
                        borderColor: 'rgba(255, 99, 132, 1)', // Kırmızı
                        backgroundColor: 'rgba(255, 99, 132, 0.2)',
                        borderWidth: 2,
                        borderCapStyle: 'round',
                        borderJoinStyle: 'round',
                        tension: 0.4
                    },
                    {
                        label: 'Toplam Komisyon',
                        data: [15, 18, 25, 30, 35, 33, 38, 42, 40, 37, 39, 44],
                        borderColor: 'rgba(255, 206, 86, 1)', // Sarı
                        backgroundColor: 'rgba(255, 206, 86, 0.2)',
                        borderWidth: 2,
                        borderCapStyle: 'round',
                        borderJoinStyle: 'round',
                        tension: 0.4
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                animation: {
                    duration: 2000,
                    easing: 'easeInOutBounce'
                },
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
        // ikinci grafik
        const ctx = document.getElementById('polarChart').getContext('2d');
        const myChart = new Chart(ctx, {
            type: 'polarArea',
            data: {
                labels: ['Ödendi', 'Ödenmedi', 'Beklemede', 'İade'],
                datasets: [{
                    label: 'Ödeme Durumu',
                    data: [500, 1200, 300, 700],
                    backgroundColor: [
                        'rgba(54, 162, 235, 0.6)',
                        'rgba(75, 192, 192, 0.6)',
                        'rgba(255, 99, 132, 0.6)',
                        'rgba(255, 206, 86, 0.6)'
                    ],
                    borderColor: [
                        'rgba(54, 162, 235, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(255, 99, 132, 1)',
                        'rgba(255, 206, 86, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'top',
                    },
                    tooltip: {
                        callbacks: {
                            label: function(tooltipItem) {
                                return tooltipItem.label + ': ' + tooltipItem.raw;
                            }
                        }
                    }
                },
                scales: {
                    r: {
                        angleLines: {
                            display: false
                        },
                        suggestedMin: 0,
                        suggestedMax: 1500,
                        ticks: {
                            display: false
                        }
                    }
                }
            }
        });
    </script>
@endpush

@push('scripts')
@endpush