@extends('admin.layout.master')
@section('title','DAILY '.($type==1?'SALES':'CASH').' SUMMERY')
@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 {
        text-align: center;
        background: #002952;
        /* background: var(--tableHeader); */
        padding: 5px !important;
        color: white !important;
    }
    .table td {
        background: white;
    }
    .table-bordered th, .table-bordered td {
        border: 1px solid #c1c1c1 !important;
    }
    .special-cell{
        background: #bfbfbf;
        padding: 5px !important;
        color: black !important;
    }
</style>
@endsection
@section ('content')
<div class="card sina-card">

    @include('admin.layout.title_header', ['title'=>'DAILY '.($type==1?'SALES':'CASH').' SUMMERY'])
    @php
        $foot='';
        $head='';
        $body='';
        $html='<table class="table table-bordered table-hover" id="datatable_apply">';
            $head.='<thead>
                        <tr>
                            <th rowspan="2"></th>
                            <th rowspan="2">'.($type==2?'Particular':'Date').'</th>';
            $foot.='<tfoot>
                        <tr>
                            <th></th>
                            <th>Total</th>';
                            if($type){
                                $head.='<th rowspan="2">Total</th>';
                                $foot.='<th id="store_sub_total_0"></th>';
                            }
                            $head.='<th colspan="'.count($stores).'" class="text-center">STORES</th>
                        </tr>
                        <tr>';
                            foreach ($stores as $store){
                                $head.='<th id="head_'.$store->id.'">'.$store->name_eng.'</th>';
                                $foot.='<th id="store_sub_total_'.$store->id.'"></th>';
                            }
                        $head.='</tr>

                    </thead>';
                    $body.='<tbody id="append_new_zonewise_row"></tbody>';
                   
                $foot.='</tr>
                    </tfoot>';
        $html.=$head.$body.$foot;
        $html.='</table>';
    @endphp
    <div class="card-body" style="padding-bottom:0">
            <div class="row justify-content-end pb-3">
                <div class="col-2 ml-auto">
                    {{-- <div class="form-check">
                        <input type="checkbox" class="form-check-input" name="show_detals" id="show_detals"
                            onclick="toggleDetails(this)">
                        <label class="form-check-label" for="show_detals">Show Details
                        </label>
                    </div> --}}
                </div>
                {{-- <div class="col-2 ml-auto">
                    <label for="pay_type">C CENTER</label>
                    <select name="cost_center_id" id="cost_center_id" style="min-width: 100%">
                        <option value="0">{{ 'ALL' }}</option>
                        @forelse ($cost_centers as $cost_center)
                        <option value="{{$cost_center->id}}">{{ $cost_center->name }}</option>
                        @empty
                        @endforelse
                    </select>
                </div> --}}
                <div class="col-2 ml-auto">
                    @if($type==1)
                        <label for="pay_type">{{__('obs.report_type')}}</label>
                        <select name="report_type" id="report_type" style="min-width: 100%">
                            <option selected value="2">{{ 'Daily' }}</option>
                            <option value="0">{{ 'Monthly' }}</option>
                            <option value="1">{{ 'Yearly' }}</option>
                        </select>
                    @else
                        <input type="hidden" id="report_type" value="3">
                    @endif
                </div>
                <div class="col-5 ml-auto">
                    <label for="status">{{__('obs.date')}}</label>
                    <div class="input-group-append">
                        
                        {!!getDateInput('start_date','start_date',Request()->start_date)!!}
                        <label class="input-group-text" style="height: 28px; margin-left: -2px; margin-right: -2px">{{__('obs.date_to')}}</label>
                        {!!getDateInput('end_date','end_date',Request()->end_date)!!}
                        {{-- <input type="text" class="form-control date_picker_report" id="start_date" name="start_date"
                            value="{{Request()->start_date?date('Y-m-d',strtotime(Request()->start_date)):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="end_date" name="end_date"
                            value="{{Request()->end_date?date('Y-m-d',strtotime(Request()->end_date)):date('Y-m-d')}}"> --}}
                            <button type="button" onclick="getReport()" style="max-height: 28px;" class="btn btn-sm btn-danger">
                                <span class="fa fa-search"></span>
                            </button>
                    </div>
                </div>
            </div>
    </div>

    <div class="card-body" style="padding-top:2px">
        <div class="row">
            <div class="col-md-12" id="divTableDataHolder">
                {{-- {!!$html!!} --}}
            </div>
            {{-- <div class="d-none" id="html_layout">
                
            </div> --}}
        </div>
    </div>
</div>
@include('admin.global.loader')    

@endsection
@section('script')
<script>
    const stores=@json($stores);
    const htmlLayout=@json($html);
    const cashBanks=@json($cashBanks);
    const r_type=@json($type);
    // $('#cost_center_id').select2();
    if(r_type==1){
        $('#report_type').select2();
    }
    // const toggleDetails=(details)=>{
    //     if(details.checked){
    //         $('.list_show').show('slow');
    //     }else{
    //         $('.list_show').hide('slow');
    //     }
    // }
    const setHtmlTableLayout=()=>{
        // var size = Object.keys(cashBanks).length;
        // var s_size = Object.keys(stores).length;
        // var html2=``;
        // html=`<table class="table table-bordered table-hover" id="datatable_apply">
        //             <thead>
        //                 <tr>
        //                     <th rowspan="2"></th>
        //                     <th rowspan="2">${(r_type==2?`Particular`:`Date`)}</th>`;
        //                     if(r_type){
        //                         html+=`<th rowspan="2">Total</th>`;
        //                     }
        //                     html+=`<th colspan="${s_size}" class="text-center">STORES</th>
        //                 </tr>
        //                 <tr>`;
        //                     for (const store of Object.values(stores)) {
        //                         console.log(stores,store.id,'p');
        //                         html+=`<th id="head_${store.id}">${store.name_eng}</th>`;
        //                         html2+=`<th id="store_sub_total_${store.id}"></th>`;
        //                     }
        //                 html+=`</tr>

        //             </thead>
        //             <tbody id="append_new_zonewise_row"></tbody>
        //             <tfoot>
        //                 <tr>
        //                     <th></th>
        //                     <th>Total</th>`;
        //                     if(r_type){
        //                         html+=`<th id="store_sub_total_0"></th>`;
        //                     }
        //                     html+=html2;
        //         html+=`</tr>
        //             </tfoot>
        //         </table>`;
        // return html;
        // return $('#html_layout').html();
        console.log(htmlLayout);
        return htmlLayout;//$('#html_layout').html();
    }
    const getReport=()=>{
        $('#divTableDataHolder').html(setHtmlTableLayout());
        let i=0;
        let link="{{route('api.storewise-summery-report')}}";
        let y=$('#report_type').val();
        let s=$('#start_date').val();
        let e=$('#end_date').val();
        let dateArray=y==3?[s+'|'+e]:splitDateBetween(s,e,y);
        // console.log(dateArray,s,);
        // $('#append_new_zonewise_row').html('');
        // setDataTableWithSort();
        // getSum(0);
            for (let index = 0; index < dateArray.length; index++) {
                let icb=0;
                let splitedDate=dateArray[index].split('|');
                let data_param={
                    start_date:splitedDate[0],
                    end_date:splitedDate[1],
                    type:y,
                    sl:index
                }

                const fillHtmlWithData = html => {
                    $(html).appendTo('#append_new_zonewise_row');
                    var size = Object.keys(cashBanks).length;
                    icb++;
                    i++;
                    console.log(size,icb,i,size==icb,dateArray.length,(dateArray.length == (i+1)));
                    if (((dateArray.length == i) && y<3) || (y==3 && ((size+1)==icb))) {
                        getSum();
                        $('#loader').hide();
                        setDataTableWithSort();
                    }
                }
                if(y==3){
                    data_param.cash_bank_id=0;
                    ajaxCall(link,'GET',data_param, fillHtmlWithData);
                    for (const cb of Object.values(cashBanks)) {
                        data_param.cash_bank_id=cb.id;
                        ajaxCall(link,'GET',data_param, fillHtmlWithData);
                    }
                }else{
                    ajaxCall(link,'GET',data_param, fillHtmlWithData);
                }
            }
    }
    const splitDateBetween = (startDate, endDate, split_type)=> {
        var start      = startDate.split('-');
        var end        = endDate.split('-');
        var startYear  = parseInt(start[2]);
        var endYear    = parseInt(end[2]);
        var dates      = [];
        if(split_type==2){
            dates=(getDates(new Date(startYear+'-'+start[1]+'-'+start[0]), new Date(endYear+'-'+end[1]+'-'+end[0])));
            // dates=(getDates(new Date(startYear+'-'+parseInt(start[1])+'-'+parseInt(start[0])), new Date(endYear+'-'+parseInt(end[1])+'-'+parseInt(end[0]))));
            console.log('d',dates,start);
        }else{
            var arrayEndDate=['',31,28,31,30,31,30,31,31,30,31,30,31];
            for(var i = startYear; i <= endYear; i++) {
                if(split_type==1){
                    displayStartMonth=(i==startYear?start[1]:'01');
                    displayEndMonth=(i==endYear?end[1]:'12');
                    dates.push([i, displayStartMonth, (i==startYear?start[0]:'01')].join('-')+'|'+([i, displayEndMonth, (i==endYear?end[0]:arrayEndDate[12])].join('-')));
                }else{
                    console.log(1);
                    var endMonth = i != endYear ? 11 : parseInt(end[1]) - 1;
                    var startMon = i === startYear ? parseInt(start[1])-1 : 0;
                    for(var j = startMon; j <= endMonth; j = j > 12 ? j % 12 || 11 : j+1) {
                        var month = j+1;
                        var displayMonth = month < 10 ? '0'+month : month;
                        dates.push([i, displayMonth, ((i==startYear && j==startMon)?start[0]:'01')].join('-')+'|'+([i, displayMonth, ((i==endYear && j==endMonth)?end[0]:arrayEndDate[month])].join('-')));
                        // dates.push([i, displayMonth, arrayEndDate[month]].join('-'));
                    }
                }
            }
        }
        return dates;
    }
    const getDates = (startDate, endDate) => {
        const dates = []
        let currentDate = startDate
        const addDays = function (days) {
            const date = new Date(this.valueOf())
            date.setDate(date.getDate() + days)
            return date;
        }
        while (currentDate <= endDate) {
            dateData=currentDate.toISOString().slice(0,10);
            console.log(dateData);
            dates.push(dateData+'|'+dateData);
            currentDate = addDays.call(currentDate, 1);
        }
        return dates;
    }
    const setDataTableWithSort=()=>{
        $('#datatable_apply').dataTable({
            "destroy": true,
            "paging": false,
            // "ordering": false,
            "order": [[0, 'asc']],
            "searching": false,
            "info": false,
            "columnDefs": [{
                            "orderable": true,
                            "targets": [ 0 ],
                            "visible": false
                        }]
        });
    }
    const getSum=(p=1)=>{
        setSum(p,0);
        for (const srt of Object.values(stores)) {
            setSum(p,srt.id);
        }
    }
    const setSum=(p,i)=>{
        var sum=0;
        if(p){
            $('.sub_total_'+i).each(function(){
                sum += parseFloat($(this).text());
            });
            if(sum==0){
                $('#store_sub_total_'+i).hide();
                $('.sub_total_'+i).hide();
                $('#head_'+i).hide();
            }else{
                $('#store_sub_total_'+i).text(parseFloat(sum).toFixed(2));
            }
        }else{
            $('#store_sub_total_'+i).show();
            $('.sub_total_'+i).show();
            $('#head_'+i).show();
            $('#store_sub_total_'+i).text(parseFloat(sum).toFixed(2));
        }
    }
</script>
@stop