@extends('layouts.master')
@section('content')
<div class="app-page-title">
    <div class="page-title-wrapper">
        <div class="page-title-heading">
            <div class="page-title-icon">
                <i class="pe-7s-medal icon-gradient bg-tempting-azure"></i>
            </div>
            <div>
                {{ $title }}
                <div class="page-title-subheading">List of Historical Payroll Standard Reports</div>

            </div>

          
        </div>
        @include('layouts.pagetitle')
    </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 mb-3 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>
                <tr>
                    <td>Payroll Summary</td>
                    <td>This report outlines employees' earnings and deductions.</td>
                    <td style="text-align: right; width:20%;">
                        @canany(['Run payrolls', 'View Reports'])
                        <a data-bs-toggle="modal" data-bs-target="#payrollSummaryModal"
                            class="btn-shadow fbtn-wide btn-pill me-3 btn btn-outline-info">View</a>
                        @endcanany
                    </td>
                </tr>
                <tr>
                    <td>Payroll Register</td>
                    <td>This report outlines employees' earnings and deductions.</td>
                    <td style="text-align: right; width:20%;">
                        @canany(['Run payrolls', 'View Reports'])
                        <a data-bs-toggle="modal" data-bs-target="#payrollRegisterModal"
                            class="btn-shadow fbtn-wide btn-pill me-3 btn btn-outline-info">View</a>
                        @endcanany
                    </td>
                </tr>
                <tr>
                    <td>PAYE</td>
                    <td>This report outlines the Pay As You Earn tax deduction per employee.</td>
                    <td style="text-align: right; width:20%;">
                        <!-- Adjusted alignment to left -->
                        @canany(['Run payrolls', 'View Reports'])
                        <a data-bs-toggle="modal" data-bs-target="#pAYEModal"
                            class="btn-shadow fbtn-wide btn-pill me-3 btn btn-outline-info">View</a>

                        @endcanany
                    </td>
                </tr>
                <tr>
                    <td>Earnings</td>
                    <td>This report outlines the employees per earning definition and period.</td>
                    <td style="text-align: right; width:20%;">
                        <!-- Adjusted alignment to left -->
                        @canany(['Run payrolls', 'View Reports'])
                        <a data-bs-toggle="modal" data-bs-target="#earningsModal"
                            class="btn-shadow fbtn-wide btn-pill me-3 btn btn-outline-info">View</a>

                        @endcanany
                    </td>
                </tr>
                <tr>
                    <td>Deductions</td>
                    <td>This report outlines the employees per deduction definition and period.</td>
                    <td style="text-align: right; width:20%;">
                        <!-- Adjusted alignment to left -->
                        @canany(['Run payrolls', 'View Reports'])
                        <a data-bs-toggle="modal" data-bs-target="#deductionsModal"
                            class="btn-shadow fbtn-wide btn-pill me-3 btn btn-outline-info">View</a>

                        @endcanany
                    </td>
                </tr>
                <tr>
                    <td>Earnings by Unit</td>
                    <td>This report outlines a list of employees in a unit for a particular earning definition.</td>
                    <td style="text-align: right; width:20%;">
                        <!-- Adjusted alignment to left -->
                        @canany(['Run payrolls', 'View Reports'])
                        <a data-bs-toggle="modal" data-bs-target="#unitEarningsModal"
                            class="btn-shadow fbtn-wide btn-pill me-3 btn btn-outline-info">View</a>

                        @endcanany
                    </td>
                </tr>
                <tr>
                    <td>Earnings by Department</td>
                    <td>This report outlines a list of employees in a department for a particular earning definition.
                    </td>
                    <td style="text-align: right; width:20%;">
                        <!-- Adjusted alignment to left -->
                        @canany(['Run payrolls', 'View Reports'])
                        <a data-bs-toggle="modal" data-bs-target="#departmentEarningsModal"
                            class="btn-shadow fbtn-wide btn-pill me-3 btn btn-outline-info">View</a>

                        @endcanany
                    </td>
                </tr>
                <tr>
                    <td>Deduction by Unit</td>
                    <td>This report outlines a list of employees in a unit for a particular deduction definition.</td>
                    <td style="text-align: right; width:20%;">
                        <!-- Adjusted alignment to left -->
                        @canany(['Run payrolls', 'View Reports'])
                        <a data-bs-toggle="modal" data-bs-target="#unitDeductionsModal"
                            class="btn-shadow fbtn-wide btn-pill me-3 btn btn-outline-info">View</a>

                        @endcanany
                    </td>
                </tr>
                <tr>
                    <td>Deduction by Department</td>
                    <td>This report outlines a list of employees in a department for a particular deduction definition.
                    </td>
                    <td style="text-align: right; width:20%;">
                        <!-- Adjusted alignment to left -->
                        @canany(['Run payrolls', 'View Reports'])
                        <a data-bs-toggle="modal" data-bs-target="#departmentDeductionsModal"
                            class="btn-shadow fbtn-wide btn-pill me-3 btn btn-outline-info">View</a>

                        @endcanany
                    </td>
                </tr>
            </tbody>
        </table>


    </div>
</div>

@endsection

@section('modal')

@php 

$pamPayrollModal=\App\Models\PamPayroll::where('status', 'active' )->get();
                    $pamPayRunModal = \App\Models\PamPayRunPeriod::where('period_status',
                    'Active')->get();
                    $pamEmpUnitModal = \App\Models\PamEmpUnit::all();
                             
                    $pamPayrollEarningsModal=\App\Models\PamDeduDef::where('status', 'active' )->get();

                  
                    $pamPayrollDeductionsModal=\App\Models\PamDeduDef::where('status', 'active' )->get();


@endphp
<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">View Earnings by Unit</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-history.payroll-unit-deductions')}}">
                    @csrf
                    @php
                 
                    $pamPayrollEarningsModal=\App\Models\PamDeduDef::where('status', 'active' )->get();


                    @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="multiselect-dropdown form-control">

                                @foreach($pamPayRunModal as $ite)

                                <option value="{{ $ite->id }}">
                                    {{ $ite->calendar_month .'-'.  $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="multiselect-dropdown form-control">

                                @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="multiselect-dropdown form-control">

                                @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 id="save_btn"
                            class="btn-shadow float-end btn-wide btn-pill me-3 btn btn-outline-primary"
                            type="submit">View</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">View Deductions By Department</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-history.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"
                                class="multiselect-dropdown form-control">

                                @foreach($pamPayRunModal as $ite)

                                <option value="{{ $ite->id }}">
                                    {{ $ite->calendar_month .'-'.  $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="multiselect-dropdown form-control">

                                @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="multiselect-dropdown form-control">

                                <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="multiselect-dropdown form-control">

                                @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 id="save_btn"
                            class="btn-shadow float-end btn-wide btn-pill me-3 btn btn-outline-primary"
                            type="submit">View</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">View Earnings by Unit</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-history.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"
                                class="multiselect-dropdown form-control">

                                @foreach($pamPayRunModal as $ite)

                                <option value="{{ $ite->id }}">
                                    {{ $ite->calendar_month .'-'.  $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="multiselect-dropdown form-control">

                                @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="multiselect-dropdown form-control">

                                @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 id="save_btn"
                            class="btn-shadow float-end btn-wide btn-pill me-3 btn btn-outline-primary"
                            type="submit">View</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">View Earnings By Department</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-history.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"
                                class="multiselect-dropdown form-control">

                                @foreach($pamPayRunModal as $ite)

                                <option value="{{ $ite->id }}">
                                    {{ $ite->calendar_month .'-'.  $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="multiselect-dropdown form-control">

                                @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="multiselect-dropdown form-control">

                                <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" class="multiselect-dropdown form-control">

                                @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 id="save_btn"
                            class="btn-shadow float-end btn-wide btn-pill me-3 btn btn-outline-primary"
                            type="submit">View</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">View Payroll Earnings</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-history.payroll-deductions')}}">
                    @csrf
                    @php
           
              
                    @endphp
                    <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"
                                class="multiselect-dropdown form-control">

                                @foreach($pamPayRunModal as $ite)

                                <option value="{{ $ite->id }}">
                                    {{ $ite->calendar_month .'-'.  $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" class="multiselect-dropdown form-control">
                                <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> <!-- Close the row here -->

                    <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" class="multiselect-dropdown form-control">

                                @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> <!-- Close the row here -->

                    <div class="modal-footer">

                        <button id="save_btn"
                            class="btn-shadow float-end btn-wide btn-pill me-3 btn btn-outline-primary"
                            type="submit">View</button>
                    </div>
            </div>
            </form>
        </div>
    </div>
</div>
<!-- End Payroll Summary Modal -->

<!-- Start Payroll Summary 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">View Payroll Earnings</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-history.payroll-earnings')}}">
                    @csrf
                    @php
                   
                
                    @endphp
                    <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"
                                class="multiselect-dropdown form-control">

                                @foreach($pamPayRunModal as $ite)

                                <option value="{{ $ite->id }}">
                                    {{ $ite->calendar_month .'-'.  $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" class="multiselect-dropdown form-control">
                                <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> <!-- Close the row here -->

                    <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" class="multiselect-dropdown form-control">

                                @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 id="save_btn"
                            class="btn-shadow float-end btn-wide btn-pill me-3 btn btn-outline-primary"
                            type="submit">View</button>
                    </div>
            </div>
            </form>
        </div>
    </div>
</div>
<!-- End Payroll Summary Modal -->

<!-- Start Payroll Summary 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">View Payroll Register</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-history.payroll-register')}}">
                    @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="multiselect-dropdown form-control">

                                @foreach($pamPayRunModal as $ite)

                                <option value="{{ $ite->id }}">
                                    {{ $ite->calendar_month .'-'.  $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="multiselect-dropdown form-control">
                            <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 id="save_btn"
                            class="btn-shadow float-end btn-wide btn-pill me-3 btn btn-outline-primary"
                            type="submit">View</button>
                    </div>
            </div>
            </form>
        </div>
    </div>
</div>
<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">View Payroll Summary</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-history.payroll-summary')}}">
                    @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="multiselect-dropdown form-control">

                                @foreach($pamPayRunModal as $ite)

                                <option value="{{ $ite->id }}">
                                    {{ $ite->calendar_month .'-'.  $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="multiselect-dropdown form-control">
                            <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 id="save_btn"
                            class="btn-shadow float-end btn-wide btn-pill me-3 btn btn-outline-primary"
                            type="submit">View</button>
                    </div>
            </div>
            </form>
        </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">View PAYE Report</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-history.paye')}}">
                    @csrf
                    @php
                  
                    @endphp
                    <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"
                                class="multiselect-dropdown form-control">

                                @foreach($pamPayRunModal as $ite)

                                <option value="{{ $ite->id }}">
                                    {{ $ite->calendar_month .'-'.  $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" class="multiselect-dropdown form-control">
                                <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> <!-- Close the row here -->


                    <div class="modal-footer">

                        <button id="save_btn"
                            class="btn-shadow float-end btn-wide btn-pill me-3 btn btn-outline-primary"
                            type="submit">View</button>
                    </div>
            </div>
            </form>
        </div>
    </div>
</div>
<!-- End PAYE Modal -->
<div class="modal fade" id="payrollRunModal" 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 Run confirmation</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <div class="modal-body">
                <p class="mb-0">
                    Are you sure you want to run Payroll?
                </p>
            </div>
            <div class="modal-footer">

                <a data-bs-dismiss="modal"
                    class="btn-shadow btn-wide float-end btn-pill btn-hover-shine btn btn-secondary">No</a>

                <a href="#" class="btn-shadow float-end btn-wide btn-pill me-3 btn btn-outline-primary">Yes</a>

            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<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 + '</option>');
                });
                // If you have another dropdown with id 'city', you can populate it here
                // $('#city').html('<option value="">Select City</option>');
            }
        });
    });


});
</script>
@endsection