@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,
        .combined-stat {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.4rem;
        }

        .chart-card-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.4rem;
            margin: 20px 0;
        }

        .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);
        }

        /* .chart-container.text-1 {
                        grid-column: 2 / 4;
                        grid-row: 1;
                    }

                    .chart-container.text-2 {
                        grid-column: 1;
                        grid-row: 1;
                    } */

        #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);
            }
        }

        @media (max-width: 768px) {

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

            .chart-cards-container {
                grid-template-columns: repeat(1, 1fr);
            }

            .chart-container.text-1 {
                grid-column: 1;
            }

            .chart-container.text-2 {
                grid-column: auto;
                grid-row: auto;
            }
        }
    </style>
@endsection
@section('content')
    <div class="inventory_dashboard">
        @include('v2.admin.dashboard.chart', ['route_name' => 'inventory.chart.dashboard'])
    </div>
@endsection
@section('script')
    <script></script>
@endsection