@extends('layouts.master')
@section('title', 'Workflow Engine | Dashboard')
@section('content')

@include('partials.data_table_cdn')
@include('utility.enToBnNum')
@php
    $user=Session::get('user');
@endphp

<div class="all_applications_block -mx-5">
    <div class="search_block flex flex-row items-center mb-4 px-5 h">
        <form method="post" id="searchdata">

        
        <div class="grid grid-cols-1 sm:grid-cols-5 gap-x-0 gap-y-4 sm:gap-4">
            <div class="col-span-1">
                <select id="service_name_list" title="Select a Service"  class="block w-full rounded-md border-0 bg-white p-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" name='current_service'>
                    <option value="">All Services</option>
                    @foreach ($serviceNameListWithId as $service_item)
                   
                    <option value="{{$service_item->client_app_id}}" data-id="{{$service_item->id}}">{{$service_item->title}}</option>
                    @endforeach
                </select>
            </div>

            <div class="col-span-1 md:ml-0 ml-2">               
                <select id="service_status_list" title="Select a Status" class="block w-full rounded-md border-0 bg-white p-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" name='client_app_status_details'>
                    <option value="">All Status</option>
                    @foreach ($serviceDecision as $service_item)
                    <option value="{{$service_item->client_app_status_details}}">{{$service_item->client_app_status_details}}</option>
                    @endforeach
                </select>
            </div>
            
            <div class="col-span-2">
                <div date-rangepicker class="flex items-center search_div date_wise_div" id="date_selector">
                    <div class="relative" title="From Date">
                        <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                            <i class="far fa-calendar text-[16px] text-[#666]"></i>
                        </div>
                        <input name="fromDate" id="from_date" type="text"
                            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded_area block w-full pl-10 p-2 rounded-md"
                            placeholder="Oct 01, 2026" autocomplete="off">
                    </div>
                    <span class="mx-2 lg:mx-4 text-gray-500">{{__('To')}}</span>
                    <div class="relative" title="To Date">
                        <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                            <!-- <svg aria-hidden="true" class="w-5 h-5 text-green-700 dark:text-green-400" fill="currentColor"
                                viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd"
                                    d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
                                    clip-rule="evenodd"></path>
                            </svg> -->
                            <i class="far fa-calendar text-[16px] text-[#666]"></i>
                        </div>
                        <input name="toDate" id="to_date" type="text"
                            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded_area block w-full pl-10 p-2 rounded-md"
                            placeholder="Oct 01, 2026" autocomplete="off">
                    </div>
                </div>
            </div>
            <div class="col-span-1">
                <button type="button" id="application_custom_search"
                    class="w-full rounded-md bg-white py-2 px-3 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:text-xs sm:px-0 sm:py-2.5 md:px-2 py-2" onclick="searchData()">
                    <i class="fa-solid fa-filter"></i>
                    {{__('Filter')}}
                </button>
            </div>
        </div>
        </form>
    </div>    
    
    <div class="flex flex-row items-center gap-2 border-t border-t-[#ddd] border-b border-b[#ddd] min-h-[60px] py-3 px-5">
        <div class="inline-flex font-semibold text-[24px]">Total Service :</div>            
        <div class="inline-flex justify-center bg-green-50 text-green-600 text-[18px] py-1 px-2 min-w-[50px] rounded-md font-semibold text-[24px]" id="total_service">0</div>
    </div>
    
    <div class="grid md:grid-cols-3 sm:grid-cols-2 p-5 gap-5">
        <div class="py-4 rounded-md shadow-md">@include('partials.stat_card_block', ['title' => 'Total Requests', 'total' => '0', 'id'=>'total_desk_application'])</div>
        <div class="py-4 rounded-md shadow-md">@include('partials.stat_card_block', ['title' => 'Open Requests', 'total' => '0','id'=>'total_desk_new_application'])</div>
        <div class="py-4 rounded-md shadow-md">@include('partials.stat_card_block', ['title' => 'Rejected Requests', 'total' => '0','id'=>'total_desk_reject'])</div>
        <div class="py-4 rounded-md shadow-md">@include('partials.stat_card_block', ['title' => 'Completed Requests', 'total' => '0','id'=>'total_desk_completed_application'])</div>
        <div class="py-4 rounded-md shadow-md">@include('partials.stat_card_block', ['title' => 'Cancelled Requests', 'total' => '0','id'=>'total_desk_cancelled_application'])</div>
        <div class="py-4 rounded-md shadow-md">@include('partials.stat_card_block', ['title' => 'Overdue Requests', 'total' => '0','id'=>'total_desk_overdate_application'])</div>
    </div>

    <!-- Start Payment Info Table Block -->
    @if(Session::get('user')['user_role_id']==7)
    <div class="block border border-[#DDDDDD] rounded-md mx-5">
        <div class="flex items-center text-[18px] font-semibold px-5 h-[50px] border-b border-b-[#DDDDDD] uppercase">Payment Information</div>

        <div class="p-5 application_list_block">
            <table class="table-auto border border-[#DDDDDD] w-full rounded-md">
                <thead>
                    <tr>
                        <th class="border border-[#DDDDDD] rounded-tl-sm py-2 px-3 text-left">SL</th>
                        <th class="border border-[#DDDDDD] rounded-tl-sm py-2 px-3 text-left" style="width: 40%;">Service Name</th>
                        <th class="border border-[#DDDDDD] rounded-tl-sm py-2 px-3 text-left">Receivable Amount</th>
                        <th class="border border-[#DDDDDD] rounded-tl-sm py-2 px-3 text-left">Received  Amount</th>
                    </tr>
                </thead>
                <tbody id="patment">
                  
                </tbody>
            </table>
        </div>
    </div>
    @endif
    <!-- End Payment Info Table Block -->

    <!-- Start Feedback and Rating Block -->
    <div class="block border border-[#DDDDDD] rounded-md mt-5 mx-5">
        <div class="flex items-center text-[18px] font-semibold px-5 h-[50px] border-b border-b-[#DDDDDD] uppercase">Feedback and Rating Summary</div>
        <div class="grid md:grid-cols-2 gap-5 p-5">
            <div class="block border border-[#DDDDDD] rounded-md">
                <div class="flex items-center text-[14px] font-semibold px-5 h-[40px] border-b border-b-[#DDDDDD]">Feedback Rating</div>
                <div class="min-h-[350px]">
                    <div class="chart min-h-[350px]" id="pie_basic"></div>
                </div>
            </div>
            <div class="block border border-[#DDDDDD] rounded-md">
                <div class="flex items-center text-[14px] font-semibold px-5 h-[40px] border-b border-b-[#DDDDDD]">Service by Rating</div>
                <div class="min-h-[350px]" id="ratingSummary">
                   
                </div>
            </div>
        </div>
    </div>
    <!-- End Payment Info Table Block -->
</div>

<script>
    function getData() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        
        var url = '/dashboard/details?current_service='+$('#service_name_list').val()+'&client_app_status_details='+$('#service_status_list').val()+'&fromDate='+$('#from_date').val()+'&toDate='+$('#to_date').val()

        $.ajax({
            type:'POST',
            url:'/top-data',
            data:$( '#searchdata' ).serialize(),
            success:function(data) {
                $('#total_desk_application')
                    .html(data.total_desk_application)
                    .closest('a').attr('href', url + '&type=all_application');
                $('#total_desk_cancelled_application')
                    .html(data.total_desk_cancelled_application)
                    .closest('a').attr('href', url + '&type=cancel_application');
                $('#total_desk_completed_application')
                    .html(data.total_desk_completed_application)
                    .closest('a').attr('href', url + '&type=completed_application');
                $('#total_desk_new_application')
                    .html(data.total_desk_new_application)
                    .closest('a').attr('href', url + '&type=new_application');
                $('#total_desk_overdate_application')
                    .html(data.total_desk_overdate_application)
                    .closest('a').attr('href', url + '&type=overdate_application');
                $('#total_desk_reject')
                    .html(data.total_desk_reject)
                    .closest('a').attr('href', url + '&type=rejected_application');
                $('#total_service').html(data.total_service);
            },
            error: function (msg) {
               // console.log(msg);
                var errors = msg.responseJSON;
            }
        });
    }
    function getrating() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        
        $.ajax({
            type:'POST',
            url:'/rating',
            data:$( '#searchdata' ).serialize(),
            success:function(data) {
              //  console.log(data);
                $('#ratingSummary').html(data);
                //const myArr = JSON.parse(data);
                // console.log(myArr);
            },
            error: function (msg) {
                //console.log(msg);
                var errors = msg.responseJSON;
            }
        });
    }
    function getPayment() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        
        $.ajax({
            type:'POST',
            url:'/peyment-summary',
            data:$( '#searchdata' ).serialize(),
            success:function(data) {
                $('#patment').html(data);
            },
            error: function (msg) {
                //console.log(msg);
                var errors = msg.responseJSON;
            }
        });
    }
    function getratingBytype() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        
        $.ajax({
            type:'POST',
            url:'/service-rating',
            data:$( '#searchdata' ).serialize(),
            success:function(data) {
                //console.log(data);
                chart(data.legendData,data.data)
              //  $('#ratingSummary').html(data);
                //const myArr = JSON.parse(data);
                // console.log(myArr);
            },
            error: function (msg) {
                var errors = msg.responseJSON;
            }
        });
    }
    $( document ).ready(function() {
        getData();
        getrating();
        getratingBytype();
        getPayment();
    });
    function searchData(){
        getData();
        getrating();
        getratingBytype();
        getPayment();
    }

    function chart(legendData,data){
        var pie_basic_element = document.getElementById('pie_basic');
        if (pie_basic_element) {
            var pie_basic = echarts.init(pie_basic_element);
            pie_basic.setOption({
                color: ['#53c960', '#8be095', '#54c7d1', '#f7974d', '#fc5b5b'],
                textStyle: {
                    fontFamily: 'Roboto, Arial, Verdana, sans-serif',
                    fontSize: 13
                },
                title: {
                    text: '',
                    left: 'center',
                    textStyle: {
                        fontSize: 17,
                        fontWeight: 500
                    },
                    subtextStyle: {
                        fontSize: 12
                    }
                },
                tooltip: {
                    trigger: 'item',
                    backgroundColor: 'rgba(0,0,0,0.75)',
                    padding: [10, 15],
                    textStyle: {
                        fontSize: 13,
                        fontFamily: 'Roboto, sans-serif'
                    },
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: legendData,
                },
                
                series: [{
                    name: '',
                    type: 'pie',
                    radius: '50%',
                    center: ['60%', '60%'],
                    itemStyle: {
                        normal: {
                            borderWidth: 1,
                            borderColor: '#fff'
                        }
                    },
                    data: data
                }]
            });
        }
    }
</script>
@endsection