@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">
            <h3 class="content-header-title float-start mb-0">Department Salary Summary</h3>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ url('') }}/{!! $alias !!}/home">Home</a>
                    </li>
                    <li class="breadcrumb-item active">Department Salary Summary
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@push('prev-next-head')
    <div class="content-header-right text-end col-md-3">
        <div class="form-group breadcrumb-right">
            <div class="row">
                <div class="col-md-12">
                    <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>
                    <a href="/{!! $alias !!}/department-salary-summary"
                        class="btn btn-primary box-shadow-2 cretareportbtn">
                        Clear
                    </a>
                    <a href="/{!! $alias !!}/department-salary-summary-pdf?{{ http_build_query($_GET) }}"
                        class="btn btn-primary box-shadow-2 cretareportbtn">
                        Export
                    </a>
                </div>
            </div>
        </div>
    </div>
@endpush
@section('content')
    <section id="column-search-datatable">
        <div class="row mt-2">
            <div class="col-12">
                <div class="card">
                    <div class="card-datatable table-responsive">
                        <table
                            class="dt-column-search table table-bordered table-striped attendance-reg-table tablenewheadfixed">
                            <thead>
                                <tr>
                                    <th>#Sno</th>
                                    <th>Department</th>
                                    <th>Total Employee</th>
                                    <th>Days</th>
                                    <th>EARNING</th>
                                    @foreach ($earningDerivedComponents as $component)
                                        <th>{{ isset($component->name) && $component->name ? $component->name : ' ' }}</th>
                                    @endforeach
                                    <th>Total Earning</th>
                                    <th>Deduction</th>
                                    @foreach ($deductionDerivedComponents as $component)
                                        <th>{{ isset($component->name) && $component->name ? $component->name : ' ' }}</th>
                                    @endforeach
                                    <th>Total Deduction</th>
                                    <th>Net Pay</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($departmentWiseSalaryData as $departmentData)
                                    <tr>
                                        <td>{{ $loop->index + 1 }}</td>
                                        <td>{{ $departmentData['department_name'] }}</td>
                                        <td>{{ $departmentData['total_employee'] }}</td>
                                        <td>{{ $departmentData['total_pay_days'] }}</td>
                                        <td>EARNING</td>
                                        @foreach ($earningDerivedComponents as $earningComponent)
                                            <td>{{ $departmentData['earning_type'][$earningComponent->id] ?? 0 }}</td>
                                        @endforeach
                                        <td>{{ $departmentData['earning_type']->sum() }}</td>
                                        <td>Deduction</td>
                                        @foreach ($deductionDerivedComponents as $deductionComponent)
                                            <td>{{ $departmentData['deduction_type'][$deductionComponent->id] ?? 0 }}</td>
                                        @endforeach
                                        <td>{{ $departmentData['deduction_type']->sum() }}</td>
                                        <td>{{ $departmentData['earning_type']->sum() - $departmentData['deduction_type']->sum() }}
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <form method="get" id="filter-form">
            <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">Filter</h5>
                        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
                            aria-label="Close"></button>
                    </div>
                    <div class="offcanvas-body">
                        <div class="row">
                            <div class="col-md-12">
                                <label class="form-label" for="year">{{ trans('admin/template.year') }}</label>
                                <select class="form-control mb-2" name="year" id="year">
                                    <option value="">select</option>
                                    @foreach ($years as $val)
                                        <option class="form-control" value="{{ $val }}"
                                            @if ($val == $year) selected @endif>{{ $val }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-12">
                                <label class="form-label" for="area_id">{{ trans('admin/template.month') }}</label>
                                <select class="form-control mb-2" name="month" id="month">
                                    <option value="">select</option>
                                    @foreach ($months as $key => $val)
                                        <option class="form-control" value="{{ $key }}"
                                            @if ($key == $month) selected @endif>{{ $val }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <label class="form-label" for="area_id">Workstation</label>
                            <select name="work_station_id" id="work_station_id" class="form-control mb-2">
                                <option value="">All</option>
                                @foreach ($workStations as $key => $workStation)
                                    <option value="{{ $workStation->id }}"
                                        @if ($workStation->id == request()->work_station_id) selected @endif>{{ $workStation->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-12">
                            <label class="form-label" for="area_id">Department</label>
                            <select name="department_id" id="department_id" class="form-control mb-2">
                                <option value="">All</option>
                                @foreach ($departments as $key => $department)
                                    <option value="{{ $department->id }}"
                                        @if ($department->id == request()->department_id) selected @endif>{{ $department->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-12 mb-2">
                            <label class="form-label" for="category_id">Category</label>
                            <select name="category_id[]" id="category_id" class="form-control select2"
                                multiple="multiple">
                                {{-- <option value="">All</option> --}}
                                @foreach ($categories as $key => $category)
                                    <option value="{{ $category->id }}" @if (!empty(request()->category_id) && in_array($category->id, request()->category_id)) selected @endif>
                                        {{ $category->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-12 mb-2">
                            <label class="form-label" for="employee_type">Employee Type</label>
                            <select name="employee_type" id="employee_type" class="form-control select2"
                                onchange="selectEmployeeTypes(this.value);">
                                <option value=""></option>
                                @foreach ($employeeTypes as $employeeType)
                                    <option value="{{ $employeeType }}" @if ($employeeType == request()->employee_type) selected @endif>
                                        {{ ucfirst($employeeType) }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-12" id="contractor_div">
                            <label class="form-label" for="contractor_id">Contractor</label>
                            <select name="contractor_id" id="contractor_id" class="form-control select2">
                                <option value=""></option>
                                @foreach ($contractors as $contractor)
                                    <option value="{{ $contractor->id }}"
                                        @if ($contractor->id == request()->contractor_id) selected @endif>
                                        {{ ucfirst($contractor->name) }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-12">
                            <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>Apply
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </section>
@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>
    <script>
        $(document).ready(function() {
            $('.select2').select2();
            $("#contractor_div").hide();
            selectEmployeeTypes(emptype)
        });

        function selectEmployeeTypes(val) {
            if (val == 'workman') {
                $("#contractor_div").show();
            } else {
                $("#contractor_div").hide();
                $("#contractor_id").val(''); 
            }
        }
    </script>
    <!-- END: Page JS-->
@endpush