@extends('Frontend.partials.layout')
@section('styles')
    <style>
        #home-main-dashboard {
            position: relative; /* Required for absolute positioning of the loader */
            min-height: 100px; /* Ensure content has minimum height when empty */
        }

        .loader {
            /* Hidden by default */
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5); /* Semi-transparent overlay */
            z-index: 1;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .spinner {
            border: 6px solid #f3f3f3; /* Light grey */
            border-top: 6px solid #3498db; /* Blue */
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 2s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
    </style>

@endsection
@section('content')
    <section class="home"> 
            @if($data['isAppPurposeServer'] || $data['isActiveNewDashboardProductView']) {{-- Purpose Dashboard --}}
                <div class="row" id="home-main-dashboard">
                    <div class="col-lg-8">
                        @include('Frontend.dashboard.View.Content.dashboard_widget')
                    </div>
                    <div class="col-lg-4">
                        {{-- include layout dashboard Right Section --}}
                        @include('Frontend.dashboard.View.dashright')
                    </div>
                    <div class="col-lg-12">
                        @if($data['isActiveNewDashboardProductView'])
                            @livewire('dashboard.products-triple-listing')
                        @endif
                    </div>
                </div>
            @else
                @if($data['isNewDashboardV2Active']) {{-- V2 New Dynamic Dashboard --}}
                    <livewire:dashboard.dashboard-container :modelName="'V2Dashboard'"> 
                @else {{-- V2 old Dashboard --}}
                    <div class="row" id="home-main-dashboard">
                        <div class="col-lg-8">
                            @if(checkDashAccess(getAuthId()) && !isSetupDiagram())
                                @include('Frontend.partials.includes.layout-biorhythmus')
                            @endif
                            <div class="col-lg-12 p-0">
                                <div class="dashboard-product-aria position-relative" style="min-height: 706px"></div>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            @include('Frontend.dashboard.View.dashright')
                        </div>
                    </div>
                @endif
            @endif
            <div id="loader" style="display: none;" class="loader">
                <div class="spinner"></div>
            </div>
    </section>
@endsection
@section('scripts')
<script src="{{ asset('/js/chart/chart.min.js') }}"></script>
<script src="{{ asset('/js/chart/chartjs-plugin-annotation.min.js') }}"></script>
<script>
    let isAppPurpose = "{{( !$data['isAppPurposeServer'] && !$data['isNewDashboardV2Active'] )}}";
    if (isAppPurpose) {
        $(document).ready(function () {
            $(document).find('.dashboard-product-aria').append(`<div class="preloader"> <img src="{!! asset('images/Fill-4.png') !!}" alt="">  </div>`)
            $.get('{{ route("dashboard.get-dashboard-content") }}', function (data, status) {
                $(document).find('.dashboard-product-aria').empty().html(data);
            });
        });
    }

    $('.saidToggle').on('click', function() {
        if($('html').hasClass('layout-collapsed')) {
            $('.dashboard-right-chart-max-height-1 .dashboard-progress-container .col-lg-3').removeClass('col-lg-3').addClass('col-lg-6')
            $('.dashboard-right-chart-max-height-1 .dashboard-progress-container .col-lg-9').removeClass('col-lg-9').addClass('col-lg-6')
            $('.rightside-bottom-container .dashboard-progress-bar-container').addClass('small-collapsed');
        } else {
            $('.dashboard-right-chart-max-height-1 .dashboard-progress-container .col-lg-6').removeClass('col-lg-6').addClass('col-lg-3')
            $('.dashboard-right-chart-max-height-1 .dashboard-progress-container .col-md-9').removeClass('col-lg-6').addClass('col-lg-9')
            $('.rightside-bottom-container .dashboard-progress-bar-container').removeClass('small-collapsed');
        }
    })


    function deletePDF(id, pdf) {
        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.value) {
                $.ajax({
                    type: "POST",
                    url: "{{ route('Aajax.deletePDF') }}",
                    data: {id: id, pdfid: pdf},
                    success: function (data) {
                        Swal.fire(
                            'Deleted!', 'Your file has been deleted.', 'success'
                        );
                        $("#pdf" + id).remove();
                    }
                });
            }
        })
    }
</script>
@endsection