@extends('hr_main')
@section('title', '| ' . $data['pageTitle'])

@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="" style="width:80%; margin:0 auto;">
                <div class="">
                    <div class="panel panel-default" style="background-color:#708090;">
                        <div class="panel-heading" style="padding-bottom:0px">
                            <div class="panel-title">
                                {!! $data['pageTitle'] !!}
                            </div>


                            <div class="panel-options">
                                <a href="{!! $data['addBtnUrl'] !!}" class="btn btn-info pull-right addViewBtn"><i
                                        class="glyphicon glyphicon-plus-sign addIcon"></i>{{ $data['addBtnLabel'] }}</a>
                            </div>


                        </div>
                        <div class="panel-body panelBodyView">
                            <table class="table table-striped table-bordered table-condensed first-col-dark"
                                style="width:100%" id="data-table">
                                <thead>
                                    <tr>
                                        <th width="30">SL#</th>
                                        <th>Employee</th>
                                        @for ($i = 1; $i <= $noOfBosses; $i++)
                                            <th>{{ $i }}{{ $i == 1 ? 'st' : ($i == 2 ? 'nd' : ($i == 3 ? 'rd' : 'th')) }}
                                                supervisor</th>
                                        @endfor
                                        <th>Effective Date</th>
                                        <th style="width: 80px">Action</th>
                                    </tr>
                                </thead>
                                @php $sl = 1; @endphp

                                <tbody>
                                    @foreach ($data['groupedReportingBosses'] as $empId => $info)
                                        <tr>
                                            <td>{{ $sl++ }}</td>
                                            <td>{{ $info['employee_name'] }}</td>

                                            @for ($i = 1; $i <= $data['noOfBosses']; $i++)
                                                <td>{{ $info['supervisors'][$i] ?? '-' }}</td>
                                            @endfor

                                            <td>{{ \Carbon\Carbon::parse($info['effectiveDate'])->format('d-m-Y') ?? '-' }}
                                            </td>



                                            <td class="text-center">
                                                <a class="edit-modal" entryId="{{ $empId }}"
                                                    style="cursor: pointer; padding-right: 5px;">
                                                    <span class="glyphicon glyphicon-edit"></span>
                                                </a>
                                                <a href="javascript:;" class="delete-modal" entryId="{{ $empId }}"
                                                    style="cursor: pointer;">

                                                    <span class="glyphicon glyphicon-trash"></span>
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>


                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Modal -->
            <div id="editModal" class="modal fade" tabindex="-1" role="dialog" style="margin-top: 5%;">


                <div class="modal-dialog" role="dialog" style="width: 80%;">

                    <div class="panel panel-default panel-border">

                        <!-- Modal Header -->
                        <div class="panel-heading">
                            <h4 class="panel-title" style="margin-left: 15px; margin-top: 10px;">Update Assessment
                                Reporting
                                Bosses</h4>
                        </div>

                        <!-- Modal Body -->
                        <div class="modal-body" style="padding: 30px 15px;"> <!-- Reduced left & right padding -->

                            <!-- Select2 Styles -->
                            <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css"
                                rel="stylesheet" />

                            <div class="panel panel-default panel-border">
                                <div class="panel-body">

                                    <!-- Hidden Field -->
                                    <input type="hidden" id="EMentryId" name="id">

                                    <!-- Form Start -->
                                    {!! Form::open([
                                        'files' => false,
                                        'id' => 'formId',
                                        'role' => 'form',
                                        'class' => 'form-horizontal form-groups',
                                    ]) !!}

                                    <!-- Project & Employee Row -->
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="col-md-4 col-md-offset-2 text-left">
                                                {!! Form::label('project_id', 'Project:', ['class' => 'control-label']) !!}

                                                {{-- Select input for display only (disabled) --}}
                                                {!! Form::select('project_id_display', ['' => 'Select Project'] + $data['project_id'], null, [
                                                    'class' => 'form-control',
                                                    'id' => 'project_id_display',
                                                    'disabled' => true,
                                                ]) !!}

                                                {{-- Hidden input that will actually submit the selected value --}}
                                                <input type="hidden" name="project_id" id="project_id_hidden">

                                                <p id='project_id_error' style="max-height:3px;">
                                                    {{ $errors->first('project_id') }}
                                                </p>
                                            </div>


                                            <div class="col-md-4 text-left">
                                                {!! Form::label('emp_id', 'Employee:', ['class' => 'control-label']) !!}

                                                {{-- Select input for display only --}}
                                                {!! Form::select('emp_id_display', ['' => 'Select Employee'], null, [
                                                    'class' => 'form-control',
                                                    'id' => 'emp_id_display',
                                                    'disabled' => true,
                                                ]) !!}

                                                {{-- Hidden input that will actually submit the value --}}
                                                <input type="hidden" name="emp_id" id="emp_id_hidden">

                                                <p id="emp_id_error" style="max-height:3px;">
                                                    {{ $errors->first('emp_id') }}
                                                </p>
                                            </div>

                                        </div>
                                    </div>

                                    {{-- Supervisor Dropdowns --}}
                                    <div class="row" style="margin-top: 30px;">
                                        <div class="col-md-12">
                                            @php
                                                function ordinal($number)
                                                {
                                                    $ends = [
                                                        'th',
                                                        'st',
                                                        'nd',
                                                        'rd',
                                                        'th',
                                                        'th',
                                                        'th',
                                                        'th',
                                                        'th',
                                                        'th',
                                                    ];
                                                    if ($number % 100 >= 11 && $number % 100 <= 13) {
                                                        return $number . 'th';
                                                    } else {
                                                        return $number . $ends[$number % 10];
                                                    }
                                                }
                                            @endphp

                                            @for ($i = 1; $i <= $data['noOfBosses']; $i++)
                                                <div class="form-group row text-center">
                                                    <div class="col-md-6 col-md-offset-3 text-left">
                                                        {!! Form::label("boss_emp_id_$i", ordinal($i) . ' Supervisor:', [
                                                            'class' => 'control-label',
                                                            'style' => 'margin-bottom: 5px;',
                                                        ]) !!}
                                                        {!! Form::select("boss_emp_id_$i", ['' => 'Select Supervisor'], null, [
                                                            'class' => 'form-control boss_emp_id',
                                                            'id' => "boss_emp_id_$i",
                                                        ]) !!}
                                                        <p id="boss_emp_id_{{ $i }}_error"
                                                            style="margin: 2px 0 0; color: red;">
                                                            {{ $errors->first("boss_emp_id_$i") }}
                                                        </p>
                                                    </div>
                                                </div>
                                            @endfor
                                            <div class="form-group row text-center" style="margin-top: 35px;">
                                                <div class="col-md-6 col-md-offset-3">
                                                    <div class="form-group row" style="display: flex; align-items: center;">
                                                        <label for="effectiveDate" class="control-label col-md-2"
                                                            style="margin-bottom: 0;">
                                                            Effective Date:
                                                        </label>
                                                        <div class="col-md-10">
                                                            {!! Form::text('effectiveDate', null, [
                                                                'class' => 'form-control datepicker',
                                                                'id' => 'effectiveDate',
                                                                'autocomplete' => 'off',
                                                                'placeholder' => 'Select a date',
                                                            ]) !!}
                                                            <p id="effectiveDateError"
                                                                style="color: red !important; margin-top: 2px;"></p>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    </div>

                                    <!-- update & Close -->
                                    <div class="form-group text-center" style="margin-top: 30px;">

                                        {!! Form::submit('Update', ['id' => 'updateButton', 'class' => 'btn btn-info updateButton']) !!}

                                        <a href="{{ url('hr/assessment/assessmentReportingBosses/') }}"
                                            class="btn btn-danger closeBtn">Close</a>
                                        <span id="success" class="pull-right text-success"
                                            style="font-size: 16px;"></span>
                                    </div>

                                    {!! Form::close() !!}
                                </div>
                            </div>

                        </div> <!-- /.modal-body -->

                    </div>
                </div>
            </div>

            <div id="deleteModal" class="modal fade" style="margin-top:3%;">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title"
                                style="clear:both;background-color:black;color:white; padding:10px;text-align:center;">
                                Delete Reporting Bosses</h4>
                        </div>
                        <div class="modal-body ">
                            {{-- <div class="row" style="padding-bottom:20px;"> </div> --}}
                            <h2 style="color: red;">Are You Confirm to Delete This Record?</h2>
                            <div class="modal-footer">
                                <input id="DMentryId" type="hidden" value="" />
                                <button type="button" class="btn btn-danger" id="DMentry"
                                    data-dismiss="modal">confirm</button>
                                <button type="button" class="btn btn-warning" data-dismiss="modal"><span
                                        class="glyphicon glyphicon-remove"
                                        style="padding-right:4px;"></span>Close</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endsection
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

        @section('footerAssets')



            <script>
                $(document).ready(function() {
                    $('#effectiveDate').datepicker({
                        format: 'dd-mm-yyyy',
                        autoclose: true,
                        todayHighlight: true
                    });
                    // When clicking the edit modal
                    $(document).on('click', '.edit-modal', function() {
                        let entryId = $(this).attr('entryId');
                        let csrf = "{{ csrf_token() }}";
                        $("#EMentryId").val(entryId);

                        $.ajax({
                            url: '{{ url('hr/assessment/assessmentReportingBosses/edit') }}',
                            type: 'POST',
                            dataType: 'json',
                            data: {
                                id: entryId,
                                _token: csrf
                            },
                            success: function(data) {
                                let bosses = data.editReportingBosses;

                                if (bosses.length > 0) {
                                    let projectId = data.project_id;
                                    let selectedEmpId = data.emp_id;

                                    $('#project_id_display').val(projectId).trigger('change');
                                    $('#project_id_hidden').val(projectId);
                                    $('#project_id_display').trigger('change');
                                    $('#effectiveDate').val(data.effectiveDate);
                                    $('#effectiveDate').datepicker('update', data
                                        .effectiveDate); // ✅ Fix: Update internal datepicker value

                                    setTimeout(function() {
                                        $('#emp_id_display').val(selectedEmpId).trigger(
                                            'change');
                                        $('#emp_id_hidden').val(selectedEmpId);

                                        bosses.forEach(function(boss) {
                                            let selectId = '#boss_emp_id_' + boss
                                                .supervisor_no;

                                            // Check if option exists
                                            if ($(selectId + ' option[value="' + boss
                                                    .boss_emp_id + '"]').length === 0) {
                                                // If not, append manually
                                                $(selectId).append('<option value="' +
                                                    boss.boss_emp_id + '">' + boss
                                                    .boss_emp_name + '</option>');
                                            }

                                            $(selectId).val(boss.boss_emp_id).trigger(
                                                'change');
                                        });
                                    }, 500);
                                }

                                $('#editModal').modal('show');
                            }
                        });
                    });

                    // When changing project (manually or programmatically), load employees
                    $('#project_id_display').on('change', function() {
                        let projectId = $(this).val();

                        if (projectId) {
                            $.ajax({
                                url: '{{ url('hr/assessment/assessmentReportingBosses/get-employees-by-project') }}',
                                type: 'POST',
                                data: {
                                    project_id: projectId,
                                    _token: '{{ csrf_token() }}'
                                },
                                success: function(data) {
                                    let options = '<option value="">Select Employee</option>';
                                    $.each(data, function(empId, name) {
                                        options += '<option value="' + empId + '">' + name +
                                            '</option>';
                                    });

                                    $('#emp_id_display').html(options);

                                    @for ($i = 1; $i <= $data['noOfBosses']; $i++)
                                        $('#boss_emp_id_{{ $i }}').html(options);
                                    @endfor

                                    $('#emp_id_display').val($('#emp_id_hidden').val()).trigger(
                                        'change');
                                },
                                error: function() {
                                    toastr.error('Could not fetch employees.');
                                }
                            });
                        } else {
                            $('#emp_id_display').html('<option value="">Select Employee</option>');
                        }
                    });

                    // Select2 initialization
                    $('#project_id_display').select2({
                        placeholder: 'Select Project',
                        width: '100%'
                    });

                    $('#emp_id_display').select2({
                        placeholder: 'Select Employee',
                        width: '100%'
                    });

                    $('.boss_emp_id').select2({
                        placeholder: 'Select Supervisor',
                        width: '100%',
                        allowClear: true
                    });


                    $(document).on('click', '.delete-modal', function() {
                        let entryId = $(this).attr('entryId');
                        $("#DMentryId").val(entryId);
                        $('#deleteModal').modal('show');
                    });

                    $("#DMentry").on('click', function() {
                        var entryId = $("#DMentryId").val();

                        var csrf = "{{ csrf_token() }}";
                        $.ajax({
                                url: '{{ url('hr/assessment/assessmentReportingBosses/deleteAssessmentReportingBosses') }}',
                                type: 'POST',
                                dataType: 'json',
                                data: {
                                    id: entryId,
                                    _token: csrf
                                },
                            })
                            .done(function(data) {
                                if (data.success) {
                                    toastr.success(data.message);
                                    setTimeout(function() {
                                        window.location.reload();
                                    }, 1500);
                                } else {
                                    toastr.error(data.message || 'Delete failed.');
                                }
                            })
                            .fail(function() {
                                console.log("error");
                            });
                    });
                    $('#effectiveDate').datepicker({
                        format: 'dd-mm-yyyy',
                        autoclose: true,
                        todayHighlight: true
                    });

                    $("#updateButton").on('click', function() {
                        event.preventDefault();
                        var form = $(this).closest('form');
                        var formData = new FormData(form[0]);
                        let bossFields = [];
                        let filledIndexes = [];

                        @for ($i = 1; $i <= $data['noOfBosses']; $i++)
                            let val_{{ $i }} = $('#boss_emp_id_{{ $i }}').val();
                            bossFields.push(val_{{ $i }});
                            if (val_{{ $i }}) {
                                filledIndexes.push({{ $i }});
                            }
                        @endfor

                        // Enforce: if only one filled, it must be the last
                        if (filledIndexes.length === 1 && filledIndexes[0] !== {{ $data['noOfBosses'] }}) {
                            toastr.warning(
                                "If you're assigning only one supervisor, please use the {{ ordinal($data['noOfBosses']) }} Supervisor field only."
                            );
                            return false;
                        }

                        form.find('.error.text-danger').remove();

                        $.ajax({
                            type: 'POST',
                            url: '{{ url('hr/assessment/assessmentReportingBosses/update') }}',
                            data: formData,
                            dataType: 'json',
                            processData: false,
                            contentType: false,
                            headers: {
                                'X-CSRF-Token': "{{ csrf_token() }}",
                            },
                            success: function(response) {
                                if (response.errors) {
                                    $.each(response.errors, function(name, error) {
                                        let field = $('[name="' + name + '"]');
                                        field.after("<p class='error text-danger'>* " + error[
                                            0] + "</p>");
                                    });
                                } else {
                                    if (response.responseTitle == 'Warning!') {
                                        toastr.warning(response.responseText, response.responseTitle);
                                        $("#update").prop('disabled', false);
                                    } else {
                                        toastr.success(response.responseText, response.responseTitle);
                                        setTimeout(function() {
                                            window.location.href =
                                                "{{ url('hr/assessment/assessmentReportingBosses/') }}";
                                        }, 1000);
                                    }
                                }
                            },
                            error: function(xhr) {
                                toastr.error('Something went wrong.');
                            }
                        });
                    });


                });
            </script>
        @endsection