@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>

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

    {{-- Display Success Message --}}
    @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>Earning Parameters</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#step-3">
                                        <em>3</em>
                                        <span>Finish Import</span>
                                    </a>
                                </li>
                            </ul>
                            <div class="form-wizard-content">
                                {{-- Step 1: Display Uploaded Information --}}
                                <div id="step-1">
                                    <table id="dataTableEarn" class="display nowrap table table-hover table-striped table-bordered" style="width: 100%;">
                                        <thead>
                                            <tr>
                                                <th>Man No.</th>
                                                <th>Name</th>
                                                <th>Department</th>
                                                <th>Amount</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($data as $item)
                                                @php
                                                    $pamEmp = \App\Models\PamEmp::where('man_number', $item['manno'])->first();
                                                    if (!$pamEmp) continue; // Skip if no matching employee
                                                @endphp
                                                <tr>
                                                    <td>{{ $pamEmp->man_number }}</td>
                                                    <td>{{ $pamEmp->pamHrUser->title }} {{ $pamEmp->pamHrUser->first_name }} {{ $pamEmp->pamHrUser->last_name }}</td>
                                                
                                                    <td>{{ $pamEmp->pamEmpDepartment->name }}</td>
                                                    <td class="text-end">{{ number_format($item['amount'], 2, '.', ',') }}</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                           
                                    <div id="step-2">
                                    <form method="post" id="deductionForm" action="{{route('pam-imports.storeEarn')  }}">
                                 @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="earn_def_id" id="earn_def_id"
                                        value="{{ $pamEarnDef->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">Earning Parameters
                                                                <p>Set the earning 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>
                    <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>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-12">
            <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 (!empty($errors_import))
                                    @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 {{$pamEarnDef->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="earn_def_id" id="earn_def_id" value="{{ $pamEarnDef->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