@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: #ab3535;
           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;
    }
    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-6 pl-0">ForeCast Report</h4>
        <div class="col-6 d-flex justify-content-end">
            <button id="myButtonControlID" class="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-3">
                            @if($shop_officer)
                            <div class="form-group">
                                <select name="zonal_type" id="zonal_type" class="form-control select_2">
                                    <option value="0">Dealer</option>
                                    <option value="{{$shop_officer}}">SR</option>
                                </select>
                            </div>
                            @else
                            <input type="hidden" name="zonal_type" id="zonal_type" value="{{$shop_officer}}">
                            @endif
                        </div>

                        {{-- <div class="col-2">
                            <div class="form-group">
                                <select name="compare_with" id="compare_with" class="form-control select_2">
                                    <option value="0">Not Compare</option>
                                    <option value="14" @if(Request()->compare_with==14) selected="selected" @endif>ORDER</option>
                                    <option value="3" @if(Request()->compare_with==3) selected="selected" @endif>DELIVERY</option>
                                    <option value="2" @if(Request()->compare_with==2) selected="selected" @endif>TARGET</option>
                                    <option value="4" @if(Request()->compare_with==4) selected="selected" @endif>FORECAST</option>
                                </select>
                            </div>
                        </div> --}}
                        <div class="col-2">
                            <div class="form-group">
                                <select name="report_type" id="report_type" class="form-control select_2">
                                    <option value="14" @if(Request()->report_type==14) selected="selected" @endif>ORDER</option>
                                    <option value="3" @if(Request()->report_type==3) selected="selected" @endif>DELIVERY</option>
                                    {{-- <option value="2" @if(Request()->report_type==2) selected="selected" @endif>TARGET</option> --}}
                                    <option value="4" @if(Request()->report_type==4) selected="selected" @endif>FORECAST</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-4 col-lg-offset-2 col-md-offset-2 col-sm-offset-2">
                            <div class="form-group">
                                <div class="input-group-append">
                                    <input type="date" class="form-control bsdatepicker" 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">To</label>
                                    <input type="date" class="form-control bsdatepicker" 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="getMarketingData()" 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('inventory.global.loader')

            <hr>

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

<script>
    $('.select_2').select2();
    let zonalGrandSum=0;
    let catSum=[];
    let cat_sum = [];
    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