@extends('backend.layouts.master')

@section('styles')
    <style>
        .Assets-cart {
            height: 46rem;
        }

        .pie {
            height: 36rem;
        }

        #chart-container {
            position: relative;
            height: 300px;
            overflow: hidden;
        }

        /* Center the chart container */
        #main {
            width: 160px;
            height: 160px;
            margin: 81px auto;
        }

        * {

            -webkit-print-color-adjust: exact !important;
            color-adjust: exact !important;
            print-color-adjust: exact !important;
        }

        @media print {
            body * {
                display: none;
            }

            #printableArea,
            #printableArea * {
                display: block;
            }
        }
    </style>
@endsection

@section('content')
    <div class="content">
        @if ($individual)
            <!-- Edit mode -->
            <div id="individual-dashboard" class="main-content">
                <div class="block justify-between page-header sm:flex">
                    <div>
                        <h3
                            class="text-gray-700 hover:text-gray-900 dark:text-white dark:hover:text-white text-2xl font-medium">
                            {{ $individual->first_name }} {{ $individual->last_name }}</h3>
                    </div>
                    <div>
                        @if (session('status'))
                            @include('backend.crm.individuals.components.alert-status')
                        @endif
                    </div>
                </div>
                <div class="grid grid-cols-12 gap-x-6">
                    <div class="col-span-12 lg:col-span-2">
                        <div class="box">
                            <div class="box-body pt-6">
                                @include('backend.crm.individuals.components.sidebar')
                            </div>
                        </div>
                    </div>
                    <div class="col-span-12 lg:col-span-10">
                        <div class="box border-0 shadow-none mb-0">
                            <div class="box-header flex justify-between">

                                <h5 class="box-title leading-none flex @error('stedne_navike') text-red-600 @enderror">
                                    @error('stedne_navike')
                                        Koliko ste spremni da promenite Vaše štedne navike? {{ $message }}
                                    @else
                                        Koliko ste spremni da promenite Vaše štedne navike?
                                    @enderror
                                </h5>

                            </div>
                            <div class="box-body">
                                <div class="grid grid-cols-12 gap-x-6">
                                    <div class="col-span-12 xxxl:col-span-6">
                                        <div class="box  border-0 shadow-none ">
                                            <div class="flex flex-col gap-y-3">
                                                <form action="{{ route('crm.savingHabits.update', $individual) }}"
                                                    method="POST">
                                                    @csrf
                                                    @method('PUT')

                                                    <div class="flex my-5">
                                                        <input type="radio" class="ti-form-radio mt-2"
                                                            id="savings-habits-1" name="stedne_navike" value="0"
                                                            {{ old('stedne_navike', isset($individual) ? $individual->lastActiveResult->stedne_navike : '') == '0' ? 'checked' : '' }}>
                                                        <label for="savings-habits-1"
                                                            class="text-xl text-gray-500 ltr:ml-2 rtl:mr-2 dark:text-white/70">Ne
                                                            postoji spremnost da se promene štedne navike</label>
                                                    </div>

                                                    <div class="flex my-5">
                                                        <input type="radio" class="ti-form-radio mt-2"
                                                            id="savings-habits-2" name="stedne_navike" value="5"
                                                            {{ old('stedne_navike', isset($individual) ? $individual->lastActiveResult->stedne_navike : '') == '5' ? 'checked' : '' }}>

                                                        <label for="savings-habits-2"
                                                            class="text-xl text-gray-500 ltr:ml-2 rtl:mr-2 dark:text-white/70">Spreman
                                                            sam da povećam štednju za 5% ukupnih prihoda</label>
                                                    </div>

                                                    <div class="flex my-5">
                                                        <input type="radio" class="ti-form-radio mt-2"
                                                            id="savings-habits-3" name="stedne_navike" value="10"
                                                            {{ old('stedne_navike', isset($individual) ? $individual->lastActiveResult->stedne_navike : '') == '10' ? 'checked' : '' }}>
                                                        <label for="savings-habits-3"
                                                            class="text-xl text-gray-500 ltr:ml-2 rtl:mr-2 dark:text-white/70">Spreman
                                                            sam da povećam štednju za 10% ukupnih prihoda</label>
                                                    </div>

                                                    <div class="flex my-5">
                                                        <input type="radio" class="ti-form-radio mt-2"
                                                            id="savings-habits-4" name="stedne_navike" value="15"
                                                            {{ old('stedne_navike', isset($individual) ? $individual->lastActiveResult->stedne_navike : '') == '15' ? 'checked' : '' }}>
                                                        <label for="savings-habits-4"
                                                            class="text-xl text-gray-500 ltr:ml-2 rtl:mr-2 dark:text-white/70">Spreman
                                                            sam da povećam štednju za 15% ukupnih prihoda</label>
                                                    </div>

                                                    <div class="flex my-5">
                                                        <input type="radio" class="ti-form-radio mt-2"
                                                            id="savings-habits-5" name="stedne_navike" value="20"
                                                            {{ old('stedne_navike', isset($individual) ? $individual->lastActiveResult->stedne_navike : '') == '20' ? 'checked' : '' }}>
                                                        <label for="savings-habits-5"
                                                            class="text-xl text-gray-500 ltr:ml-2 rtl:mr-2 dark:text-white/70">Spreman
                                                            sam da povećam štednju za 20% ukupnih prihoda</label>
                                                    </div>

                                                    <div class="flex justify-between">
                                                        <div></div>
                                                        <button type="submit"
                                                            class="ti-btn ti-btn-outline-success py-1 px-3 mr-0">
                                                            {{ __('forms.Save') }}
                                                        </button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-span-12 xxxl:col-span-6">
                                        <div class="box">
                                            @if ($individual->lastActiveResult->results_nda)
                                                <div id="sunburst2" class="pie"></div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    </div>
@endsection

@section('scripts')
    <script src="{{ asset('build/backend/assets/libs/echarts/echarts.min.js') }}"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Initialize Sunburst Chart #2
            (function initSunburst2() {
                const el2 = document.getElementById('sunburst2');
                if (!el2) return;
                const myChart2 = echarts.init(el2, null, {
                    renderer: 'svg',
                    useDirtyRect: false
                });

                // Precompute the total of all top-level nodes.
                const totalSunburst =
                    {{ $individual->lastActiveResult->results_nda['BasicExpenses']['total'] +
                        $individual->lastActiveResult->results_nda['NetIncome'] +
                        $individual->lastActiveResult->results_nda['DiscretionaryExpenses']['total'] }};

                // Define a common formatter function that computes percentages.
                function commonFormatter(params) {
                    if (params.treePathInfo && params.treePathInfo.length > 1) {
                        // For child nodes, compute percentage relative to the parent node.
                        const parent = params.treePathInfo[params.treePathInfo.length - 2];
                        const percent = (params.value / parent.value * 100).toFixed(2);
                        return params.name + ': ' + params.value + ' (' + percent + '%)';
                    } else {
                        // For top-level nodes, compute percentage relative to the overall total.
                        const percent = (params.value / totalSunburst * 100).toFixed(2);
                        return params.name + ': ' + params.value + ' (' + percent + '%)';
                    }
                }

                // Define a similar formatter for labels that returns two lines.
                function labelFormatter(params) {
                    if (params.treePathInfo && params.treePathInfo.length > 1) {
                        const parent = params.treePathInfo[params.treePathInfo.length - 2];
                        const percent = (params.value / parent.value * 100).toFixed(2);
                        return params.name + '\n' + percent + '%';
                    } else {
                        const percent = (params.value / totalSunburst * 100).toFixed(2);
                        return params.name + '\n' + percent + '%';
                    }
                }

                const option2 = {
                    tooltip: {
                        trigger: 'item',
                        formatter: commonFormatter
                    },
                    series: {
                        type: 'sunburst',
                        radius: [0, '90%'],
                        label: {
                            rotate: 'radial',
                            formatter: labelFormatter
                        },
                        data: [{
                                name: 'Osnovni troškovi',
                                value: {{ $individual->lastActiveResult->results_nda['BasicExpenses']['total'] }},
                                itemStyle: {
                                    color: '#fac858'
                                },
                                children: [{
                                        name: 'stanovanje',
                                        value: {{ $individual->lastActiveResult->results_nda['BasicExpenses']['breakdown'][0]['total'] }},
                                        itemStyle: {
                                            color: '#fac858cc'
                                        }
                                    },
                                    {
                                        name: 'prevoz',
                                        value: {{ $individual->lastActiveResult->results_nda['BasicExpenses']['breakdown'][1]['total'] }},
                                        itemStyle: {
                                            color: '#fac858cc'
                                        }
                                    },
                                    {
                                        name: 'hrana',
                                        value: {{ $individual->lastActiveResult->results_nda['BasicExpenses']['breakdown'][2]['total'] }},
                                        itemStyle: {
                                            color: '#fac858cc'
                                        }
                                    },
                                    {
                                        name: 'osiguranje',
                                        value: {{ $individual->lastActiveResult->results_nda['BasicExpenses']['breakdown'][3]['total'] }},
                                        itemStyle: {
                                            color: '#fac858cc'
                                        }
                                    }
                                ]
                            },
                            {
                                name: 'Štednja',
                                value: {{ $individual->lastActiveResult->results_nda['NetIncome'] }},
                                itemStyle: {
                                    color: '#9fe080'
                                }
                            },
                            {
                                name: 'Diskrecioni troškovi',
                                value: {{ $individual->lastActiveResult->results_nda['DiscretionaryExpenses']['total'] }},
                                itemStyle: {
                                    color: '#ff9a9a'
                                },
                                children: [{
                                        name: 'obrazovanje',
                                        value: {{ $individual->lastActiveResult->results_nda['DiscretionaryExpenses']['breakdown'][0]['total'] }},
                                        itemStyle: {
                                            color: '#ff9a9acc'
                                        }
                                    },
                                    {
                                        name: 'zabava',
                                        value: {{ $individual->lastActiveResult->results_nda['DiscretionaryExpenses']['breakdown'][1]['total'] }},
                                        itemStyle: {
                                            color: '#ff9a9acc'
                                        }
                                    },
                                    {
                                        name: 'drugi troškovi',
                                        value: {{ $individual->lastActiveResult->results_nda['DiscretionaryExpenses']['breakdown'][2]['total'] }},
                                        itemStyle: {
                                            color: '#ff9a9acc'
                                        }
                                    }
                                ]
                            }
                        ]
                    }
                };

                myChart2.setOption(option2);
                window.addEventListener('resize', () => myChart2.resize());
            })();

        });
    </script>
@endsection