@extends('admin.layout.master')
@section('title',strtoupper(str_replace('_',' ',$title)))
@section('custom_style')
<style>
input[type=text],input[type=file], input[type=number] {
    height: 28px !important;
}
</style> 
@endsection
@section ('content')
<div class="card sina-card">

    @include('admin.layout.title_header', ['title'=>strtoupper(str_replace('_',' ',$title))])
    <div class="card-body" style="padding-bottom:0">
        {{-- <form action="{{route($route)}}" method="get"> --}}
            <div class="row 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">{{__('obs.show')}} {{__('obs.details')}}
                        </label>
                    </div>
                </div>
                <div class="col-2 ml-auto">
                    <label for="pay_type">{{__('obs.c_center')}}</label>
                    <select name="cost_center_id" id="cost_center_id" style="min-width: 100%">
                        <option value="0">{{__('obs.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">
                    <label for="pay_type">{{__('obs.report')}} {{__('obs.type')}}</label>
                    <select name="report_type" id="report_type" style="min-width: 100%">
                        <option value="0">{{ 'Monthly' }}</option>
                        <option value="1">{{ 'Yearly' }}</option>
                        <option value="2">{{ 'Daily' }}</option>
                        <option value="3">{{ 'Fixed' }}</option>
                    </select>
                </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: 24px; 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>
                                 {{-- Monthly --}}
                            </button>
                            {{-- <button type="button" onclick="getReport(2)" style="max-height: 28px;" class="btn btn-sm btn-danger">
                                {{-- <span class="fa fa-search"></span>  --}}
                                {{-- Yearly 
                            </button> --}}
                    </div>
                </div>
            </div>
        {{-- </form> --}}
    </div>

    <div class="card-body" style="padding-top:2px">
        <div class="row">
            <div class="col-md-12" id="report_html"></div>
        </div>
    </div>
</div>
@include('admin.global.loader')    

@endsection
@section('script')
<script>
    
    $('#cost_center_id').select2();
    $('#report_type').select2();
    const toggleDetails=(details)=>{
        if(details.checked){
            $('.list_show').show('slow');
        }else{
            $('.list_show').hide('slow');
        }
    }
    const getReport=()=>{
        let link="{{route($route.'_api')}}";
        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);
        // return null;
        let int_data_param={
                start_date:s,
                end_date:e,
                type:1,
                split_type:y,
            }
        const setReportHtml = data => {
            $('#report_html').html(data);
            for (let index = 0; index < dateArray.length; index++) {
                let splitedDate=dateArray[index].split('|');
                let data_param={
                    cost_center_id:$('#cost_center_id').val(),
                    start_date:splitedDate[0],
                    end_date:splitedDate[1],
                    type:0,
                }
                const fillHtmlWithData = fillableContent => {
                    let keys=Object.keys(fillableContent);
                    for (const i of keys) {
                        let amt=(fillableContent[i]);
                        $("#"+i).text(amt);
                    }
                }
                ajaxCall(link,'GET',data_param, fillHtmlWithData);
            }
            $('#loader').hide();
        }
        ajaxCall(link,'GET',int_data_param, setReportHtml);
    }
    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+'-'+parseInt(start[1])+'-'+parseInt(start[0])), new Date(endYear+'-'+parseInt(end[1])+'-'+parseInt(end[0]))));
        }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{
                    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;
        // return [sdates,edates];
    }
    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) {
            // const yyyy = currentDate.getFullYear();
            // let mm = currentDate.getMonth() + 1; // Months start at 0!
            // let dd = currentDate.getDate();
            // if (dd < 10) dd = '0' + dd;
            // if (mm < 10) mm = '0' + mm;
            // dateData=yyyy+'-'+mm+'-'+dd;
            dateData=currentDate.toISOString().slice(0,10);
            console.log(dateData);
            dates.push(dateData+'|'+dateData);
            currentDate = addDays.call(currentDate, 1);
        }
        return dates;
    }
</script>
@stop