@extends('layouts.app')

@section('content')
    <style>
        .bg-img {
            background-image: url("{{ asset('images/header.png') }}");
            background-size: cover;
            background-position: center;
            width: 98%;
            height: 250px;
            display: flex;
            align-items: flex-start;
            justify-content: left;
        }

        .bg-img>p {
            background-color: rgba(255, 255, 255, 0.8);
            padding: 10px;
            color: black;
            margin: 20px;
            width: 30%;
        }
    </style>

    {{-- <div class="header"></div> --}}
    <div class="row">
        <div class="col-md-12 mb-4">
            <div class="bg-img">
                <p>Efficient Farm Management Solutions: Empowering Agriculture Through Information Systems</p>
            </div>
        </div>
        <div class="row"> <!--begin::Col-->
            @if (Auth::user()->id_role != 4)
                <div class="col-lg-4 col-6"> <!--begin::Small Box Widget 2-->
                    <a href="{{ route('users.index') }}" class="small-box text-bg-success"> <!-- Make the div clickable -->
                        <div class="inner">
                            <h3>{{ $farmerCount }}</h3>
                            <p>Jumlah pekerja Farmer</p>
                        </div>
                        <svg class="small-box-icon" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
                            aria-hidden="true">
                            <path
                                d="M6.25 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM3.25 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM19.75 7.5a.75.75 0 00-1.5 0v2.25H16a.75.75 0 000 1.5h2.25v2.25a.75.75 0 001.5 0v-2.25H22a.75.75 0 000-1.5h-2.25V7.5z">
                            </path>
                        </svg>
                    </a> <!--end::Small Box Widget 2-->
                </div> <!--end::Col-->
                <div class="col-lg-4 col-6"> <!--begin::Small Box Widget 3-->
                    <a href="{{ route('tasks.index') }}" class="small-box text-bg-danger"> <!-- Make the div clickable -->
                        <div class="inner">
                            <h3>{{ $taskCount }}</h3>
                            <p>Ongoing Projects</p>
                        </div>
                        <svg class="small-box-icon" fill="currentColor" viewBox="0 0 24 24"
                            xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <path
                                d="M18.375 2.25c-1.035 0-1.875.84-1.875 1.875v15.75c0 1.035.84 1.875 1.875 1.875h.75c1.035 0 1.875-.84 1.875-1.875V4.125c0-1.036-.84-1.875-1.875-1.875h-.75zM9.75 8.625c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-.75a1.875 1.875 0 01-1.875-1.875V8.625zM3 13.125c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v6.75c0 1.035-.84 1.875-1.875 1.875h-.75A1.875 1.875 0 013 19.875v-6.75z">
                            </path>
                        </svg>
                    </a> <!--end::Small Box Widget 3-->
                </div> <!--end::Col-->
            @endif
            <div class="col-lg-4 col-6"> <!--begin::Small Box Widget 4-->
                <a href="{{ route('form.index') }}" class="small-box text-bg-warning"> <!-- Make the div clickable -->
                    <div class="inner">
                        <h3>{{ $submittedFormsCount }}</h3>
                        <p>Submitted myGAP Forms 1-1</p>
                    </div>
                    <svg class="small-box-icon" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
                        aria-hidden="true">
                        <path clip-rule="evenodd" fill-rule="evenodd"
                            d="M2.25 13.5a8.25 8.25 0 018.25-8.25.75.75 0 01.75.75v6.75H18a.75.75 0 01.75.75 8.25 8.25 0 01-16.5 0z">
                        </path>
                        <path clip-rule="evenodd" fill-rule="evenodd"
                            d="M12.75 3a.75.75 0 01.75-.75 8.25 8.25 0 018.25 8.25.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75V3z">
                        </path>
                    </svg>
                </a> <!--end::Small Box Widget 4-->
            </div> <!--end::Col-->
            @if (Auth::user()->id_role == 4)
                <div class="col-lg-4 col-6"> <!--begin::Small Box Widget 4-->
                    <a href="{{ route('tasks.index') }}" class="small-box text-bg-success"> <!-- Make the div clickable -->
                        <div class="inner">
                            <h3>{{ $verifiedFormsCount }}</h3>
                            <p>Verified MyGAP Forms 1-1</p>
                        </div>
                        <svg class="small-box-icon" fill="currentColor" viewBox="0 0 24 24"
                            xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <path clip-rule="evenodd" fill-rule="evenodd"
                                d="M2.25 13.5a8.25 8.25 0 018.25-8.25.75.75 0 01.75.75v6.75H18a.75.75 0 01.75.75 8.25 8.25 0 01-16.5 0z">
                            </path>
                            <path clip-rule="evenodd" fill-rule="evenodd"
                                d="M12.75 3a.75.75 0 01.75-.75 8.25 8.25 0 018.25 8.25.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75V3z">
                            </path>
                        </svg>
                    </a> <!--end::Small Box Widget 4-->
                </div> <!--end::Col-->
                <div class="col-lg-4 col-6"> <!--begin::Small Box Widget 4-->
                    <a href="{{ route('tasks.index') }}" class="small-box text-bg-danger"> <!-- Make the div clickable -->
                        <div class="inner">
                            <h3>{{ $rejectedFormsCount }}</h3>
                            <p>Rejected myGAP Forms 1-1</p>
                        </div>
                        <svg class="small-box-icon" fill="currentColor" viewBox="0 0 24 24"
                            xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <path clip-rule="evenodd" fill-rule="evenodd"
                                d="M2.25 13.5a8.25 8.25 0 018.25-8.25.75.75 0 01.75.75v6.75H18a.75.75 0 01.75.75 8.25 8.25 0 01-16.5 0z">
                            </path>
                            <path clip-rule="evenodd" fill-rule="evenodd"
                                d="M12.75 3a.75.75 0 01.75-.75 8.25 8.25 0 018.25 8.25.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75V3z">
                            </path>
                        </svg>
                    </a> <!--end::Small Box Widget 4-->
                </div> <!--end::Col-->
            @endif
        </div>

        @if (Auth::user()->id_role == 1)
            <div class="row justify-content-center">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header ui-sortable-handle" style="cursor: move;">
                            <h3 class="card-title">
                                <i class="ion ion-clipboard mr-1"></i>
                                Statistic
                            </h3>
                        </div>

                        <div class="card-body">
                            <div>
                                <canvas id="myChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    </div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <script>
        const ctx = document.getElementById('myChart');

        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: {!! json_encode($submissionByCountryLabel) !!},
                datasets: [{
                    label: 'Form Submission by Country in year {{ now()->format('Y') }}',
                    data: {!! json_encode($submissionByCountryCount) !!},
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    </script>
@endpush