@extends('hr_main')
@section('title', '| '. $data['pageTitle'] )
@section('content')
<style>
    .panel {
        margin-bottom: 80px;
    }
    .panel .panel-heading {
        border-bottom: 1px solid #ddd;
        padding-bottom: 9px
    }
    .form-control {
        height: 35px;
        padding: 6px 6px;
        font-size: 12px;
    }

    .panel.panel-border {
        border: 0;
    }
    footer.main-footer {
        position: absolute;
        bottom: 0;
        width: 100%;
    }
    footer.main-footer .footer-inner {
        display: flex;
        justify-content: center;
    }
    footer.main-footer .footer-text p {
        margin: 0;
    }
    footer.main-footer .go-up a {
        padding: 0px 5px;
    }
    .table tr:nth-child(1) {
        background-color: #fff;
    }
    .table tr td {
        color: #444;
        padding: 5px !important;
    }
    div:where(.swal2-container) div:where(.swal2-popup) {
        width: 45em !important;
        padding: 0 0 2em !important;
    }
</style>
<div class="row add-data-form">
    <div class="col-md-12">
        <div class="col-md-1"></div>
        <div class="col-md-10 fullbody">
            <div class="viewTitle" style="border-bottom: 1px solid white;">
                {{-- <a href="{!! $data['allDepartmentChangeListUrl'] !!}" class="btn btn-info pull-right addViewBtn"><i class="glyphicon glyphicon-th-list viewIcon"></i>{!! $data['allDepartmentChangeListLabel'] !!}</a> --}}
            </div>
            <div class="panel panel-default panel-border">
                <div class="panel-body">
                    <div class="row" style="margin-bottom: 25px">
                        <div class="col-md-12">
                            <div class="panel-heading">
                                <div class="panel-title">{!! $data['pageTitle'] !!}</div>
                            </div>
                        </div>
                    </div>
                    <form action="" id="undoForm">
                        @csrf
                        <input type="hidden" id="dismissId" name="dismissId" value="">
                        <div class="row" style="margin-bottom: 25px">
                            <div class="col-md-4">
                                <label class="control-label">Branch</label>
                                <div class="">
                                    <select id="branchId" class="form-control form-select branchSelect" name="branchId" >
                                        <option value="" > Select Branch</option>
                                        @foreach($data['branches'] as $id => $branch)
                                            <option value="{{ $id }}"> {{ $branch }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <label class ="control-label"> Employee</label>
                                 <div class="">
                                    <select class="form-control form-select employeeId" id="employeeId" name="employeeId" >
                                        <option value="" > Select Employee</option>
                                    </select>
                                 </div>
                             </div>
                        </div>
                        <div class="row" style="margin-bottom: 25px">
                            <div class="col-md-12">
                                <strong>Dismiss Details</strong>
                                <table class="table table-bordered" >
                                    <thead>
                                    <tr>
                                        <th style="background-color: #708090 !important;" width="30%">Field</th>
                                        <th style="background-color: #708090 !important;" width="70%">Details</th>
                                    </tr>
                                    </thead>
                                    <tbody id="employeeData">
                                        <tr><td colspan="3" style="text-align:center;">Please select a branch and employee.</td></tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12 text-center">
                                <p id="undoMessage" style="display: none;color: #FF0000 !important;font-size: 12px; font-weight: 600;"></p>
                                <button class="btn btn-success" style="display: none;" id="undoButton" title="Undo">
                                    <i class="fa fa-undo"></i> Undo
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-md-1"></div>
    </div>
</div>
@endsection

@section('footerAssets')
    <script type="text/javascript">
        $(document).ready(function(){
            $('.branchSelect').select2();
            $('.employeeId').select2();

            $('#branchId').change(function(event) {
                $(this).next('.text-danger').remove();
                let branchId = $(this).val();
                if (branchId) {
                    // $('#employeeId').val('').trigger('change.select2');
                    $('#employeeId').empty();
                    $('#employeeId').append('<option value="">Select an Employee</option>');

                    $.ajax({
                        url: "{{ route('dismissUndo.getEmployeeByBranch') }}",
                        dataType: 'json',
                        type: 'POST',
                        data: {
                            "branchId":branchId,
                            "_token":$('meta[name="_token"]').attr('content')
                        },
                        success: function(response) {
                            if (response && Object.keys(response).length > 0) {
                                $.each(response, function(id, name) {
                                    $('#employeeId').append("<option value='" + id + "'>" + name + "</option>");
                                });
                            } else {
                                toastr.warning("No employees found for the selected branch.");
                            }
                        },
                        error: function(xhr, status, error) {
                            toastr.error("Something went wrong");
                        }
                    });
                    $('#employeeId').trigger('change');

                } else {
                    $('#employeeId').empty();
                    $('#employeeId').append('<option value="">Select an Employee</option>');
                    $('#employeeId').trigger('change');
                }
            });

            $('#employeeId').change(function (event) {
                $(this).next('.text-danger').remove();
                var branchId = $('#branchId').val();
                var employeeId = $('#employeeId').val();
                $('#undoButton').hide();
                $('#undoMessage').hide();

                if (!employeeId) {
                    // toastr.warning("Please select an employee");
                    $('#employeeData').html('<tr><td colspan="3" style="text-align:center;">Please select a branch and employee.</td></tr>');
                    return;
                } else {
                    const url = "{{ route('dismissUndo.getEmployeeDismissHistory') }}?employeeId=" + employeeId;
                    $.ajax({
                        url: url,
                        type: 'GET',
                        success: function(response) {
                            if (response?.status === false) {
                                toastr.warning(response?.message);
                                $('#employeeData').html('<tr><td colspan="3" style="text-align:center;">No dismiss history found for this employee.</td></tr>');
                                return;
                            }
                            const responseData = response?.data;
                            const current = responseData?.current;
                            const dismiss = responseData?.dismiss;
                            const undoInfo = responseData?.undoInfo;
                            $('#dismissId').val(dismiss?.id || '');

                            let tableContent = `
                                <tr>
                                    <td>Employee</td>
                                    <td>${current?.employeeInfo?.name || 'N/A'}</td>
                                </tr>
                                <tr>
                                    <td>Company</td>
                                    <td>${current?.company?.name || 'N/A'}</td>
                                </tr>
                                <tr>
                                    <td>Project</td>
                                    <td>${current?.project?.name || 'N/A'}</td>
                                </tr>
                                <tr>
                                    <td>Project Type</td>
                                    <td>${current?.projectType?.name || 'N/A'}</td>
                                </tr>
                                <tr>
                                    <td>Branch</td>
                                    <td >${current?.branch?.name || 'N/A'}</td>
                                </tr>

                                <tr>
                                    <td>Position</td>
                                    <td>${current?.position?.name || 'N/A'}</td>
                                </tr>
                                <tr>
                                    <td>Grade</td>
                                    <td>${current?.grade?.name || 'N/A'}</td>
                                </tr>
                                <tr>
                                    <td>Level</td>
                                    <td>${current?.level?.name || 'N/A'}</td>
                                </tr>
                                <tr>
                                    <td>Recruitment Type</td>
                                    <td>${current?.recruitment_type?.name || 'N/A'}</td>
                                </tr>
                                <tr>
                                    <td>Salary Increment Year</td>
                                    <td>${current?.salary_increment_year?.name || 'N/A'}</td>
                                </tr>
                                <tr>
                                    <td>Dismiss Effect Date</td>
                                    <td>${dismiss?.formatted_effect_date || 'N/A'}</td>
                                </tr>
                                <tr>
                                    <td>Reason</td>
                                    <td>${dismiss?.reason_list?.title || 'N/A'}</td>
                                </tr>
                            `;

                            $('#employeeData').html(tableContent);

                            if (undoInfo.allowed) {
                                $('#undoButton').show();
                                $('#undoMessage').hide();
                            } else {
                                $('#undoButton').hide();
                                $('#undoMessage').text(undoInfo.message).show();
                            }
                        },
                        error: function(xhr, status, error) {
                            toastr.warning("Something went wrong");
                            $('#employeeData').html('<tr><td colspan="3" style="text-align:center;">Error loading data</td></tr>');
                        }
                    });
                }
            });

            $('#undoButton').click(function (e){
                e.preventDefault();
                $("#undoButton").prop('disabled', true);
                let formData = $('#undoForm').serialize();

                Swal.fire({
                    title: "Are you sure?",
                    text: "You won't be able to revert this!",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#3085d6",
                    cancelButtonColor: "#d33",
                    confirmButtonText: "Yes, undo it!"
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: "{{ Request::url() }}",
                            method: 'POST',
                            dataType: 'json',
                            data: formData,
                            success: function(response) {
                                if (response?.status === "success") {
                                    Swal.fire("Undone!", "The dismiss has been undone.", "success").then(() => {
                                        window.location.reload();
                                    });
                                } else {
                                    Swal.fire("Failed!", response.message || "Undo failed.", "error");
                                    $("#undoButton").prop('disabled', false);
                                }

                            },
                            error: function(xhr, status, error) {
                                // If validation fails, status will be 422
                                if (xhr.status === 422) {
                                    let errors = xhr.responseJSON.errors;
                                    $('.text-danger').remove();
                                    $.each(errors, function(field, messages) {
                                        let fieldName = '#' + field;
                                        $(fieldName).after('<small class="text-danger" style="font-size: 11px;">' + messages.join(', ') + '</small>');
                                    });
                                    Swal.fire("Required!", "Please fill in all required fields.", "warning");
                                } else {
                                    Swal.fire("Error!", "Something went wrong while processing the undo.", "error");
                                }
                                $("#undoButton").prop('disabled', false);
                            }
                        });

                    }else {
                        $("#undoButton").prop('disabled', false);
                    }
                });
            });
        });
    </script>
@endsection