@extends('admin.layout.master')
@section('title','MANAGEMENT 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 {
           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>
<style>
    table {

        width:100%
    }
    table, td, th {
        border: 1px solid gray;
        border-collapse:initial;
        border-spacing: 0;
        padding: 2px 4px;
    }
    td {
        vertical-align: top;
    }
    /* th:first-child, */
    td:first-child  {
        /* position: sticky;
        left: 0px;
        z-index: 5000; */
        background: #fff;
        /* color: #000 !important; */
    }
    /* th:nth-child(2), */
    td:nth-child(2)  {
        /* position: sticky;
        left: 10px;
        z-index: 5000; */
        background: #fff;
    }
    /* th:nth-child(2){
        color:#000 !important;
    } */
    @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">{{__('obs.management_summery')}}</h4>
        <div class="col-md-6 col-12 d-flex justify-content-md-end justify-content-center">
            <button id="myButtonControlID" class="btn-sina-title-add d-flex align-items-center" type="button" name="button">
                <div class=""> {{__('obs.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=""> {{__('obs.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="{{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">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">
                        <label for="pay_type">{{__('obs.report_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: 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>
                                     {{-- 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="table-responsive" id="divTableDataHolder">
                <div class="table-responsive" id="reportTableDataHolder">
                    <div class="col-md-12 table-responsive-sm" style="padding-bottom: 15px;">
                        <div class="pro_trans_table">
                            <table  class="display table table-bordered table-striped" id="dynamic-table" >
                                <thead>
                                    <tr>
                                        <th style="border:1px solid;" class="text-center" rowspan="2">{{__('obs.date')}}</th>
                                        <th style="border:1px solid;" class="text-center" colspan="2">{{__('obs.opening')}}</th>
                                        <th style="border:1px solid;" class="text-center" rowspan="2">{{__('obs.income')}}</th>
                                        <th style="border:1px solid;" class="text-center" rowspan="2">{{__('obs.cogs')}}</th>
                                        <th style="border:1px solid;" class="text-center" rowspan="2">{{__('obs.gp')}}</th>
                                        <th style="border:1px solid;" class="text-center" rowspan="2">{{__('obs.exp')}}.</th>
                                        <th style="border:1px solid;" class="text-center" rowspan="2">{{__('obs.net_profit')}}</th>
                                        <th style="border:1px solid;" class="text-center" rowspan="2">{{__('obs.payments')}}</th>
                                        <th style="border:1px solid;" class="text-center" rowspan="2">{{__('obs.receipts')}}</th>
                                        <th style="border:1px solid;" class="text-center" colspan="2">{{__('obs.closing')}}</th>
                                    </tr>
                                    <tr>
                                        <th style="border:1px solid;" class="text-center">{{__('obs.cash')}}</th>
                                        <th style="border:1px solid;" class="text-center">{{__('obs.bank')}}</th>
                                        <th style="border:1px solid;" class="text-center">{{__('obs.cash')}}</th>
                                        <th style="border:1px solid;" class="text-center">{{__('obs.bank')}}</th>
                                    </tr>
                                </thead>
                                <tbody id="append_report_data">

                                </tbody>
                                <tfoot>
                                    <tr>
                                        <th style="border:1px solid;" class="text-right" id="date">{{__('obs.total')}}</th>
                                        <th style="border:1px solid;" class="text-right" id="total"></th>
                                        <th style="border:1px solid;" class="text-right" id="total"></th>
                                        <th style="border:1px solid;" class="text-right" id="total1"></th>
                                        <th style="border:1px solid;" class="text-right" id="total2"></th>
                                        <th style="border:1px solid;" class="text-right" id="total3"></th>
                                        <th style="border:1px solid;" class="text-right" id="total4"></th>
                                        <th style="border:1px solid;" class="text-right" id="total5"></th>
                                        <th style="border:1px solid;" class="text-right" id="total6"></th>
                                        <th style="border:1px solid;" class="text-right" id="total7"></th>
                                        <th style="border:1px solid;" class="text-right" id="total"></th>
                                        <th style="border:1px solid;" class="text-right" id="total"></th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            @include('admin.global.loader')
            <hr>
            <div class="row pb-0  modal-footer">
            </div>
    </div>
</div>
@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=()=>{
        $('#append_report_data').html('');
        getSum();
        let link="{{route('reports.management_report_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);
            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],
                    split_type:y,
                }
                const fillHtmlWithData = data => {
                    console.log(data);
                    $('#append_report_data').append(data);
                    getSum();
                }
                ajaxCall(link,'GET',data_param, fillHtmlWithData);
            }
            
            $('#loader').hide();
    }
    const getSum=()=>{
        for (let i = 1; i < 8; i++) {
                var sum = 0;
                $('.total'+i).each(function(){
                    sum += parseFloat($(this).text());  // Or this.innerHTML, this.innerText
                });
                $('#total'+i).text(sum);
                
            }
    }
    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