@extends('admin.layout.master')
@section('custom_style')
    <style>
        .form-control,
        .form-select,
        .form-label {
            margin: 0;
        }

        .inventory_dashboard {
            background: #f0f0f0;
            padding: 20px;
            border-radius: .5rem;
            box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
            user-select: none;
        }

        .stat-card-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.4rem;
        }

        /* normal grid layout ------------------------- */
        /*
            .chart-card-container {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 1.4rem;
                margin: 20px 0;
            }
            @media (max-width: 992px) {
                .chart-card-container {
                    grid-template-columns: repeat(2, 1fr);
                }
            }

            @media (max-width: 502px) {
                .chart-card-container {
                    grid-template-columns: repeat(1, 1fr);
                }
            }
        */
        /* ---------------------------------------- */

        /* masonry layout ------------------------- */
        .chart-card-container {
            column-count: 3;
            column-gap: 1.4rem;
            margin: 20px 0;
        }

        .chart-card-container .chart-container {
            break-inside: avoid;
            margin-bottom: 1.4rem;
            display: inline-block;
            width: 100%;
        }

        @media (max-width: 1200px) {
            .chart-card-container {
                column-count: 2;
            }
        }

        @media (max-width: 768px) {
            .chart-card-container {
                column-count: 1;
            }

            .stat-card-container {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        /* ---------------------------------------- */

        .chart-card-container .chart-container,
        .chart-card-container .text-container {
            background: #fff;
            padding: 1rem;
            border-radius: .3rem;
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
        }

        #refetchData:hover,
        .refetchData-active {
            background: var(--cl-primary) !important;
            color: #fafafa !important;
            border: none !important;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }
    </style>
@endsection
@section('content')
    <div class="inventory_dashboard">
        @include('v2.admin.dashboard.chart_demo', [
            'route_name' => 'inventory.chart.dashboard.demo',
            'route_info_demo' => [
                'data_url' => [
                    'layout' => 'grid',
                    'url' => '/chart-demo',
                ],
            ],
        ])
    </div>
@endsection
@section('script')
    <script></script>
@endsection