@extends('app-new')

@push('head-script')
    <!-- BEGIN: Vendor CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/charts/apexcharts.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/extensions/toastr.min.css">
    <!-- END: Vendor CSS-->

    <!-- BEGIN: Page CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/forms/select/select2.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-wizard.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/pages/dashboard-ecommerce.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/charts/chart-apex.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/extensions/ext-component-toastr.css">
    <style>
        .fetch-spinner {
            width: 40px;
            height: 40px;
            border: 4px solid rgba(0, 0, 0, 0.2);
            border-top-color: #3498db;
            /* Blue color */
            border-radius: 50%;
            animation: spin 1s linear infinite;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        #dashboard-ecommerce * {
            font-size: small;
        }

        @keyframes spin {
            0% {
                transform: translate(-50%, -50%) rotate(0deg);
            }

            100% {
                transform: translate(-50%, -50%) rotate(360deg);
            }
        }
    </style>
    <!-- END: Page CSS-->
@endpush
@section('content')
    
    <section id="dashboard-ecommerce" class="dasboardnewbody hrnewdashboard">
           <!-- Canteen Device Card -->
           
            <div class="col-lg-9 col-md-9 col-12">
                <div class="card" style="height: 500px;">
                    <div class="card-header newheader">
                        <div id="#">
                            <div class="header-left">
                                <h4 class="card-title">Punch Count In Canteen</h4>
                            </div>
                            <div class="centerdateformat mb-1 mt-2">
                                <input type="text"
                                    id="canteenDate"
                                    value="{{ now()->format('Y-m-d') }}"
                                    class="form-control  border-0 shadow-none bg-transparent pr-0"
                                    placeholder="YYYY-MM-DD"/>
                            </div>
                        </div>
                    </div>
                    <div class="card-body text-center ">
                        <h2 class="fw-bold text-primary" id="canteenCount" style="font-size: 15rem;">
                        </h2>
                    </div>
                </div>
            </div>
            <!--/ Canteen Device Card -->
    </section>

    <style>
        input.flatpickr-range-custom {
            width: 210px !important;
        }

        .apexcharts-legend {
            max-height: 60px !important;
            overflow-y: auto !important;
        }
    </style>
@endsection

@push('footer-script')
    <!-- BEGIN: Page Vendor JS-->
    <script src="/app-assets/vendors/js/charts/apexcharts.min.js"></script>
    <script src="/app-assets/vendors/js/extensions/toastr.min.js"></script>
    <!-- END: Page Vendor JS-->

    <!-- END: chart js-->
    <script src="/app-assets/vendors/js/forms/select/select2.full.min.js"></script>
    <script src="/app-assets/vendors/js/charts/chart.min.js"></script>
    <script src="/app-assets/js/scripts/forms/form-wizard.js"></script>
    {{-- <script src="/app-assets/js/scripts/pages/dashboard-analytics.js"></script> --}}

    <!-- BEGIN: Page JS-->
    {{-- <script src="/app-assets/js/scripts/pages/dashboard-ecommerce.js"></script> --}}
    <script src="/app-assets/js/chart-scripts.js"></script>
    <script src="/app-assets/js/scripts/charts/chart-chartjs.js"></script>
    <script src="/app-assets/js/scripts/charts/chart-apex.js"></script>
    {{-- <script src="/app-assets/js/scripts/cards/card-statistics.js"></script> --}}
    <!-- END: Page JS-->

    <script>
        flatpickr("#canteenDate", {
            dateFormat: "d-m-Y", 
            defaultDate: "today"
        });

        $(document).ready(function() {
            function loadCanteenCount(date) {
                $.ajax({
                    url: "{{ route('canteen.device.count', $organization->alias) }}",
                    type: "GET",
                    data: {
                        date: date
                    },
                    success: function (response) {
                        $("#canteenCount").text(response.count);
                    },
                    error: function () {
                        $("#canteenCount").text("0");
                    }
                });
            }

            // Load today's count on page load
            loadCanteenCount($("#canteenDate").val());

            // Reload when date changes
            $("#canteenDate").on("change", function () {
                loadCanteenCount($(this).val());
            });
            
        });
    </script>

@endpush