@extends('payroll.employee_frontend.layouts.employee')
@section('custom_style')
    <link href="{{ asset('/') }}assets/plugins/datetimepicker/css/classic.css" rel="stylesheet"/>
    <link href="{{ asset('/') }}assets/plugins/datetimepicker/css/classic.time.css" rel="stylesheet"/>
    <link href="{{ asset('/') }}assets/plugins/datetimepicker/css/classic.date.css" rel="stylesheet"/>


<style>

</style>
@endsection
@section('content')
   
    <section class="row">
        <div class="col-12 mb-2">
            <div class="card-header ">
                <div class="d-flex justify-content-between align-items-center ">
                    <h5 class="card-title font-weight-bold">{{ __('obs.employee') }} {{ __('obs.payslip') }}</h5>
                    <div class="card-tools d-flex">
                        @include('payroll.employee_frontend.report_print_excel_button', ['excel' => false])
                    </div>
                </div>
            </div>

            <div class="blu-card d-flex flex-wrap">
               
                <form class="leave-form col-12 col-md-12 border-right" action="{{route('employee.payslip')}}" method="get">
                    @csrf
                    <div class="row flex-wrap">
                        <div class="form-group col-12 col-md-3">
                            <label for="">{{__('obs.date')}} </label>
                            <input type="text"  id="date_from" name="date_from" class="form-control datepicker"
                                     value="{{ request()->get('date_from') ? request()->get('date_from') : date('01-m-Y') }}" required>
                        </div>
                      
                        <div class="form-group col-12 col-md-3 mt-2">
                            <input class="btn btn-primary px-4 mt-4" type="submit" value="Search">
                        </div>                          
                    </div>
                </form>


                 @if (count($generated_info) > 0)
                <div class="payslip-container common_excel_export" id="printThis">
                    <style>
                        .form-label {
                            margin-bottom: 0;
                        }

                        .payslip-container {
                            max-width: 800px;
                            margin: 0 auto;
                            background: white;
                            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
                        }

                        .company-header {
                            /* background: linear-gradient(135deg, #2c3e50, #3498db);
                        color: white; */
                            padding: 16px 30px;
                            border-radius: 0;
                        }

                        .payslip-title {
                            background: #e9e9e9;
                            /* color: white; */
                            text-align: center;
                            padding: 10px;
                            margin: 0;
                            font-weight: bold;
                        }

                        .section-header {
                            background: #ecf0f1;
                            padding: 3px 12px;
                            font-weight: bold;
                            border-left: 4px solid #3498db;
                            /* margin-bottom: 10px; */
                        }

                        .employee-info {
                            background: #fcfeff;
                            border: 1px solid #dee2e6;
                            border-radius: 6px;
                            padding: 15px;
                            margin-bottom: 12px;
                        }

                        .earnings-section {
                            background: #f9fff9;
                            border: 1px solid #c6e2cd;
                        }

                        .deductions-section {
                            background: #fff8f8;
                            border: 1px solid #dbbfc2;
                        }

                        .net-pay-section {
                            /* background: linear-gradient(135deg, #27ae60, #2ecc71);
                        color: white;
                        padding: 12px;
                        border-radius: 6px; */
                            text-align: center;
                            margin: 12px 0;
                        }

                        .bank-details {
                            background: #fffdf9;
                            border: 1px solid #f7e6ae;
                            border-radius: 6px;
                        }

                        .footer-note {
                            background: #f8feff;
                            border: 1px solid #bee5eb;
                            border-radius: 6px;
                            padding: 12px;
                            font-size: 0.9em;
                            text-align: center;
                            color: #0c5460;
                            margin-top: 20px;
                        }

                        .amount-column {
                            text-align: right;
                            font-weight: 500;
                        }

                        .total-row {
                            border-top: 2px solid #333;
                            font-weight: bold;
                        }

                        

                        .employee-info label {
                            width: 7rem;
                        }

                        .employee-info * {
                            font-size: 13px;
                        }

                        @media print {
                            .no-print {
                                display: none;
                            }

                            body {
                                font-size: 14px;
                            }

                            .payslip-container {
                                box-shadow: none;
                            }

                            @page {
                                margin: 0;
                            }
                        }
                    </style>
                    <!-- Company Header -->
                
                    @foreach (collect($generated_info)->chunk(1) as $chunked_salary )
                        @foreach ($chunked_salary as $salary )
                        <div class="company-header">
                            <div class="row align-items-center">
                                <div class="col-8">
                                    <h3 class="mb-1">{{ store_info()->name_eng ?? null }}</h3>
                                    <p class="mb-0 small">
                                    {{ store_info()->address_eng ?? null }}
                                    </p>
                                </div>
                                <div class="col-4 text-end">
                                    <p class="mb-0 small">
                                        <strong>Email:</strong><br>
                                        {{ store_info()->email ?? null }}
                                    </p>
                                </div>
                            </div>
                        </div>

                        <!-- Payslip Title -->
                        <div class="payslip-title">
                            <h4 class="mb-0">EMPLOYEE SALARY PAYSLIP</h4>
                        </div>

                        <div class="p-4">
                            <!-- Employee Information -->
                            <div class="employee-info">
                                <div class="row">
                                    <div class="col-7">
                                        <div class="d-flex align-items-center mb-2">
                                            <label class="form-label fw-bold me-2">Name</label>
                                            <div>: {{$salary->get_emp_info->emp_name ?? null}}</div>
                                        </div>
                                        <div class="d-flex align-items-center mb-2">
                                            <label class="form-label fw-bold me-2">Department</label>
                                            <div>: {{$salary->fetch_department->name ?? null}} </div>
                                        </div>
                                        <div class="d-flex align-items-center mb-2">
                                            <label class="form-label fw-bold me-2">Pay Period</label>
                                            <div class="row g-2">
                                                <div class="col-12">
                                                    <div>: {{$start_date}} To  {{$end_date}} </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-5">
                                        <div class="d-flex align-items-center mb-2">
                                            <label class="form-label fw-bold me-2">Employee ID</label>
                                            <div>: {{$salary->get_emp_info->emp_code ?? null}} </div>
                                        </div>
                                        <div class="d-flex align-items-center mb-2">
                                            <label class="form-label fw-bold me-2">Designation</label>
                                            <div>:  {{$salary->get_emp_info->fetch_designation->name ?? null}} </div>
                                        </div>
                                        <div class="d-flex align-items-center mb-2">
                                            {{-- <label class="form-label fw-bold me-2">Pay Date</label>
                                            <div>:  </div> --}}
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Earnings and Deductions -->
                            <div class="row g-2">
                                <!-- Earnings Section -->
                                <div class="col-6">
                                    <div class="earnings-section rounded p-2">
                                        <div class="section-header">
                                            <i class="fas fa-plus-circle"></i> Earnings
                                        </div>
                                        <table class="table table-sm mb-0">
                                            @php $total_earnings = $salary->basic_salary; @endphp
                                            <tbody>
                                                <tr>
                                                    <td>Basic Salary</td>
                                                    <td class="amount-column">
                                                        <div class="text-end">{{number_format($salary->basic_salary)}}</div>
                                                    </td>
                                                </tr>
                                                
                                                @foreach($generated_allowance_info as $generated_allowance)
                                                {{-- @dd($generated_allowance); --}}
                                                <tr>
                                                    <td>{{$generated_allowance->allowance_info->name ?? null}}</td>
                                                    @php 
                                                        $allowance_amount = $generated_allowance->allowance_amount >0  ?   $generated_allowance->allowance_amount :  0;
                                                        $total_earnings += $allowance_amount;
                                                    @endphp
                                                   <td class="amount-column"> {{abs($allowance_amount)}}</td>
                                                </tr>
                                                @endforeach
                                            
                                                <tr class="total-row">
                                                    <td><strong>Gross Earnings</strong></td>
                                                    <td class="amount-column">
                                                        <strong id="grossEarnings">৳ {{ number_format($total_earnings)}}</strong>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                                <!-- Deductions Section -->
                                <div class="col-6">
                                    <div class="deductions-section rounded p-2">
                                        <div class="section-header">
                                            <i class="fas fa-minus-circle"></i> Deductions
                                        </div>
                                        <table class="table table-sm mb-0">
                                            <tbody>
                                                @php 
                                                    $absent_amount = $salary->absent_amount + $salary->missing_salary ;
                                                    $total_deduction = $salary->loan_amount + $salary->advance_amount + $absent_amount + $salary->late_amount + $salary->add_deduct_amount;
                                                @endphp

                                                @foreach($generated_other_deduct_allowances as $generated_other_deduct_allowance)
                                                    <tr>
                                                        <td>{{$generated_other_deduct_allowance->allowance_info->name ?? null}}</td>
                                                        @php 
                                                            $other_allowance_amount = $generated_other_deduct_allowance->allowance_amount >0  ?   $generated_allowance->allowance_amount :  0;
                                                            $total_deduction += $other_allowance_amount;
                                                        @endphp
                                                        <td class="amount-column"> {{abs($other_allowance_amount)}}</td>
                                                    </tr>
                                                @endforeach
                                                
                                                <tr>
                                                    <td>Advance</td>
                                                    <td class="amount-column">
                                                        <div class="text-end">{{number_format($salary->advance_amount)}}</div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>Loan</td>
                                                    <td class="amount-column">
                                                        <div class="text-end">{{number_format($salary->loan_amount)}}</div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>Absence</td>
                                                    <td class="amount-column">
                                                        <div class="text-end">{{number_format($absent_amount)}}</div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>Late Deduction</td>
                                                    <td class="amount-column">
                                                        <div class="text-end">{{number_format($salary->late_amount)}}</div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>Other Deductions</td>
                                                    <td class="amount-column">
                                                        <div class="text-end">{{number_format($salary->add_deduct_amount)}}</div>
                                                    </td>
                                                </tr>
                                                <tr class="total-row">
                                                    <td><strong>Total Deductions</strong></td>
                                                    <td class="amount-column">
                                                        <strong id="totalDeductions">৳ {{number_format($total_deduction)}}</strong>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>

                            <!-- Net Pay Section -->
                            <div class="net-pay-section p-2">
                                <div class="d-flex align-items-start mb-2">
                                    <h4 class="mb-0 me-2">Net Pay :</h4>
                                    <h4 class="mb-0" id="netPay">৳ {{number_format($salary->net_amount)}}</h4>
                                </div>
                                <div class="w-full d-flex items-start">
                                    <label class="fw-bold form-label me-2">Net Pay (in words):</label>
                                    <div class="fw-bold">{{ convert_number($salary->net_amount);}}</div>
                                </div>
                            </div>


                            <!-- Bank Details -->
                            <div class="bank-details p-2">
                                <div class="section-header">
                                    <i class="fas fa-university"></i> Payment Method: Bank Transfer
                                </div>
                                <div class="row g-2">
                                    <div class="col-3">
                                        <label class="form-label fw-bold">Bank Name:</label>
                                        <div>{{$salary->emp_otherInfo->bank_name ?? null}}</div>
                                    </div>
                                    <div class="col-3">
                                        <label class="form-label fw-bold">Branch Name:</label>
                                        <div>{{$salary->emp_otherInfo->bank_branch ?? null}}</div>
                                    </div>
                                    <div class="col-3">
                                        <label class="form-label fw-bold">Account Name:</label>
                                        <div>{{$salary->emp_otherInfo->bank_acc_name ?? null}}</div>
                                    </div>
                                    <div class="col-3">
                                        <label class="form-label fw-bold">Account Number:</label>
                                        <div>{{$salary->emp_otherInfo->bank_acc_no ?? null}}</div>
                                    </div>
                                </div>
                            </div>

                            <!-- Footer Note -->
                            <div class="footer-note">
                                <p class="mb-0">
                                    <strong>Note:</strong> This is a system generated document. Should you have any queries,
                                    please write to the HR Department at <strong> {{ store_info()->email ?? null }}</strong>
                                </p>
                            </div>
                        </div>
                        @endforeach
                        <div class="pagebreak"></div>
                    @endforeach
                </div>

                @endif
                        
            </div>
        </div>
    </section>
@endsection

@section('script')

    <script src="{{ asset('/') }}assets/plugins/datetimepicker/js/legacy.js"></script>
    <script src="{{ asset('/') }}assets/plugins/datetimepicker/js/picker.js"></script>
    <script src="{{ asset('/') }}assets/plugins/datetimepicker/js/picker.time.js"></script>
    <script src="{{ asset('/') }}assets/plugins/datetimepicker/js/picker.date.js"></script>
    <script type="text/javascript" src="{{ asset('assets/js/printThis.js' . getJsVersion()) }}"></script>
    {{-- table to excel --}}
    <script src="{{ asset('payroll_assets/payroll_common.js') }}"></script>

    <script src="{{ asset('assets/js/jquery.table2excel.js' . getJsVersion()) }}"></script>
    <script>
      const printThis = (printDelay = 0, div_id = 'printThis') => $(`#${div_id}`).printThis({printDelay: printDelay});

       function common_excel(id) {
        var heading_name = $("#excel_file_name").val();
        $(`.common_excel_export`).table2excel({
            exclude: ".noExl",
            name: heading_name,
            //filename: "myFileName" + new Date().toISOString().replace(/[\-\:\.]/g, ""),
            filename: heading_name,
            fileext: ".xls",
            exclude_img: true,
            exclude_links: true,
            exclude_inputs: true
        });
    };

      

     
    </script>

    <script type="text/javascript">
       
    </script>

@endsection