@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">This view allows the user to rollover
                    {{ strtoupper($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

    @if(session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
    @endif
</div>


<div class="row">
    <div class="col-md-6 col-lg-3">
        <div class="widget-chart widget-chart2 text-start mb-3 card-btm-border card-shadow-primary border-primary card">
            <div class="widget-chat-wrapper-outer">
                <div class="widget-chart-content">
                    <div class="widget-title opacity-5 text-uppercase">Total Employees</div>
                    <div class="widget-numbers mt-2 fsize-1 mb-0 w-100">
                        <div class="widget-chart-flex align-items-center">
                            <div>

                                {{$pamPayroll->pamEmps->count()}}

                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-lg-3">
        <div class="widget-chart widget-chart2 text-start mb-3 card-btm-border card-shadow-success border-success card">
            <div class="widget-chat-wrapper-outer">
                <div class="widget-chart-content">
                    <div class="widget-title opacity-5 text-uppercase">Active Employees</div>
                    <div class="widget-numbers mt-2 fsize-1 mb-0 w-100">
                        <div class="widget-chart-flex align-items-center">
                            <div>


                                <small class="opacity-5 ps-1">Active</small>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-lg-3">
        <div class="widget-chart widget-chart2 text-start mb-3 card-btm-border card-shadow-danger border-danger card">
            <div class="widget-chat-wrapper-outer">
                <div class="widget-chart-content">
                    <div class="widget-title opacity-5 text-uppercase">Terminated Employees</div>
                    <div class="widget-numbers mt-2 fsize-1 mb-0 w-100">
                        <div class="widget-chart-flex align-items-center">
                            <div>
                                <small class="text-success pe-1">-</small>

                                <small class="opacity-5 ps-1">hires</small>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-lg-3">
        <div class="widget-chart widget-chart2 text-start mb-3 card-btm-border card-shadow-warning border-warning card">
            <div class="widget-chat-wrapper-outer">
                <div class="widget-chart-content">
                    <div class="widget-title opacity-5 text-uppercase">New Employees</div>
                    <div class="widget-numbers mt-2 fsize-1 mb-0 w-100">
                        <div class="widget-chart-flex align-items-center">
                            <div>
                                <small class="text-success pe-1">+</small>


                            </div>

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

<div class="row">
    <div class="col-md-6 col-lg-3">
        <div class="widget-chart widget-chart2 text-start mb-3 card-btm-border card-shadow-warning border-warning card">

            <div class="widget-chat-wrapper-outer">
                <div class="widget-chart-content">
                    <div class="widget-title opacity-5 text-uppercase">Total Gross Pay</div>
                    <div class="widget-numbers mt-2 fsize-1 mb-0 w-100">
                        <div class="widget-chart-flex align-items-center">
                            <div>

                                <small class="opacity-5 pe-1">ZMW</small>
                                {{number_format($pamPayroll->getTotalGrossPay(), 2, '.', ',') }}


                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-lg-3">
        <div class="widget-chart widget-chart2 text-start mb-3 card-btm-border card-shadow-danger border-danger card">

            <div class="widget-chat-wrapper-outer">
                <div class="widget-chart-content">
                    <div class="widget-title opacity-5 text-uppercase">Total Deductions</div>
                    <div class="widget-numbers mt-2 fsize-1 mb-0 w-100">
                        <div class="widget-chart-flex align-items-center">
                            <div>
                                <small class="opacity-5 pe-1">ZMW</small>
                                {{number_format($pamPayroll->getTotalDeductions(), 2, '.', ',') }}

                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-lg-3">
        <div class="widget-chart widget-chart2 text-start mb-3 card-btm-border card-shadow-success border-success card">
            <div class="widget-chat-wrapper-outer">
                <div class="widget-chart-content">
                    <div class="widget-title opacity-5 text-uppercase">Net Pay</div>
                    <div class="widget-numbers mt-2 fsize-1 mb-0 w-100">
                        <div class="widget-chart-flex align-items-center">
                            <div>
                                <small class="opacity-5 pe-1">ZMW</small>
                                {{number_format($pamPayroll->getTotalNetPay(), 2, '.', ',') }}

                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-lg-3">
        <div class="widget-chart widget-chart2 text-start mb-3 card-btm-border card-shadow-primary border-primary card">
            <div class="widget-chat-wrapper-outer">
                <div class="widget-chart-content">
                    <div class="widget-title opacity-5 text-uppercase">PAYE</div>
                    <div class="widget-numbers mt-2 fsize-1 mb-0 w-100">
                        <div class="widget-chart-flex align-items-center">
                            <div>
                                <small class="opacity-5 pe-1">ZMW</small>
                                {{number_format($pamPayroll->getTotalTaxPaid(), 2, '.', ',') }}

                            </div>

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

<div class="main-card mb-3 card">
    <div class="card-header">
        <div class="card-title">
            {{$pamPayroll->short_description}} Payroll Details
        </div>
        <div class="btn-actions-pane-right">
            <button type="button" class="btn-icon btn-wide btn-outline-2x btn btn-outline-focus btn-sm d-flex">
                Actions Menu
                <span class="ps-2 align-middle opacity-7">
                    <i class="fa fa-angle-right"></i>
                </span>
            </button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-8">

            <div class="table-responsive">
                <table class="align-middle text-truncate mb-0 table table-borderless table-hover">
                    <thead>
                        <tr>
                            <th class="text-center">#</th>
                            <th class="text-center">Period</th>
                            <th class="text-center">Start Date</th>
                            <th class="text-center">End Date</th>
                            <th class="text-center">Days in a Period</th>

                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="text-center text-muted" style="width: 80px;">
                                <div class="badge rounded-pill bg-success">Current</div>
                            </td>
                            <td class="text-center" style="width: 80px;">

                                {{$currentPamPayRunPeriod->calendar_month}}-{{$currentPamPayRunPeriod->calendar_year}}
                            </td>
                            <td class="text-center">
                                {{$currentPamPayRunPeriod->start_date}}
                            </td>
                            <td class="text-center">
                                {{$currentPamPayRunPeriod->end_date}}
                            </td>
                            <td class="text-center">
                                {{$currentPamPayRunPeriod->calendar_days_in_period}}
                            </td>

                        </tr>
                        <tr>
                            <td class="text-center text-muted" style="width: 80px;">
                                <div class="badge rounded-pill bg-danger">Next</div>
                            </td>
                            <td class="text-center" style="width: 80px;">

                                {{$pamPayRunPeriod->calendar_month}}-{{$pamPayRunPeriod->calendar_year}}
                            </td>
                            <td class="text-center">
                                {{$pamPayRunPeriod->start_date}}
                            </td>
                            <td class="text-center">
                                {{$pamPayRunPeriod->end_date}}
                            </td>
                            <td class="text-center">
                                {{$pamPayRunPeriod->calendar_days_in_period}}
                            </td>

                        </tr>

                    </tbody>
                </table>
            </div>
        </div>
        <div class="col-md-4">


            <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="payeCheckbox">
                                    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="napsaCheckbox">
                                    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="nihmaCheckbox">
                                    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="otherCheckbox">
                                    Other exports submitted
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="" id="backupCheckbox">
                                <label class="form-check-label" for="backupCheckbox">
                                    Backup Taken
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="rolloverButton" style="display: none;">

        <div class="d-block p-4 text-center card-footer">
            <button class="btn-pill btn-shadow btn-wide fsize-1 btn btn-success btn-lg">
               
                <span class="me-1">

                    <a data-bs-toggle="modal" data-bs-target="#rolloverModal">Submit</a>

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


@endsection

@section('modal')
<div class="modal fade" id="rolloverModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">{{$pamPayroll->short_description}} Payroll Rollover to {{$pamPayRunPeriod->calendar_month}}-{{$pamPayRunPeriod->calendar_year}} 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 to {{$pamPayRunPeriod->calendar_month}}-{{$pamPayRunPeriod->calendar_year}}?
                </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-dark">No</a>

                <a href="{{ route('pam-payroll-rollovers.rollover',  $pamPayroll->id) }}"
                    class="btn-shadow float-end btn-wide btn-pill me-3 btn btn-outline-success">Yes</a>

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

<div class="modal fade" id="backupModal" 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">Backup 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 backup the Payroll Data?
                </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-backups.backup') }}"
                    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() {
    // Add change event listener to all checkboxes
    $('.form-check-input').change(function() {
        // Check if all checkboxes are checked
        var allChecked = $('.form-check-input:checked').length === $('.form-check-input').length;
        if (allChecked) {
            // Show the button if all checkboxes are checked
            $('#rolloverButton').show();
        } else {
            // Hide the button if not
            $('#rolloverButton').hide();
        }
        // Enable or disable the save button based on the result
        //  $('#saveButton').prop('disabled', !allChecked);
    });
});
</script>




@endsection