@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>Cost Center</th>
                        <th>Payroll</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($empAssignedToPayroll 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->cost_center_code }}</td>
                            <td>{{ $item->pamPayroll->short_description }}</td>
                            <td>{{ $item->status }}</td>
                            <td>
                                @if (auth()->user()->roles->first()->permissions->contains('name', 'Transfer employees'))
                                    <a data-bs-toggle="modal" data-bs-target="#changePayrollModal-{{ $item->man_number }}" class="btn btn-outline-danger">Transfer</a>
                                    <a data-bs-toggle="modal" data-bs-target="#unlinkFromPayrollModal-{{ $item->man_number }}" class="btn btn-danger text-white">Unlink</a>
                                    <a href="#" class="btn btn-danger text-red" onclick="openDeactivateModal({{ $item->id }}, '{{ addslashes($item->pamHRUser->fullName) }}')">Deactivate</a>

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

            <div class="mt-4">
                {{ $empAssignedToPayroll->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>


@section('modal')
    @foreach ($empAssignedToPayroll as $item)
        <div class="modal fade" id="changePayrollModal-{{ $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">Transfer {{ $item->pamHRUser->fullName }} 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="man_number" value="{{ $item->man_number }}">
                            <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>
        <div class="modal fade" id="unlinkFromPayrollModal-{{ $item->man_number }}" tabindex="-1" role="dialog"
            aria-labelledby="unlinkModalLabel-{{ $item->man_number }}" 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-{{ $item->man_number }}">
                            ⚠️ 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>{{ $item->pamHRUser->fullName }}</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" value="{{ $item->man_number }}">
                            <input type="hidden" name="current_payroll_id" value="{{ $item->payroll_id }}">
                
                            <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>
        
        <script>
            $(function() {
                $('#payroll_id_transfer_{{ $item->man_number }}').select2();
            });
        </script>
    @endforeach
@endsection

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

        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