@extends('layouts.app_new')
@section('content')

<div class="row justify-content-center align-items-center flex-fill">
    <div class="col-md-8">
        <div class="card shadow my-2">
            <div class="card-header">
                <h4 class="card-title">{{__('Welcome')}}</h4>
            </div>
            <div class="card-body">
                @can('active')
                <p class="card-text">{{__('Profile Activated Succeessfully')}}</p>
                @else
                <p class="card-text">{{__('Contact Admin To Active Your Profile')}}</p>
                @endcan
            </div>
        </div>
    </div>
</div>



{{-- Search Form --}}
{{-- <div class="row justify-content-center">
    <div class="col-md-8 my-2">
        <div class="card shadow">
            <div class="card-header bg-primary text-white">{{ __('Dashboard') }}</div>
            <div class="card-body">
                <form id="ajaxForm" action="#">
                    <div class="row  auto justify-content-md-center align-items-center">
                        <div class="col-md-3">
                            <label for="start">{{__("Year")}}</label>
                            <select class="form-select" name="year" id="years" style="width: 100%">
                                <option></option>
                                @foreach ($years as $year )
                                <option value="{{$year}}">{{$year}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="monthes">{{__("Month")}}</label>
                            <select class="form-select" name="month" id="monthes" style="width: 100%">
                                <option></option>
                                @foreach ($monthes as $monthe )
                                <option value="{{$monthes}}">{{$monthe}}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-3">
                            <label for="producers">{{__("Producer")}}</label>
                            <select class="form-select" name="producer" id="producers" style="width: 100%">
                                <option></option>
                                @foreach ($producers as $pr )
                                @if(app()->getLocale()=='ar')
                                <option value="{{$pr->id}}">{{$pr->user_FullName_ar}}</option>
                                @else
                                <option value="{{$pr->id}}">{{$pr->user_FullName_en}}</option>
                                @endif
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2 align-self-end">
                            <label for=""></label>
                            <button id="submit" type="button"
                                class="btn btn-secondary btn-sm ">{{__('Filter')}}</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div> --}}

{{-- Counts Cards --}}
{{-- <div class="row  justify-content-center ">
    <div class="col-md-4 my-2">
        <div class="card shadow border-4 border-bottom-0 border-top-0 border-end-0  border-secondary">
            <div class="card-body row align-items-center">
                <div class="col-md-8">
                    <h5 class="card-title">59 {{__("policy")}}</h5>
                    <small class="text-muted">{{__("Total Premium")}} :400</small>
                </div>
                <div class="col-md-4 text-center text-secondary"><i class="fs-3 zmdi zmdi-file"></i></div>
            </div>
        </div>
    </div>
    <div class="col-md-4 my-2 text-center">
        <div class="card shadow border-4 border-bottom-0 border-top-0 border-end-0  border-warning">
            <div class="card-body row align-items-center">
                <div class="col-md-8">
                    <h5 class="card-title">59 {{__("policy")}}</h5>
                    <small class="text-muted">{{__("Total Premium")}} :400</small>
                </div>
                <div class="col-md-4 text-center text-warning"><i class="fs-3 zmdi zmdi-file"></i></div>
            </div>
        </div>
    </div>
</div> --}}

{{-- Canavs --}}
{{-- <div class="row  justify-content-center">
    <div class="col-md-4 col-sm-12 my-2">
        <div class="card shadow">
            <div class="card-body">
                <canvas id="myChart" width="200" height="100"></canvas>
            </div>
        </div>
    </div>
</div> --}}


@endsection
{{--
@section('script')
<script>
    $('#years').select2({             theme: 'bootstrap-5' });
    $('#producers').({             theme: 'bootstrap-5' });
    $('#monthes').select2({             theme: 'bootstrap-5' });
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"
    integrity="sha512-TW5s0IT/IppJtu76UbysrBH9Hy/5X41OTAbQuffZFU6lQ1rdcLHzpU5BzVvr/YFykoiMYZVWlr/PX1mDcfM9Qg=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript">
    const color=["#33a8c7","#52e3e1","#a0e426","#fdf148",
        "#ffab00","#f77976","#f050ae","#d883ff",
        "#9336fd","#ffce39","#fff951","#b9ff47",
        "#74ff97","#37fffc","#6bc9ff","#f36aff",
        "#ff6cbb","#000000"],
        colorb=['rgba(51, 168, 199, 0.7)','rgba(82, 227, 225, 0.7)','rgba(160, 228, 38, 0.7)','rgba(253, 241, 72, 0.7)',
               'rgba(255, 171, 0, 0.7)','rgba(247, 121, 118, 0.7)','rgba(240, 80, 174, 0.7)','rgba(216, 131, 255, 0.7)',
               'rgba(147, 54, 253, 0.7)'];


    const ctx = $('#myChart');
    const myChart = new Chart(ctx,{
        type: 'bar',
            data:{
            labels:['data1','data2','data3'],
            datasets:[
                {
                    label:" {{__('Sales By DES Country')}}",
                    data: [10,20,30],
                    borderColor: color[3],
                    backgroundColor: colorb[3],
                }
            ]},
        options: {
            responsive: true,
            plugins: { legend: { position: 'top', },
                        },
            scales: { y: { beginAtZero: true } } }
    });

    $('#submit').on('click',function(){

    });





  function updateChart(mydata) {
        let datasets=[];
        for (let index = 0; index < rooms.length; index++) {
            const element = rooms[index];
            myChart.data.datasets[index].label=element;
            myChart.data.datasets[index].data={};
            let ok=-1;
            for (let j = 0; j< mydata.length; j++) {
                let row = mydata[j];
                if(row.name_ar==element){
                    ok=row.mon;
                    myChart.data.datasets[index].data[row.mon]=row.count;
                }
                else if(ok!= row.mon){
                    myChart.data.datasets[index].data[row.mon]=0;
                }
            }

        }
        // ctx3.remov
        myChart.update();
    }


</script>
@endsection
--}}