@extends('layouts.simpleLayoutMaster')

@section('title', 'الدخول للتعاملات')

@section('vendor-style')
{{-- vendor css files --}}
<link rel="stylesheet" href="{{ asset(mix('vendors/css/charts/apexcharts.css')) }}">
@endsection

@section('page-style')
{{-- Page Css files --}}
<link rel="stylesheet" href="{{ asset(mix('css/base/plugins/charts/chart-apex.css')) }}">
<link rel="stylesheet" href="{{ asset('css/custom/operations.css') }}">
@endsection

@section('content')
<div class="page">
    <div class="operations-page-wrapper">
        <div class="row header">
            <div class="col-12">
                <h2 class="header-text">
                    مرحبا بك في ابنائي <span class="special-text">عبدالرحمن</span> ..
                </h2>
            </div>
        </div>
        <div class="row card-links">
            <div class="col-lg-3 col-md-6 col-12 d-flex justify-content-center">
                <div class="card">
                    <div class="card-wrapper">
                        <a class="lik" href="{{ route('showChildrenPage') }}">
                            <div class="card-body">
                                <em class="me-1 card-icon" data-feather="users"></em>
                                <h2 class="card-title">ابنائي</h2>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-12 d-flex justify-content-center">
                <div class="card">
                    <div class="card-wrapper">
                        <a class="lik" href="#">
                            <div class="card-body">
                                <em class="me-1 card-icon" data-feather="folder-plus"></em>
                                <h2 class="card-title">طلبات الالتحاق</h2>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-12 d-flex justify-content-center">
                <div class="card">
                    <div class="card-wrapper">
                        <a class="lik" href="#">
                            <div class="card-body">
                                <img class="card-icon" src="{{ asset('assets/folder-cancel.svg') }}" alt="" srcset="" />
                                <h2 class="card-title">طلبات الانسحاب</h2>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-12 d-flex justify-content-center">
                <div class="card">
                    <div class="card-wrapper">
                        <a class="lik" href="#">
                            <div class="card-body">
                                <img class="card-icon" src="{{ asset('assets/edit.svg') }}" alt="" srcset="" />
                                <h2 class="card-title">طلبات التجديد</h2>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <hr />
        <div class="section-title-wrapper">
            <img src="{{ asset('assets/analysis.svg') }}" alt="" srcset="" />
            <h2 class="section-title">الاحصائيات</h2>
        </div>
        <div class="row mt-3">
            <div class="col-lg-6 col-md-5  col-sm-4 col-12">
                <div class="card gold-client-card">
                    <img src="{{ asset('assets/medal1.png') }}" alt="" srcset="" />
                    <div class="wrapper">
                        <h2 class="gold-client">العميل الذهبي</h2>
                        <h2 class="children">
                            <span class="txt1">الابناء :</span>
                            <span class="txt2"> نواف , مهره , احمد</span>
                        </h2>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-md-7 col-sm-8 col-12">
                <div class="row">
                    <div class="col-12">
                        <div class="card children-count-card">
                            <img class="contract-img" src="{{ asset('assets/children1.svg') }}" alt="" srcset="" />
                            <div class="wrapper">
                                <h2 class="card-info-title">عدد الابناء</h2>
                                <span class="card-info-number">3</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row mt-2">
                    <div class="col-4">
                        <div class="card contract-count-card">
                            <img class="contract-img" src="{{ asset('assets/contract1.svg') }}" alt="" srcset="" />
                            <div class="wrapper">
                                <h2 class="card-info-title">تم التعاقد</h2>
                                <span class="card-info-number success">3</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="card contract-count-card">
                            <img class="contract-img" src="{{ asset('assets/cancel1.svg') }}" alt="" srcset="" />
                            <div class="wrapper">
                                <h2 class="card-info-title">الغاء التعاقد</h2>
                                <span class="card-info-number error">0</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="card contract-count-card">
                            <img class="contract-img" src="{{ asset('assets/end-of-life-product1.svg') }}" alt="" srcset="" />
                            <div class="wrapper">
                                <h2 class="card-info-title">تعاقد منتهي</h2>
                                <span class="card-info-number error">0</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- charts card1 -->
        <div class="row mt-3">
            <div class="col-12">
                <div class="card total-receivables-card">
                    <div class="row">
                        <div class="totals-wrapper col-lg-7  col-md-7 col-sm-7">
                            <h4 class="charts-title">اجمالي المستحقات</h4>
                            <span class="charts-number">16000 ر.س</span>

                            <div class="receivables-chart-wrapper">
                                <div class="receivables-chart-item">
                                    <div id="total_receivable_one"></div>
                                    <div class="chart-item-info">
                                        <span class="item-info">مهره بنت عبدالرحمن</span>
                                        <span class="item-money">11000 ر.س</span>
                                    </div>
                                </div>
                                <div class="receivables-chart-item">
                                    <div id="total_receivable_two"></div>
                                    <div class="chart-item-info">
                                        <span class="item-info">نواف بن عبدالرحمن</span>
                                        <span class="item-money">3000 ر.س</span>
                                    </div>
                                </div>
                                <div class="receivables-chart-item">
                                    <div id="total_receivable_three"></div>
                                    <div class="chart-item-info">
                                        <span class="item-info">احمد بن عبدالرحمن</span>
                                        <span class="item-money">2000 ر.س</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="main-wrapper col-lg-5 col-md-5 col-sm-5 col-12">
                            <div id="main_wrapper_chart"></div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <!-- charts cards -->
        <div class="row mt-3">
            <div class="charts-cards-wrapper">
                <div class="card chart-card-item">
                    <div class="card-item-header">
                        <h2 class="card-title">إجمالي المديونيات</h2>
                        <div id="total_indebtedness_chart" class="total_chart"></div>
                    </div>
                    <h4 class="money-chart-info">
                        <span>المبلغ</span>
                        <span>1600ر.س</span>
                    </h4>
                    <div class="card-item-footer">
                        <div class="chart-txt-progress-wrapper">
                            <h4 class="chart-txt-money">
                                <span class="chart-txt">مهره بنت عبدالرحمن</span>
                                <span class="chart-money color3">2000ر.س</span>
                            </h4>
                            <div class="progress">
                                <div class="progress-bar color3" role="progressbar" style="width: 70%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                    </div>
                    <div class="card-item-footer">
                        <div class="chart-txt-progress-wrapper">
                            <h4 class="chart-txt-money">
                                <span class="chart-txt">نواف بنت عبدالرحمن</span>
                                <span class="chart-money success">1000ر.س</span>
                            </h4>
                            <div class="progress">
                                <div class="progress-bar success" role="progressbar" style="width: 50%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                    </div>
                    <div class="card-item-footer">
                        <div class="chart-txt-progress-wrapper">
                            <h4 class="chart-txt-money">
                                <span class="chart-txt">احمد بنت عبدالرحمن</span>
                                <span class="chart-money error">800ر.س</span>
                            </h4>
                            <div class="progress">
                                <div class="progress-bar error" role="progressbar" style="width: 30%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card chart-card-item">
                    <div class="card-item-header">
                        <h2 class="card-title">إجمالي الرسوم الدراسيه</h2>
                        <div id="total_fees_chart" class="total_chart"></div>
                    </div>
                    <h4 class="money-chart-info">
                        <span>المبلغ</span>
                        <span>6400ر.س</span>
                    </h4>
                    <div class="card-item-footer">
                        <div class="chart-txt-progress-wrapper">
                            <h4 class="chart-txt-money">
                                <span class="chart-txt">مهره بنت عبدالرحمن</span>
                                <span class="chart-money color3">3000ر.س</span>
                            </h4>
                            <div class="progress">
                                <div class="progress-bar color3" role="progressbar" style="width: 70%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                    </div>
                    <div class="card-item-footer">
                        <div class="chart-txt-progress-wrapper">
                            <h4 class="chart-txt-money">
                                <span class="chart-txt">نواف بنت عبدالرحمن</span>
                                <span class="chart-money success">2000ر.س</span>
                            </h4>
                            <div class="progress">
                                <div class="progress-bar success" role="progressbar" style="width: 50%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                    </div>
                    <div class="card-item-footer">
                        <div class="chart-txt-progress-wrapper">
                            <h4 class="chart-txt-money">
                                <span class="chart-txt">احمد بنت عبدالرحمن</span>
                                <span class="chart-money error">1400ر.س</span>
                            </h4>
                            <div class="progress">
                                <div class="progress-bar error" role="progressbar" style="width: 30%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card chart-card-item">
                    <div class="card-item-header">
                        <h2 class="card-title">إجمالي النقل</h2>
                        <div id="total_transfer_chart" class="total_chart"></div>
                    </div>
                    <h4 class="money-chart-info">
                        <span>المبلغ</span>
                        <span>1600ر.س</span>
                    </h4>
                    <div class="card-item-footer">
                        <div class="chart-txt-progress-wrapper">
                            <h4 class="chart-txt-money">
                                <span class="chart-txt">مهره بنت عبدالرحمن</span>
                                <span class="chart-money color3">600ر.س</span>
                            </h4>
                            <div class="progress">
                                <div class="progress-bar color3" role="progressbar" style="width: 60%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                    </div>
                    <div class="card-item-footer">
                        <div class="chart-txt-progress-wrapper">
                            <h4 class="chart-txt-money">
                                <span class="chart-txt">نواف بنت عبدالرحمن</span>
                                <span class="chart-money success">500ر.س</span>
                            </h4>
                            <div class="progress">
                                <div class="progress-bar success" role="progressbar" style="width: 50%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                    </div>
                    <div class="card-item-footer">
                        <div class="chart-txt-progress-wrapper">
                            <h4 class="chart-txt-money">
                                <span class="chart-txt">احمد بنت عبدالرحمن</span>
                                <span class="chart-money error">500ر.س</span>
                            </h4>
                            <div class="progress">
                                <div class="progress-bar error" role="progressbar" style="width: 50%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card chart-card-item">
                    <div class="card-item-header">
                        <h2 class="card-title">إجمالي الضرائب</h2>
                        <div id="total_taxes_chart" class="total_chart"></div>
                    </div>
                    <h4 class="money-chart-info">
                        <span>المبلغ</span>
                        <span>1280ر.س</span>
                    </h4>
                    <div class="card-item-footer">
                        <div class="chart-txt-progress-wrapper">
                            <h4 class="chart-txt-money">
                                <span class="chart-txt">مهره بنت عبدالرحمن</span>
                                <span class="chart-money color3">500ر.س</span>
                            </h4>
                            <div class="progress">
                                <div class="progress-bar color3" role="progressbar" style="width: 50%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                    </div>
                    <div class="card-item-footer">
                        <div class="chart-txt-progress-wrapper">
                            <h4 class="chart-txt-money">
                                <span class="chart-txt">نواف بنت عبدالرحمن</span>
                                <span class="chart-money success">500ر.س</span>
                            </h4>
                            <div class="progress">
                                <div class="progress-bar success" role="progressbar" style="width: 50%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                    </div>
                    <div class="card-item-footer">
                        <div class="chart-txt-progress-wrapper">
                            <h4 class="chart-txt-money">
                                <span class="chart-txt">احمد بنت عبدالرحمن</span>
                                <span class="chart-money error">280ر.س</span>
                            </h4>
                            <div class="progress">
                                <div class="progress-bar error" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card chart-card-item">
                    <div class="card-item-header">
                        <h2 class="card-title">إجمالي الخصومات</h2>
                        <div id="total_discounts_chart" class="total_chart"></div>
                    </div>
                    <h4 class="money-chart-info">
                        <span>المبلغ</span>
                        <span>800ر.س</span>
                    </h4>
                    <div class="card-item-footer">
                        <div class="chart-txt-progress-wrapper">
                            <h4 class="chart-txt-money">
                                <span class="chart-txt">مهره بنت عبدالرحمن</span>
                                <span class="chart-money color3">200ر.س</span>
                            </h4>
                            <div class="progress">
                                <div class="progress-bar color3" role="progressbar" style="width: 50%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                    </div>
                    <div class="card-item-footer">
                        <div class="chart-txt-progress-wrapper">
                            <h4 class="chart-txt-money">
                                <span class="chart-txt">نواف بنت عبدالرحمن</span>
                                <span class="chart-money success">200ر.س</span>
                            </h4>
                            <div class="progress">
                                <div class="progress-bar success" role="progressbar" style="width: 50%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                    </div>
                    <div class="card-item-footer">
                        <div class="chart-txt-progress-wrapper">
                            <h4 class="chart-txt-money">
                                <span class="chart-txt">احمد بنت عبدالرحمن</span>
                                <span class="chart-money error">100ر.س</span>
                            </h4>
                            <div class="progress">
                                <div class="progress-bar error" role="progressbar" style="width: 10%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-3">
            <div class="col-12">
                <div class="card table-card">
                    <h3 class="table-card-title">التعاملات الماليه الاخيره</h3>
                    <hr />
                    <div class="table-responsive">
                        <table class="table no-header-design">
                            <thead>
                                <tr>
                                    <th>الاموال</th>
                                    <th>الحاله</th>
                                    <th>التوقيت</th>
                                    <th>طريقة الايداع</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="money-text">1,678 ر.س</td>
                                    <td class="success-text">مقبول</td>
                                    <td>17 Mar 2022 ارسل</td>
                                    <td class="t-lead-text">Credit 4230</td>
                                    <td>
                                        <img class="t-icon" src="{{ asset('assets/visaIcon.svg') }}" />
                                    </td>
                                </tr>
                                <tr>
                                    <td class="money-text">1,678 ر.س</td>
                                    <td class="error-text">غير مقبول</td>
                                    <td>17 Mar 2022 ارسل</td>
                                    <td class="t-lead-text">Credit 4230</td>
                                    <td>
                                        <img class="t-icon" src="{{ asset('assets/masterIcon.svg') }}" />
                                    </td>
                                </tr>
                                <tr>
                                    <td class="money-text">1,678 ر.س</td>
                                    <td class="error-text">غير مقبول</td>
                                    <td>17 Mar 2022 ارسل</td>
                                    <td class="t-lead-text">Credit 4230</td>
                                    <td>
                                        <img class="t-icon" src="{{ asset('assets/americanIcon.svg') }}" />
                                    </td>
                                </tr>
                                <tr>
                                    <td class="money-text">1,678 ر.س</td>
                                    <td class="success-text">مقبول</td>
                                    <td>17 Mar 2022 ارسل</td>
                                    <td class="t-lead-text">Credit 4230</td>
                                    <td>
                                        <img class="t-icon" src="{{ asset('assets/visaIcon.svg') }}" />
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="fix-page-height"></div>
    </div>
</div>

@endsection

@section('vendor-script')
{{-- vendor files --}}
<script src="{{ asset(mix('vendors/js/charts/apexcharts.min.js')) }}"></script>
@endsection

@section('page-script')
<script>
    $(window).on('load', function() {
        // totalReceivableOne
        const totalReceivableOne = document.querySelector('#total_receivable_one');
        // State Primary Chart
        let totalReceivableOneOptions = {
            chart: {
                height: 90,
                width: 90,
                type: 'radialBar'
            },
            colors: ['#9B00E3'],
            plotOptions: {
                radialBar: {
                    hollow: {
                        size: '60%',
                    },
                    track: {
                        background: '#DBDADE'
                    },
                    dataLabels: {
                        name: {
                            show: true,
                        },
                        value: {
                            fontSize: "1rem",
                            fontWeight: '300',
                        },
                        total: {
                            show: true,
                            label: "اجمالي المستحقات",
                            fontWeight: 400,
                            fontSize: "8px",
                            formatter: function(w) {
                                return "70%";
                            },
                        },
                    }
                }
            },
            grid: {
                show: false,
                padding: {
                    left: -15,
                    right: -15,
                    top: -1,
                    bottom: -15
                }
            },
            series: [70],
            stroke: {
                lineCap: 'round'
            },

        };
        let totalReceivableOneChart = new ApexCharts(totalReceivableOne, totalReceivableOneOptions);
        totalReceivableOneChart.render();

        // totalReceivableTwo
        const totalReceivableTwo = document.querySelector('#total_receivable_two');
        // State Primary Chart
        let totalReceivableTwoOptions = {
            chart: {
                height: 90,
                width: 90,
                type: 'radialBar'
            },
            colors: ['#408C35'],
            plotOptions: {
                radialBar: {
                    hollow: {
                        size: '60%'
                    },
                    track: {
                        background: '#DBDADE'
                    },
                    dataLabels: {
                        name: {
                            show: true,
                        },
                        value: {
                            fontSize: "1rem",
                            fontWeight: '300',
                        },
                        total: {
                            show: true,
                            label: "اجمالي المستحقات",
                            fontWeight: 400,
                            fontSize: "8px",
                            formatter: function(w) {
                                return "20%";
                            },
                        },
                    }
                }
            },
            grid: {
                show: false,
                padding: {
                    left: -15,
                    right: -15,
                    top: -1,
                    bottom: -15
                }
            },
            series: [20],
            stroke: {
                lineCap: 'round'
            },

        };
        let totalReceivableTwoChart = new ApexCharts(totalReceivableTwo, totalReceivableTwoOptions);
        totalReceivableTwoChart.render();

        // totalReceivableThree
        const totalReceivableThree = document.querySelector('#total_receivable_three');
        // State Primary Chart
        let totalReceivableThreeOptions = {
            chart: {
                height: 90,
                width: 90,
                type: 'radialBar'
            },
            colors: ['#E30052'],
            plotOptions: {
                radialBar: {
                    hollow: {
                        size: '60%'
                    },
                    track: {
                        background: '#DBDADE'
                    },
                    dataLabels: {
                        name: {
                            show: true,
                        },
                        value: {
                            fontSize: "1rem",
                            fontWeight: '300',
                        },
                        total: {
                            show: true,
                            label: "اجمالي المستحقات",
                            fontWeight: 400,
                            fontSize: "8px",
                            formatter: function(w) {
                                return "10%";
                            },
                        },
                    }
                }
            },
            grid: {
                show: false,
                padding: {
                    left: -15,
                    right: -15,
                    top: -1,
                    bottom: -15
                }
            },
            series: [10],
            stroke: {
                lineCap: 'round'
            },

        };
        let totalReceivableThreeChart = new ApexCharts(totalReceivableThree, totalReceivableThreeOptions);
        totalReceivableThreeChart.render();

        // mainWrapperChart
        const mainWrapper = document.querySelector('#main_wrapper_chart');
        // State Primary Chart
        let mainWrapperOptions = {
            chart: {
                height: 250,
                width: 250,
                type: 'radialBar'
            },
            colors: ['#7367F0'],
            plotOptions: {
                radialBar: {
                    hollow: {
                        size: '70%'
                    },
                    track: {
                        background: 'transparent'
                    },
                    dataLabels: {
                        name: {
                            show: true,
                        },
                        value: {
                            fontSize: "35px",
                            fontWeight: '400',
                            // lineHeight: '40px',
                            display: 'flex',
                            color: '#2b2b2b',
                            marginTop: '10px'
                        },
                        total: {
                            show: true,
                            label: "المدفوع",
                            fontFamily: "Cairo",
                            fontWeight: 700,
                            fontSize: "20px",
                            display: 'flex',
                            color: '#95959d',
                            formatter: function(w) {
                                return "85%";
                            },
                        },
                    }
                }
            },
            grid: {
                show: false,
                padding: {
                    left: -15,
                    right: -15,
                    top: -1,
                    bottom: -15
                }
            },
            series: [85],
            stroke: {
                lineCap: 'round'
            },

        };
        let mainWrapperChart = new ApexCharts(mainWrapper, mainWrapperOptions);
        mainWrapperChart.render();


        var $strokeColor = '#DBDADE';

        document.querySelector('#total_indebtedness_chart').innerHTML = "";
        var IndebtednessColor = '#FF9F43';
        var IndebtednessChart = document.querySelector('#total_indebtedness_chart');

        let IndebtednessChartOptions = {
            chart: {
                height: 135,
                width: 135,
                type: 'radialBar',
                sparkline: {
                    enabled: true
                },
                dropShadow: {
                    enabled: true,
                    blur: 3,
                    left: 1,
                    top: 1,
                    opacity: 0.1
                }
            },
            colors: [IndebtednessColor],
            plotOptions: {
                radialBar: {
                    offsetY: -10,
                    startAngle: -100,
                    endAngle: 100,
                    hollow: {
                        size: '63%'
                    },
                    track: {
                        background: $strokeColor,
                        strokeWidth: '70%'
                    },
                    dataLabels: {
                        name: {
                            show: false
                        },
                        value: {
                            fontSize: '24px',
                            fontWeight: '400'
                        }
                    }
                }
            },
            fill: {
                type: 'gradient',
                gradient: {
                    shade: 'dark',
                    type: 'horizontal',
                    shadeIntensity: 0.5,
                    gradientToColors: [IndebtednessColor],
                    inverseColors: true,
                    opacityFrom: 1,
                    opacityTo: 1,
                    stops: [0, 100]
                }
            },
            series: [30],
            stroke: {
                lineCap: 'round'
            },
            grid: {
                padding: {
                    bottom: 40
                }
            }
        };
        let IndebtednessViewChart = new ApexCharts(IndebtednessChart, IndebtednessChartOptions);
        IndebtednessViewChart.render();


        document.querySelector('#total_fees_chart').innerHTML = "";
        var FeesColor = '#00DDAA';
        var FeesChart = document.querySelector('#total_fees_chart');

        let FeesChartOptions = {
            chart: {
                height: 135,
                width: 135,
                type: 'radialBar',
                sparkline: {
                    enabled: true
                },
                dropShadow: {
                    enabled: true,
                    blur: 3,
                    left: 1,
                    top: 1,
                    opacity: 0.1
                }
            },
            colors: [FeesColor],
            plotOptions: {
                radialBar: {
                    offsetY: -10,
                    startAngle: -100,
                    endAngle: 100,
                    hollow: {
                        size: '63%'
                    },
                    track: {
                        background: $strokeColor,
                        strokeWidth: '70%'
                    },
                    dataLabels: {
                        name: {
                            show: false
                        },
                        value: {
                            fontSize: '24px',
                            fontWeight: '400'
                        }
                    }
                }
            },
            fill: {
                type: 'gradient',
                gradient: {
                    shade: 'dark',
                    type: 'horizontal',
                    shadeIntensity: 0.5,
                    gradientToColors: [FeesColor],
                    inverseColors: true,
                    opacityFrom: 1,
                    opacityTo: 1,
                    stops: [0, 100]
                }
            },
            series: [40],
            stroke: {
                lineCap: 'round'
            },
            grid: {
                padding: {
                    bottom: 40
                }
            }
        };
        let FeesViewChart = new ApexCharts(FeesChart, FeesChartOptions);
        FeesViewChart.render();


        document.querySelector('#total_transfer_chart').innerHTML = "";
        var TransferColor = '#132BFF';
        var TransferChart = document.querySelector('#total_transfer_chart');

        let TransferChartOptions = {
            chart: {
                height: 135,
                width: 135,
                type: 'radialBar',
                sparkline: {
                    enabled: true
                },
                dropShadow: {
                    enabled: true,
                    blur: 3,
                    left: 1,
                    top: 1,
                    opacity: 0.1
                }
            },
            colors: [TransferColor],
            plotOptions: {
                radialBar: {
                    offsetY: -10,
                    startAngle: -100,
                    endAngle: 100,
                    hollow: {
                        size: '63%'
                    },
                    track: {
                        background: $strokeColor,
                        strokeWidth: '70%'
                    },
                    dataLabels: {
                        name: {
                            show: false
                        },
                        value: {
                            fontSize: '24px',
                            fontWeight: '400'
                        }
                    }
                }
            },
            fill: {
                type: 'gradient',
                gradient: {
                    shade: 'dark',
                    type: 'horizontal',
                    shadeIntensity: 0.5,
                    gradientToColors: [TransferColor],
                    inverseColors: true,
                    opacityFrom: 1,
                    opacityTo: 1,
                    stops: [0, 100]
                }
            },
            series: [10],
            stroke: {
                lineCap: 'round'
            },
            grid: {
                padding: {
                    bottom: 40
                }
            }
        };
        let TransferViewChart = new ApexCharts(TransferChart, TransferChartOptions);
        TransferViewChart.render();

        document.querySelector('#total_taxes_chart').innerHTML = "";
        var TaxesColor = '#312163';
        var TaxesChart = document.querySelector('#total_taxes_chart');

        let TaxesChartOptions = {
            chart: {
                height: 135,
                width: 135,
                type: 'radialBar',
                sparkline: {
                    enabled: true
                },
                dropShadow: {
                    enabled: true,
                    blur: 3,
                    left: 1,
                    top: 1,
                    opacity: 0.1
                }
            },
            colors: [TaxesColor],
            plotOptions: {
                radialBar: {
                    offsetY: -10,
                    startAngle: -100,
                    endAngle: 100,
                    hollow: {
                        size: '63%'
                    },
                    track: {
                        background: $strokeColor,
                        strokeWidth: '70%'
                    },
                    dataLabels: {
                        name: {
                            show: false
                        },
                        value: {
                            fontSize: '24px',
                            fontWeight: '400'
                        }
                    }
                }
            },
            fill: {
                type: 'gradient',
                gradient: {
                    shade: 'dark',
                    type: 'horizontal',
                    shadeIntensity: 0.5,
                    gradientToColors: [TaxesColor],
                    inverseColors: true,
                    opacityFrom: 1,
                    opacityTo: 1,
                    stops: [0, 100]
                }
            },
            series: [8],
            stroke: {
                lineCap: 'round'
            },
            grid: {
                padding: {
                    bottom: 40
                }
            }
        };
        let TaxesViewChart = new ApexCharts(TaxesChart, TaxesChartOptions);
        TaxesViewChart.render();


        document.querySelector('#total_discounts_chart').innerHTML = "";
        var DiscountsColor = '#408C35';
        var DiscountsChart = document.querySelector('#total_discounts_chart');

        let DiscountsChartOptions = {
            chart: {
                height: 135,
                width: 135,
                type: 'radialBar',
                sparkline: {
                    enabled: true
                },
                dropShadow: {
                    enabled: true,
                    blur: 3,
                    left: 1,
                    top: 1,
                    opacity: 0.1
                }
            },
            colors: [DiscountsColor],
            plotOptions: {
                radialBar: {
                    offsetY: -10,
                    startAngle: -100,
                    endAngle: 100,
                    hollow: {
                        size: '63%'
                    },
                    track: {
                        background: $strokeColor,
                        strokeWidth: '70%'
                    },
                    dataLabels: {
                        name: {
                            show: false
                        },
                        value: {
                            fontSize: '24px',
                            fontWeight: '400'
                        }
                    }
                }
            },
            fill: {
                type: 'gradient',
                gradient: {
                    shade: 'dark',
                    type: 'horizontal',
                    shadeIntensity: 0.5,
                    gradientToColors: [DiscountsColor],
                    inverseColors: true,
                    opacityFrom: 1,
                    opacityTo: 1,
                    stops: [0, 100]
                }
            },
            series: [5],
            stroke: {
                lineCap: 'round'
            },
            grid: {
                padding: {
                    bottom: 40
                }
            }
        };
        let DiscountsViewChart = new ApexCharts(DiscountsChart, DiscountsChartOptions);
        DiscountsViewChart.render();





    });
</script>
@endsection