@extends('layouts.app_new')
@section('style')
<link rel="stylesheet" href="{{ asset('datatable/datatables.min.css') }}">
@endsection
@section('content')
{{-- Search Form --}}
<!-- Nav tabs -->
<div class="row justify-content-center flex-fill">
    <div class="col-md-12">
        <div class="card shadow">
            <div class="card-header bg-primary text-white">{{ __('Dashboard') }}</div>
            <div class="card-body">
                <form id="ajaxForm" action="{{route('dash.getData')}}" method="POST">
                    @csrf
                    <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 value=''>All</option>
                                @foreach ($years as $year )
                                <option value="{{$year}}" @if($year==$selected_year) selected @endif>{{$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 value=''>All</option>
                                @foreach ($monthes as $monthe )
                                <option value="{{$monthe}}" @if($monthe==$selected_month) selected @endif>{{$monthe}}
                                </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2 align-self-end">
                            <label for=""></label>
                            <button id="submit" type="submit"
                                class="btn btn-secondary btn-sm ">{{__('Filter')}}</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 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-primary h-100">
            <div class="card-body row align-items-center">
                <div class="col-md-8">
                    <h5 class="card-title">{{__("Policies Count")}} : {{number_format($total->cnt??0, 0, '.',',')}}
                    </h5>
                    {{__("Total Premium")}} = {{number_format($total->sales??0,0,'.',',')}}
                    <br>
                    <small class="text-muted">إجمالي العقود : جميع العقود التي صدرت خلال الفترة متضمنا ملاحق الالغاء
                    </small>
                </div>
                <div class="col-md-4 text-center text-primary"><i class="fs-3 zmdi zmdi-file"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4 my-2 ">
        <div class="card h-100 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"> {{__("Cancelations Count")}} :
                        {{number_format($totalCS->cnt??0, 0, '.',',')}}</h5>
                    {{__("Total Premium")}} =
                    {{number_format($totalCS->sales??0, 0,'.',',')}}
                    <br>
                    <small class="text-muted"> ملاحق الالغاء التي صدرت خلال الفترة
                    </small>
                </div>
                <div class="col-md-4 text-center text-secondary"><i class="fs-3 zmdi zmdi-delete"></i>
                </div>
            </div>
        </div>
    </div>



    <div class="col-md-4 my-2 ">
        <div class="card h-100 shadow border-4 border-bottom-0 border-top-0 border-end-0  border-danger">
            <div class="card-body row align-items-center">
                <div class="col-md-8">
                    <h5 class="card-title"> {{__("Deleted Policies Count")}} :
                        {{number_format($pIsdeleted->cnt??0, 0, '.',',')}}</h5>
                    {{__("Total Premium")}} =
                    {{number_format($pIsdeleted->sales??0, 0,'.',',')}}
                    <br>
                    <small class="text-muted"> البوالص التي صدرت خلال الفترة وألحقت فيما بعد بإلغاء
                    </small>
                </div>
                <div class="col-md-4 text-center text-danger"><i class="fs-3 zmdi zmdi-delete"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4 my-2">
        <div class="card shadow border-4 border-bottom-0 border-top-0 border-end-0  border-success h-100">
            <div class="card-body row align-items-center">
                <div class="col-md-8">
                    <h5 class="card-title">{{__("Active Policies Count")}} : {{number_format($totalPure->cnt??0, 0,
                        '.',',')}}
                    </h5>
                    {{__("Total Premium")}} = {{number_format($totalPure->sales??0,0,'.',',')}}
                    <br>
                    <small class="text-muted">صافي البوالص :البوالص التي صدرت خلال الفترة ولم تلحق فيما بعد بإلغاء (البوالص
                        الفعالة)
                    </small>
                </div>
                <div class="col-md-4 text-center text-success"><i class="fs-3 zmdi zmdi-file"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4 my-2">
        <div class="card h-100 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">{{__("Travelers Count")}} : {{number_format($travelers->cnt??0, 0,'.',',')}}
                    </h5>
                    {{__("Total Premium")}} = {{number_format($travelers->sales??0,0,'.',',')}}<br>
                    <small class="text-muted">إجمالي عدد المسافرين خلال الفترة
                    </small>
                </div>
                <div class="col-md-4 text-center text-warning"><i class="fs-3 zmdi zmdi-account"></i>
                </div>
            </div>
        </div>
    </div>
</div>
<ul class="nav nav-tabs" id="tabdash" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="charts-tab" data-bs-toggle="tab" data-bs-target="#charts" type="button"
            role="tab" aria-controls="charts" aria-selected="true">Charts</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="table-tab" data-bs-toggle="tab" data-bs-target="#table" type="button" role="tab"
            aria-controls="table" aria-selected="false">Table</button>
    </li>

</ul>

<!-- Tab panes -->
<div class="tab-content">
    <div class="tab-pane active" id="charts" role="tabpanel" aria-labelledby="charts-tab">


        {{-- Canavs --}}
        <div class="row  justify-content-center">

            <div class="col-md-3 col-sm-12 my-2">
                <div class="card shadow">
                    <div class="card-body">
                        <canvas id="pByAgent" width="100"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-12 my-2">
                <div class="card shadow">
                    <div class="card-body">
                        <canvas id="BySalesMan" width="100"></canvas>
                    </div>
                </div>
            </div>
            <!--<div class="col-md-4 col-sm-12 my-2">-->
            <!--    <div class="card shadow h-100">-->
            <!--        <div class="card-body">-->
            <!--            <canvas id="sByUser" width="100"></canvas>-->
            <!--        </div>-->
            <!--    </div>-->
            <!--</div>-->
            <div class="col-md-3 col-sm-12 my-2">
                <div class="card shadow h-100">
                    <div class="card-body">
                        <canvas id="trByUser" width="100"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-12 my-2">
                <div class="card shadow h-100">
                    <div class="card-body">
                        <canvas id="pByUser" width="100"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="row  justify-content-center">
            <div class="col-md-6 col-sm-12 my-2">
                <div class="card shadow h-100">
                    <div class="card-body">
                        <canvas id="pBydes" width="100"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-sm-12 my-2">
                <div class="card shadow h-100">
                    <div class="card-body">
                        <canvas id="pByres" width="100"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-sm-12 my-2">
                <div class="card shadow h-100">
                    <div class="card-body">
                        <canvas id="pByPlan" width="100"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-md-8 col-sm-12 my-2">
                <div class="card shadow h-100">
                    <div class="card-body">
                        <canvas id="pByPlanMonth" width="100"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="row  justify-content-center">
            <div class="col-md-6 col-sm-12 my-2">
                <div class="card shadow h-100">
                    <div class="card-body">
                        <canvas id="totalMonth" width="100" style="color:#ffce398f"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="tab-pane" id="table" role="tabpanel" aria-labelledby="table-tab">
        <div class="row  justify-content-center">
            <div class="col-md-12 col-sm-12 my-2">
                <div class="card shadow h-100">
                    <div class="card-body">
                        <table id="data_table" class="table table-responsive table-bordered data-table text-center"
                            style="width: 100%">
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('script')
{{-- <script src="{{asset('datatable/jquery-1.10.2.min.js')}}"></script> --}}
<script src="{{ asset('datatable/datatables.min.js') }}"></script>

<script type="text/javascript">
    $(function() {
        @if (app()->getLocale() == 'ar')
            var lanClassName = "text-start";
        @else
            var lanClassName = "text-end";
        @endif

        var tableBUser = $('#data_table').DataTable({
            @include('layouts.dataTableOptions'),
                buttons: [{
                        extend: 'copyHtml5',
                        exportOptions: {
                            columns: [0, ':visible']
                        },
                        text: "{{ __('Copy') }}"
                    },
                    {
                        extend: 'excelHtml5',
                        exportOptions: {
                            columns: ':visible'
                        },
                        text: "{{ __('Excel') }}"
                    },
                    {
                        extend: 'print',
                        title: `Policies`,
                        text: "{{ __('Print') }}"
                    },
                    {
                        extend: 'colvis',
                        text: "{{ __('Column visibility') }}",
                    }
                ],
            ajax: "{{route('dash.table',['year'=>$selected_year,'month'=>$selected_month])}}",
            columns: [
                {data: 'DT_RowIndex',name: 'DT_RowIndex',title: "#",orderable: false,searchable: false,responsivePriority: 1},
                {data: 'category',name: 'category',title: '{{ __('Category') }}',defaultContent: "" },
                {data: 'descrp',name: 'descrp',title: '{{ __('Description') }}',defaultContent: "" },
                {data: 'issued_year',name: 'issued_year',title: '{{ __('Year') }}'},
                {data: 'issued_month',name: 'issued_month',title: '{{ __('Month') }}'},
                {data: 'Sales_Amounts',name: 'Sales_Amounts',title: '{{ __('Sales') }}',className:lanClassName,render: $.fn.dataTable.render.number( ',', '.',0 ),defaultContent: "0"},
                {data: 'cnt',name: 'cnt',title: '{{ __('Count') }}',className:lanClassName,render: $.fn.dataTable.render.number( ',', '.',0 ),defaultContent: "0"},

            ],
        });
    });
</script>
<script>
    $('#years').select2({ theme: 'bootstrap-5' });
    $('#monthes').select2({ theme: 'bootstrap-5' });
</script>
<script src="{{asset('js/chart.min.js')}}"></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","#b9ff47",
        "#74ff97","#37fffc","#6bc9ff","#f36aff",
        "#ff6cbb","#000000",'#99009c'],
        colorb=['rgba(51, 168, 199, 0.5)','rgba(82, 227, 225, 0.5)','rgba(160, 228, 38, 0.5)','rgba(253, 241, 72, 0.5)',
               'rgba(255, 171, 0, 0.5)','rgba(247, 121, 118, 0.5)','rgba(240, 80, 174, 0.5)','rgba(216, 131, 255, 0.5)',
               'rgba(147, 54, 253, 0.5)','rgba(255, 206, 57, 0.5)','rgba(185,255,71,0.5)','rgba(116,255,151,0.5)'
               ,'rgba(55,255,252,0.5)','rgba(107,201,255,0.5)','rgba(243,106,255,0.5)','rgba(255,108,187,0.5)',
               'rgba(0,0,0,0.5)','rgba(153,0,76,0.5)'];

    const trByUser = new Chart($('#trByUser'),{
        type: 'bar',
        data:{
            datasets:[
                {
                    label:" {{__('Travelers By User')}}",
                    data:[
                    @foreach ($trByUser as $p)
                            {x:'{{$p->descrp }}', y:{{ $p->cnt ?? 0 }}},
                    @endforeach
                ],
                    borderColor: color[18],
                    backgroundColor: colorb[18],
                }
            ]
        },

        options: {
            elements: {
                bar: {
                    borderWidth: 2,
                }
            },
            responsive: true,
            plugins: { legend: { position: 'top', },
                        },
            scales: { y: { beginAtZero: true } } }
    });
    const pByUser = new Chart($('#pByUser'),{
        type: 'bar',
        data:{
            datasets:[
                {
                    label:" {{__('Count By User')}}",
                    data:[
                    @foreach ($pByUser as $p)
                            {x:'{{$p->descrp }}', y:{{ $p->cnt ?? 0 }}},
                    @endforeach
                ],
                    borderColor: color[8],
                    backgroundColor: colorb[8],
                }
            ]
        },

        options: {
            elements: {
                bar: {
                    borderWidth: 2,
                }
            },
            responsive: true,
            plugins: { legend: { position: 'top', },
                        },
            scales: { y: { beginAtZero: true } } }
    });
        const sByUser = new Chart($('#sByUser'),{
        type: 'bar',
        data:{
            datasets:[
                {
                    label:" {{__('Sales By User')}}",
                    data:[
                    @foreach ($pByUser as $p)
                            {x:'{{$p->descrp }}', y:{{ $p->sales ?? 0 }}},
                    @endforeach
                ],
                    borderColor: color[9],
                    backgroundColor: colorb[9],
                }
            ]
        },

        options: {
            elements: {
                bar: {
                    borderWidth: 2,
                }
            },
            responsive: true,
            plugins: { legend: { position: 'top', },
                        },
            scales: { y: { beginAtZero: true } } }
    });
    const pByAgent = new Chart($('#pByAgent'),{
        type: 'bar',
        data:{
            datasets:[
                {
                    label:" {{__('Sales By Agent')}}",
                    data:[
                    @foreach ($pByAgent as $p)
                            {x:'{{$p->descrp }}', y:{{ $p->sales??0 }}},
                    @endforeach
                ],
                    borderColor: color[1],
                    backgroundColor: colorb[1],
                }
            ]
        },

        options: {
            elements: {
                bar: {
                    borderWidth: 2,
                }
            },
            responsive: true,
            plugins: { legend: { position: 'top', },
                        },
            scales: { y: { beginAtZero: true } } }
    });
    const BySalesMan = new Chart($('#BySalesMan'),{
        type: 'bar',
        data:{
            datasets:[
                {
                    label:" {{__('Sales By SalesMan')}}",
                    data:[
                    @foreach ($BySalesMan as $p)
                            {x:'{{$p->descrp }}', y:{{ $p->sales ??0 }}},
                    @endforeach
                ],
                    borderColor: color[2],
                    backgroundColor: colorb[2],
                }
            ]
        },

        options: {
            elements: {
                bar: {
                    borderWidth: 2,
                }
            },
            responsive: true,
            plugins: { legend: { position: 'top', },
                        },
            scales: { y: { beginAtZero: true } } }
    });
    const pBydes = new Chart($('#pBydes'),{
        type: 'bar',
        data:{
            datasets:[
                {
                    label:" {{__('Policies Count By Destination')}}",
                    data:[
                    @foreach ($pBydes as $p)
                            {x:'{{$p->descrp }}', y:{{ $p->cnt ?? 0 }}},
                    @endforeach
                ],
                    borderColor: color[3],
                    backgroundColor: colorb[3],
                }
            ]
        },

        options: {
            elements: {
                bar: {
                    borderWidth: 2,
                }
            },
            responsive: true,
            plugins: { legend: { position: 'top', },},
            scales: { y: { beginAtZero: true } } }
    });
    const pByPlan = new Chart($('#pByPlan'),{
        type: 'pie',
        // labels:[@foreach ($pByPlan as $p)"{{ $p->descrp }}", @endforeach],
        data:{
            labels: [@foreach ($pByPlan as $p)"{{ $p->descrp }}", @endforeach],
            datasets: [{
                label: 'My First Dataset',
                data:[@foreach ($pByPlan as $p)"{{ $p->cnt ?? 0 }}", @endforeach],
                borderColor: color,
                backgroundColor: colorb,
                hoverOffset: 4
            }]
        },

        options: {
            elements: {pie: {borderWidth: 2,}},
            responsive: true,
            plugins: {
                legend: {
                    position: 'top',
                    title: {
                        display: true,
                        text: 'Policies Count By Plan'
                    },
                },
            },
            // plugins: { legend: { position: 'left', }, },
            //
            // scales: { y: { beginAtZero: true } }
        }
    });
    const pByres = new Chart($('#pByres'),{
        type: 'bar',
        data:{
            datasets:[
                {
                    label:" {{__('Policies Count By Residance')}}",
                    data:[
                    @foreach ($pByres as $p)
                            {x:'{{$p->descrp }}', y:{{ $p->cnt ?? 0 }}},
                    @endforeach
                ],
                    borderColor: color[5],
                    backgroundColor: colorb[5],
                }
            ]
        },

        options: {
            elements: {
                bar: {
                    borderWidth: 2,
                }
            },
            responsive: true,
            plugins:{ legend: { position: 'top', }, },
            scales: { y: { beginAtZero: true } } }
    });
    const pByPlanMonth = new Chart($('#pByPlanMonth'),{
        type: 'bar',
        data:{
            labels:[@foreach ($monthes as $m)'{{$m}}', @endforeach],
            datasets:[
                @php $i=0;@endphp
                @foreach ($pByPlan as $pl)
                {

                    label:'{{$pl->descrp}}',
                    data:[
                    @foreach ($pByPlanMonth as $p)
                        @if($p->descrp==$pl->descrp)
                            {x:'{{$p->issued_month }}', y:{{ $p->sales??0 }}},
                        @endif
                    @endforeach
                ],
                    borderColor: color[{{$i}}],
                    backgroundColor: colorb[{{$i}}],
                    @php $i++; if($i>17) $i=0; @endphp
                 } ,
                 @endforeach
            ]
        },

        options: {
            scales: {
                x: {
                    title: {
                        display: true,
                        text: 'Month'

                    },
                },
                y:{
                    // beginAtZero: true ,
                    title: {
                        display: true,
                        text: 'Sales'
                    },
                }
            },
            elements: {
                bar: {
                    borderWidth: 2,
                }
            },
            responsive: true,
            plugins: {
                legend: {
                    position: 'top',
                    title: {
                        display: true,
                        text: 'Sales in Monthes By Plan In Year :'+'{{$selected_year=="null"?"All":$selected_year}}',
                    },
                },
            },
        }
    });
  const totalMonth = new Chart($('#totalMonth'),{
        type: 'line',
        data:{
            labels:[@foreach ($monthes as $m)'{{$m}}', @endforeach],
            datasets:[

                {
                    label:'Total Sales By Monthes In Year :'+'{{$selected_year=="null"?"All":$selected_year}}',
                    data:[
                        @foreach ($totalMonth as $p)
                                {x:'{{$p->issued_month }}', y:{{ $p->sales??0 }}},
                        @endforeach
                    ],
                    borderColor: color[6],
                    backgroundColor: colorb[6],
                    fill: true,
                 } ,

            ]
        },
        options: {
            scales: {
                x: {
                    title: {
                        display: true,
                        text: 'Month'
                    },
                },
                y:{
                    beginAtZero: true ,
                    title: {

                        display: true,
                        text: 'Sales'
                    },
                }
            },
            elements: {
                bar: {
                    borderWidth: 2,
                }
            },
            responsive: true,
            plugins: { legend: { position: 'top', },
                        },

         }
    });
</script>
@endsection