@extends('layout')

@section('content')
    <style>
        .pie-chart-container {
            width: 30%;
        }

        .chart-container {
            width: 70%;
        }

        .main-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 0 auto;
            gap: 10px;
        }

        @media (max-width: 768px) {
            .pie-chart-container {
                width: 100%;
            }

            .chart-container {
                width: 100%;
            }

            .main-container {
                flex-direction: column;
                align-items: center;
            }
        }
    </style>

    <div class=" page-header-light">
        <div class="d-flex justify-content-between align-items-center my-1 mx-3 " style="border-radius: 0px;">
            <div class="d-flex flex-column tailwind-scope">
                <h4 class="text-white text-2xl font-bold">Finances & Caisse</h4>
                <p class="text-white text-sm">Tableau de board</p>
            </div>
            @include('shared.navbar')
        </div>
        {{-- @include('income._search') --}}

    </div>
    <div class="">
        <div class="content ">
            @include('income._stats-cards')

            <div class="main-container">
                <div class="chart-container">
                    <div class="chart" id="c3-axis-tick-rotation"></div>
                </div>
                <div class="pie-chart-container">

                    @include('income._piechart')
                </div>
            </div>

        </div>
    </div>
    </div>
    </div>
    <script>
        var С3Axis = function () {
            var _axisExamples = function () {
                if (typeof c3 == 'undefined') {
                    console.warn('Warning - c3.min.js is not loaded.');
                    return;
                }
                var axis_tick_rotation_element = document.getElementById('c3-axis-tick-rotation');
                if (axis_tick_rotation_element) {
                    var axis_tick_rotation = c3.generate({
                        bindto: axis_tick_rotation_element,
                        size: { height: 400 },
                        data: {
                            x: 'x',
                            columns: [
                                ['x', 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
                                ['Frai de menage', ...@json($menageData)],
                                ['Service fee', ...@json($serviceData)],
                                ['Commission TLL', ...@json($commissionData)],


                            ],
                            type: 'bar',
                            types: {
                                'Frai de menage': 'line',
                                'Service fee': 'line',
                                'Commission TLL': 'bar'
                            }
                        },
                        color: {
                            pattern: ['#FF5722', '#3F51B5', '#009688']
                        },
                        tooltip: {
                            format: {
                                value: function (value) {

                                    return (value / 1_000).toFixed(2) + '  TND';

                                }
                            }
                        },
                        axis: {
                            x: {
                                type: 'category',
                                tick: {
                                    rotate: -90
                                },
                                height: 80
                            }
                        },
                        grid: {
                            x: {
                                show: true
                            }
                        }
                    });
                    $('.sidebar-control').on('click', function () {
                        axis_tick_rotation.resize();
                    });
                }

            };
            return {
                init: function () {
                    _axisExamples();
                }
            }
        }();
        document.addEventListener('DOMContentLoaded', function () {
            С3Axis.init();
        });
    </script>
@endsection