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

                <div>
                    EMPLOYEES

                </div>
            </div>

            <div class="page-title-actions">
                <div class="d-inline-block dropdown">
                    <a data-bs-toggle="modal" data-bs-target="#basicPayCodeModal"
                        class="btn-shadow btn-wide float-end btn-pill btn-hover-shine btn btn-success"> <i
                            class="fa fa-plus fa-w-20"></i>
                        <span>Update Basic Pay Code</span>
                        <div class="ms-auto badge rounded-pill bg-secondary"></div>
                    </a>
            </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">Employees linked to {{ $pamPayroll->short_description }} Payroll</h6>
                    </a>
                </li>
       
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="tab-eg11-0" role="tabpanel">

                    <div class="row">
                        <div class="col-md-6">
                            <form id="searchForm" action="{{ route('pam-empss.search-emp') }}" method="GET">
                                @csrf
                                <input type="hidden" name="payroll_id" value="{{ $pamPayroll->id }}">
                                <div class="input-group mb-3">
                                    <input type="text" id="employeeInput" name="employee_id" class="form-control" placeholder="Find employee by man number across all records" value="{{ $empManNumber ?? '' }}">
                                    <button class="btn btn-primary" type="submit">Search</button>
                                    <a href="{{ route('pam-emps.index', ['id' => $pamPayroll->id]) }}" class="btn btn-outline-danger">Clear Search</a>
                                </div>
                            </form>
                        </div>
                    </div>

                    <table style="width: 100%;" id="dataTableActiveLoans"
                        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>Cost Center</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($empAssignedToPayroll 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->cost_center_code }}
                                    </td>
                                    <td style="text-align: left;">{{ $item->status }}</td>
                                    <td style="text-align: right; width: 30%;">

                                        @if (auth()->user()->roles->first()->permissions->contains('name', 'Run payrolls'))
                                            @if ($pamPayRun->pay_run_status === 'closed')
                                                <a href="{{ route('pam-payslips.pdf-payslip', [$item->man_number, $pamPayRun->id]) }}"
                                                    class="btn-shadow fbtn-wide btn-pill me-3 btn btn-outline-primary">View
                                                    Payslip</a>
                                            @endif

                                            @if ($pamPayRun->pay_run_status === 'open')
                                                <a href="{{ route('pam-payslips.payslip-detail', [$item->man_number, $pamPayRun->id]) }}"
                                                    class="btn-shadow fbtn-wide btn-pill me-3 btn btn-outline-success">Edit
                                                    Payslip</a>
                                            @endif
                                        @endif
                                        {{-- @if (auth()->user()->roles->first()->permissions->contains('name', 'Transfer employees'))
                                            @if ($pamPayRun->pay_run_status === 'open')
                                                <a data-bs-toggle="modal"
                                                    data-bs-target="#changePayrollModal-{{ $item->man_number }}"
                                                    class="btn-shadow fbtn-wide btn-pill me-3 btn btn-outline-danger">Transfer</a>
                                            @endif
                                        @endif --}}
                                        @if (auth()->user()->roles->first()->permissions->contains('name', 'Transfer employees'))
                                                @if ($pamPayRun->pay_run_status === 'open')
                                                     <a data-bs-toggle="modal"
                                                    data-bs-target="#unlinkFromPayrollModal-{{ $item->man_number }}"
                                                    class="btn-shadow fbtn-wide btn-pill me-3 btn"
                                                    style="color: #fff; background-color: #dc3545; border-color: #dc3545;">
                                                    Unlink
                                                    </a>

                                                @endif
                                        @endif

                                        
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                    <!-- Pagination Links -->
                    <div class="">
                        <hr>
                        {{ $empAssignedToPayroll->links() }}
                    </div>
                </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>

    <script>
        let searchTimeout;

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

@endsection

@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
                            {{ $item->pamPayroll->short_description }} 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">Current Payroll</label>
                                    <input type="text" class="form-control"
                                        value="{{ $item->pamPayroll->short_description }}" readonly>
                                </div>
                            </div> <!-- Close the row here -->

                            <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 
                            <strong>{{ $item->pamPayroll->short_description }}</strong> 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="mb-3">
                                <label class="form-label">Current Payroll</label>
                                <input type="text" class="form-control" value="{{ $item->pamPayroll->short_description }}" readonly>
                            </div>
        
                            <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

    </div>

    <div class="modal fade" id="basicPayCodeModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <form action="{{ route('pam-payslips.update-basic-pay-code') }}" method="POST">
                @csrf
                <input type="hidden" name="payroll_id" value="{{ $pamPayroll->id }}">
    
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Global Update Basic Pay Code</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
    
                    <div class="modal-body">
                        <p class="mb-0">
                            Update current period basic pay code for staff?
                        </p>
                    </div>
    
                    <div class="modal-footer">
                        <button type="button" class="btn-shadow btn-wide float-end btn-pill btn-hover-shine btn btn-secondary" data-bs-dismiss="modal">
                            No
                        </button>
    
                        <button type="submit" class="btn-shadow float-end btn-wide btn-pill me-3 btn btn-outline-primary">
                            Yes
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    
@endsection