@extends('app-new')
@push('head-script')
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/tables/datatable/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/tables/datatable/responsive.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/components.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/vendors.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/extensions/toastr.min.css">
    <link rel="stylesheet" href="/assets/plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.css">
    <link rel="stylesheet" href="/assets/css/daterangepicker.css">
    <!-- BEGIN: Page CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/css/core/menu/menu-types/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/forms/select/select2.min.css">
    <link rel="stylesheet" type="text/css" href="../../../assets/css/jquery-ui.min.css">
    <!-- END: Page CSS-->
    
@endpush 

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">Salary Master Report</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{url('')}}/{!! $alias !!}/home">Home</a>
                    </li>
                    <li class="breadcrumb-item active">Salary Master Report
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush
@section('content')
    <!-- Column Search -->
    <section id="column-search-datatable">
        <!-- Filters -->
        <a style="display: none" id="downloadTxt" href="{{ $downloadUrl }}"></a>
        <form method="get" action="" id="filter-form">
            <input type="hidden" name="organization_id" value="{{ $organization->id }}">
            <input type="hidden" name="showModel" id="showModel" value="@if (!empty($_GET['showModal'])){{ $_GET['showModal'] }}@endif">
            <div class="newcontent-header content-header row">
                <div class="content-header-left newcontent-header-left col-md-9 col-12 mt-1">
                    <div class="row">
                        @foreach ($reportTemplates as $template)
                            <div class="col-md-2">
                                <div class="card">
                                    <a onclick="templateFilter({{ $template->id }})">
                                        <div class="card-body newcard-body p-1 text-center rounded @if($template->id == $templateId) bg-light-danger @endif">
                                            <b>{{ $template->name }}</b>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        @endforeach
                        {{-- <div class="col-md-2">
                            <button type="button" id="add" class="btn bg-light-primary" data-bs-toggle="modal" data-bs-target="#templateModal"><i data-feather="plus"></i></button>
                        </div> --}}
                    </div>
                </div>
                <div class="content-header-right text-md-end col-md-3 col-12 d-md-block d-none mt-1">
                    <div class="breadcrumb-right d-flex justify-content-end">
                        <div class="me-2">
                            <button type="button" id="add" class="btn bg-light-primary" data-bs-toggle="modal"
                                data-bs-target="#templateModal"><i data-feather="plus"></i></button>
                        </div>
                        <div class="dropdown">
                            <button class="btn-icon btn btn-primary btn-round btn-sm dropdown-toggle" type="button"
                                data-bs-toggle="offcanvas" data-bs-target="#offcanvasEnd" aria-controls="offcanvasEnd"
                                type="button"><i data-feather='filter'></i></button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="offcanvas-end-example">
                <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasEnd" aria-labelledby="offcanvasEndLabel">
                    <div class="offcanvas-header">
                        <h5 id="offcanvasEndLabel" class="offcanvas-title"><strong> Filter </strong></h5>
                        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
                            aria-label="Close"></button>
                    </div>
                    <input type="hidden" id="status" name="status" value="0">
                    <input type="hidden" id="template_id" name="template_id" value="{{ $templateId }}">
                    <div class="offcanvas-body my-auto mx-0">
                    <div class="col-sm-12 mt-1">
                    <div class="form-label-group">
                    <label class="form-label" for="area_id">Location</label>
                    <select class="form-control select2" name="location_id[]" id="location_id"
                        onchange="getsubLocations(this,'sublocations')" multiple>
                        @foreach ($locations as $location)
                            <option value="{{ $location->id }}" @if ($locationIds && in_array($location->id, $locationIds)) selected @endif>
                                {{ $location->name }}</option>
                        @endforeach
                    </select>
                </div>
                </div>
                <div class="col-sm-12 mt-1">
                <div class="form-label-group">
                <label class="form-label" for="sub_location_id">Sub Location</label>
                <select class="form-control select2" name="sub_location_id[]" id="sub_location_id" multiple>
                    @foreach ($subLocations as $subLocation)
                        <option value="{{ $subLocation->id }}" @if ($subLocationIds && in_array($subLocation->id, $subLocationIds)) selected @endif>
                            {{ $subLocation->name }}</option>
                    @endforeach   
                </select>
            </div>
                </div>
                        <div class="col-sm-12 mt-1">
                            <div class="form-label-group">
                                <label class="form-label">Department</label>
                                <select class="form-control select2" name="department_id[]" id="department_id" class="form-control" multiple>
                                    @foreach($departments as $department)
                                    <option value="{{$department->id}}" @if( ($departmentIds) && in_array($department->id, $departmentIds)) selected @endif>
                                                        {{$department->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="col-sm-12 mt-1">
                            <div class="form-label-group">
                                <label class="form-label">Designation</label>
                                <select class="form-control select2" name="designation_id[]" id="designation_id" class="form-control" multiple>
                                    @foreach($designations as $designation)
                                        <option value="{{$designation->id}}" @if( ($designationIds) && in_array($designation->id, $designationIds)) selected @endif>
                                            {{$designation->name}}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <label class="form-label mt-2">Category</label>
                        <select name="category_id[]" class="form-control mb-2 select2" multiple>
                            @foreach($categories as $category)
                                <option value="{{ $category->id }}" @if($categoryIds && in_array($category->id, $categoryIds)) selected @endif>
                                    {{ $category->name }}
                                </option>
                            @endforeach
                        </select>


                        <div class="col-sm-12 mt-1">
                            <div class="form-label-group">
                                <label class="form-label">Contractor</label>
                                <select class="form-control select2" name="contractor_id[]" id="contractor_id" class="form-control" multiple>
                                    @foreach($contractors as $contractor)
                                        <option value="{{$contractor->id}}" @if( ($contractorIds) && in_array($contractor->id, $contractorIds)) selected @endif>
                                            {{$contractor->name}}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        
                        <label class="form-label mt-2" for="area_id">{{trans('master/master.employee_type')}}</label>
                        <select class="form-control mb-2 select2" name="employee_type" id="employee_type" onchange="getEmployeeByType(this.value)">
                            <option value="">Select {{trans('master/master.type')}}</option>
                            @foreach($employeeTypes as $empType)
                                <option value="{{$empType}}" @if( $empType == $employeeTypeSelected) selected @endif>
                                    {{ucwords($empType)}}
                                </option>
                            @endforeach
                        </select>
                        <label class="form-label mt-2" for="area_id">Employees</label>
                        <select class="form-control mb-2 select2" name="employee_id[]" id="employee_id" class="form-control" multiple>
                            <option value="">All</option>
                                @foreach($employeelist as $employee)
                                <option value="{{ @$employee->employeeinfo->id }}" @if( ($employeeIds) && in_array(@$employee->employeeinfo->id, $employeeIds)) selected @endif >{{ ucwords(@$employee->employeeinfo->name) }} ({{@$employee->employeeinfo->employee_code}})</option>
                                @endforeach
                        </select>
                        
                        <label class="form-label mt-2" for="area_id">{{trans('master/master.emp_status')}}</label>
                        <select name="employee_status" class="form-control mb-2 select">
                            <option value="">Select Status</option>
                            @foreach($employeeStatus as $key)
                                <option value="{{ $key }}" {{ request('employee_status') == $key ? 'selected' : '' }}>
                                    {{ ucwords($key) }}
                                </option>
                            @endforeach
                        </select>
                        
                        <div class="col-md-12 mt-1">
                            <div class="bg-light rounded p-1">
                                <div class="row">
                                    <div class="col-sm-12">
                                        <div class="form-label-group">
                                            <label class="form-label">Component Filter</label>
                                            <select class="form-control select2" name="type_id" id="type_id" class="form-control">
                                                <option value="">-Select-</option>
                                                @foreach($payrollComponents as $payrollComponent)
                                                    <option value="{{$payrollComponent->id}}" @if(request()->input('type_id') == $payrollComponent->id) selected @endif>
                                                            {{$payrollComponent->name}}
                                                        </option>
                                                    @endforeach
                                              
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-sm-6 mt-1">
                                        <label class="form-label" for="value">Compare Value</label>
                                            <select class="form-control select2" name="compare_symbol" id="compare_symbol" class="form-control">
                                                <option value="greater" @if(request()->input('compare_symbol') == "greater" ) selected
                                                    @endif>Greater Then</option>
                                                <option value="equal" @if(request()->input('compare_symbol') == "equal" ) selected
                                                    @endif>Equal To</option>
                                                <option value="less" @if(request()->input('compare_symbol') == "less" ) selected
                                                    @endif>Less Then</option>
                                            </select>
                                    </div>
                                    <div class="col-md-6 mt-1"> 
                                                <label class="form-label" >
                                                Value:
                                                </label>
                                                <input type="number" class="form-control" name="calculated_value" value="{{request()->input('calculated_value') ? request()->input('calculated_value') : 0}}">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary mt-2 mb-1 d-grid w-100 d-flex justify-content-center"  data-bs-dismiss="offcanvas" aria-label="Close">
                            <i data-feather='search' class="me-2"></i>Search
                        </button>
                                            
                    </div>
                </div>
            </div>
        </form>

        <div class="row mt-2">
            <div class="col-12">
                <div class="card row reportcard">
                        {{-- <div class="card-header d-flex justify-content-end">
                                <a class="dt-button buttons-excel" target="_blank"
                                    href="{{ $orgUrl. '/salary-master/export?template_id=' .$templateId }}&employee_id={{ $employeeIds ? implode(',', $employeeIds) : '' }}&designation_id={{ $designationIds ? implode(',', $designationIds) : '' }}&department_id={{ $departmentIds ? implode(',', $departmentIds) : '' }}"
                                    style="display: initial;"><button type="button"
                                        class="btn btn-primary waves-effect waves-float waves-light">
                                        <span> Export to Excel</span>
                                    </button></a>
                        </div> --}}
                    @if($templateId)
                    <div class="card-datatable table-responsive">
                        <table class="dt-column-search table table-responsive attendance-reg-table tablenewheadfixed" id="organization">
                                <thead>
                                    <tr>
                                        <th>S.No.</th>
                                        @foreach ($finalHeaders as $sequence)
                                            @php 
                                                $val = explode('...', $sequence['value']);
                                                $headersAlias = '';
                                                if(isset($sequence['alias'])){
                                                    $headersAlias = $sequence['alias'];
                                                }
                                                
                                                if($headersAlias){
                                                    $val = $headersAlias;
                                                }else{
                                                    if(isset($val[1])){
                                                        $val = $val[1];
                                                    }
                                                    else{
                                                        $val = $val[0];
                                                    }
                                                }
                                            @endphp
                                            <th>{{ $val }}</th>
                                        @endforeach
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($employeeRecords as $data)
                                        <tr>
                                            <td>
                                                @if (isset($_GET['page']) && $_GET['page'] > 0)
                                                    {{ ($_GET['page'] - 1) * 10 + $loop->iteration }}
                                                @else
                                                    {{ $loop->iteration }}
                                                @endif
                                            </td>
                                            @foreach ($finalHeaders as $sequence)
                                                @if($sequence['type'] == 'headers')
                                                    @php 
                                                        $val = explode('...', $sequence['value']);
                                                        $val = $val[0];
                                                    @endphp
                                                    @if($val=='department' || $val=='designation' || $val=='contractor')
                                                        <td>{{ @$data->employee->{$val}->name }}</td>
                                                    @else
                                                        <td>{{ ucwords(@$data->employee->{$val}) }}</td>
                                                    @endif
                                                @elseif($sequence['type'] == 'components')
                                                    @php 
                                                        $val = explode('...', $sequence['value']);
                                                        $id = $val[0];
                                                        $key = $val[0];
                                                        $componentData = $data->payrollEmployeeTempStructures->where('type_id', $id)->first();
                                                        $val = 0;
                                                        if($componentData){
                                                            $val = $componentData->calculate_salary;
                                                        }
                                                    @endphp
                                                    <td class="bg-datehead">{{$val}}</td>
                                                @elseif($sequence['type'] == 'summary')
                                                    @php 
                                                        $val = explode('...', $sequence['value']);
                                                        $val = $val[0];
                                                    @endphp
                                                    @if($val == 'ctc_amount')
                                                        <td>{{ round((@$data->{$val} / 12) , 2 ) }}</td>
                                                    @else
                                                        <td>{{ @$data->{$val} }}</td>
                                                    @endif
                                                @endif
                                            @endforeach
                                        </tr>
                                    @endforeach
                                </tbody>
                                {{-- <tfoot>
                                    <tr>
                                        <th>Total:</th>
                                        @foreach ($finalHeaders as $sequence)
                                                @if($sequence['type'] == 'headers')
                                                <th></th>
                                                @else
                                                    @foreach ($monthData as $m)
                                                            @php 
                                                                $val = explode('...', $sequence['value']);
                                                                $val = $val[0];
                                                            @endphp
                                                            @if($sequence['type'] == 'summary')
                                                                <th class="bg-datehead"></th>
                                                            @elseif($sequence['type'] == 'components')
                                                                @if($sequence['type'] == 'components')
                                                                    @if(isset($sequence['calculationType']) && ($sequence['calculationType'] == 'PaidDays'))
                                                                        @if($templateData->rate=='1')
                                                                            <th class="bg-datehead"></th>
                                                                        @endif
                                                                    @endif
                                                                @endif
                                                                <th class="bg-datehead">{{ @$componentTotal[$m][$val] }}</th>
                                                                @if($sequence['type'] == 'components')
                                                                    @if($templateData->arrear=='1')
                                                                        <th class="bg-datehead"></th>
                                                                    @endif
                                                                @endif
                                                            @endif
                                                    @endforeach
                                            @endif
                                        @endforeach                                     
                                    </tr>
                                </tfoot> --}}
                        </table>
                    </div>
                    {{ $employeeRecords->appends($request->except('page'))->links('pagination::bootstrap-4') }}
                    @endif
                </div>
            </div>
        </div>
    </section>
    <!-- Earning Config Modal -->
    <div class="modal fade text-start filterpopuplabel" id="templateModal" 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="templateModal17">Generate Report</h4>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="template_form" action="/{!! $alias !!}/report-template/create-template" onsubmit="return false">
                        <input type="hidden" name="_token" value="{{csrf_token()}}">
                        <input type="hidden" name="type" id="template_type" value="salary-master">
                        <input type="hidden" name="template_id_temp" id="template_id_temp" value="">
                        <div class="row">
                            <div class="col-md-5">
                                <div class="mb-1">
                                    <label class="form-label" for="name">{{trans('master/master.report_name')}} <span class="mendatory-field text-danger">*</span></label>
                                    <input type="text" class="form-control" name="name" id="name" placeholder="Enter Report Name" />
                                </div>
                            </div>
                            <div class="col-md-7 mt-2">
                                <div class="form-check form-check-success mb-1">
                                    <input type="checkbox" class="form-check-input" id="selectAllHeader" onchange="selectAll('Header')">
                                    <label class="form-check-label fw-bolder text-dark" for="selectAllHeader">{{trans('master/master.all_component')}}</label>
                                </div>
                            </div>
                        </div>
                    
                        <div class="card"> 
                            <div class="card-body">
                                <div class="nav-vertical">
                                    <ul class="nav nav-tabs nav-left flex-column" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link active" data-bs-toggle="tab" href="#Employee" role="tab" ><i data-feather="users"></i> Employee Info</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" data-bs-toggle="tab" href="#Bank" role="tab" ><i data-feather="briefcase"></i> Bank Detail</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" data-bs-toggle="tab" href="#Gross" role="tab" ><i data-feather="bar-chart"></i> Gross</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" data-bs-toggle="tab" href="#Deduction" role="tab" ><i data-feather="at-sign"></i> Deduction</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" data-bs-toggle="tab" href="#CTC" role="tab" ><i data-feather="grid"></i> CTC</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" data-bs-toggle="tab" href="#Others" role="tab" ><i data-feather="compass"></i> Others</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" data-bs-toggle="tab" href="#NetPay" role="tab" ><i data-feather="dollar-sign"></i>Net Pay</a>
                                        </li>
                                            
                                    </ul>
                                    <div class="tab-content tablecomponentreport">
                                        <div class="tab-pane active" id="Employee">
                                           <div class="compoenentboxreport">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="form-check form-check-primary">
                                                            <input type="checkbox" class="form-check-input HeaderCheck HeadingCheck" id="selectAllEmployeeDetails" checked="" onchange="selectAll('EmployeeDetails')">
                                                            <label class="form-check-label" for="colorCheck1">Select All Component</label>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="row sortable">
                                                    @foreach($employeeDetailsHeaders as $key=>$val)
                                                    
                                                    <div class="col-md-6">
                                                        <div class="form-check form-check-secondary">
                                                            <input type="checkbox" name="headers[]" class="form-check-input  HeaderCheck EmployeeDetailsCheck" id="employeeDetailsHeaders{{$key}}" value="{{ $key.'...'.$val }}" onchange="reverseSelect('EmployeeDetails')">
                                                            <label class="form-check-label" for="employeeDetailsHeaders{{$key}}">{{$val}}</label>
                                                        </div>
                                                    </div>
                                                    @endforeach 
                                                </div>
                                            
                                            </div>
                                                  
                                        </div>

                                        <div class="tab-pane" id="Bank">
                                            <div class="compoenentboxreport">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="form-check form-check-primary">
                                                            <input type="checkbox" class="form-check-input HeaderCheck HeadingCheck" id="selectAllBankDetails" checked="" onchange="selectAll('BankDetails')">
                                                            <label class="form-check-label" for="selectAllBankDetails">Select All Component</label>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="row sortable">
                                                    @foreach($bankDetailsHeaders as $key=>$val)
                                                    <div class="col-md-6">
                                                        <div class="form-check form-check-secondary">
                                                            <input type="checkbox" name="headers[]" class="form-check-input HeaderCheck BankDetailsCheck mb-1" id="bankDetailsHeaders{{$key}}" value="{{ $key.'...'.$val }}" onchange="reverseSelect('BankDetails')">
                                                            <label class="form-check-label" for="bankDetailsHeaders{{$key}}">{{$val}}</label>
                                                        </div>
                                                    </div>
                                                    @endforeach 
                                                </div>
                                            </div>
                                        </div>

                                        <div class="tab-pane" id="Gross">
                                            <div class="compoenentboxreport">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="form-check form-check-primary">
                                                            <input type="checkbox" class="form-check-input HeaderCheck HeadingCheck" id="selectAllGrossComponents" checked="" onchange="selectAll('GrossComponents')">
                                                            <label class="form-check-label" for="colorCheck1">Select All Component</label>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="row sortable">
                                                @foreach($grossComponents as $key=>$val)
                                                    <div class="col-md-6">
                                                        <div class="form-check form-check-secondary">
                                                            <input type="checkbox" name="components[]" id="grossComponents{{$key}}" class="form-check-input GrossComponentsCheck HeaderCheck mb-1" value="{{ $val->id.'...'.$val->name }}" onchange="reverseSelect('GrossComponents')">
                                                            <label class="form-check-label @if($val->deleted_at) text-danger @endif" for="grossComponents{{$key}}">{{$val->name}}</label>
                                                        </div>
                                                    </div>
                                                    @endforeach 
                                                </div>
                                            </div>         
                                        </div>

                                        <div class="tab-pane" id="Deduction">
                                            <div class="compoenentboxreport">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="form-check form-check-primary">
                                                            <input type="checkbox" class="form-check-input HeaderCheck HeadingCheck" id="selectAllDeductionComponents" checked="" onchange="selectAll('DeductionComponents')">
                                                            <label class="form-check-label" for="selectAllDeductionComponents">Select All Component</label>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="row sortable">
                                                    @foreach($deductionComponents as $key=>$val)
                                                    <div class="col-md-6">
                                                        <div class="form-check form-check-secondary">
                                                            <input type="checkbox" name="components[]" id="deductionComponents{{$key}}" class="form-check-input DeductionComponentsCheck HeaderCheck mb-1" value="{{ $val->id.'...'.$val->name }}" onchange="reverseSelect('DeductionComponents')">
                                                            <label class="form-check-label @if($val->deleted_at) text-danger @endif" for="deductionComponents{{$key}}">{{$val->name}}</label>
                                                        </div>
                                                    </div>
                                                    @endforeach 
                                                </div>
                                            </div>       
                                        </div>

                                        <div class="tab-pane" id="CTC">
                                            <div class="compoenentboxreport">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="form-check form-check-primary">
                                                            <input type="checkbox" class="form-check-input HeaderCheck HeadingCheck" id="selectAllCtcComponents" checked="" onchange="selectAll('CtcComponents')">
                                                            <label class="form-check-label" for="selectAllCtcComponents">Select All Component</label>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="row sortable">
                                                    @foreach($ctcComponents as $key=>$val)
                                                    <div class="col-md-6">
                                                        <div class="form-check form-check-secondary">
                                                            <input type="checkbox" name="components[]" id="ctcComponents{{$key}}" class="form-check-input HeaderCheck CtcComponentsCheck mb-1" value="{{ $val->id.'...'.$val->name }}" onchange="reverseSelect('CtcComponents')">
                                                            <label class="form-check-label @if($val->deleted_at) text-danger @endif" for="ctcComponents{{$key}}">{{$val->name}}</label>
                                                        </div>
                                                    </div>
                                                    @endforeach 
                                                </div>
                                            </div>       
                                        </div>

                                        <div class="tab-pane" id="Others">
                                            <div class="compoenentboxreport">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="form-check form-check-primary">
                                                            <input type="checkbox" class="form-check-input HeaderCheck HeadingCheck"  id="selectAllOtherComponents" checked="" onchange="selectAll('OtherComponents')">
                                                            <label class="form-check-label" for="selectAllOtherComponents">Select All Component</label>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="row sortable">
                                                    @foreach($otherComponents as $key=>$val)
                                                    <div class="col-md-6">
                                                        <div class="form-check form-check-secondary">
                                                            <input type="checkbox" name="components[]" id="otherComponents{{$key}}" class="form-check-input HeaderCheck OtherComponentsCheck mb-1" value="{{ $val->id.'...'.$val->name }}" onchange="reverseSelect('OtherComponents')">
                                                            <label class="form-check-label @if($val->deleted_at) text-danger @endif" for="otherComponents{{$key}}">{{$val->name}}</label>
                                                        </div>
                                                    </div>
                                                    @endforeach 
                                                </div>
                                            </div>       
                                        </div>

                                        <div class="tab-pane" id="NetPay">
                                            <div class="compoenentboxreport">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="form-check form-check-primary">
                                                            <input type="checkbox" class="form-check-input HeaderCheck HeadingCheck"  id="selectAllNetPay" checked="" onchange="selectAll('NetPay')">
                                                            <label class="form-check-label" for="selectAllNetPay">Select All Component</label>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="row sortable">
                                                    @foreach($salarySlipComponents as $key=>$val)
                                                    <div class="col-md-6">
                                                        <div class="form-check form-check-secondary">
                                                            <input type="checkbox" name="salary_slip_components[]" id="salarySlipComponents{{$key}}" class="form-check-input HeaderCheck NetPayCheck mb-1" value="{{ $key.'...'.$val }}" onchange="reverseSelect('NetPay')">
                                                            <label class="form-check-label" for="salarySlipComponents{{$key}}">{{$val}}</label>
                                                        </div>
                                                    </div>
                                                    @endforeach 
                                                </div>
                                            </div>       
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form> 
                </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="button" class="btn btn-primary data-submit mr-1" id="add_template">{{trans('common/common.submit')}}</button>
                </div>
            </div>
        </div>
        
    </div>


    {{-- Sequence modal --}}
    <div class="modal fade text-start filterpopuplabel" id="sequenceModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
        <form id="sequence-template-form" action="/{!! $alias !!}/report-template/sequence-template" method="POST" onsubmit="return false">
            <div class="modal-content">
                <div class="modal-header">
                    <div>
                        <h4 class="modal-title fw-bolder text-dark namefont-sizenewmodal" id="update-sequence-modal">Update Sequence</h4>
                        <button type="button" onclick="getTemplate({{$templateId}})" class=" btn btn-outline-primary me-2" ><i data-feather="edit-3"></i>Edit</button>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                        <input type="hidden" name="_token" value="{{csrf_token()}}">
                        <input type="hidden" name="seq_template_id_temp" id="seq_template_id_temp" value="">
                        <input type="hidden" name="type" id="template_type" value="salary-master">

                        <div class="row">
                            <div class="col-md-12">
                                <div class="mb-1">
                                    <label class="form-label" for="name">{{trans('master/master.report_name')}} <span class="mendatory-field text-danger">*</span></label>
                                    <input type="text" class="form-control" name="name" id="report-name" placeholder="Enter Report Name" />
                                </div>
                            </div>
                        </div>
                        <div class="d-flex justify-content-end">
                            <div class="p-1">
                                <div class="from-group">
                                    <div class="form-check form-check-secondary">
                                        <input type="checkbox" name="rate"  class="form-check-input HeaderCheck NetPayCheck mb-1" id="rate" >
                                        <label class="form-check-label" for="rate">Rate</label>
                                    </div>
                                </div>
                            </div>
                            <div class="p-1">
                                <div class="from-group">
                                    <div class="form-check form-check-secondary">
                                        <input type="checkbox" name="arrear"  class="form-check-input HeaderCheck NetPayCheck mb-1" id="arrear">
                                        <label class="form-check-label" for="arrear">Arrear</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                    
                        <div class="card"> 
                            <div class="card-body">
                                <div class="nav-vertical">
                                    <div class="tab-content tablecomponentreport">
                                        <div class="tab-pane active">
                                           <div class="compoenentboxreport component-custom">
                                                <div class="row sortable new-header" id="set-data">
                                                    
                                                </div>
                                            </div>
                                        </div>
                                    </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="button" onclick="submitSequenceForm()" class="btn btn-primary data-submit mr-1">{{trans('common/common.submit')}}</button>
                </div>
            </div>
        </form>
        </div>
    </div>
    <!-- Close earning config modal -->
    <!--/ Column Search -->
@endsection 
@push('footer-script') 
    <!-- BEGIN: Page Vendor JS-->
    <script src="/app-assets/vendors/js/tables/datatable/jquery.dataTables.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/dataTables.bootstrap5.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/dataTables.responsive.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/responsive.bootstrap5.js"></script>
    <script src="/app-assets/vendors/js/pickers/flatpickr/flatpickr.min.js"></script>
    <script src="/app-assets/js/scripts/ui/ui-feather.js"></script>
    <script src="/assets/js/moment.min.js"></script>
    <script src="/assets/js/daterangepicker.js"></script>
    
    <script src="/assets/plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
    <script src="/assets/plugins/bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>

    <script src="/app-assets/vendors/js/tables/datatable/datatables.checkboxes.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/datatables.buttons.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/jszip.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/pdfmake.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/vfs_fonts.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/buttons.html5.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/buttons.print.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/dataTables.rowGroup.min.js"></script>
    <!-- END: Page Vendor JS-->
    <script src="/app-assets/vendors/js/extensions/toastr.min.js"></script>


    <!-- BEGIN: Page JS-->
    <script src="/app-assets/js/scripts/tables/table-datatables-basic.js"></script>
    <script src="/app-assets/js/scripts/tables/table-datatables-advanced.js"></script>
    <script src="/app-assets/vendors/js/forms/select/select2.full.min.js"></script>
    <script src="/../assets/js/jquery-ui.min.js"></script>
    <!-- END: Page JS-->
 


<script>
        
    function callDt() {
        var dt_filter_table = $('.dt-column-search'); 

        if ($('body').attr('data-framework') === 'laravel') {
            assetPath = $('body').attr('data-asset-path');
        }

        if (dt_filter_table.length) {
            
            var dt_filter = dt_filter_table.DataTable({

            dom: '<"card-header border-bottom p-1"<"head-label"><"dt-action-buttons text-end"B>><"d-flex justify-content-between align-items-center mx-0 row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>>t<"d-flex justify-content-between mx-0 row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
            orderCellsTop: true,
            "bPaginate": false,
            "bInfo" : false,
            language: {
                    paginate: {
                    previous: '&nbsp;',
                    next: '&nbsp;'
                    }
                },
            buttons: [
                @if (isset($templateId))
                    {
                        text: feather.icons['edit-3'].toSvg({ class: 'font-medium-4' }),
                        className: 'btn btn-outline-warning me-2',
                        attr: {
                            'type' : "button",
                            'onclick' : "getSequence({{$templateId}})",
                            'title' : 'Edit Sequence'
                        },
                        init: function (api, node, config) {
                            $(node).removeClass('btn-secondary');
                        }
                    },{
                        text: feather.icons['trash'].toSvg({ class: 'font-medium-4' }),
                        className: 'btn btn-outline-danger me-2',
                        attr: {
                            'type' : "button",
                            'onclick' : "deleteTemplate({{$templateId}})",
                            'title' : 'Delete Template'
                        },
                        init: function (api, node, config) {
                            $(node).removeClass('btn-secondary');
                        }
                    },
                    // {
                    //     text: feather.icons['download'].toSvg({ class: 'font-small-4 me-50' }),
                    //     className: 'btn btn-outline-danger me-2',
                    //     attr: {
                    //         'type' : "button",
                    //         'onclick' : "downloadTextFile()",
                    //         'title' : 'Dowload Txt'
                    //     },
                    //     init: function (api, node, config) {
                    //         $(node).removeClass('btn-secondary');
                    //     }
                    // },
                @endif
                {
                    extend: 'collection',
                    className: 'btn btn-outline-secondary dropdown-toggle me-2',
                    text: feather.icons['share'].toSvg({ class: 'font-small-4 me-50' }) + "{{trans('manager/manager.export')}}",
                    buttons: [
                        // {
                        //     extend: 'print',
                        //     filename: '{{$organization->name}}, {{Auth::user()->name}} - {{ date("d-m-Y H-i-s") }}',
                        //     title: '{{$organization->name}} - {{ date("d-m-Y H-i-s") }}',
                        //     text: feather.icons['printer'].toSvg({ class: 'font-small-4 me-50' }) + 'Print',
                        //     className: 'dropdown-item',
                        //     exportOptions: { columns: Array.from(Array($("#organization thead tr:nth-child(2) th").length).keys()) },
                        // },
                        // {
                        //     extend: 'csv',
                        //     filename: '{{$organization->name}}, {{Auth::user()->name}} - {{ date("d-m-Y H-i-s") }}',
                        //     title: '{{$organization->name}} - {{ date("d-m-Y H-i-s") }}',
                        //     text: feather.icons['file-text'].toSvg({ class: 'font-small-4 me-50' }) + 'Csv',
                        //     className: 'dropdown-item',
                        //     exportOptions: { columns: Array.from(Array($("#organization thead tr:nth-child(2) th").length).keys()) },
                        // },
                        {
                            // extend: 'excel',
                            filename: '{{$organization->name}}, {{Auth::user()->name}} - {{ date("d-m-Y H-i-s") }}',
                            title: '{{$organization->name}} - {{ date("d-m-Y H-i-s") }}',
                            text: feather.icons['file'].toSvg({ class: 'font-small-4 me-50' }) + 'Excel',
                            className: 'create-new btn btn-outline-secondary ',
                            attr: {
                                'onclick':"document.location.href='{{ $orgUrl. '/salary-master/export?' }}{!!$request->getQueryString()!!}'"
                            },
                            className: 'dropdown-item',
                            // exportOptions: { columns: Array.from(Array($("#organization thead tr:nth-child(2) th").length).keys()) },
                            
                        
                        },
                        // {
                        //     extend: 'pdf',
                        //     filename: '{{$organization->name}} - {{ date("d-m-Y H-i-s") }}',
                        //     title: '{{$organization->name}} - {{ date("d-m-Y H-i-s") }}',
                        //     orientation:'landscape',
                        //     text: feather.icons['clipboard'].toSvg({ class: 'font-small-4 me-50' }) + 'Pdf',
                        //     className: 'dropdown-item',
                        //     exportOptions: { columns: Array.from(Array($("#organization thead tr:nth-child(2) th ").length).keys()) },
                        //         customize: function(doc) {
                        //             doc['footer']=(function() {
                        //                 return {
                        //                     columns: [
                        //                         {
                        //                             alignment: 'center',
                        //                             text: ['Downloaded by: ', { text: '{{Auth::user()->name}}' }, ' on {{ date("d-m-Y") }} at {{ date("g:i A") }}']
                        //                         }
                        //                     ],
                        //                     margin: 10
                        //                 }
                        //             }); 
                        //         },
                        //     },
                        // {
                        //     extend: 'copy',
                        //     filename: '{{$organization->name}}, {{Auth::user()->name}} - {{ date("d-m-Y H-i-s") }}',
                        //     title: '{{$organization->name}} - {{ date("d-m-Y H-i-s") }}',
                        //     text: feather.icons['copy'].toSvg({ class: 'font-small-4 me-50' }) + 'Copy',
                        //     className: 'dropdown-item',
                        //     exportOptions: { columns: Array.from(Array($("#organization thead tr:nth-child(2) th").length).keys()) }
                        // }
                    ],
                    init: function (api, node, config) {
                        $(node).removeClass('btn-secondary');
                        $(node).parent().removeClass('btn-group');
                        setTimeout(function () {
                        $(node).closest('.dt-buttons').removeClass('btn-group').addClass('d-inline-flex');
                        }, 50);
                    }
                    },
            ],
        
        });
        }

    };  

    $(window).on('load', function() {
        $('.select2').select2();
        if (feather) {
            feather.replace({
                width: 14,
                height: 14
            });
        }
    });

    function submitForm() {

        var form = $('#template_form');
        var actionUrl = form.attr('action');

        $.ajax({
            type: "POST",
            url: actionUrl,
            data: form.serialize(), 
            success: function(data)
            {
                var data = data.data;
                var sequenceAr = data.sequence;
                $('#templateModal').modal('hide');
                $('#sequenceModal').modal('show');
                $('#report-name').val(data.name);
                $('#seq_template_id_temp').val(data.id);
                var tHtml = '';
                $.each(sequenceAr,function(key,value){
                    value.alias = '';
                    var seqString = value.value;
                    var seqVal = seqString.split('...');

                    tHtml += '<div class="col-md-12"><div class="form-check form-check-secondary  sequenceRow" data-value=';
                    tHtml += "'" + JSON.stringify(value)+ "'>";
                    tHtml += '<div class="row"><div class="col-md-6">';
                    tHtml += '<label class="form-check-label">'+seqVal[1]+'</label>';
                    tHtml += '</div><div class="col-md-6">';
                    tHtml += '<input type="text" class="form-control custom-component-alias" name="custom_name[]" placeholder="Custom Header Title"/>';
                    tHtml += '</div></div>';
                    tHtml += '</div></div>';


                });
                $('#set-data').html(tHtml);
            }
        });

    }

    function submitSequenceForm() {

        var form = $('#sequence-template-form');
        var actionUrl = form.attr('action');
        var dataSet = [];
        $(".sequenceRow").each(function(e, row) {
            dataSet.push(JSON.parse($(row).attr("data-value")));      
        });

        var tempId = $('#seq_template_id_temp').val();

        $.ajax({
            type: "POST",
            url: actionUrl,
            data: {
                'id' : tempId,
                'name' : $("#report-name").val(),
                'sequence' : dataSet,
                'rate' : $('input[name="rate"]').is(":checked") ? '1' : '0',
                'arrear' : $('input[name="arrear"]').is(":checked") ? '1' : '0',
            },
            success: function(res)
            {
                console.log(res);
                if(res.status == true){
                    Swal.fire({
                            title: "Success",
                            text: "Successfully Created",
                            icon: "success",
                            confirmButtonColor: "#00c292",
                            confirmButtonText: "Ok",
                    });
                    setTimeout(function() {
                            location.reload();
                    }, 2200);
                }
            }
        });
    }
    
    $(document).ready(function(){
         
        callDt();

        var status  = "{{ $request->status }}";
        if(status==1) {
            $('#filter-form').submit(); 
        }

        if ($('#showModel').val() == 1) {
            $('#templateModal').modal('show');
        }

    });

    $('#add').click(function(){
        $("#template_id_temp").val('');
        $("#name").val('');
        $('#selectAllHeader').prop('checked',false);
        $('.HeaderCheck').prop('checked', false);
    });
    if ($('#location_id').val()) {
            getsubLocations();
        }
    
    $('#add_template').click(function(e){

        var templateId = $('#template_id_temp').val(); 
        var name = $('#name').val();
        var template_type = $('#template_type').val();
        var headers = $('input[name="headers[]"]:checkbox:checked').map(function(){return $(this).val();}).get();
        var components = $('input[name="components[]"]:checkbox:checked').map(function(){return $(this).val();}).get();
        var salary_slip_components = $('input[name="salary_slip_components[]"]:checkbox:checked').map(function(){return $(this).val();}).get();
        $.ajax({
            url: '/{!! $alias !!}/report-template/validate-template',
            type: 'POST',
            data: {
                '_token': "{{ csrf_token() }}",
                '_method': 'POST',
                'type' : template_type,
                'name' : name,
                'templateId' : templateId,
                'headers' : headers,
                'components' : components,
                'salary_slip_components' : salary_slip_components,
            },
            success: function(response) {
                if (response == '') {
                    submitForm();
                }else{
                    Swal.fire("Error!", response[0], "error");
                }
            }
        });
    });

    function getSequence(template_id){
        $.ajax({
            url: '/{!! $alias !!}/report-template/get-template',
            type: 'POST',
            data: {
                '_token': "{{ csrf_token() }}",
                '_method': 'POST',
                'template_id' : template_id,
               
            },
            success: function(response) {
                var sequenceAr = response.sequence;
                $('#report-name').val(response.name);
                $('#seq_template_id_temp').val(response.id);
                if(response.rate == 1){
                    $('input[name="rate"]').prop('checked',true);

                }
                if(response.arrear == 1){
                    $('input[name="arrear"]').prop('checked',true);

                }
               
                var tHtml = '';
                $.each(sequenceAr,function(key,value){
                    var seqString = value.value;
                    var seqVal = seqString.split('...');
                    if(value.alias==null){
                        alias = '';
                        value.alias='';
                    }else{

                        alias = value.alias;

                    }

                    tHtml += '<div class="col-md-12"><div class="form-check form-check-secondary  sequenceRow" data-value=';
                    tHtml += "'" + JSON.stringify(value)+ "'>";
                    tHtml += '<div class="row"><div class="col-md-6">';
                    tHtml += '<label class="form-check-label">'+seqVal[1]+'</label>';
                    tHtml += '</div><div class="col-md-6">';
                    tHtml += '<input type="text" class="form-control custom-component-alias" name="custom_name[]" value="'+alias+'" placeholder="Custom Header Title" />';
                    tHtml += '</div></div>';
                    tHtml += '</div></div>';
                });
                $('#set-data').html(tHtml);
                $('#sequenceModal').modal('show');
            }
        });
    }

    function setCustomAlisa(event){
        var data  = event.value;
        $oldData = $(event.parents)('.sequenceRow').attr('value');
        console.log($oldData);
    }

    $('body').on('change', '.custom-component-alias', function() {
         const dataValue = JSON.parse($(this).closest('.sequenceRow').attr('data-value'));
        let alias = $(this).val();
        dataValue["alias"] = alias;
        neDataValue = JSON.stringify(dataValue);
        $(this).closest('.sequenceRow').attr('data-value',neDataValue);
        
    })



    function getTemplate(template_id){
        $("#template_id_temp").val(template_id);
        $("#template_id_temp_2").val(template_id);
        $.ajax({
            url: '/{!! $alias !!}/report-template/get-template',
            type: 'POST',
            data: {
                '_token': "{{ csrf_token() }}",
                '_method': 'POST',
                'template_id' : template_id,
            },
            success: function(response) {
                var name = $('#name').val(response.name);
                $('.HeadingCheck').prop('checked', false);

                if(response.headers){
                    response.headers.map(function(val){
                        $('input[value="'+val+'"]:checkbox').prop('checked', true).trigger('change');
                    });
                }
                if(response.components){
                    response.components.map(function(val){
                        $('input[value="'+val+'"]:checkbox').prop('checked', true).trigger('change');
                    });
                }
                if(response.salary_slip_components){
                    response.salary_slip_components.map(function(val){
                        $('input[value="'+val+'"]:checkbox').prop('checked', true).trigger('change');
                    });
                }
                $('#sequenceModal').modal('hide');
                $('#templateModal').modal('show');
            }
        });
    }

    function deleteTemplate(template_id){
        Swal.fire({
            text: "Are you sure want to delete the template?",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "@lang('messages.deleteConfirmation')",
            cancelButtonText: "@lang('messages.confirmNoArchive')",
        }).then(function(isConfirm){
            window.location.href = '/{!! $alias !!}/report-template/'+template_id+'/delete';
        });
    }

    function downloadTextFile(){
        var href = $('#downloadTxt').attr('href');
        window.location.href = href;
    }

    function selectAll(name){
        if($('#selectAll'+name).is(":checked")){
            $('.'+name+'Check').prop('checked', true);
        }
        else{
            $('.'+name+'Check').prop('checked', false);
        }
    }

    function reverseSelect(name){
        var boxes = $('.'+name+'Check:checked');
        if($('.'+name+'Check').length == boxes.length){
            $('#selectAll'+name).prop('checked',true);
        }
        else{
            $('#selectAll'+name).prop('checked',false);
        }
    }

    $(function() {
        $('body').on('change', '.HeaderCheck', function() {
            var boxes = $('.HeaderCheck:checked');
            if($('.HeaderCheck').length == boxes.length){
                $('#selectAllHeader').prop('checked',true);
            }
            else{
                $('#selectAllHeader').prop('checked',false);
            }
        });
    });

    function templateFilter(templateId){
        $('#template_id').val(templateId);
        $('#filter-form').submit();
    }

    $( function() {
        $( ".sortable" ).sortable({
            cursor: "move"
        }) 
    });

function getsubLocations(th) {
    var locationId = $('#location_id').val();

    var previouslySelected = $('#sub_location_id').val() || [];

    var data = {
        location_id: locationId,
        _token: '{{ csrf_token() }}'
    };

    $.ajax({
        url: '/{!! $alias !!}/location/sub-locations',
        type: 'POST',
        data: data,
        success: function(data) {
            var $subLocationSelect = $('#sub_location_id');

            $subLocationSelect.empty();

            $.each(data, function(id, name) {
                var isSelected = previouslySelected.includes(id.toString()) ? 'selected' : '';
                $subLocationSelect.append('<option value="' + id + '" ' + isSelected + '>' + name + '</option>');
            });

            // Reinitialize select2
            $subLocationSelect.select2({
                multiple: true
            });
        }
    });
}




    function getEmployeeByType (employee_type) {
            var url = "{!! route('employees-by-type',['alias'=>$alias]) !!}?employee_type=" + employee_type;
            $.ajax({
                url: url,
                type: "GET",
                success: function (data) {
                    op = '';
                    for (var i = 0; i < data.length; i++){
                        op += '<option value="'+data[i].id+'">'+data[i].name+'('+data[i].employee_code+')</option>';
                    }
                    $('#employee_id').html(op);
                }
            });

        }
        

    </script>

@endpush