@extends('admin.layout.master')
@section('content')
@section('custom_style')
    <style>
        .table-responsive {
            height: calc(100vh - 150px);
        }

        table th,
        table td {
            color: black !important;
            vertical-align: middle;
            padding: 0 1px !important;
        }

        table th {
            font-size: 13px;
        }

        table td {
            font-size: 15px;
        }
    </style>
    <style>
        .cl-fixed-cell {
            position: sticky;
            z-index: 1;
        }

        #salary_table thead {
            position: sticky;
            top: 0px;
            z-index: 9;
            background: #96b7db;
        }

        #salary_table td:nth-child(1) {
            left: 0;
        }

        #salary_table td:nth-child(2) {
            left: 15px;
        }

        #salary_table td:nth-child(3) {
            left: 50px;
        }
    </style>
@endsection

@include('flash-message')
<div class="card sina-card">
    <div class="card-header d-flex justify-content-between align-items-center ">
        <h5 class="font-weight-bold mb-0">{{ __('obs.employee') }} {{ __('obs.salary') }}</h5>
        @if (count($salary_info) > 0)
            {{-- <button type="button" class="btn btn-md btn-warning text-end" onclick="PrintDiv();">{{__('obs.print')}}</button>
             @include('payroll.includes.printAndExcel') --}}

            @include('inventory.global.report_print_excel_button')
        @endif
    </div>
    <div class="card-body">
        <form action="{{ route('payroll.payroll.salary.generate') }}" method="get">
            <div class='row'>
                <div class='col-md-2'>
                    <div class="form-group">
                        <label>{{ __('obs.name') }}/{{ __('obs.code') }}</label>
                        <select class="form-control name_code_live_search" name="emp_code" id="emp_code">
                        </select>

                    </div>
                </div>
                <div class='col-md-2'>
                    <div class="form-group">
                        <label>{{ __('obs.department') }}</label>
                        <select name="emp_department" id="emp_department" class="form-control select_2">
                            <option value=""> {{ __('obs.select') }}</option>
                            @if (!empty($department_lists))
                                @foreach ($department_lists as $depart_val)
                                    <option value="{{ $depart_val->id }}"
                                        @if (request()->get('emp_department') == $depart_val) {{ 'selected' }} @endif>
                                        {{ $depart_val->name }}</option>
                                @endforeach
                            @endif
                        </select>
                    </div>
                </div>
                <div class='col-md-2'>
                    <div class="form-group">
                        <label>{{ __('obs.employee_type') }}</label>
                        <select name="emp_type" id="emp_type" class="form-control select_2">
                            <option value=""> {{ __('obs.select') }}</option>
                            @if (!empty($employee_types))
                                @foreach ($employee_types as $emp_type_val)
                                    <option value="{{ $emp_type_val->id }}">{{ $emp_type_val->name }}</option>
                                @endforeach
                            @endif
                        </select>
                    </div>
                </div>
                <div class='col-md-2'>
                    <div class="form-group">
                        <label>{{ __('obs.date_from') }} </label>
                        <input type="text" class="datepicker form-control " name="date_from" id="date_from"
                            value="{{ request()->get('date_from') ? request()->get('date_from') : date('01-m-Y') }}">
                    </div>
                </div>
                <div class='col-md-2'>
                    <div class="form-group">
                        <label>{{ __('obs.date_to') }}</label>
                        <input type="text" class="datepicker form-control " name="date_to" id="date_to"
                            value="{{ request()->get('date_to') ? request()->get('date_to') : date('30-m-Y') }}">
                    </div>
                </div>

                <div class='col-md-1 mt-4'>
                    <button class='btn btn-sm btn-success' style="width: 100px">{{ __('obs.search') }}</button>
                </div>
            </div>
        </form>
    </div>

    @if (count($salary_info) > 0)
        <div class="row gx-2 gy-0 justify-content-center common_excel_export table-responsive" id="printThis">
            <style>
                @media print {
                    table th, table td {
                        vertical-align: middle !important;
                        font-size: {{$report_format->font_size}};
                    }
                    .no-print {
                        display: none;
                    }
                    .pagebreak {
                        page-break-after: always;
                    }
                    @page {
                        @if ($report_format->page_layout == 1)
                            size: legal landscape !important;
                        @elseif($report_format->page_layout == 2)
                            size: A4 portrait !important;
                        @endif
                        margin: 5mm !important;
                        padding: 0 !important;
                    }
                    body {
                        zoom: {{ $report_format->zoom }} !important;
                        /* font-family: serif;
                        font-size:17px;
                        font-weight: bold;
                        background-color: #FFFFFF !important; */
                    }
                }
            </style>
            <div class="card-box">
                <div class="card-block">
                    <form action="{{ route('payroll.payroll.salary.store') }}" method="post" id="salary_generate_form">
                        @csrf

                        @if ($report_format->report == 1)
                            @include('payroll.salary.report_layouts.layout1')
                        @elseif($report_format->report == 2)
                            @include('payroll.salary.report_layouts.layout2')
                        @elseif($report_format->report == 3)
                            @include('payroll.salary.report_layouts.layout3')
                        @elseif($report_format->report == 4)
                            @include('payroll.salary.report_layouts.layout4')
                        @endif
                    </form>
                      {{-- @if (count($salary_info) > 0 && request()->get('emp_department')) --}}
                      <div class="row mt-2 no-print" style="margin-bottom: 5%;">
                        <div class="col-md-12  text-center">
                            <button type="button" class="text-center btn btn-sm btn-primary"  onclick="submit_salary('salary_generate_form')">
                                {{ __('obs.generate_salary') }}
                            </button>
                        </div>
                    </div>
                    {{-- @endif --}}
                </div>
            </div>
        </div>
    @endif

</div>

@endsection

@section('script')
<script src="{{ asset('payroll_assets/payroll_common.js') }}"></script>
<script src="{{ asset('payroll_assets/payroll_print.js') }}"></script>
<script>
    $(document).ready(function() {
        $('.select_2').select2();
    });

    function submit_salary(formId) {
        var message = "Do you want to Store salary?";
        var confirmButtonText = "Yes, Store it!";
        var formUrl = $('#' + formId).attr('action');
        var method = null;
        showConfirmAndSubmit(formId, message, confirmButtonText, ajax = 0, formUrl, data = null, method);
    }
</script>
@endsection