@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="main-card mb-3 card">
        <div class="card-body">
            <a href="{{ route('pam-emps.deactivated') }}"> <i class="fa fa-arrow-left"></i></a>

            <form id="searchForm" action="{{ route('pam-linked-emps.search-emp') }}" method="GET" class="mb-4">
                @csrf
                <div class="input-group">
                    <input type="text" id="employeeInput" name="employee_id" class="form-control" placeholder="Find employee by man number" value="{{ $empManNumber ?? '' }}">
                    <button class="btn btn-primary" type="submit">Search</button>
                    <a href="{{ route('pam-emps.deactivated') }}" class="btn btn-outline-danger">Clear</a>
                </div>
            </form>

            <table style="width: 100%;" id="dataTablePaidLoans"
                        class="display nowrap table table-hover table-striped table-bordered">
                        <thead>
                            <tr>

                                <th>Emp. No.</th>
                                <th>Name</th>
                                <th>NRC/Passport</th>
                                <th>Unit/Department</th>
                                <th>Contract End Date</th>
                                <th>Status</th>
                                <th>Action</th>

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


                                    <td style="text-align: left; ">
                                        {{ $item->pamHRUser->man_number }}
                                    </td>
                                    <td style="text-align: left;">
                                        {{ $item->pamHRUser->fullName }}

                                    </td>
                                    <td style="text-align: left;">
                                        {{ $item->pamHRUser->nrc ? $item->pamHRUser->nrc : $item->pamHRUser->passport_no }}
                                    </td>
                                    <td style="text-align: left;">
                                        {{ $item->pamEmpDepartment->pamEmpUnit->name }} -

                                        {{ $item->pamEmpDepartment->name }}
                                    </td>

                                    <td style="text-align: left;">
                                        {{ $item->contract_expiry }}
                                    </td>
                                    <td style="text-align: left;">
                                        {{ $item->status }}
                                    </td>
                                    <td style="text-align: right;">
                                        @if (auth()->user()->roles->first()->permissions->contains('name', 'Run payrolls'))
                                                <a data-bs-toggle="modal"
                                                    data-bs-target="#linkToPayrollModal-{{ $item->man_number }}"
                                                    class="btn-shadow fbtn-wide btn-pill me-3 btn btn-outline-success">Activate</a>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                        <!-- Pagination Links for Not Assigned Table -->
                        <div class="">
                            <hr>
                            {{ $deactivatedEmployees->links() }}
                        </div>
                    </table>

            <div class="mt-4">
                {{ $deactivatedEmployees->links() }}
            </div>
        </div>
    </div>
@endsection
@foreach ($deactivatedEmployees as $item)
<div class="modal fade" id="linkToPayrollModal-{{ $item->man_number }}" 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 {{ $item->pamHRUser->fullName }} to an active Payroll</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <form id="linkToPayrollForm" method="POST" action="{{ route('pam-emps.store') }}">

                <div class="modal-body">

                    @csrf
                       {{-- Payroll Selection --}}
                        <div class="mb-3">
                            <label for="payroll_id" class="form-label">Select Payroll</label>
                            <select name="payroll_id" id="payroll_id" class="form-control">
                                @foreach ($activePayrolls as $payroll)
                                    <option value="{{ $payroll->id }}">
                                        {{ $payroll->short_description }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    <input type="hidden" name="man_number" id="man_number" value="{{ $item->man_number }}">
                    <p class="mb-0">
                        Are you sure you want to link {{ $item->pamHRUser->fullName }} to the Selected Payroll?
                    </p>
                </div>


                <div class="modal-footer">

                    <a data-bs-dismiss="modal"
                        class="btn-shadow btn-wide float-end btn-pill btn-hover-shine btn btn-dark">No</a>

                    <button id="save_btn"
                        class="btn-shadow float-end btn-wide btn-pill me-3 btn btn-outline-success"
                        type="submit">Yes</button>


                </div>

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


@section('scripts')
    <script>
        let searchTimeout;
        document.getElementById('employeeInput').addEventListener('keyup', function () {
            clearTimeout(searchTimeout);
            searchTimeout = setTimeout(() => {
                document.getElementById('searchForm').submit();
            }, 3000); // 3 sec delay
        });
    </script>
@endsection