@extends('admin.layouts.master')
@push('css')
<link rel="stylesheet" href="{{ asset('css/vendors/flatpickr.min.css') }}">
@endpush

@section('title', __('static.dashboard'))
@section('content')
<div class="row dashboard-default">

    @foreach ($widgets as $widget)
    {!! $widget['callback']($widget['data']) !!}
    @endforeach
</div>
@endsection

@push('scripts')
<script defer src="{{ asset('js/apex-chart.js') }}"></script>
<script defer src="{{ asset('js/custom-apexchart.js') }}"></script>
<script src="{{ asset('js/flatpickr/flatpickr.js')}}"></script>
<script src="{{ asset('js/flatpickr/rangePlugin.js')}}"></script>


<script>
    (function ($) {
            "use strict";

            $(document).ready(function () {
                const $sortDropdown = $("#sort");
                const $customDateRange = $("#custom-date-range");
                const $startEndDate = $("#start_end_date");
                const $animationSlides = $(".animation-slides");

                if ($sortDropdown.val() === "custom") {
                    $customDateRange.removeClass("d-none");
                }

                $sortDropdown.on("change", function () {
                    const selectedSort = $(this).val();
                    const urlParams = new URLSearchParams(window.location.search);

                    if (selectedSort === "custom") {
                        $customDateRange.removeClass("d-none");
                    } else {
                        $customDateRange.addClass("d-none");
                        urlParams.delete("start");
                        urlParams.delete("end");
                        urlParams.set("sort", selectedSort);
                        window.location.href = `${window.location.pathname}?${urlParams.toString()}`;
                    }
                });


                


                
                // Initialize Slick Slider if element exists
                if ($animationSlides.length) {
                    $animationSlides.slick({
                        slidesToShow: 1,
                        vertical: true,
                        autoplay: true,
                        autoplaySpeed: 1200,
                        arrows: false,
                    });

                    const slides = [
                        "<p>{{ __('static.slides.first_slide') }}</p>",
                        "<p>{{ __('static.slides.second_slide') }}</p>",
                        "<p>{{ __('static.slides.third_slide') }}</p>",
                    ];

                    slides.forEach(slide => {
                        $animationSlides.slick("slickAdd", slide);
                    });
                }
            });
        })(jQuery);
</script>
@endpush

@push('scripts')
<script defer src="{{ asset('js/apex-chart.js') }}"></script>
<script defer src="{{ asset('js/custom-apexchart.js') }}"></script>
@endpush