@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.linked') }}"> <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.linked') }}" class="btn btn-outline-danger">Clear</a>
                </div>
            </form>

            <table class="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>Status</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($employees as $item)
                        <tr>
                            <td>{{ $item->pamHRUser->man_number }}</td>
                            <td>{{ $item->pamHRUser->fullName }}</td>
                            <td>{{ $item->pamHRUser->nrc ?: $item->pamHRUser->passport_no }}</td>
                            <td>{{ $item->pamEmpDepartment->pamEmpUnit->name }} - {{ $item->pamEmpDepartment->name }}</td>
                            <td>{{ $item->status }}</td>
                            <td>
                                @if (auth()->user()->roles->first()->permissions->contains('name', 'Run payrolls'))
                                    @if ($item->payroll_id == "0")
                                        <a href="#" class="btn-shadow fbtn-wide btn-pill me-3 btn btn-outline-success" onclick="openActivateEmployeeModal('{{$item->pamHRUser->man_number}}', '{{ addslashes($item->pamHRUser->fullName) }}')">Activate and Link</a>
                                    @elseif($item->payroll_id == null)
                                        <a href="#" class="btn-shadow fbtn-wide btn-pill me-3 btn btn-outline-success" onclick="openActivateEmployeeModal('{{$item->pamHRUser->man_number}}', '{{ addslashes($item->pamHRUser->fullName) }}')">Link</a>
                                        <a href="#" class="btn btn-danger text-red" onclick="openDeactivateModal({{ $item->id }}, '{{ addslashes($item->pamHRUser->fullName) }}')">Deactivate</a>
                                    @else
                                        <a href="#" class="btn btn-outline-danger text-white" onclick="openChangePayrollModal('{{$item->pamHRUser->man_number}}', '{{ addslashes($item->pamHRUser->fullName) }}')">Transfer</a>   
                                        <a href="#" class="btn btn-danger text-white" onclick="openUnlickEmployeeModal('{{$item->pamHRUser->man_number}}', '{{ addslashes($item->pamHRUser->fullName) }}')">Unlink</a>   
                                        <a href="#" class="btn btn-danger text-red" onclick="openDeactivateModal({{ $item->id }}, '{{ addslashes($item->pamHRUser->fullName) }}')">Deactivate</a>   
                                    @endif
                                @endif

                                
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>

            <div class="mt-4">
                {{ $employees->links() }}
            </div>
        </div>
    </div>
@endsection
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<!-- Reusable Deactivate Modal -->
<div class="modal fade" id="deactivatePayrollModal" tabindex="-1" aria-labelledby="deactivatePayrollLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="deactivatePayrollForm">
                <div class="modal-header">
                    <h5 class="modal-title" id="deactivatePayrollLabel">Confirm Deactivation</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    Are you sure you want to deactivate <strong id="employeeName"></strong> from payroll?
                </div>
                <input type="hidden" name="id" id="employeeId">
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-warning">Yes, Deactivate</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="unlinkFromPayrollModal" tabindex="-1" role="dialog" aria-labelledby="unlinkModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content border border-danger">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title" id="unlinkModalLabel">
                    ⚠️ Confirm Unlink
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                <p class="text-danger fw-bold">
                    Are you sure you want to unlink <strong id="employeeUnlinkName"></strong> from Payroll?
                </p>
                <p>This action is <strong>irreversible</strong> and may affect payroll records.</p>

                <form method="POST" action="{{ route('pam-emps.unlink') }}">
                    @csrf
                    <input type="hidden" name="emp_id" id="employeeUnlinkManNumber">       
                    <div class="modal-footer d-flex justify-content-between">
                        <button type="button" class="btn btn-secondary btn-pill" data-bs-dismiss="modal">
                            Cancel
                        </button>
                        <button type="submit" class="btn btn-danger btn-pill">
                            Yes, Unlink Employee
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@isset($item)
    <div class="modal fade" id="changePayrollModal" 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">Transfer <strong id="employeeTransferName"></strong>  from current Payroll</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-emps.transfer') }}">
                    @csrf
                    <input type="hidden" name="man_number" id="employeeTransferManNumber">
                    <input type="hidden" name="current_payroll_id" id="current_payroll_id"
                        value="{{ $item->payroll_id }}">
                    @php
                        $pamPayrollModal = \App\Models\PamPayroll::where('status', 'active')->get();
                    @endphp
                    <div class="row">
                        <div class="mb-3 col-md-12">

                            <label class="form-label">New Payroll<span class="text-danger">*</span></label>
                            <select name="payroll_id" id="payroll_id_transfer_{{ $item->id }}"
                                class="form-control select2" style="width: 100%;">
                                @foreach ($pamPayrollModal as $ite)
                                    @if ($ite->id != $item->payroll_id)
                                        <option value="{{ $ite->id }}">
                                            {{ $ite->short_description }}
                                        </option>
                                    @endif
                                @endforeach
                            </select>

                            @error('payroll_id')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div> <!-- Close the row here -->


                    <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>
            </div>
            </form>
        </div>
    </div>
</div>
@endisset



<div class="modal fade" id="linkToPayrollModal" tabindex="-1" aria-labelledby="linkPayrollLabel"  aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="linkPayrollLabel">Link <strong id="employeeLinkName"></strong> 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="link_man_number">

                    <p class="mb-0">
                        Are you sure you want to link <strong id="employeeLinkName1"></strong> 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>




@section('scripts')

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

        function openDeactivateModal(id, name) {
            document.getElementById('employeeId').value = id;
            document.getElementById('employeeName').innerText = name;
            var myModal = new bootstrap.Modal(document.getElementById('deactivatePayrollModal'));
            myModal.show();
        }

        function openChangePayrollModal(manNumber, name){
            document.getElementById('employeeTransferManNumber').value = manNumber;
            document.getElementById('employeeTransferName').innerText = name;
            var myModal = new bootstrap.Modal(document.getElementById('changePayrollModal'));
            myModal.show();
        }

        function openUnlickEmployeeModal(manNumber, name){
            document.getElementById('employeeUnlinkManNumber').value = manNumber;
            document.getElementById('employeeUnlinkName').innerText = name;
            var myModal = new bootstrap.Modal(document.getElementById('unlinkFromPayrollModal'));
            myModal.show();
        }

        function openActivateEmployeeModal(manNumber, name) {
            document.getElementById('link_man_number').value = manNumber;
            document.getElementById('employeeLinkName').innerText = name + " - " + manNumber;
            document.getElementById('employeeLinkName1').innerText = name;

            var myModal = new bootstrap.Modal(document.getElementById('linkToPayrollModal'));
            myModal.show();
        }


        document.getElementById('deactivatePayrollForm').addEventListener('submit', function(e) {
            e.preventDefault();

            const id = document.getElementById('employeeId').value;

            fetch("{{ route('pam-emps.deactivate-employee') }}", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "X-CSRF-TOKEN": "{{ csrf_token() }}"
                },
                body: JSON.stringify({ id })
            })
            .then(res => res.json())
            .then(data => {
                    if (data.success) {
                        Swal.fire({
                        title: 'Success!',
                        text: 'Employee deactivated from payroll.',
                        icon: 'success',
                        confirmButtonText: 'OK'
                    }).then(() => {
                        location.reload();
                    });
                } else {
                    alert('Failed to deactivate employee');
                }
            })
            .catch(err => {
                console.error(err);
                    Swal.fire({
                    title: 'Error',
                    text: typeof err === 'string' ? err : 'Something went wrong!',
                    icon: 'error'
                });
            });
        });
</script>

@endsection