@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>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 --}}
                                <div id="step-1">
                                    <div class="alert alert-info">
                                        <strong>Note:</strong> This upload is for temporary employees with contracts between 1–11 months and a contract end date later than today. The upload must include only <strong>Man Number</strong> and <strong>Rate of Pay</strong>.
                                    </div>
                                    <table 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>Salary Scale</th>
                                                <th>Salary Scale basic</th>
                                                <th>Uploaded Basic Pay</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($summary as $row)
                                            <tr>
                                                <td>{{ $row['manno'] }}</td>
                                                <td>{{ $row['employee_name'] }}</td>
                                                <td>{{ $row['department'] }}</td>
                                                <td>{{ $row['salary_scale'] }}</td>
                                                <td class="text-end">{{ number_format($row['salary_scale_basic'], 2) }}</td>
                                                <td class="text-end">{{ number_format($row['rate_of_pay'], 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>

                                {{-- Step 2 --}}
                                <div id="step-2">
                                    <form method="post" id="deductionForm" action="{{ route('pam-imports.confirmBulkEarnings') }}">
                                        @csrf
                                        <input type="hidden" name="bulk_earnings_summary" id="data" value="{{ json_encode($summary) }}">
                                        <input type="hidden" name="payroll_id" id="payroll_id" value="{{ $pamPayroll->id }}">

                                        @php
                                            $pamPayRunPeriods = \App\Models\PamPayRunPeriod::where('tax_year_id', $pamPayroll->currentPamPayRun->pamTaxTable->tax_year_id)
                                                ->where('period_status', 'active')->get();
                                        @endphp

                                        <div class="accordion-wrapper mb-3">
                                            <div class="card">
                                                <div class="card-header">
                                                    <div class="d-grid">
                                                        <button type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false"
                                                            class="text-start m-0 p-0 btn btn-link">
                                                            <span class="form-heading">Earning Parameters</span>
                                                            <p>Set the earning parameters</p>
                                                        </button>
                                                    </div>
                                                </div>
                                                <div id="collapseOne" 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>

                                                        <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)<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)</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> <!-- end recurrence -->
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>

                                {{-- Step 3 --}}
                                <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: #fff;"></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: #fff;"></div>
                                            <div class="swal2-success-circular-line-right" style="background-color: #fff;"></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>

            {{-- Errors Panel --}}
            <div class="col-lg-4 col-md-12">
                <div class="main-card mb-3 card">
                    <div class="card-header">Errors</div>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">
                            <table class="display nowrap table table-hover table-striped table-bordered">
                                <tbody>
                                    @if (!empty($errors_import))
                                        @foreach($errors_import as $item)
                                        <tr><td>{{ $item }}</td></tr>
                                        @endforeach
                                    @else
                                        <tr><td>No errors found with the uploaded data</td></tr>
                                    @endif
                                </tbody>
                            </table>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    $(document).ready(function () {
        $('#submitDeductionFormBtn').click(function () {
            this.disabled = true;
            this.innerHTML = `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Submitting...`;
            $('#deductionForm').submit();
        });
    });

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

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

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