@extends('app-new')
@push('head-script')
@endpush
@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">{{trans('payroll/payroll.import_component_title')}}</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/{!! $alias !!}/home">{{trans('breadcrumb/breadcrumb.home')}}</a>
                    </li>
                    <li class="breadcrumb-item"><a href="/{!! $alias !!}/salary-fetch">{{trans('breadcrumb/breadcrumb.generate_salary')}}</a>
                    </li>
                    <li class="breadcrumb-item active">
                        {{trans('breadcrumb/breadcrumb.import_component')}}
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush
@section('content')
<form method="post" enctype="multipart/form-data" action="/{!! $alias !!}/payroll/import-salary-component">
{{ csrf_field() }}
<section id="multiple-column-form">
   
    @if (isset($status))
        <!--Closable Alerts start -->
        <div class="row">
            <div class="col-md-12">
                <div class="alert alert-{{ $status['code'] }} alert-dismissible fade show" role="alert">
                    <!-- <div class="alert-heading">{{ $status['header'] }}</div> -->
                    <div class="alert-body">
                        @foreach ($status['messages'] as $m)
                            {{$m}}<br>
                        @endforeach
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            </div>
        </div>
    <!--Closable Alerts end -->
    @endif
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body"  style="min-height:350px;">
                    <div class="row">
                        <div class="col-md-12 col-12">
                            <div class="mb-2">
                                <h4 class="p-1 text-center"
                                    style="color: #565360; background: #f5f5f5; border-left: 3px solid rgb(40, 40, 244); border-right: 3px solid rgb(40, 40, 244);">
                                    {{trans('payroll/payroll.import_salary_component_via_excel_file')}}</h4>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3">
                            <button type="button"  class="btn bg-light-primary" data-bs-toggle="modal" data-bs-target="#components-modal">{{trans('common/common.download_sample_file')}}</button>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-md-2">
                            <label class="form-label mt-2" for="area_id">{{ trans('admin/template.month') }}</label>
                            <select class="form-control mb-2 select2" name="month" id="month">
                                @foreach($months as $key=>$val)
                                    <option class="form-control" value="{{ $key }}" @if($key==$month) selected @endif>{{ $val }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label mt-2" for="year">{{ trans('admin/template.year') }}</label>
                            <select class="form-control mb-2 select2" name="year" id="year">
                                @foreach($years as $val)
                                    <option class="form-control" value="{{ $val }}" @if($val==$year) selected @endif>{{ $val }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-2">
                            <label class="form-label mt-2" for="year">{{ trans('admin/template.type') }}</label>
                            <select class="form-control mb-2 select2" name="type">
                                @foreach($types as $val)
                                    <option class="form-control" value="{{ $val }}">{{ ucfirst($val) }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-6 col-4">
                            <label class="form-label mt-2">{{trans('common/common.select_file_upload')}}</label>
                            <input class="form-control {{$errors->has('attachment') ? 'error' : ''}}" type="file" name="attachment" />
                            
                        </div>
                        <div class="col-md-2">
                            <button type="submit" name="upload" class="btn btn-success me-1 mt-3">{{trans('common/common.upload')}}</button>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                        </div>
                    </div>

                    @if(isset($status['errors']) && count($status['errors']) > 0)
                        <div class="row mt-4">
                            <p>Below records not uploaded please check and upload agian.</p>
                            <hr width="1px">
                            {{-- <div class="col-md-12 text-end">
                                <button type="button" class="btn btn-sm btn-primary" id="downloadErrors" data-rows="{{json_encode($rows)}}">Download Failed Records</button>
                            </div> --}}

                            <table class="table table-striped">
                                <tr>
                                    <th>{{trans('common/common.row')}}</th>
                                    <th>{{trans('employee/employee.employee_code')}}</th>
                                    <th>{{trans('common/common.errors')}}</th>
                                </tr>
                                @foreach ($status['errors'] as $key=>$r)
                                    <tr>
                                        <td style="width: 10%">{{$key+1}}</td>
                                        <td style="width: 22%">{{$r['employee_code']}}</td>
                                        <td style="width: 46%; font-weight: 500;">{{@$r['error']}}</td> 
                                    </tr>
                                @endforeach
                            </table>
                        </div>
                    @endif

                </div>
            </div>
        </div>
    </div>
</section>

{!! Form::close() !!} 
{{-- components modal --}}
<div class="modal fade text-start filterpopuplabel" id="components-modal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
    
        <div class="modal-content">
            <div class="modal-header">
                <div>
                    <h4 class="modal-title fw-bolder text-dark namefont-sizenewmodal" id="update-sequence-modal">{{trans('payroll/payroll.salary_component')}}</h4>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                    
                <div class="compoenentboxreport">
                    
                    
                    <form id="export-compoments-form" action="/{!! $alias !!}/payroll/download-component-sample" method="GET" class="loder-disabled">
                        <div class="row">
                            <div class="col-md-12" style="background: #ddd;">
                                <div class="form-check form-check-primary">
                                    <input type="checkbox" name="custom" class="form-check-input">
                                    <label class="form-check-label" >For Custom Update</label>
                                </div>
                            </div>
                        </div>
                        <input type="hidden" name="_token" value="{{csrf_token()}}">
                        <div class="nav-vertical">
                            <div class="tab-content tablecomponentreport">
                            </div>
                            <div class="nav-align-top nav-tabs-shadow mb-4">
                                <ul class="nav nav-tabs nav-fill" role="tablist" style="border-bottom: 1px solid #dbdade;">
                                    <li class="nav-item" role="presentation">
                                        <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-justified-home" aria-controls="navs-justified-home" aria-selected="false" tabindex="-1"> Gross <span class="badge rounded-pill badge-center h-px-20 w-px-20 bg-label-danger ms-1">3</span></button>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-justified-ctc" aria-controls="navs-justified-home" aria-selected="false" tabindex="-1"> CTC <span class="badge rounded-pill badge-center h-px-20 w-px-20 bg-label-danger ms-1">3</span></button>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-justified-profile" aria-controls="navs-justified-profile" aria-selected="false" tabindex="-1"> Deduction</button>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <button type="button" class="nav-link active" role="tab" data-bs-toggle="tab" data-bs-target="#navs-justified-messages" aria-controls="navs-justified-messages" aria-selected="true"> Others</button>
                                    </li>
                                </ul>
                                <div class="tab-content">
                                    <div class="tab-pane fade active show" id="navs-justified-home" role="tabpanel">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="form-check form-check-primary" style="padding-left: 35px;">
                                                    <input type="checkbox" class="form-check-input ComponentsCheck HeadingCheck" id="selectAllGrossComponents"  onchange="selectAll('GrossComponents')">
                                                    <label class="form-check-label" for="selectAllGrossComponents">{{trans('common/common.select')}} {{trans('common/common.all')}} {{trans('payroll/payroll.component')}}</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            @foreach($grossPayrollCompontTypes as $key=>$val)
                                            <div class="col-md-6">
                                                <div class="form-check form-check-secondary">
                                                    <input type="checkbox" name="components[]" class="form-check-input GrossComponentsCheck  mb-1" value="{{$val->id}}" onchange="selectallMaster('GrossComponents')">
                                                    <label class="form-check-label" for="components{{$key}}">{{$val->name}}</label>
                                                </div>
                                            </div>
                                            @endforeach
                                        </div>
                                    </div>
                                    <div class="tab-pane fade active show" id="navs-justified-ctc" role="tabpanel">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="form-check form-check-primary" style="padding-left: 35px;">
                                                    <input type="checkbox" class="form-check-input ComponentsCheck HeadingCheck" id="selectAllCtcComponents"  onchange="selectAll('CtcComponents')">
                                                    <label class="form-check-label" for="selectAllCtcComponents">{{trans('common/common.select')}} {{trans('common/common.all')}} {{trans('payroll/payroll.component')}}</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            @foreach($ctcPayrollCompontTypes as $key=>$val)
                                            <div class="col-md-6">
                                                <div class="form-check form-check-secondary">
                                                    <input type="checkbox" name="components[]" class="form-check-input ctcComponentsCheck  mb-1" value="{{$val->id}}" onchange="selectallMaster('CtcComponents')">
                                                    <label class="form-check-label" for="components{{$key}}">{{$val->name}}</label>
                                                </div>
                                            </div>
                                            @endforeach
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="navs-justified-profile" role="tabpanel">
                                        <div class="row">
                                            <div class="col-md-12" >
                                                <div class="form-check form-check-primary" style="padding-left: 35px;">
                                                    <input type="checkbox" class="form-check-input ComponentsCheck HeadingCheck" id="selectAllDeductionComponents"  onchange="selectAll('DeductionComponents')">
                                                    <label class="form-check-label" for="selectAllDeductionComponents">{{trans('common/common.select')}} {{trans('common/common.all')}} {{trans('payroll/payroll.component')}}</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            @foreach($deductionPayrollCompontTypes as $key=>$val)
                                            <div class="col-md-6">
                                                <div class="form-check form-check-secondary">
                                                    <input type="checkbox" name="components[]" class="form-check-input DeductionComponentsCheck  mb-1" value="{{$val->id}}" onchange="selectallMaster('DeductionComponents')">
                                                    <label class="form-check-label" for="components{{$key}}">{{$val->name}}</label>
                                                </div>
                                            </div>
                                            @endforeach
                                        </div>
                                    </div>
                                    <div class="tab-pane fade " id="navs-justified-messages" role="tabpanel">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="form-check form-check-primary" style="padding-left: 35px;">
                                                    <input type="checkbox" class="form-check-input ComponentsCheck HeadingCheck" id="selectAllOthersComponents"  onchange="selectAll('OthersComponents')">
                                                    <label class="form-check-label" for="selectAllOthersComponents">{{trans('common/common.select')}} {{trans('common/common.all')}} {{trans('payroll/payroll.component')}}</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            @foreach($othersPayrollCompontTypes as $key=>$val)
                                            <div class="col-md-6">
                                                <div class="form-check form-check-secondary">
                                                    <input type="checkbox" name="components[]" class="form-check-input OthersComponentsCheck  mb-1" value="{{$val->id}}" onchange="selectallMaster('OthersComponents')">
                                                    <label class="form-check-label" for="components{{$key}}">{{$val->name}}</label>
                                                </div>
                                            </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer"> 
                            <button type="reset" class="btn btn-outline-secondary" data-bs-dismiss="modal" aria-label="Close">
                                {{trans('common/common.discard')}}
                            </button>
                            <button type="submit" class="btn btn-primary data-submit mr-1" data-bs-dismiss="modal" aria-label="Close">{{trans('common/common.submit')}}</button>
                        </div>
                    </form>
                </div>    
                        
            </div>
            
        </div>
    
    </div>
</div>
@endsection
@push('footer-script')
<script>
    
    function selectAll(name){
        if($('#selectAll'+name).is(":checked")){
            $('.'+name+'Check').prop('checked', true);
        }else{
            $('.'+name+'Check').prop('checked', false);
        }
    }
    function selectallMaster(name){
        var boxes = $('.'+name+'Check:checked');
        if($('.'+name+'Check').length == boxes.length){
            $('#selectAll'+name).prop('checked',true);
        } else{
            $('#selectAll'+name).prop('checked',false);
        }
    }
   
</script>

@endpush