@extends('layouts.master')
@section('content')
<div class="app-page-title">
    <div class="page-title-wrapper">
        <div class="page-title-heading">
           
            <div>
                {{ $title }}
                <div class="page-title-subheading">A list of standard Payroll reports.</div>

            </div>

        </div>
      
    </div>
    @if(isset($error) || session('error'))
    <div class="alert alert-danger">
        {{ $error ?? session('error')  }}
    </div>
    @endif
    @if(session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
    @endif
</div>


<div class="main-card card">
    <div class="card-body">
        <table style="width: 100%;" id="example1" class="table table-hover table-striped table-bordered">
            <thead>
                <tr>
                    <th>Report Name</th>
                    <th>Description</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($reports as $report)
                <tr>
                    <td>{{ $report['name'] }}</td>
                    <td>{{ $report['description'] }}</td>
                    <td style="text-align: right; width:20%;">
                        @if(auth()->user()->roles->first()->permissions->contains('name', 'Run payrolls') || auth()->user()->roles->first()->permissions->contains('name', 'View reports'))
                        <a data-bs-toggle="modal" data-bs-target="{{ $report['targetModal'] }}" class="btn-shadow fbtn-wide btn-pill me-3 btn btn-outline-success">View</a>
                        @endif
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>



@endsection

@section('modal')

<div class="modal fade" id="unitDeductionsModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Earning by Unit Report Options</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <div class="modal-body">
                <form method="POST" action="{{ route('pam-historical-data.payroll-unit-deductions')}}">
                    @csrf
                    @php

            
                    @endphp
                    <div class="row">
                        <div class="mb-3 col-md-12">

                            <label class="form-label">Select Period<span class="text-danger">*</span></label>
                            <select name="pay_run_period_id" id="pay_run_period_id" class="form-control select2" style="width: 100%;">
                            @foreach($pamPayRunModal as $ite)
                                @php
                                    // Create a DateTime object using the calendar_month and calendar_year
                                    $date = DateTime::createFromFormat('!m-Y', $ite->calendar_month . '-' . $ite->calendar_year);
                                    // Format the date to get the full month name
                                    $monthName = $date->format('F');
                                @endphp
                                <option value="{{ $ite->id }}">
                                    {{ $monthName . ' - ' .  $ite->calendar_year }}
                                </option>
                            @endforeach
                            </select>

                            @error('pay_run_period_id')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div> <!-- Close the row here -->

                    <div class="row">
                        <div class="mb-3 col-md-12">

                            <label class="form-label">Select Unit<span class="text-danger">*</span></label>
                            <select name="unit_id" id="unit_id" class="form-control select2" style="width: 100%;">

                                @foreach($pamEmpUnitModal as $ite)

                                <option value="{{ $ite->id }}">
                                    {{ $ite->name }}
                                </option>
                                @endforeach
                            </select>

                            @error('unit_id')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div> <!-- Close the row here -->

                    <div class="row">
                        <div class="mb-3 col-md-12">

                            <label class="form-label">Select an Earning<span class="text-danger">*</span></label>
                            <select name="dedu_def_id" id="dedu_def_id" class="form-control select2" style="width: 100%;">

                                @foreach($pamPayrollDeductionsModal as $ite)

                                <option value="{{ $ite->id }}">
                                    {{ $ite->short_description }}
                                </option>
                                @endforeach
                            </select>

                            @error('earn_def_id')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div> <!-- Close the row here -->



                    <div class="modal-footer">
                    <button type="button" class="btn-shadow float-end btn-wide btn-pill me-3 btn btn-outline-dark" data-bs-dismiss="modal" aria-label="Close">Close</button>
                        <button id="save_btn" class="btn-shadow float-end btn-wide btn-pill me-3 btn btn-outline-success" type="submit">Submit</button>
                    </div>
            </div>
            </form>
        </div>
    </div>
</div>
<div class="modal fade" id="departmentDeductionsModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Deduction by Department Report Options</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <div class="modal-body">
                <form method="POST" action="{{ route('pam-historical-data.payroll-department-deductions')}}">
                    @csrf
                    @php

                    @endphp
                    <div class="row">
                        <div class="mb-3 col-md-12">

                            <label class="form-label">Select Period<span class="text-danger">*</span></label>
                            <select name="pay_run_period_id" id="pay_run_period_id_by_department" class="form-control select2" style="width: 100%;">

                            @foreach($pamPayRunModal as $ite)
                                @php
                                    // Create a DateTime object using the calendar_month and calendar_year
                                    $date = DateTime::createFromFormat('!m-Y', $ite->calendar_month . '-' . $ite->calendar_year);
                                    // Format the date to get the full month name
                                    $monthName = $date->format('F');
                                @endphp
                                <option value="{{ $ite->id }}">
                                    {{ $monthName . ' - ' .  $ite->calendar_year }}
                                </option>
                            @endforeach

                            </select>

                            @error('pay_run_period_id')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div> <!-- Close the row here -->

                    <div class="row">
                        <div class="mb-3 col-md-12">

                            <label class="form-label">Select Unit<span class="text-danger">*</span></label>
                            <select name="unit_id" id="unit_dedu" class="form-control select2" style="width: 100%;">

                                @foreach($pamEmpUnitModal as $ite)

                                <option value="{{ $ite->id }}">
                                    {{ $ite->name }}
                                </option>
                                @endforeach
                            </select>

                            @error('unit_id')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div> <!-- Close the row here -->
                    <div class="row">
                        <div class="mb-3 col-md-12">

                            <label class="form-label">Select Department<span class="text-danger">*</span></label>
                            <select name="department_id" id="department_dedu" class="form-control select2" style="width: 100%;">

                                <option value="0">
                                    Select a Department
                                </option>
                            </select>

                            @error('department_id')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div> <!-- Close the row here -->
                    <div class="row">
                        <div class="mb-3 col-md-12">

                            <label class="form-label">Select a Deductions<span class="text-danger">*</span></label>
                            <select name="dedu_def_id" id="dedu_def_id" class="form-control select2" style="width: 100%;">

                                @foreach($pamPayrollDeductionsModal as $ite)

                                <option value="{{ $ite->id }}">
                                    {{ $ite->short_description }}
                                </option>
                                @endforeach
                            </select>

                            @error('earn_def_id')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div> <!-- Close the row here -->



                    <div class="modal-footer"> <button type="button" class="btn-shadow float-end btn-wide btn-pill me-3 btn btn-outline-dark" data-bs-dismiss="modal" aria-label="Close">Close</button>

                        <button id="save_btn" class="btn-shadow float-end btn-wide btn-pill me-3 btn btn-outline-success" type="submit">Submit</button>
                    </div>
            </div>
            </form>
        </div>
    </div>
</div>
<div class="modal fade" id="unitEarningsModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Earning by Unit Report Options</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <div class="modal-body">
                <form method="POST" action="{{ route('pam-historical-data.payroll-unit-earnings')}}">
                    @csrf
                    @php


                    @endphp
                    <div class="row">
                        <div class="mb-3 col-md-12">

                            <label class="form-label">Select Period<span class="text-danger">*</span></label>
                            <select name="pay_run_period_id" id="pay_run_period_id_unit" class="form-control select2" style="width: 100%;">

                            @foreach($pamPayRunModal as $ite)
                                @php
                                    // Create a DateTime object using the calendar_month and calendar_year
                                    $date = DateTime::createFromFormat('!m-Y', $ite->calendar_month . '-' . $ite->calendar_year);
                                    // Format the date to get the full month name
                                    $monthName = $date->format('F');
                                @endphp
                                <option value="{{ $ite->id }}">
                                    {{ $monthName . ' - ' .  $ite->calendar_year }}
                                </option>
                            @endforeach
                            </select>

                            @error('pay_run_period_id')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div> <!-- Close the row here -->

                    <div class="row">
                        <div class="mb-3 col-md-12">

                            <label class="form-label">Select Unit<span class="text-danger">*</span></label>
                            <select name="unit_id" id="unit" class="form-control select2" style="width: 100%;">

                                @foreach($pamEmpUnitModal as $ite)

                                <option value="{{ $ite->id }}">
                                    {{ $ite->name }}
                                </option>
                                @endforeach
                            </select>

                            @error('unit_id')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div> <!-- Close the row here -->

                    <div class="row">
                        <div class="mb-3 col-md-12">

                            <label class="form-label">Select an Earning<span class="text-danger">*</span></label>
                            <select name="earn_def_id" id="earn_def_id" class="form-control select2" style="width: 100%;">

                                @foreach($pamPayrollEarningsModal as $ite)

                                <option value="{{ $ite->id }}">
                                    {{ $ite->short_description }}
                                </option>
                                @endforeach
                            </select>

                            @error('earn_def_id')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div> <!-- Close the row here -->



                    <div class="modal-footer"> <button type="button" class="btn-shadow float-end btn-wide btn-pill me-3 btn btn-outline-dark" data-bs-dismiss="modal" aria-label="Close">Close</button>

                        <button id="save_btn" class="btn-shadow float-end btn-wide btn-pill me-3 btn btn-outline-success" type="submit">Submit</button>
                    </div>
            </div>
            </form>
        </div>
    </div>
</div>
<div class="modal fade" id="departmentEarningsModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Earnings By Department Report Options</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <div class="modal-body">
                <form method="POST" action="{{ route('pam-historical-data.payroll-department-earnings')}}">
                    @csrf
                    @php

                    @endphp
                    <div class="row">
                        <div class="mb-3 col-md-12">

                            <label class="form-label">Select Period<span class="text-danger">*</span></label>
                            <select name="pay_run_period_id" id="pay_run_period_id_earning" class="form-control select2" style="width: 100%;">

                            @foreach($pamPayRunModal as $ite)
                                @php
                                    // Create a DateTime object using the calendar_month and calendar_year
                                    $date = DateTime::createFromFormat('!m-Y', $ite->calendar_month . '-' . $ite->calendar_year);
                                    // Format the date to get the full month name
                                    $monthName = $date->format('F');
                                @endphp
                                <option value="{{ $ite->id }}">
                                    {{ $monthName . ' - ' .  $ite->calendar_year }}
                                </option>
                            @endforeach
                            </select>

                            @error('pay_run_period_id')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div> <!-- Close the row here -->

                    <div class="row">
                        <div class="mb-3 col-md-12">

                            <label class="form-label">Select Unit<span class="text-danger">*</span></label>
                            <select name="unit_id" id="unit_earn" class="form-control select2" style="width: 100%;">

                                @foreach($pamEmpUnitModal as $ite)

                                <option value="{{ $ite->id }}">
                                    {{ $ite->name }}
                                </option>
                                @endforeach
                            </select>

                            @error('unit_id')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div> <!-- Close the row here -->
                    <div class="row">
                        <div class="mb-3 col-md-12">

                            <label class="form-label">Select Department<span class="text-danger">*</span></label>
                            <select name="department_id" id="department_earn" class="form-control select2" style="width: 100%;">

                                <option value="0">
                                    Select a Department
                                </option>
                            </select>

                            @error('department_id')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div> <!-- Close the row here -->
                    <div class="row">
                        <div class="mb-3 col-md-12">

                            <label class="form-label">Select an Earning<span class="text-danger">*</span></label>
                            <select name="earn_def_id" id="earn_def_id_earning" class="form-control select2" style="width: 100%;">

                                @foreach($pamPayrollEarningsModal as $ite)

                                <option value="{{ $ite->id }}">
                                    {{ $ite->short_description }}
                                </option>
                                @endforeach
                            </select>

                            @error('earn_def_id')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div> <!-- Close the row here -->



                    <div class="modal-footer">
                    <button type="button" class="btn-shadow float-end btn-wide btn-pill me-3 btn btn-outline-dark" data-bs-dismiss="modal" aria-label="Close">Close</button>
                        <button id="save_btn" class="btn-shadow float-end btn-wide btn-pill me-3 btn btn-outline-success" type="submit">Submit</button>
                    </div>
            </div>
            </form>
        </div>
    </div>
</div>
<!-- Start Payroll Summary Modal -->
<div class="modal fade" id="deductionsModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Payroll Earnings Report Options</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form method="POST" action="{{ route('pam-historical-data.payroll-deductions')}}">
                    @csrf
                    <div class="row">
                        <div class="mb-3 col-md-12">
                            <label class="form-label">Select Pay Run<span class="text-danger">*</span></label>
                            <select name="pay_run_period_id" id="pay_run_period_id_deductions" class="form-control select2" style="width: 100%;">
                              
                            @foreach($pamPayRunModal as $ite)
                                @php
                                    // Create a DateTime object using the calendar_month and calendar_year
                                    $date = DateTime::createFromFormat('!m-Y', $ite->calendar_month . '-' . $ite->calendar_year);
                                    // Format the date to get the full month name
                                    $monthName = $date->format('F');
                                @endphp
                                <option value="{{ $ite->id }}">
                                    {{ $monthName . ' - ' .  $ite->calendar_year }}
                                </option>
                            @endforeach
                            </select>
                            @error('pay_run_period_id')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="row">
                        <div class="mb-3 col-md-12">
                            <label class="form-label">Select all Payrolls or a specific Payroll<span class="text-danger">*</span></label>
                            <select name="payroll_id" id="payroll_id_deductions" class="form-control select2" style="width: 100%;">
                                <option value="0">All Payrolls</option>
                                @foreach($pamPayrollModal as $ite)
                                <option value="{{ $ite->id }}">
                                    {{ $ite->short_description }}
                                </option>
                                @endforeach
                            </select>
                            @error('payroll_id')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="row">
                        <div class="mb-3 col-md-12">
                            <label class="form-label">Select all Deductions or a specific Deduction<span class="text-danger">*</span></label>
                            <select name="dedu_def_id" id="dedu_def_id_deductions" class="form-control select2" style="width: 100%;">
                                @foreach($pamPayrollDeductionsModal as $ite)
                                <option value="{{ $ite->id }}">
                                    {{ $ite->short_description }}
                                </option>
                                @endforeach
                            </select>
                            @error('dedu_def_id')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="modal-footer">
                    <button type="button" class="btn-shadow float-end btn-wide btn-pill me-3 btn btn-outline-dark" data-bs-dismiss="modal" aria-label="Close">Close</button>
                        <button id="save_btn" class="btn-shadow float-end btn-wide btn-pill me-3 btn btn-outline-success" type="submit">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- End Payroll Summary Modal -->

<!-- Start Payroll Earnings Modal -->
<div class="modal fade" id="earningsModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Payroll Earnings Report Options</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form method="POST" action="{{ route('pam-historical-data.payroll-earnings')}}">
                    @csrf
                    <div class="row">
                        <div class="mb-3 col-md-12">
                            <label class="form-label">Select Pay Run<span class="text-danger">*</span></label>
                            <select name="pay_run_period_id" id="pay_run_period_id_earnings" class="form-control select2" style="width: 100%;">
                               
                            @foreach($pamPayRunModal as $ite)
                                @php
                                    // Create a DateTime object using the calendar_month and calendar_year
                                    $date = DateTime::createFromFormat('!m-Y', $ite->calendar_month . '-' . $ite->calendar_year);
                                    // Format the date to get the full month name
                                    $monthName = $date->format('F');
                                @endphp
                                <option value="{{ $ite->id }}">
                                    {{ $monthName . ' - ' .  $ite->calendar_year }}
                                </option>
                            @endforeach
                            </select>
                            @error('pay_run_period_id')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="row">
                        <div class="mb-3 col-md-12">
                            <label class="form-label">Select all Payrolls or a specific Payroll<span class="text-danger">*</span></label>
                            <select name="payroll_id" id="payroll_id_earnings" class="form-control select2" style="width: 100%;">
                                <option value="0">All Payrolls</option>
                                @foreach($pamPayrollModal as $ite)
                                <option value="{{ $ite->id }}">
                                    {{ $ite->short_description }}
                                </option>
                                @endforeach
                            </select>
                            @error('payroll_id')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="row">
                        <div class="mb-3 col-md-12">
                            <label class="form-label">Select all Earnings or a specific Earning<span class="text-danger">*</span></label>
                            <select name="earn_def_id" id="earn_def_id_earnings" class="form-control select2" style="width: 100%;">
                                @foreach($pamPayrollEarningsModal as $ite)
                                <option value="{{ $ite->id }}">
                                    {{ $ite->short_description }}
                                </option>
                                @endforeach
                            </select>
                            @error('earn_def_id')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="modal-footer">
                    <button type="button" class="btn-shadow float-end btn-wide btn-pill me-3 btn btn-outline-dark" data-bs-dismiss="modal" aria-label="Close">Close</button>
                        <button id="save_btn" class="btn-shadow float-end btn-wide btn-pill me-3 btn btn-outline-success" type="submit">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- End Payroll Earnings Modal -->

<!-- Similar changes for other modals... -->


<!-- Start Payroll Register Modal -->
<div class="modal fade" id="payrollRegisterModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Payroll Register Report Options</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form method="POST" action="{{ route('pam-historical-data.payroll-register')}}">
                    @csrf
                    <div class="row">
                        <div class="mb-3 col-md-12">
                            <label class="form-label">Select Period<span class="text-danger">*</span></label>
                            <select name="pay_run_period_id" id="pay_run_period_id_register" class="form-control select2" style="width: 100%;">
                            
                            @foreach($pamPayRunModal as $ite)
                                @php
                                    // Create a DateTime object using the calendar_month and calendar_year
                                    $date = DateTime::createFromFormat('!m-Y', $ite->calendar_month . '-' . $ite->calendar_year);
                                    // Format the date to get the full month name
                                    $monthName = $date->format('F');
                                @endphp
                                <option value="{{ $ite->id }}">
                                    {{ $monthName . ' - ' .  $ite->calendar_year }}
                                </option>
                            @endforeach
                            </select>
                            @error('pay_run_period_id')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div> <!-- Close the row here -->
                    <div class="row">
                        <div class="mb-3 col-md-12">
                            <label class="form-label">Select Unit<span class="text-danger">*</span></label>
                            <select name="unit_id" id="unit_id_register" class="form-control select2" style="width: 100%;">
                                <option value="0">All Units</option>
                                @foreach($pamEmpUnitModal as $ite)
                                <option value="{{ $ite->id }}">{{ $ite->name }}</option>
                                @endforeach
                            </select>
                            @error('unit_id')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div> <!-- Close the row here -->
                    <div class="modal-footer">
                    <button type="button" class="btn-shadow float-end btn-wide btn-pill me-3 btn btn-outline-dark" data-bs-dismiss="modal" aria-label="Close">Close</button>
                        <button id="save_btn" class="btn-shadow float-end btn-wide btn-pill me-3 btn btn-outline-success" type="submit">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- End Payroll Register Modal -->



<!-- Start Payroll Summary Modal -->
<div class="modal fade" id="payrollSummaryModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Payroll Summary Report Options</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form method="POST" action="{{ route('pam-historical-data.payroll-summary')}}">
                    @csrf
                    <div class="row">
                        <div class="mb-3 col-md-12">
                            <label class="form-label">Select Period<span class="text-danger">*</span></label>
                            <select name="pay_run_period_id" id="pay_run_period_id_summary" class="form-control select2" style="width: 100%;">
                               
                            @foreach($pamPayRunModal as $ite)
                                @php
                                    // Create a DateTime object using the calendar_month and calendar_year
                                    $date = DateTime::createFromFormat('!m-Y', $ite->calendar_month . '-' . $ite->calendar_year);
                                    // Format the date to get the full month name
                                    $monthName = $date->format('F');
                                @endphp
                                <option value="{{ $ite->id }}">
                                    {{ $monthName . ' - ' .  $ite->calendar_year }}
                                </option>
                            @endforeach
                            </select>
                            @error('pay_run_period_id')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div> <!-- Close the row here -->
                    <div class="row">
                        <div class="mb-3 col-md-12">
                            <label class="form-label">Select Unit<span class="text-danger">*</span></label>
                            <select name="unit_id" id="unit_id_summary" class="form-control select2" style="width: 100%;">
                                <option value="0">All Units</option>
                                @foreach($pamEmpUnitModal as $ite)
                                <option value="{{ $ite->id }}">{{ $ite->name }}</option>
                                @endforeach
                            </select>
                            @error('unit_id')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div> <!-- Close the row here -->
                    <div class="modal-footer">
                    <button type="button" class="btn-shadow float-end btn-wide btn-pill me-3 btn btn-outline-dark" data-bs-dismiss="modal" aria-label="Close">Close</button>
                        <button id="save_btn" class="btn-shadow float-end btn-wide btn-pill me-3 btn btn-outline-success" type="submit">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- End Payroll Summary Modal -->

<!-- Start PAYE Modal -->
<div class="modal fade" id="pAYEModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">PAYE Report Options</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form method="POST" action="{{ route('pam-historical-data.paye')}}">
                    @csrf
                    <div class="row">
                        <div class="mb-3 col-md-12">
                            <label class="form-label">Select Pay Run<span class="text-danger">*</span></label>
                            <select name="pay_run_period_id" id="pay_run_period_id_paye" class="form-control select2" style="width: 100%;">
                               
                            @foreach($pamPayRunModal as $ite)
                                @php
                                    // Create a DateTime object using the calendar_month and calendar_year
                                    $date = DateTime::createFromFormat('!m-Y', $ite->calendar_month . '-' . $ite->calendar_year);
                                    // Format the date to get the full month name
                                    $monthName = $date->format('F');
                                @endphp
                                <option value="{{ $ite->id }}">
                                    {{ $monthName . ' - ' .  $ite->calendar_year }}
                                </option>
                            @endforeach
                            </select>
                            @error('pay_run_period_id')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div> <!-- Close the row here -->
                    <div class="row">
                        <div class="mb-3 col-md-12">
                            <label class="form-label">Select all Payrolls or a specific Payroll<span class="text-danger">*</span></label>
                            <select name="payroll_id" id="payroll_id_paye" class="form-control select2" style="width: 100%;">
                                <option value="0">All Payrolls</option>
                                @foreach($pamPayrollModal as $ite)
                                <option value="{{ $ite->id }}">{{ $ite->short_description }}</option>
                                @endforeach
                            </select>
                            @error('payroll_id')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="row">
                        <div class="mb-3 col-md-12">
                            <label class="form-label">Select an earning to be included on the PAYE report</label>
                            <select name="earn_def_id" id="earn_def_id_paye" class="form-control select2" style="width: 100%;">
                                <option value="0" selected>None</option>
                                @foreach($pamPayrollEarningsModal as $ite)
                                <option value="{{ $ite->id }}">{{ $ite->short_description }}</option>
                                @endforeach
                            </select>
                            @error('earn_def_id')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div> <!-- Close the row here -->
                    <div class="modal-footer">
                    <button type="button" class="btn-shadow float-end btn-wide btn-pill me-3 btn btn-outline-dark" data-bs-dismiss="modal" aria-label="Close">Close</button>
                        <button id="save_btn" class="btn-shadow float-end btn-wide btn-pill me-3 btn btn-outline-success" type="submit">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- End PAYE Modal -->
<!-- Start PAYE Modal -->
<div class="modal fade" id="payslipModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Payslip Options</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form method="POST" action="{{ route('pam-historical-data.payslip')}}">
                    @csrf
                    <div class="row">
                        <div class="mb-3 col-md-12">
                            <label class="form-label">Select Pay Run<span class="text-danger">*</span></label>
                            <select name="pay_run_period_id" id="pay_run_period_id_payslip" class="form-control select2" style="width: 100%;">
                               
                            @foreach($pamPayRunModal as $ite)
                                @php
                                    // Create a DateTime object using the calendar_month and calendar_year
                                    $date = DateTime::createFromFormat('!m-Y', $ite->calendar_month . '-' . $ite->calendar_year);
                                    // Format the date to get the full month name
                                    $monthName = $date->format('F');
                                @endphp
                                <option value="{{ $ite->id }}">
                                    {{ $monthName . ' - ' .  $ite->calendar_year }}
                                </option>
                            @endforeach
                            </select>
                            @error('pay_run_period_id')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div> <!-- Close the row here -->
                    <div class="row">
                        <div class="mb-3 col-md-12">
                            <label class="form-label">Select all employees or a specific employee<span class="text-danger">*</span></label>
                            <select name="emp_id" id="emp_id_payslip" class="form-control select2" style="width: 100%;">
                               
                                @foreach($pamEmpModal as $ite)
                                <option value="{{ $ite->id }}">{{ $ite->pamHRUser->fullname }} - {{$ite->pamHRUser->man_number}} </option>
                                @endforeach
                            </select>
                            @error('payroll_id')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                   <!-- Close the row here -->
                    <div class="modal-footer">
                    <button type="button" class="btn-shadow float-end btn-wide btn-pill me-3 btn btn-outline-dark" data-bs-dismiss="modal" aria-label="Close">Close</button>
                        <button id="save_btn" class="btn-shadow float-end btn-wide btn-pill me-3 btn btn-outline-success" type="submit">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- End PAYE Modal -->
@endsection

@section('scripts')

 
<script>
    $(function() {

        $('#payslipModal').on('shown.bs.modal', function () {
        $('#pay_run_period_id_payslip').select2({
            dropdownParent: $('#payslipModal')
        });
        $('#emp_id_payslip').select2({
            dropdownParent: $('#payslipModal')
        });
        
    });
    $('#unitDeductionsModal').on('shown.bs.modal', function () {
        $('#pay_run_period_id').select2({
            dropdownParent: $('#unitDeductionsModal')
        });
        $('#unit_id').select2({
            dropdownParent: $('#unitDeductionsModal')
        });
        $('#dedu_def_id').select2({
            dropdownParent: $('#unitDeductionsModal')
        });
    });

    $('#departmentDeductionsModal').on('shown.bs.modal', function () {
        $('#pay_run_period_id_by_department').select2({
            dropdownParent: $('#departmentDeductionsModal')
        });
        $('#unit_dedu').select2({
            dropdownParent: $('#departmentDeductionsModal')
        });
        $('#department_dedu').select2({
            dropdownParent: $('#departmentDeductionsModal')
        });
        $('#dedu_def_id').select2({
            dropdownParent: $('#departmentDeductionsModal')
        });
    });

    $('#unitEarningsModal').on('shown.bs.modal', function () {
        $('#pay_run_period_id_unit').select2({
            dropdownParent: $('#unitEarningsModal')
        });
        $('#unit').select2({
            dropdownParent: $('#unitEarningsModal')
        });
        $('#earn_def_id').select2({
            dropdownParent: $('#unitEarningsModal')
        });
    });

    $('#departmentEarningsModal').on('shown.bs.modal', function () {
        $('#pay_run_period_id_earning').select2({
            dropdownParent: $('#departmentEarningsModal')
        });
        $('#unit_earn').select2({
            dropdownParent: $('#departmentEarningsModal')
        });
        $('#department_earn').select2({
            dropdownParent: $('#departmentEarningsModal')
        });
        $('#earn_def_id').select2({
            dropdownParent: $('#departmentEarningsModal')
        });
    });

    $('#deductionsModal').on('shown.bs.modal', function () {
        $('#pay_run_period_id_deductions').select2({
            dropdownParent: $('#deductionsModal')
        });
        $('#payroll_id_deductions').select2({
            dropdownParent: $('#deductionsModal')
        });
        $('#dedu_def_id_deductions').select2({
            dropdownParent: $('#deductionsModal')
        });
    });

    $('#earningsModal').on('shown.bs.modal', function () {
        $('#pay_run_period_id_earnings').select2({
            dropdownParent: $('#earningsModal')
        });
        $('#payroll_id_earnings').select2({
            dropdownParent: $('#earningsModal')
        });
        $('#earn_def_id_earnings').select2({
            dropdownParent: $('#earningsModal')
        });
    });

    $('#payrollRegisterModal').on('shown.bs.modal', function () {
        $('#pay_run_period_id_register').select2({
            dropdownParent: $('#payrollRegisterModal')
        });
        $('#unit_id_register').select2({
            dropdownParent: $('#payrollRegisterModal')
        });
    });

    $('#payrollSummaryModal').on('shown.bs.modal', function () {
        $('#pay_run_period_id_summary').select2({
            dropdownParent: $('#payrollSummaryModal')
        });
        $('#unit_id_summary').select2({
            dropdownParent: $('#payrollSummaryModal')
        });
    });

    $('#pAYEModal').on('shown.bs.modal', function () {
        $('#pay_run_period_id_paye').select2({
            dropdownParent: $('#pAYEModal')
        });
        $('#payroll_id_paye').select2({
            dropdownParent: $('#pAYEModal')
        });
        $('#earn_def_id_paye').select2({
            dropdownParent: $('#pAYEModal')
        });
    });
});

</script>


<script>
    $(document).ready(function() {
        $('#unit_earn').on('change', function() {
            var unitId = this.value;
            $('#department_earn').html('');
            $.ajax({
                url: '{{ route('getPamEmpDepartments') }}?unit_id=' + unitId,
                type: 'get',
                success: function(res) {
                    //  $('#department').html('<option value="">Select Department</option>');
                    $.each(res, function(key, value) {
                        $('#department_earn').append('<option value="' + value.id +
                            '">' + value.name + '</option>');
                    });
                    // If you have another dropdown with id 'city', you can populate it here
                    // $('#city').html('<option value="">Select City</option>');
                }
            });
        });
        $('#unit_dedu').on('change', function() {
            var unitId = this.value;
            $('#department_dedu').html('');
            $.ajax({
                url: '{{ route('getPamEmpDepartments') }}?unit_id=' + unitId,
                type: 'get',
                success: function(res) {
                    //  $('#department').html('<option value="">Select Department</option>');
                    $.each(res, function(key, value) {
                        $('#department_dedu').append('<option value="' + value.id +
                            '">' + value.name + '-' + value.id +'</option>');
                    });
                    // If you have another dropdown with id 'city', you can populate it here
                    // $('#city').html('<option value="">Select City</option>');
                }
            });
        });


    });
</script>
@endsection