@can('hr_manager_hq')

    @extends('adminlte::page')

    @section('title', config('adminlte.title') . ' | Carry Over Rectification')

@section('content_header')
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6 m-0 text-dark">
                <h1>Carry Over Rectification</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="/">Home</a></li>
                    <li class="breadcrumb-item active">Carry over reform</li>
                </ol>
            </div>
        </div>
    </div>
@stop

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    @if (session('success'))
                        <script>
                            toastr.options = {
                                "closeButton": true,
                                "debug": false,
                                "newestOnTop": false,
                                "progressBar": true,
                                "positionClass": "toast-top-right",
                                "preventDuplicates": false,
                                "onclick": null,
                                "showDuration": "300",
                                "hideDuration": "1000",
                                "timeOut": "5000",
                                "extendedTimeOut": "1000",
                                "showEasing": "swing",
                                "hideEasing": "linear",
                                "showMethod": "fadeIn",
                                "hideMethod": "fadeOut"
                            };
                            toastr.success('{{ session('success') }}');
                        </script>
                    @endif

                    <div class="row">
                        {{-- <div class="col-12 text-right">
                            <button class="btn btn-primary" data-toggle="modal" data-target="#modalConfirm"><i
                                    class="fa fa-sync"></i>
                                Transfer to balance</button>
                        </div> --}}



                        <!-- Modal -->
                        <div class="modal fade" id="modalConfirm" tabindex="-1" aria-labelledby="Confirm Update"
                            aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="exampleModalLabel">Confirm rectify Carry Over</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body text-left">

                                        This will execute the transferring carry over remain into holiday balance

                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary"
                                            data-dismiss="modal">Cancel</button>
                                        <form action="{{ route('admin.carry-over.rectify') }}" method="GET"
                                            id="holiday-form">
                                            <button type="submit" class="btn btn-success" id="proceed-btn">
                                                <span id="spinner" class="spinner-border spinner-border-sm d-none"
                                                    aria-hidden="true"></span>
                                                Proceed
                                            </button>
                                        </form>

                                        <script>
                                            document.getElementById('holiday-form').addEventListener('submit', function(event) {
                                                const button = document.getElementById('proceed-btn');
                                                const spinner = document.getElementById('spinner');

                                                // Disable the button to prevent multiple clicks
                                                button.disabled = true;

                                                // Show the spinner and update button text
                                                spinner.classList.remove('d-none');
                                                button.innerHTML = `${spinner.outerHTML} Processing...`;

                                                // Let the form proceed with submission
                                            });
                                        </script>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- end modal -->
                    </div>


                    {{-- Carry over for: {{ $thisYr }} : Next year holiday balance: {{ $nextYr }} --}}
                    <table id="RenewalList" class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th class="text-center">#</th>
                                <th class="text-center">Employee</th>
                                <th class="text-center">Holiday remain</th>
                                <th class="text-center">Holiday day Taken</th>
                                <th class="text-center">Carry Over Total</th>
                                <th class="text-center">Carry Over Taken</th>
                                <th class="text-center">Carry Over Remain</th>
                                <th class="text-center">Before COR</th>
                                <th class="text-center">Before COT</th>
                                <th class="text-center">Before Balance</th>
                                <th class="text-center">After COR</th>
                                <th class="text-center">After COT</th>
                                <th class="text-center">After Balance</th>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($employees as $employee)
                                <tr>
                                    <td>{{ $employee['id'] }}</td>
                                    <td>{{ $employee['name'] }}</td>
                                    {{-- <td>{{ number_format($employee['balance'], 1) }} --}}
                                    </td>
                                    <td>{{ number_format($employee['remain'], 1) }}</td>
                                    <td>{{ number_format($employee['taken'], 1) }}</td>
                                    <td class="">{{ number_format($employee['carryover'], 1) }}</td>
                                    <td class="">{{ number_format($employee['cot'], 1) }}</td>
                                    <td class="">{{ number_format($employee['cor'], 1) }}</td>
                                    <td class="bg-warning">{{ number_format($employee['cor'], 1) }}</td>
                                    <td class="bg-warning">{{ number_format($employee['cot'], 1) }}</td>
                                    <td class="bg-warning">{{ number_format($employee['remain'], 1) }}</td>
                                    @if ($employee['skip'] === 1)
                                        <td class="bg-success">{{ number_format($employee['carryover_remain'], 1) }}</td>
                                        <td class="bg-success">{{ number_format($employee['carryover_taken'], 1) }}</td>
                                        <td class="bg-success">{{ number_format($employee['holiday_remain'], 1) }}</td>
                                    @else
                                        <td class="bg-success">{{ number_format($employee['cor'], 1) }}</td>
                                        <td class="bg-success">{{ number_format($employee['cot'], 1) }}</td>
                                        <td class="bg-success">{{ number_format($employee['remain'], 1) }}</td>
                                    @endif
                                </tr>
                            @endforeach

                        </tbody>
                    </table>
                    <script>
                        $(document).ready(function() {

                            $(function() {
                                $('[data-toggle="tooltip"]').tooltip()
                            })

                            $('#RenewalList').DataTable({
                                fixedHeader: true,
                                layout: {
                                    top1Start: {
                                        buttons: [{
                                                extend: 'copy'
                                            },
                                            {
                                                extend: 'excel'
                                            },
                                            {
                                                extend: 'pdf'
                                            },
                                            {
                                                extend: 'print'
                                            },
                                            {
                                                extend: 'colvis',
                                                collectionLayout: 'fixed columns',
                                                popoverTitle: 'Column visibility control'
                                            },
                                        ]
                                    },
                                    top2start: 'searchBuilder',
                                    topStart: {
                                        pageLength: {
                                            menu: [10, 25, 50, 100, 500, 1000, 2000, 5000, 10000, -1]
                                        },
                                    },
                                    topEnd: 'search',
                                    bottomStart: 'info',
                                    bottomEnd: 'paging'
                                },
                                pageLength: -1,
                                order: [
                                    [0, 'asc']
                                ],
                                // stateSave: true,
                            });
                        });
                    </script>

                </div>
            </div>
        </div>
    </div>
@stop

@section('footer')
    &nbsp;
@stop

@endcan