@extends('layouts.master')
@section('content')
<div class="app-page-title">
    <div class="page-title-wrapper">
        <div class="page-title-heading">
         
            <div>
               {{$title}}
               
            </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="tab-content">
    <div class="tab-pane tabs-animation fade show active" id="tab-content-0" role="tabpanel">
        <div class="row">
            <div class="col-lg-8 col-md-12">
                <div class="main-card mb-3 card">
                    <div class="card-body">
                        <div id="smartwizard">
                            <ul class="forms-wizard">
                                <li>
                                    <a href="#step-1">
                                        <em>1</em>
                                        <span>Uploaded Information</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#step-2">
                                        <em>2</em>
                                        <span>Deduction Parameters</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#step-3">
                                        <em>3</em>
                                        <span>Finish Import</span>
                                    </a>
                                </li>
                            </ul>
                            <div class="form-wizard-content">
                                <div id="step-1">
                                    <table style="width: 100%;" id="dataTableEarn" class="display nowrap table table-hover table-striped table-bordered">
                                        <thead>
                                            <tr>
                                                <th>Man No.</th>
                                                <th>Name</th>
                                               
                                                <th>Department</th>
                                                <th>Amount</th>

                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($data as $item)

                                            @php
                                            // dd($item);
                                            $pamEmp = \App\Models\PamEmp::where('man_number', $item['manno'])->first();

                                            if (!$pamEmp) {

                                            continue; // Move to the next iteration
                                            }
                                            @endphp

                                            <tr>

                                                <td style="text-align: left;">{{ $pamEmp->man_number }}</td>
                                                <td style="text-align: left;">{{ $pamEmp->title }}
                                                    {{ $pamEmp->pamHrUser->first_name }}
                                                    {{ $pamEmp->pamHrUser->last_name }}
                                                </td>

                                          
                                                <td style="text-align: left;">
                                                    {{ $pamEmp->pamEmpDepartment->name }}
                                                </td>

                                                         <td style="text-align: right; ">
                                                    {{number_format($item['amount'],2, '.', ',') }}

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

                                </div>

                                <div class="mt-4 d-flex justify-content-end">
                                    <div class="card shadow-sm" style="width: 300px;">
                                        <div class="card-body text-end">
                                            <h5 class="card-title">Total Amount</h5>
                                            <p class="card-text display-6">
                                               ZMW {{ number_format($validatedTotalAmount, 2, '.', ',') }}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div id="step-2">
                                    <form method="post" id="deductionForm" action="{{route('pam-imports.store')  }}">
                                        @csrf
                                        <input type="hidden" name="data" id="data" value="{{ json_encode($data) }}">
                                        <input type="hidden" name="payroll_id" id="payroll_id" value="{{ $pamPayroll->id }}">
                                        <input type="hidden" name="dedu_def_id" id="dedu_def_id" value="{{ $pamDeduDef->id }}">
                                        @php

                                        $pamPayRunPeriods = \App\Models\PamPayRunPeriod::where('tax_year_id',
                                        $pamPayroll->currentPamPayRun->pamTaxTable->tax_year_id)
                                        ->where('period_status', 'active')->get();
                                        @endphp
                                        <div id="accordion" class="accordion-wrapper mb-3">
                                            <div class="card">
                                                <div id="headingOne" class="card-header">
                                                    <div class="d-grid">
                                                        <button type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne" class="text-start m-0 p-0 btn btn-link">
                                                            <span class="form-heading">Deduction Parameters
                                                                <p>Set the deduction parameters</p>
                                                            </span>
                                                        </button>
                                                    </div>
                                                </div>
                                                <div data-parent="#accordion" id="collapseOne" aria-labelledby="headingOne" class="collapse show">
                                                    <div class="card-body">

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

                                                                <label class="form-label">End Period</label>
                                                                <select class="form-control" name="end_period" id="end_period">
                                                                    <option value="">Select End Period</option>
                                                                    @foreach($pamPayRunPeriods as $item)
                                                                    @if($item->end_date >=
                                                                    $pamPayroll->currentPamPayRun->pamPayRunPeriod->end_date
                                                                    )
                                                                    <option value="{{ $item->end_date }}">
                                                                        {{ $item->calendar_month}}-{{ $item->calendar_year}}
                                                                    </option>
                                                                    @endif
                                                                    @endforeach
                                                                </select>

                                                            </div>
                                                        </div> <!-- Close the row here -->

                                                        <div class="row">
                                                            <div class="mb-3 col-md-12">
                                                                <strong>Recurrence Frequency</strong>

                                                                @php
                                                                $totalPeriods = 12;
                                                                $fieldNamePrefix = 'recurrence_period_';
                                                                @endphp

                                                                @for ($period = 1; $period <= $totalPeriods; $period++) @if($period % 6==1) {{-- Start a new row after every 6 periods --}} <div class="row">
                                                                    @endif

                                                                    <div class="mb-3 col-md-2">
                                                                        <div class="form-check">
                                                                            <input class="form-check-input" type="checkbox" name="{{ $fieldNamePrefix . $period }}" id="{{ $fieldNamePrefix . $period }}" />
                                                                            <label class="form-check-label" for="{{ $fieldNamePrefix . $period }}">
                                                                                {{ date("M", mktime(0, 0, 0, $period, 1)) }}
                                                                            </label>
                                                                        </div>
                                                                    </div>

                                                                    @if ($period % 6 == 0 || $period == $totalPeriods)
                                                                    {{-- Close the row after every 6 periods or at the end --}}
                                                            </div>
                                                            @endif
                                                            @endfor
                                                            <div class="row">
                                                                <div class="mb-3 col-md-6">
                                                                    <div class="form-check">
                                                                        <input class="form-check-input" type="checkbox" id="selectAllRecurrence">
                                                                        <label class="form-check-label" for="selectAllRecurrence">
                                                                            Select All
                                                                        </label>
                                                                    </div>
                                                                </div>
                                                            </div>

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

                            <div id="step-3">
                                <div class="no-results">
                                    <div class="swal2-icon swal2-success swal2-animate-success-icon">
                                        <div class="swal2-success-circular-line-left" style="background-color: rgb(255, 255, 255);"></div>
                                        <span class="swal2-success-line-tip"></span>
                                        <span class="swal2-success-line-long"></span>
                                        <div class="swal2-success-ring"></div>
                                        <div class="swal2-success-fix" style="background-color: rgb(255, 255, 255);">
                                        </div>
                                        <div class="swal2-success-circular-line-right" style="background-color: rgb(255, 255, 255);"></div>
                                    </div>
                                    <div class="results-subtitle mt-4">Finish!</div>
                                    <div class="results-title">You have reached the last step of the upload process!</div>
                                    <div class="mt-3 mb-3"></div>
                                    <div class="text-center">
                                        <button type="button" id="submitDeductionFormBtn" class="btn-shadow btn-wide btn btn-success btn-lg">Submit</button>

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

                        </div>
                    </div>
                    <div class="divider"></div>
                    @if(count($data)>0)
                    <div class="clearfix">
                       
                        <button type="button" id="next-btn" class="btn-shadow btn-wide float-end btn-pill btn-hover-shine btn btn-primary">Next</button>
                        <button type="button" id="prev-btn" class="btn-shadow float-end btn-wide btn-pill me-3 btn btn-outline-secondary">Previous</button>
                    </div>
                    @endif
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-4">
            <div class="main-card mb-3 card">
                <div class="card-header">Errors</div>
                <ul class="todo-list-wrapper list-group list-group-flush">

                    <li class="list-group-item">
                        <table style="width: 100%;" class="display nowrap table table-hover table-striped table-bordered">

                            <tbody>
                                @if (count($errors_import) > 0)

                                @foreach($errors_import as $item)
                                <tr>
                                    <td style="text-align: left; ">
                                        {{ $item}}
                                    </td>
                                </tr>
                                @endforeach
                                @else
                                <tr>
                                    <td style="text-align: left; ">
                                        No errors found with the uploaded data
                                    </td>
                                </tr>
                                @endif
                            </tbody>
                        </table>

                    </li>

                </ul>

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

@endsection

@section('scripts')
<script>
    $(document).ready(function() {
        // Handle form submission when the button is clicked
        $('#submitDeductionFormBtn').click(function() {
            // Validate or perform any additional logic if needed

            // Trigger the form submission
            $('#deductionForm').submit();
        });

        // Your other JavaScript code...
    });
</script>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const selectAllRecurrence = document.getElementById("selectAllRecurrence");
        const recurrenceCheckboxes = document.querySelectorAll("[name^='recurrence_period_']");

        selectAllRecurrence.addEventListener("change", function() {
            recurrenceCheckboxes.forEach(function(checkbox) {
                checkbox.checked = selectAllRecurrence.checked;
            });
        });

        recurrenceCheckboxes.forEach(function(checkbox) {
            checkbox.addEventListener("change", function() {
                selectAllRecurrence.checked = [...recurrenceCheckboxes].every((c) => c.checked);
            });
        });
    });
</script>


@endsection

@section('modal')
<div class="modal fade" id="importModal" 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">Import Confirmation</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <div class="modal-body">
                <form method="post" id="addDedu" action="{{route('pam-imports.store')  }}">
                    @csrf
                    <p class="mb-0">
                        Are you sure you want to import {{$pamDeduDef->short_description}} for
                        {{$pamPayroll->short_description}} Payroll?
                    </p>
            </div>
            <input type="hidden" name="data" id="data" value="{{ json_encode($data) }}">
            <input type="hidden" name="payroll_id" id="payroll_id" value="{{ $pamPayroll->id }}">
            <input type="hidden" name="dedu_def_id" id="dedu_def_id" value="{{ $pamDeduDef->id }}">
            <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>
                <button type="submit" id="save" class="btn-shadow float-end btn-wide btn-pill me-3 btn btn-outline-primary">Yes</button>
            </div>
            </form>
        </div>
    </div>
</div>

@endsection