@extends('admin.layout.master')
@section('title',__('obs.'.$period_info['title']))
@section ('content')
<div class="card sina-card">
    @include('admin.layout.title_header', ['title'=>__('obs.'.$period_info['title'])])
    @php
        $p_types=[12=>"Yearly",1=>"Monthly",6=>"Half yearly",4=>"Quarterly",3=>"3-Monthly",2=>"Bi-Monthly",7=>"Custom"];
        $months=[1=>'January',2=>'February',3=>'March',4=>'April',5=>'May',6=>'June',7=>'July',8=>'August',9=>'September',10=>'October',11=>'November',12=>'December'];
    @endphp
    <div class="row p-2">
        <div class="col-md-12">
            <div class="card-body">
                @if($period_info['type']==1)
                    <div class="row justify-content-end gx-1 gy-0">
                        <div class="col-lg-2 col-sm-3 col-6">
                            <div class="mb-0">
                                <label for="textInput" class="form-label cl-form-label">{{__('obs.no.')}} {{__('obs.of')}} {{__('obs.period')}}</label>
                                <input type="text" class="form-control cl-form-control" id="textInput">
                            </div>
                        </div>
                        <div class="col-lg-2 col-sm-3 col-6">
                            <div class="mb-0">
                                <label for="nameSelect" class="form-label cl-form-label">{{__('obs.period')}} {{__('obs.types')}}</label>
                                <select id="period_type" class="form-select cl-form-select">
                                    @forelse ($p_types as $i=>$t)
                                        <option value="{{$i}}">{{$t}}</option>
                                    @empty 
                                    @endforelse
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-2 col-sm-3 col-6">
                            <div class="mb-0">
                                <label for="nameSelect" class="form-label cl-form-label">{{__('obs.start')}} {{__('obs.month')}}</label>
                                <select id="start_month" class="form-select cl-form-select">
                                    @forelse ($months as $i=>$t)
                                        <option value="{{$i}}">{{$t}}</option>
                                    @empty 
                                    @endforelse
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-2 col-sm-3 col-6">
                            <div class="mb-0">
                                <label for="nameSelect" class="form-label cl-form-label">{{__('obs.start')}} {{__('obs.year')}}</label>
                                <select id="start_year" class="form-select cl-form-select">
                                    @for ($i = 2020; $i < 2051; $i++)
                                        <option @if($i==date('Y')) selected @endif value="{{$i}}">{{$i}}</option>
                                    @endfor
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-2 col-sm-3 col-6">
                            <div class="mb-0">
                                <label for="nameSelect" class="form-label cl-form-label">{{__('obs.end')}} {{__('obs.month')}}</label>
                                <select id="end_month" class="form-select cl-form-select">
                                    @forelse ($months as $i=>$t)
                                        <option value="{{$i}}">{{$t}}</option>
                                    @empty 
                                    @endforelse
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-2 col-sm-3 col-6">
                            <div class="mb-0">
                                <label for="nameSelect" class="form-label cl-form-label">{{__('obs.end')}} {{__('obs.year')}}</label>
                                <div class="d-flex">
                                    <select id="end_year" class="form-select cl-form-select">
                                        @for ($i = 2020; $i < 2051; $i++)
                                            <option @if($i==date('Y')) selected @endif value="{{$i}}">{{$i}}</option>
                                        @endfor
                                    </select>
                                    <button type="button" class="btn btn-primary cl-btn cl-btn-primary d-flex" onclick="loadInputByPeriodType()">
                                        <i class="icofont-save"></i> {{__('obs.filter')}}
                                    </button>

                                </div>
                            </div>
                        </div>
                        {{-- <div class="col-lg-4 col-sm-6 col-12">
                            <div class="mb-0">
                                <label for="dateInput" class="form-label cl-form-label">Date Range</label>
                                <div class="d-flex">
                                    <input type="text" class="form-control date-picker cl-form-control flatpickr-input" id="start_date" readonly="readonly" value="01-07-2021">
                                    <input type="text" class="form-control date-picker cl-form-control flatpickr-input" id="end_date" readonly="readonly" value="30-06-2023">
                                    <button type="button" class="btn btn-primary cl-btn cl-btn-primary d-flex" onclick="loadInputByPeriodType()">
                                        <i class="icofont-save"></i> Filter
                                    </button>
                                </div>
                            </div>
                        </div> --}}
                        
                    </div>
                    <div class="row">
                        <div class="col cl-table-container justify-content-center">
                            <form action="{{route('period_settings.store')}}" method="post">
                                @csrf
                                <input type="hidden" name="type" id="type" value="12">
                                <table class="cl-table" style="margin: 1rem auto">
                                    <thead>
                                        <tr>
                                            <th>{{__('obs.period')}} {{__('obs.no')}}</th>
                                            <th>{{__('obs.start')}}</th>
                                            <th>{{__('obs.end')}}</th>
                                            <th>{{__('obs.name')}}</th>
                                            <th>{{__('obs.local')}}</th>
                                            <th>{{__('obs.action')}}</th>
                                            {{-- <th>Lock</th>
                                            <th>Close</th> --}}
                                        </tr>
                                    </thead>
                                    <tbody id="table_data_body">
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <th colspan="5"></th>
                                            <th><button type="submit" id="form_submit_button" style="display:none !important;" class="btn btn-primary cl-btn cl-btn-primary d-flex">
                                                <i class="icofont-save"></i> {{__('obs.save')}}
                                            </button></th>
                                        </tr>
                                    </tfoot>
                                </table>
                            </form>
                        </div>
                    </div>
                @else
                    <div class="row">
                        <div class="col cl-table-container justify-content-center">
                                <table class="cl-table" style="margin: 1rem auto">
                                    <thead>
                                        <tr>
                                            <th>{{__('obs.period')}} {{__('obs.no')}}</th>
                                            <th>{{__('obs.start')}}</th>
                                            <th>{{__('obs.end')}}</th>
                                            <th>{{__('obs.name')}}</th>
                                            <th>{{__('obs.local')}}</th>
                                            <th>{{$period_info['type']==2?'Lock':'Close'}}</th>
                                        </tr>
                                    </thead>
                                    <tbody id="table_data_body">
                                        @php
                                            $i=0;
                                        @endphp
                                        @forelse ($periods as $p)
                                            <tr>
                                                <td>
                                                    {{++$i}} 
                                                    {{-- <input type="hidden" name="edit_id[]" value="{{$p->id}}"> --}}
                                                 </td>
                                                 <td>{{$p->start}}</td>
                                                 <td>{{$p->end}}</td>
                                                 <td>{{$p->name}}</td>
                                                 <td>{{$p->local}}</td>
                                                 <td>
                                                    <div class="form-check form-switch">
                                                        <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked{{$p->id}}" @if((($period_info['type']==2) && $p->is_lock)||(($period_info['type']==3) && $p->is_closed)) checked @endif onclick="updateLockOrCloseStatus(this,'{{$p->id}}','{{$period_info['type']}}')"/>
                                                        <label class="form-check-label" for="flexSwitchCheckChecked{{$p->id}}"></label>
                                                      </div>
                                                 </td>
                                            </tr>
                                        @empty
                                            
                                        @endforelse
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <th colspan="5"></th>
                                            <th><button type="submit" id="form_submit_button" style="display:none !important;" class="btn btn-primary cl-btn cl-btn-primary d-flex">
                                                <i class="icofont-save"></i> {{__('obs.save')}}
                                            </button></th>
                                        </tr>
                                    </tfoot>
                                </table>
                            </form>
                        </div>
                    </div>
                @endif
                
            </div>
        </div>
    </div>
</div>

@include('accounts.accounts_settings.modal_accounts_ledger')
@include('accounts.accounts_settings.modal_head_accounts_code')

@endsection
@section('script')
    <script type="text/javascript">
    let monthNames=@json($months);
   const loadInputByPeriodType=async ()=>{
        let y=Number($('#period_type').val());
        $('#type').val(y);
        var arrayEndDate=['',31,28,31,30,31,30,31,31,30,31,30,31];
        const startYear = Number($('#start_year').val());
        const endYear = Number($('#end_year').val());
        const sMonth = Number($('#start_month').val());
        const eMonth = Number($('#end_month').val());
        const s=`01-${sMonth}-${startYear}`;
        const e=`${arrayEndDate[eMonth]}-${eMonth}-${endYear}`;
        let dateArray=y==7?[s+'|'+e]:await splitDateBetween(s,e,y);
        let dateDataRows=[];
        let dateStr='';
        let i=1;
        let is_start=1;
        let start_name='';
        let last_id=0;
        for (let index = 0; index < dateArray.length; index++) {
            const sdate = dateArray[index].split('|')[0];
            const edate = dateArray[index].split('|')[1];
            console.log(edate,'Each');
            if(is_start==1){
                let data_pass={'id':'','sl':i,'start':sdate,'end':'','name':'','local':'','is_lock':0,'is_closed':0,'is_edit_allow':0};
                dateDataRows.push(data_pass);
                let smnt=Number(sdate.split('-')[1]);
                start_name=monthNames[smnt];
                last_id=i;
                // dateStr+=`<tr><td>${i}</td><td>${sdate}</td>`;
                i++;
            }
            is_start=0;
            if((0==(index+1)%y) ||( dateArray.length==(index+1))){
                if(!(y==1)){
                    let emnt=Number(edate.split('-')[1]);
                    start_name=start_name.substring(0,3)+'-'+monthNames[emnt].substring(0,3);
                }
                let item = dateDataRows.find( t  => t.sl == last_id);
                if(item){
                    item.end=edate;
                    item.name=start_name;
                    item.local=start_name;
                }
                // dateStr+=`<td>${edate}</td><td>${start_name}</td></tr>`;
                is_start=1;
            }
        }
        
        // return null;
      
            // $('#report_html').html(data);
            link="{{route('period_settings.check_period_exist')}}";
            for (let index = 0; index < dateDataRows.length; index++) {
                let row=dateDataRows[index];
                let data_param={
                    startd:row.start,
                    endd:row.end,
                }
                const fillHtmlWithData = fillableContent => {
                    if(fillableContent){
                        dateStr+=`<tr class="bg-warning">`;
                            dateStr+=`<td>${row.sl}<input type="hidden" value="${fillableContent.id}" name="edit_id[]"></td>`;
                            dateStr+=`<td><input type="text" class="form-control cl-from-control" name="start[]" id="" value="${fillableContent.start}" readonly></td>`;
                            dateStr+=`<td><input type="text" class="form-control cl-from-control" name="end[]" id="" value="${fillableContent.end}" readonly></td>`;
                            dateStr+=`<td><input type="text" class="form-control cl-from-control" name="name[]" id="" value="${row.name}"></td>`;
                            dateStr+=`<td><input type="text" class="form-control cl-from-control" name="local[]" id="" value="${row.local}"></td>`;
                            dateStr+=`  <td>
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked${fillableContent.id}" ${(fillableContent.status?'checked':'')} onclick="updateLockOrCloseStatus(this,${fillableContent.id},1)"/>
                                                <label class="form-check-label" for="flexSwitchCheckChecked${fillableContent.id}"></label>
                                            </div>
                                        </td>`;
                        dateStr+=`</tr>`;
                    }else{
                        dateStr+=`<tr>`;
                            dateStr+=`<td>${row.sl}<input type="hidden" value="0" name="edit_id[]"></td>`;
                            dateStr+=`<td><input type="text" class="form-control cl-from-control" name="start[]" id="" value="${row.start}" readonly></td>`;
                            dateStr+=`<td><input type="text" class="form-control cl-from-control" name="end[]" id="" value="${row.end}" readonly></td>`;
                            dateStr+=`<td><input type="text" class="form-control cl-from-control" name="name[]" id="" value="${row.name}"></td>`;
                            dateStr+=`<td><input type="text" class="form-control cl-from-control" name="local[]" id="" value="${row.local}"></td>`;
                            dateStr+=`<td></td>`
                        dateStr+=`</tr>`;
                        // dateStr+=`<tr><td>${row.sl}</td><td>${row.sdate}</td><td>${row.edate}</td><td>${row.name}</td><td>${row.name}</td></tr>`
                    }
                    if(dateDataRows.length==(index+1)){
                        $('#loader').hide();
                        $('#form_submit_button').show();
                        $('#table_data_body').html(dateStr);
                    }
                }
                
                ajaxCall(link,'POST',data_param, fillHtmlWithData);
            }
        
    }
    const splitDateBetween =async (startDate,endDate,split_type)=> {
        var arrayEndDate=['',31,28,31,30,31,30,31,31,30,31,30,31];
        var start      = startDate.split('-');
        var end        = endDate.split('-');
        var startYear  = parseInt(start[2]);
        var endYear    = parseInt(end[2]);
        var dates      = [];
       
        for(var i = startYear; i <= endYear; i++) {
            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];
    }
    async function getMonthRange(n) {
        var arrayEndDate=['',31,28,31,30,31,30,31,31,30,31,30,31];
        const startYear = Number($('#start_year').val());
        const endYear = Number($('#end_year').val());
        const startMonth = Number($('#start_month').val());
        const endMonth = Number($('#end_month').val());
        const startDate=new Date(`${startYear}-${startMonth}-01`);
        const endDate=new Date(`${endYear}-${endMonth}-${arrayEndDate[endMonth]}`);
        const dateRange = [];

        for (let year = startYear; year <= endYear; year++) {
            const monthStart = (year === startYear) ? startMonth : 0;
            const monthEnd = (year === endYear) ? endMonth : 11;

            for (let month = monthStart; month <= monthEnd; month++) {
            const start = new Date(year, month, 1);
            const end = new Date(year, month + 1, 0);
            if (start < startDate) start.setDate(1);
            if (end > endDate) end.setDate(endDate.getDate());
                dateRange.push({ start, end });
            }
        }

        return dateRange;
    }
    function updateLockOrCloseStatus(T,id,type){
        let titleArr=[[['','']],['Inactive','Active'],['Unlock','Lock'],['Open','Close']]
        Swal.fire({
            icon: 'warning',
            title: titleArr[type][T.checked?1:0],
            html: 'Are You Sure?',
            showConfirmButton: true,
            showDenyButton: true,
            position: 'center',
            timer: null,
        }).then((res) => {
            if(res.isConfirmed){
                let data_param={
                    id:id,
                    type:type,
                    status:T.checked?1:0,
                }
                const succsessResponse = data => {
                    if(data){
                        Swal.fire(titleArr[type][T.checked?1:0]+' Successfull', '', 'success');
                    }else{
                        Swal.fire('Status Update Unsuccessfull', '', 'error');
                    }
                }
                ajaxCall("{{route('period_settings.update_status')}}",'POST',data_param, succsessResponse);
            }
        });
    }
    </script>
@stop