@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">This view allows the user to rollover
                    {{$pamPayroll->short_description}} payroll to the next month (Period).</div>
           
            </div>

           
        </div>
     
        <div class="page-title-actions">

            <div class="d-inline-block dropdown">
                <a data-bs-toggle="modal" data-bs-target="#backupModal"
                    class="btn-shadow btn-wide float-end btn-pill btn-hover-shine btn btn-success"> <i
                        class="fa fa-plus fa-w-20"></i>
                    <span>Payroll Backup</span>
                    <div class="ms-auto badge rounded-pill bg-secondary"></div>
                </a>

            </div>

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



<form class="">
    <div class="row">
        <div class="col-md-6">
            <div class="main-card mb-3 card">
                <div class="card-body">
                    <h5 class="card-title">{{$pamPayroll->short_description}} Payroll Details</h5>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="position-relative mb-3">
                                <label class="form-label">Current Period :
                                    {{$currentPamPayRunPeriod->calendar_month}}-{{$currentPamPayRunPeriod->calendar_year}}</label>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="position-relative mb-3">
                                <label class="form-label">New Period :
                                    {{$pamPayRunPeriod->calendar_month}}-{{$pamPayRunPeriod->calendar_year}}</label>

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

                    <div class="row">
                        <div class="col-md-6">
                            <div class="position-relative mb-3">
                                <label " class=" form-label">Current Start Date :
                                    {{$currentPamPayRunPeriod->start_date}}</label>

                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="position-relative mb-3">
                                <label " class=" form-label">New Start Date : {{$pamPayRunPeriod->start_date}}</label>

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

                    <div class="row">
                        <div class="col-md-6">
                            <div class="position-relative mb-3">
                                <label " class=" form-label">Current End Date :
                                    {{$currentPamPayRunPeriod->end_date}}</label>

                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="position-relative mb-3">
                                <label " class=" form-label">New End Date : {{$pamPayRunPeriod->end_date}}</label>

                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="position-relative mb-3">
                                <label " class=" form-label">Current Period No of Days :
                                    {{$currentPamPayRunPeriod->calendar_days}}</label>

                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="position-relative mb-3">
                                <label " class=" form-label">New Period No of Days:
                                    {{$pamPayRunPeriod->calendar_days}}</label>

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





        <div class="col-md-6">


            <div class="main-card mb-3 card">
                <div class="card-body">
                    <h5 class="card-title">{{$pamPayroll->short_description}} Payroll checklist.</h5>
                    <div class="position-relative ">
                        <div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="" id="payeCheckbox">
                                <label class="form-check-label" for="payeCheckboxt">
                                    PAYE export done </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="" id="napsaCheckbox">
                                <label class="form-check-label" for="napsaCheckboxt">
                                    NAPSA export done
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="" id="nihmaCheckbox">
                                <label class="form-check-label" for="nihmaCheckboxt">
                                    NIHMA export done
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="" id="otherCheckbox">
                                <label class="form-check-label" for="otherCheckboxt">
                                    Other exports submitted
                                </label>
                            </div>

                        </div>
                    </div>

                </div>


            </div>
            <div class="d-inline-block dropdown">
                <a id="rolloverButton" data-bs-toggle="modal" data-bs-target="#rolloverModal" class="btn btn-success"
                    disabled>Rollover</a>
            </div>

        </div>


    </div>
</form>

@endsection

@section('modal')
<div class="modal fade" id="rolloverModal" 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 Rollover 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 rollover {{$pamPayroll->short_description}} 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="{{ route('pam-payrolls.rollover',  $pamPayroll->id) }}"
                    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>
// Function to check if all checkboxes are checked
function areAllCheckboxesChecked() {
    return (
        document.getElementById('payeCheckbox').checked &&
        document.getElementById('napsaCheckbox').checked &&
        document.getElementById('nihmaCheckbox').checked &&
        document.getElementById('otherCheckbox').checked
    );
}

// Function to enable/disable the Rollover button
function updateRolloverButtonState() {
    const rolloverButton = document.getElementById('rolloverButton');
    rolloverButton.disabled = !areAllCheckboxesChecked();
}

// Listen for changes in checkboxes and update the button state
document.getElementById('payeCheckbox').addEventListener('change', updateRolloverButtonState);
document.getElementById('napsaCheckbox').addEventListener('change', updateRolloverButtonState);
document.getElementById('nihmaCheckbox').addEventListener('change', updateRolloverButtonState);
document.getElementById('otherCheckbox').addEventListener('change', updateRolloverButtonState);

// Initially set the button state
updateRolloverButtonState();
</script>

@endsection