@extends('admin.layout.master')
@section('title','MARKET STATISTICS')
@section('custom_style')
<style>
    input[type=text],
    input[type=file],
    input[type=number] {
        height: 28px !important;
    }
    .table th, .table td {
            padding: 0px 5px;
            color: black;
        }
        .table th {
           background: var(--tableHeader);
           padding: 5px !important;
           color: white !important;
        }
        .table-bordered th, .table-bordered td {
            border: 1px solid #c1c1c1 !important;
        }
        .special-cell{
            background: #bfbfbf;
            padding: 5px !important;
            color: black !important;
        }
</style>
<style>
    table {
        width:100%
    }
    table, td, th {
        border: 1px solid gray;
        border-collapse:initial;
        border-spacing: 0;
        padding: 2px 4px;
        vertical-align: middle !important;
    }
    td {
        vertical-align: top;
    }
    @media print {
    thead { display: table-header-group; }

    .table th {
        background: #fff;
        color: #000 !important;
    }
    }

</style>

@endsection
@section ('content')
<div class="card sina-card">
    <div class="card-header card-header-s d-flex flex-wrap align-items-center">
        <h4 class="col-md-6 mb-md-0 text-md-left col-12  mb-4 text-center">Sales Statistics Report</h4>
        <div class="col-md-6 col-12 d-flex justify-content-md-end justify-content-center">
            <select name="" id="report_type" class="d-inline-block select_2">
                <option value="1">Category</option>
                <option value="2">Category & Product</option>
            </select>
            <button id="myButtonControlID" class="ml-1 btn-sina-title-add d-flex align-items-center" type="button" name="button">
                <div class=""> Excel </div>
                <div class="col pl-2 pr-0">
                    <i class="fa fa-download"></i>
                </div>
            </button>
            &nbsp;
            <button class="btn-sina-title-add d-flex align-items-center" type="button" name="button" onclick="PrintDiv()">
                <div class=""> Print </div>
                <div class="col pl-2 pr-0">
                    <i class="fa fa-print"></i>
                </div>
            </button>
        </div>
    </div>
    <div class="card-body">
        <div class="card-body" style="padding-bottom:0">
            <form action="" method="get">
                <div class="">
                    <div class="row">
                        <div class="col-lg-3 col-md-3 col-sm-6 col-12">
                            @if(marketing_customer() && marketing_customer()->level==4)
                            <div class="form-group">
                                <select name="" id="region" class="form-control select_2 region">
                                    <option value="-1">All Region</option>
                                    @foreach ($regions as $g)
                                        <option value="{{ $g->id }}">{{ $g->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            @else
                            <input type="hidden" name="" value="0" id="region">
                            @endif
                        </div>
                        <div class="col-lg-3 col-md-3 col-sm-6 col-12">
                            <div class="form-group">
                                <select name="" id="" class="form-control select_2 party_group">
                                    @if(marketing_customer() && marketing_customer()->level==4)
                                        <option value="only_region">Region Wise</option>
                                    @endif
                                    <option value="">Group Wise</option>
                                    @foreach ($groups as $g)
                                        <option value="{{ $g->id }}">{{ $g->name_eng }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="col-lg-3 col-md-3 col-sm-6 col-12">
                            <div class="form-group">
                                <select name="" id="party" class="form-control select_2 party">
                                </select>
                            </div>
                        </div>

                        <div class="col-lg-3 col-md-3 col-sm-6 col-12">
                            <div class="form-group">
                                <select class="form-control select_2" style="width: 100%" name="category_id" id="category_id">
                                    <option value="" selected> -- Select Category -- </option>
                                    @forelse ($categories as $cat)
                                        <option value="{{$cat->code}}" > {{$cat->name_eng .' ('. $cat->code.')'}} </option>
                                        @forelse ($cat->child as $sub_cat)
                                            <option value="{{$sub_cat->code}}">&nbsp;&nbsp; {{$sub_cat->name_eng}}</option>
                                            @forelse ($sub_cat->child as $sub_sub_cat)
                                                <option value="{{$sub_sub_cat->code}}">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {{$sub_sub_cat->name_eng}}</option>
                                            @empty
                                            @endforelse
                                        @empty
                                        @endforelse
                                    @empty
                                    @endforelse
                                </select>
                            </div>
                        </div>

                        <div class="col-lg-6 col-md-6 col-sm-6 col-12">
                            <div class="row">
                                <div class="col d-flex justify-content-start">
                                    <div class="form-group mr-2">
                                        <input checked type="checkbox" id="qty" value="1">
                                        <label for="qty">Qty</label>
                                    </div>
                                    <div class="form-group mr-2">
                                        <input checked type="checkbox" value="1" id="value">
                                        <label for="value">Value</label>
                                    </div>
                                </div>
                                <div class="col d-flex justify-content-start">
                                    <div class="form-group mr-2">
                                        <input checked type="radio" value="1" id="price" name="price_or_tp_price">
                                        <label for="price">DP</label>
                                    </div>
                                    <div class="form-group mr-2">
                                        <input type="radio" value="2" name="price_or_tp_price" id="tp_price">
                                        <label for="tp_price">TP</label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                            <div class="form-group">
                                <div class="input-group-append">
                                    {!!getDateInput('date_from','date_from',Request()->date_from)!!}
                                    <label class="input-group-text" style="height: 28px; margin-left: -2px; margin-right: -2px">{{__('obs.date_to')}}</label>
                                    {!!getDateInput('date_to','date_to',Request()->date_to)!!}
                                    {{-- <input type="text" class="form-control date_picker_report" id="date_from" name="date_from" value="{{Request()->date_from?date('Y-m-d',strtotime(Request()->date_from)):date('Y-m-d')}}">
                                    <label class="input-group-text" style="height: 28px; margin-left: -2px; margin-right: -2px">{{__('obs.date_to')}}</label>
                                    <input type="text" class="form-control date_picker_report" id="date_to" name="date_to" value="{{Request()->date_to?date('Y-m-d',strtotime(Request()->date_to)):date('Y-m-d')}}"> --}}
                                    <div id="button_home" class="d-flex">
                                        <button type="button" onclick="getReportData()" style="height: 28px; margin-left: -2px" class="btn btn-pill btn-sm btn-hover btn-danger">
                                            <i class="fa fa-search"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
            <div class="table-responsive" id="divTableDataHolder">
                <div class="table-responsive" id="reportTableDataHolder"></div>
            </div>
            @include('admin.global.loader')

            <hr>

            <div class="row pb-0  modal-footer">
            </div>
    </div>
</div>
@endsection
@section('script')

<script>
    $('.select_2').select2();

    $(document).ready(function(){
        getGroupWiseCustomer();
    });

    $('.party_group').change(function(){
        getGroupWiseCustomer();
    });
    $('#region').change(function(){
        getRegionWiseGroup();
    });
    const getGroupWiseCustomer = () => {
        let group = $('.party_group').val();
        console.log("group",group);
        if(group != ''){
            $('.party').attr('disabled', false);
            ajaxCall("{{ route('group_wise_customer') }}",'GET',{group_id:group}, function(res){
                let dealerListHtml = '';
                dealerListHtml += `<option value="only_group">Group Wise</option>`;
                dealerListHtml += `<option value="">Party Wise</option>`;
                $.each(res.data, function(key,val){
                    dealerListHtml += `<option value="${val.id}">${val.name_eng}</option>`;
                });
                $('.party').html(dealerListHtml);
                $('#loader').hide();
            });
        }else{
            $('.party').html('').attr('disabled', true);
        }
    }
    const getRegionWiseGroup = () => {
        let region = $('#region').val();
        console.log("region",region);
        let dealerListHtml = '';
            dealerListHtml += `<option value="only_region">Region Wise</option>`;
            dealerListHtml += `<option value="">Group Wise</option>`;
        if(parseInt(region)>0){
            $('.party_group').attr('disabled', false);
            ajaxCall("{{ route('group_wise_customer') }}",'GET',{region_id:region}, function(res){
                $.each(res.data, function(key,val){
                    dealerListHtml += `<option value="${val.id}">${val.name_eng}</option>`;
                });
                $('.party_group').html(dealerListHtml);
                $('#loader').hide();
            });
        }else{
            $('.party_group').html(dealerListHtml);
            $('#loader').hide();
            // $('.party_group').html('').attr('disabled', true);
        }
    }

    const getReportData = () => {
        let region_id = $('#region').val();
        let group_id = $('.party_group').val();
        let party = $('.party').val();
        let date_from = $('#date_from').val();
        let date_to = $('#date_to').val();
        let report_type = $('#report_type').val();
        let qty = $('#qty').is(':checked') ? 1 : 0;
        let value = $('#value').is(':checked') ? 1 : 0;
        let price_or_tp_price = $("input[name='price_or_tp_price']:checked").val();
        let category_id = $('#category_id').val();
        console.log("category", category_id);

        if(qty == 0 && value == 0){
            alert("Please Select Atleast One Between Qty And Value");
            return false;
        }

        let payload = {
            region_id:region_id,
            group_id:group_id,
            party:party,
            date_from:date_from,
            date_to:date_to,
            report_type:report_type,
            qty:qty,
            value:value,
            price_or_tp_price:price_or_tp_price, // 1=dp, 2=tp,
            category_id:category_id
        };
        console.log("payload",payload);
        ajaxCall("{{ route('reports.sales_statistics_report_ajax') }}",'GET',payload, function(res){
            $('#reportTableDataHolder').html(res.data);
            $('#loader').hide();
        });
    }

    // const getMarketingData= async ()=>{
    //     // $('.zones').each(async function(i){
    //         let zonal_type=$('#zonal_type').val();
    //         if(zonal_type==0){
    //             let link= "{{route('reports.forecast_report')}}";
    //             let data_param={
    //                 date_from:$('#date_from').val(),
    //                 date_to:$('#date_to').val(),
    //                 compare_with:$('#compare_with').val(),
    //                 transaction_type:$('#report_type').val(),
    //             }
    //             const setReportData = data => {
    //                 $('#reportTableDataHolder').html(data);
    //                 // console.log(data);
    //                 // let dataStr='<tr id="zones_row-'+zone_id+'"><td id="zone_index-'+zone_id+'">'+$('#zone_index-'+zone_id).text()+'</td>';
    //                 // $('#zones_row-'+zone_id).replaceWith(dataStr+data);
    //                 // //cat_sum[i] =
    //                 // // $('#append_new_zonewise_row').append(data);
    //                 // getSum();
    //                 $('#loader').hide();
    //             }
    //             ajaxCall(link,'GET',data_param, setReportData);
    //             //});

    //         }else{
    //             getDealerWiseSrBalance(zonal_type,1);
    //         }
    // }
    // const getPartyWiseBalance= async (zone_id)=>{
    //         let link= "{{route('reports.forecast_report')}}";
    //         let data_param={
    //             zone_id:zone_id,
    //             date_from:$('#date_from').val(),
    //             date_to:$('#date_to').val(),
    //             transaction_type:$('#report_type').val(),
    //             compare_with:$('#compare_with').val(),
    //         }
    //         const setReportDataPartyWise = data => {
    //             $('#reportTableDataHolder').html(data);
    //             let btnHtml=`<button type="button" onclick="getMarketingData()" style="height: 28px; margin-left: -2px" class="btn btn-pill btn-sm btn-hover btn-danger"><i class="fa fa-home"></i></button>`;
    //             btnHtml+=`<button type="button" onclick="getPartyWiseBalance(`+zone_id+`)" style="height: 28px; margin-left: -2px" class="btn btn-pill btn-sm btn-hover btn-danger"><i class="fa fa-search"></i></button>`;
    //             $('#button_home').html(btnHtml);
    //             $('#loader').hide();
    //         }
    //         ajaxCall(link,'GET',data_param, setReportDataPartyWise);
    // }
    // const getDealerWiseSrBalance= async (zone_id,s_type)=>{
    //         let link= "{{route('reports.forecast_report')}}";
    //         let data_param={
    //             zone_id:zone_id,
    //             s_type:s_type,
    //             date_from:$('#date_from').val(),
    //             date_to:$('#date_to').val(),
    //             transaction_type:$('#report_type').val(),
    //             compare_with:$('#compare_with').val(),
    //         }
    //         const setReportDataSrWise = data => {
    //             $('#reportTableDataHolder').html(data);
    //             let btnHtml=`<button type="button" onclick="getMarketingData()" style="height: 28px; margin-left: -2px" class="btn btn-pill btn-sm btn-hover btn-danger"><i class="fa fa-home"></i></button>`;
    //             btnHtml+=`<button type="button" onclick="getDealerWiseSrBalance(`+zone_id+`,`+s_type+`)" style="height: 28px; margin-left: -2px" class="btn btn-pill btn-sm btn-hover btn-danger"><i class="fa fa-search"></i></button>`;
    //             $('#button_home').html(btnHtml);
    //             $('#loader').hide();
    //         }
    //         ajaxCall(link,'GET',data_param, setReportDataSrWise);
    // }
    // const hello=()=>{
    //     getMarketingData().then(getSum)
    // }

    const getSum=()=>{
        $('.catcode_th').each(function(){
            var catcode=$(this).attr('data-cat_code');
            var sum=0;
            $('.cat_sub_total_'+catcode).each(function(){
                sum += parseFloat($(this).text());
            });
            $('#cat_total_'+catcode).text(sum);
        });
    }
    // const getMarketingData=()=>{
    //     $('.zones').each(function(i){
    //         var zone_id=$(this).val();
    //         let link= "{{route('reports.forecast_report')}}";
    //         let data_param={
    //             zone_id:zone_id,
    //             transaction_type:$('#report_type').val(),
    //         }
    //         const setReportData = data => {
    //             let zoneSum=0;
    //             if(data && data.cat_amount){
    //                 for (const key in data.cat_amount) {
    //                     if (Object.hasOwnProperty.call(data.cat_amount, key)) {
    //                         $('#data-cell-'+zone_id+'-'+key).html(data.cat_amount[key]);
    //                         zoneSum+=parseFloat(data.cat_amount[key]);
    //                         catSum[key]+=data.cat_amount[key];
    //                     }
    //                 }
    //             }
    //             zonalGrandSum+=zoneSum;
    //             $('#zonal-cell-total-'+zone_id).text(zoneSum);
    //         }
    //         ajaxCall(link,'GET',data_param, setReportData);
    //     });
    //     $('#zone_total').text(zonalGrandSum);
    //     console.log(catSum);
    // }

</script>
@stop