@extends('dashboard.layout')

@section('title', 'Dashboard')
@section('page-title', 'Inventory Overview')

@section('tab-content')
    <div>
        {{--        <div class="row row-cols-4 g-5 pt-5">--}}
        {{--            <div class="col">--}}
        {{--                <div class="block py-2-5">--}}
        {{--                    <div class="text-primary-500 text-center">Total Projects</div>--}}
        {{--                    <div class="text-primary-dark fw-medium text-center" style="font-size: 30px">150</div>--}}
        {{--                </div>--}}
        {{--            </div>--}}

        {{--            <div class="col">--}}
        {{--                <div class="block py-2-5">--}}
        {{--                    <div class="text-primary-500 text-center">New Projects</div>--}}
        {{--                    <div class="text-primary-dark fw-medium text-center" style="font-size: 30px">54</div>--}}
        {{--                </div>--}}
        {{--            </div>--}}

        {{--            <div class="col">--}}
        {{--                <div class="block py-2-5">--}}
        {{--                    <div class="text-primary-500 text-center">Total Customers</div>--}}
        {{--                    <div class="text-primary-dark fw-medium text-center" style="font-size: 30px">1820</div>--}}
        {{--                </div>--}}
        {{--            </div>--}}

        {{--            <div class="col">--}}
        {{--                <div class="block py-2-5">--}}
        {{--                    <div class="text-primary-500 text-center">New Customers</div>--}}
        {{--                    <div class="text-primary-dark fw-medium text-center" style="font-size: 30px">147</div>--}}
        {{--                </div>--}}
        {{--            </div>--}}
        {{--        </div>--}}

        <div class="mt-5"
             style="display: grid; grid-template-columns: auto auto auto; grid-auto-rows: auto; grid-gap: 20px">
            <div class="block h-full">
                {{-- Title --}}
                <div>
                    <div class="text-primary-dark fs-20px fw-medium">Product by Type</div>
                    <div class="text-primary-dark fw-medium" style="font-size: 30px">1000 <span class="text-primary-500 fs-14px fw-normal">Apartments</span></div>
                    <div class="text-primary-500 fs-14px">From Jan to Mar</div>
                </div>

                {{-- Chart --}}
                <div class="my-7-5 d-flex justify-content-center align-items-center">
                    <img style="width: 100%; max-width: 215px; object-fit: scale-down"
                         src="{{ asset('images/chart/product-by-type.png') }}"
                         alt="chart">
                </div>

                <div class="text-center">
                    <img style="max-width: 100%; object-fit: scale-down"
                         src="{{ asset('images/chart/product-by-type-title.png') }}"
                         alt="chart-title">
                </div>
            </div>

            <div class="block h-full">
                {{-- Title --}}
                <div>
                    <div class="text-primary-dark fs-20px fw-medium">Product by Status</div>
                    <div class="text-primary-dark fw-medium" style="font-size: 30px">1000 <span class="text-primary-500 fs-14px fw-normal">Apartments</span></div>
                    <div class="text-primary-500 fs-14px">From Jan to Mar</div>
                </div>

                {{-- Chart --}}
                <div class="my-7-5 d-flex justify-content-center align-items-center">
                    <img style="width: 100%; max-width: 215px; object-fit: scale-down"
                         src="{{ asset('images/chart/product-by-status.png') }}"
                         alt="chart">
                </div>

                <div class="text-center">
                    <img style="max-width: 100%; object-fit: scale-down"
                         src="{{ asset('images/chart/product-by-status-title.png') }}"
                         alt="chart-title">
                </div>
            </div>

            <div class="block h-full">
                {{-- Title --}}
                <div>
                    <div class="text-primary-dark fs-20px fw-medium">Product Group</div>
                    <div class="text-primary-dark fw-medium" style="font-size: 30px">1000 <span class="text-primary-500 fs-14px fw-normal">Apartments</span></div>
                    <div class="text-primary-500 fs-14px">From Jan to Mar</div>
                </div>

                {{-- Chart --}}
                <div class="my-7-5 d-flex justify-content-center align-items-center">
                    <img style="width: 100%; max-width: 215px; object-fit: scale-down"
                         src="{{ asset('images/chart/product-group.png') }}"
                         alt="chart">
                </div>

                <div class="text-center">
                    <img style="max-width: 100%; object-fit: scale-down"
                         src="{{ asset('images/chart/product-group-title.png') }}"
                         alt="chart-title">
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    {{--    <script type="text/javascript">--}}
    {{--        $(function() {--}}
    {{--            $('#datepicker').datepicker();--}}
    {{--        });--}}
    {{--    </script>--}}
@endsection