@extends('dashboard.layout')

@section('title', 'Dashboard')
@section('page-title', 'Sales Revenue Overview')

@section('tab-content')
    <div class="row row-cols-5 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 class="col">
            <div class="block py-2-5">
                <div class="text-primary-500 text-center">Customers site visits</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: calc(40% - 10px) calc(60% - 10px); grid-template-rows: auto auto; grid-gap: 20px">
        <div class="block h-full">
            {{-- Title --}}
            <div>
                <div class="text-primary-dark fs-20px fw-medium">Sales Figures</div>
                <div class="text-primary-dark fw-medium" style="font-size: 30px">3,330 <span class="text-primary-500 fs-14px fw-normal">Million</span></div>
                <div class="text-primary-500 fs-14px">From Jan to Mar</div>
            </div>

            <div class="mt-7-5 text-center">
                <img style="width: 100%; max-width: 450px; object-fit: scale-down"
                     src="{{ asset('images/chart/sales-figures.png') }}"
                     alt="chart">
            </div>

            <div class="text-center mt-7-5">
                <img style="max-width: 100%; object-fit: scale-down"
                     src="{{ asset('images/chart/sales-figures-title.png') }}"
                     alt="chart-title">
            </div>
        </div>
        <div class="block h-full">
            {{-- Title --}}
            <div>
                <div class="text-primary-dark fs-20px fw-medium">Sales by Projects</div>
                <div class="text-primary-dark fw-medium" style="font-size: 30px">3,020 <span class="text-primary-500 fs-14px fw-normal">Million</span></div>
                <div class="text-primary-500 fs-14px">From Jan to Mar</div>
            </div>

            <div class="mt-7-5 text-center">
                <img style="width: 100%; object-fit: scale-down"
                     src="{{ asset('images/chart/sales-by-projects.png') }}"
                     alt="chart">
            </div>
            <div class="text-center mt-7-5">
                <img style="max-width: 100%; object-fit: scale-down"
                     src="{{ asset('images/chart/sales-by-projects-title.png') }}"
                     alt="chart-title">
            </div>
        </div>
        <div class="block h-full">
            {{-- Title --}}
            <div>
                <div class="text-primary-dark fs-20px fw-medium">Conversion Rate</div>
                <div class="text-primary-500 fs-14px">From Jan to Mar</div>
            </div>

            <div class="mt-7-5 text-center">
                <img style="width: 100%; max-width: 450px; object-fit: scale-down"
                     src="{{ asset('images/chart/conversion-rate.png') }}"
                     alt="chart">
            </div>
        </div>
        <div class="block h-full">
            {{-- Title --}}
            <div>
                <div class="text-primary-dark fs-20px fw-medium">Sales by Products</div>
                <div class="text-primary-dark fw-medium" style="font-size: 30px">4000 <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>

            <div class="mt-7-5 text-center">
                <img style="width: 100%; object-fit: scale-down"
                     src="{{ asset('images/chart/sales-by-projects.png') }}"
                     alt="chart">
            </div>
            <div class="text-center mt-7-5">
                <img style="max-width: 100%; object-fit: scale-down"
                     src="{{ asset('images/chart/sales-by-projects-title.png') }}"
                     alt="chart-title">
            </div>
        </div>
    </div>
    <div class="block mt-5">
        {{-- Title --}}
        <div class="d-flex justify-content-between align-items-center">
            <div class="text-primary-dark fs-20px fw-medium">Project Follow</div>
            <div class="text-primary-dark cursor-pointer">See more <i class="bi bi-chevron-right"></i></div>
        </div>

        <div class="mt-8-5">
            <img class="cursor-pointer" style="width: 100%; object-fit: scale-down"
                 src="{{ asset('images/chart/project-follow.png') }}"
                 alt="chart">
        </div>
    </div>
@endsection

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