@extends('layouts.master')
@section('content')
    <div class="app-page-title">
        <div class="page-title-wrapper">
            <div class="page-title-heading">

                <div>
                    Claims linked to {{ $payroll->short_description }} Payroll
                </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="main-card mb-3 card">
        <div class="card-body">
            <a href="{{ route('pam-pay-runs.index') }}"> <i class="fa fa-arrow-left"></i></a>
            <h4 class="card-title"></h4>
            <ul class="nav nav-tabs nav-justified">
                <li class="nav-item">
                    <a data-bs-toggle="tab" href="#tab-eg11-0" class="active nav-link">
                        <h6 class="card-title">Unprocessed Claims</h6>
                    </a>
                </li>
                <li class="nav-item">
                    <a data-bs-toggle="tab" href="#tab-eg11-1" class="nav-link">
                        <h6 class="card-title">Processed Claims</h6>
                    </a>
                </li>

            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="tab-eg11-0" role="tabpanel">


                    <table style="width: 100%;" id="dataTableActiveLoans"
                        class="display nowrap table table-hover table-striped table-bordered">
                        <thead>
                            <tr>
                                @foreach ($unprocesseHeaders as $header)
                                    <th>{{ $header }}</th>
                                @endforeach
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($unprocessedClaims as $claim)
                                <tr>
                                    <td>{{ $claim['id'] }}</td>
                                    <td>{{ $claim['emp_name'] }}</td> <!-- Change this line -->
                                    <td>{{ $claim['man_number'] }}</td>
                                    <td>{{ $claim['earn_code'] }}</td>
                                    <td>{{ $claim['units'] }}</td>
                                    <td>{{ $claim['rate'] }}</td>
                                    <td>{{ $claim['amount'] }}</td>
                                    <td>{{ \Carbon\Carbon::parse($claim['start_date'])->format('Y-m-d') }}</td>
                                    <td>{{ \Carbon\Carbon::parse($claim['end_date'])->format('Y-m-d') }}</td>
                                    <td>{{ $claim['processed_status'] }}</td>

                                    <td>
                                        <a data-bs-toggle="modal" data-bs-target="#linkToPayslipModal-{{ $claim['id'] }}"
                                            class="btn-shadow fbtn-wide btn-pill me-3 btn btn-outline-success">Link to
                                            Payslip</a>
                                    </td>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <div class="tab-pane" id="tab-eg11-1" role="tabpanel">
                    <table style="width: 100%;" id="dataTablePaidLoans"
                        class="display nowrap table table-hover table-striped table-bordered">
                        <thead>
                            <tr>
                                @foreach ($processeHeaders as $header)
                                    <th>{{ $header }}</th>
                                @endforeach
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($processedClaims as $claim)
                                <tr>
                                    <td>{{ $claim['id'] }}</td>
                                    <td>{{ $claim['emp_name'] }}</td> <!-- Change this line -->
                                    <td>{{ $claim['man_number'] }}</td>
                                    <td>{{ $claim['earn_code'] }}</td>
                                    <td>{{ $claim['units'] }}</td>
                                    <td>{{ $claim['rate'] }}</td>
                                    <td>{{ $claim['amount'] }}</td>
                                    <td>{{ \Carbon\Carbon::parse($claim['start_date'])->format('Y-m-d') }}</td>
                                    <td>{{ \Carbon\Carbon::parse($claim['end_date'])->format('Y-m-d') }}</td>
                                    <td>{{ $claim['processed_status'] }}</td>
                                    <td>{{ $claim['date_processed'] }}</td>

                                    <td>
                                        <a data-bs-toggle="modal" data-bs-target="#linkToPayslipModal-{{ $claim['id'] }}"
                                            class="btn-shadow fbtn-wide btn-pill me-3 btn btn-outline-secondary disabled">Linked</a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('scripts')
    <script>
        // table.destroy();
        $(document).ready(function() {

            var table = $('#dataTableUnlinked').DataTable({
                dom: 'Blfrtip',
                buttons: [
                    //'copyHtml5',
                    'excelHtml5',
                    'csvHtml5',
                    'pdfHtml5'
                ],

                'lengthChange': false,
                'select': {
                    'style': 'multi'
                },
                'order': [
                    [1, 'asc']
                ],
            });



        });
    </script>
@endsection

@section('modal')
    @foreach ($unprocessedClaims as $item)
        <div class="modal fade" id="linkToPayslipModal-{{ $item['id'] }}" 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">Link this claim to {{ $item['emp_name'] }}'s Payslip
                            in
                            {{ $payroll->short_description }} ?</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">

                        <form method="POST"
                            action="{{ route('pam-approved-claims.link-claim-to-payslip', $item['id']) }}">
                            @csrf
                            <input type="hidden" name="claim_id" value="{{ $item['id'] }}">
                            <input type="hidden" name="payroll_id" value="{{ $payroll->id }}">

                            <input type="hidden" name="mandatory" value="1">
                            <!-- Recurrence Periods -->
                            @for ($i = 1; $i <= 12; $i++)
                                <input type="hidden" name="recurrence_period_{{ $i }}" value="on">
                            @endfor


                            <label for="end_period" class="p-1">Pay Run Period: </label>

                            <select class="form-control" name="end_date" id="end_period">
                                {{-- <option value="">Select Pay Period</option> --}}
                                @foreach ($pamPayRunPeriods as $period)
                                    @if ($period->id == $item['claimPayRun']->pay_run_period_id)
                                        @php
                                            $date = DateTime::createFromFormat(
                                                '!m-Y',
                                                $period->calendar_month . '-' . $period->calendar_year,
                                            );
                                            $monthName = $date->format('F');
                                        @endphp
                                        <option value="{{ $period->end_date }}"
                                            {{ $item['claimPayRun']->pay_run_period_id == $period->id }} selected>
                                            {{ $monthName }}-{{ $period->calendar_year }}
                                        </option>
                                    @endif
                                @endforeach
                            </select>

                            <!-- Modal Footer with Buttons -->
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">No</button>
                                <button type="submit" class="btn btn-primary">Yes</button>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
        </div>
    @endforeach

    @foreach ($processedClaims as $item)
        {{-- <div class="modal fade" id="linkToPayrollModal-{{ $item['id'] }}" 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">Link an Employee to Payroll</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        </button>
                    </div>
                    <div class="modal-body">
                        <!-- You can add content here for linking processed claims if needed -->
                    </div>
                </div>
            </div>
        </div> --}}
    @endforeach
@endsection