@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>
                                            @foreach($earningCodes as $code)
                                                <th>{{ $code }}</th>
                                            @endforeach
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($summary as $row)
                                        <tr>
                                            <td>{{ $row['manno'] }}</td>
                                            <td>{{ $row['employee_name'] }}</td>
                                            <td>{{ $row['department'] }}</td>
                                            @foreach($earningCodes as $code)
                                                <td class="text-end">
                                                    {{ isset($row['earnings'][$code]) ? number_format($row['earnings'][$code]['amount'], 2) : '-' }}
                                                </td>
                                            @endforeach
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                                </div>
                                <div class="mt-4 d-flex justify-content-between flex-wrap">

    {{-- Overall Total Card --}}
    <div class="card shadow-sm mb-3" 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>

    {{-- Earning Code Totals Card --}}
    <div class="card shadow-sm mb-3" style="min-width: 400px; flex-grow: 1;">
        <div class="card-body">
            <h5 class="card-title">Earning Totals</h5>
            <table class="table table-sm table-bordered mb-0">
                <thead>
                    <tr>
                        <th>Earning Code</th>
                        <th class="text-end">Amount (ZMW)</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($earningTotals as $code => $total)
                    <tr>
                        <td>{{ $code }}</td>
                        <td class="text-end">{{ number_format($total, 2, '.', ',') }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

</div>

                           
                                    <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 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);
        });
    });
});

    document.getElementById('submitDeductionFormBtn').addEventListener('click', function () {
        const btn = this;
        btn.disabled = true;

        // Add spinner and update text
        btn.innerHTML = `
            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
            Submitting...
        `;

        // OPTIONAL: Trigger form submit here if needed
        // document.getElementById('yourFormId').submit();
    });
</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 all validated earnings for
                    <strong>{{ $pamPayroll->short_description }}</strong> Payroll?
                </p>
            </div>




            <input type="hidden" name="data" id="data" value="{{ json_encode($summary) }}">
            <input type="hidden" name="payroll_id" id="payroll_id" value="{{ $pamPayroll->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