@extends('app-new')

@push('head-script')
    <!-- BEGIN: Vendor CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/forms/wizard/bs-stepper.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/pickers/flatpickr/flatpickr.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/pickers/pickadate/pickadate.css">
    <!-- END: Vendor CSS-->

    <!-- BEGIN: Page CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-validation.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/core/menu/menu-types/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-wizard.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-pickadate.css">
    <!-- END: Page CSS-->
@endpush

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">KPI Evaluation</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/{!! $alias !!}/home">{{ trans('master/master.home') }}</a>
                    </li>
                    <li class="breadcrumb-item"><a href="/{!! $alias !!}/kpis">KPI</a>
                    </li>
                    <li class="breadcrumb-item active">
                        @if (isset($kpisEvaluation) && $kpisEvaluation->id)
                            Edit KpisEvaluation Details
                        @else
                            Add KpisEvaluation Details
                        @endif
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@section('content')
    <!-- Basic multiple Column Form section start -->
    {!! Form::model($kpisEvaluation, [
        'method' => isset($kpisEvaluation) && $kpisEvaluation->id ? 'put' : 'post',
        'files' => 'true',
    ]) !!}
    <section class="vertical-wizard">
        <div class="bs-stepper vertical vertical-wizard-example">
            <div class="bs-stepper-header">
                <div class="step" data-target="#personal-info-vertical" role="tab"
                    id="personal-info-vertical-trigger">
                    <button type="button" class="step-trigger">
                        <span class="bs-stepper-box">1</span>
                        <span class="bs-stepper-label">
                            <span class="bs-stepper-title">KPIS Details</span>
                            <span class="bs-stepper-subtitle">Add KPIS Details</span>
                        </span>
                    </button>
                </div>
            </div>
            <div class="bs-stepper-content">
                <div id="personal-info-vertical" class="content position-relative" role="tabpanel"
                    aria-labelledby="personal-info-vertical-trigger" >
                    <div class="content-header">
                        <h5 class="mb-0">KPI Details</h5>
                        <small class="text-muted">Enter Kpi Details</small>
                    </div>
                    @php
                        $kpisEvaluationDetails = old('kpisEvaluations', $kpisEvaluation->details ?? []);
                    @endphp
                    
                    <div class="row">
                        <div class="mb-1 col-md-4">
                            <label class="form-label" for="employee_id" class="required">Employee<span class="mendatory-field text-danger">*</span></label>
                                @if(isset($kpisEvaluation)&& $kpisEvaluation->id)
                                    <input type="text" class="form-control" value="{{ $kpisEvaluation->employee->name ?? '' }}" readonly>
                                    <input type="hidden" name="employee_id"  id="employee_id"  value="{{ $kpisEvaluation->employee_id }}">
                                    <input type="hidden" id="employee_code" value="{{ $kpisEvaluation->employee->employee_code }}">
                                @else
                                    <select class="form-control select2 {{{ $errors->has('employee_id') ? 'error' : '' }}}" id="employee_id" name="employee_id" >
                                        <option value="">Select Employee</option>
                                        @foreach($employees as $employee)
                                            <option value="{{$employee->id}}"  data-employee-code="{{ $employee->employee_code }}" 
                                                @if(isset($kpisEvaluation) && ($kpisEvaluation->employee_id == $employee->id) || (old('employee_id') == $employee->id)) selected @endif>{{$employee->name}}
                                            </option>
                                        @endforeach
                                    </select>
                                @endif
                                {!! $errors->first('employee_id', '<label id="basic-default-name-error" for="employee_id" class="error">:message</label>')!!}
                        </div>
                        <div class="col-md-2 mt-2 text-end">
                            <button type="button" class="btn btn-primary" id="addKpiDetail" data-index="{{ count($kpisEvaluationDetails) }}"> <i
                                data-feather="plus"></i> Add
                            </button>
                        </div>
                    </div>
                    <div id="kpi_eval_container">
                        @if (count($kpisEvaluationDetails))
                            @foreach ($kpisEvaluationDetails as $index => $detail)
                                <div class="row kpi_row mt-1" style="border-bottom: 1px solid #ddd; margin-bottom:10px;">
                                    <div class="mb-1 col-md-5">
                                        <label class="form-label">KPI <span class="mendatory-field text-danger">*</span></label>
                                        <select id="kpi_id_{{ $index }}"
                                            class="form-control select2 kpi_id_select {{ $errors->has("kpisEvaluations.$index.kpi_id") ? 'error' : '' }}"
                                            name="kpisEvaluations[{{ $index }}][kpi_id]">
                                            <option value="">Select KPI</option>
                                            @foreach($kpisList as $kpiOption)
                                                <option value="{{ $kpiOption->id }}"
                                                    {{ old("kpisEvaluations.$index.kpi_id", $detail['kpi_id'] ?? '') == $kpiOption->id ? 'selected' : '' }}>
                                                    {{ $kpiOption->kpi_name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        {!! $errors->first("kpisEvaluations.$index.kpi_id", '<label class="error">:message</label>') !!}
                                    </div>
                    
                                    <div class="col-md-3">
                                        <label class="form-label" for="year_{{ $index }}">Year</label>
                                        <select class="form-control mb-2 select2" name="kpisEvaluations[{{ $index }}][year]" id="year_{{ $index }}">
                                            @foreach ($years as $val)
                                                <option value="{{ $val }}" {{ old("kpisEvaluations.$index.year", $detail['year'] ?? '') == $val ? 'selected' : '' }}>
                                                    {{ $val }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                    
                                    <div class="col-md-3">
                                        <label class="form-label" for="month_{{ $index }}">Month</label>
                                        <select class="form-control mb-2 select2" name="kpisEvaluations[{{ $index }}][month]" id="month_{{ $index }}">
                                            @foreach ($months as $key => $val)
                                                <option value="{{ $key }}" {{ old("kpisEvaluations.$index.month", $detail['month'] ?? '') == $key ? 'selected' : '' }}>
                                                    {{ $val }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                    
                                    <div class="mb-1 col-md-5">
                                        <label class="form-label" for="achieved_value_{{ $index }}">Achieved Value <span class="mendatory-field text-danger">*</span></label>
                                        <input type="number" id="achieved_value_{{ $index }}" name="kpisEvaluations[{{ $index }}][achieved_value]"
                                            class="form-control {{ $errors->has("kpisEvaluations.$index.achieved_value") ? 'error' : '' }}"
                                            value="{{ old("kpisEvaluations.$index.achieved_value", $detail['achieved_value'] ?? '') }}"
                                            placeholder="Enter Achieved Value" />
                                        {!! $errors->first("kpisEvaluations.$index.achieved_value", '<label class="error">:message</label>') !!}
                                    </div>
                    
                                    <div class="mb-1 col-md-5">
                                        <label class="form-label" for="percentage_{{ $index }}">Percentage <span class="mendatory-field text-danger">*</span></label>
                                        <input type="number" id="percentage_{{ $index }}" name="kpisEvaluations[{{ $index }}][percentage]"
                                            class="form-control {{ $errors->has("kpisEvaluations.$index.percentage") ? 'error' : '' }}"
                                            value="{{ old("kpisEvaluations.$index.percentage", $detail['percentage'] ?? '') }}"
                                            placeholder="Enter Percentage" readonly />
                                        {!! $errors->first("kpisEvaluations.$index.percentage", '<label class="error">:message</label>') !!}
                                    </div>
                    
                                    <div class="col-md-2">
                                        <button type="button" class="btn btn-sm btn-secondary mt-2 delete_kpi_details">
                                            <i data-feather="trash" class="font-4"></i>
                                        </button>
                                    </div>
                                </div>
                            @endforeach
                            <script>
                                var kpiSrNo = {{ count($kpisEvaluationDetails) }};
                            </script>
                        @else
                            <script>
                                var kpiSrNo = 0;
                            </script>
                        @endif
                    </div>
                    <div class="content-footer  bottom-0 col-md-12">
                        <div class="d-flex flex-row-reverse content-footer">
                            <button type="submit" class="btn btn-success btn-submit user-submit"
                                id="submit-text">{{ trans('common/common.submit') }}</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {!! Form::close() !!}
    <!-- Basic Floating Label Form section end -->
@endsection

@push('footer-script')
    <!-- BEGIN: Page Vendor JS-->
    <script src="/app-assets/vendors/js/forms/wizard/bs-stepper.min.js"></script>
    <script src="/app-assets/vendors/js/forms/select/select2.full.min.js"></script>
    <script src="/app-assets/vendors/js/forms/validation/jquery.validate.min.js"></script>
    <script src="/app-assets/vendors/js/pickers/flatpickr/flatpickr.min.js"></script>
    <script src="/app-assets/vendors/js/pickers/pickadate/picker.js"></script>
    <script src="/app-assets/vendors/js/pickers/pickadate/picker.date.js"></script>
    <script src="/app-assets/vendors/js/pickers/pickadate/picker.time.js"></script>
    <script src="/app-assets/vendors/js/pickers/pickadate/legacy.js"></script>
    <!-- END: Page Vendor JS-->

    <!-- BEGIN: Page JS-->
    <script src="/app-assets/js/scripts/forms/form-wizard.js"></script>
    <script src="/app-assets/js/scripts/forms/form-validation.js"></script>
    <script src="/app-assets/js/scripts/forms/pickers/form-pickers.js"></script>
    <!-- END: Page JS-->

    <script>
        $(document).ready(function () {
            var availableKpis = [];
            var kpiSrNo = {{ count($kpisEvaluationDetails) ?? 0 }};
            
            var initialEmployeeId = $('#employee_id').val();
            if (initialEmployeeId) {
                var alias = "{{ request()->route('alias') }}";
                var employeeCode = $('#employee_id option:selected').data('employee-code');
                
                if (!employeeCode) {
                    employeeCode = "{{ $kpisEvaluation->employee->employee_code ?? '' }}";
                }

                $.ajax({
                    url: `/${alias}/kpi-based-on-employee/${employeeCode}`,
                    type: 'GET',
                    success: function (response) {
                        availableKpis = response.kpisNames || [];
                    }
                });
            }

            function resetKpiRows() {
                $('#kpi_eval_container').empty();
                kpiSrNo = 0;
            }
    
            $('#employee_id').on('change', function () {
                var alias = "{{ request()->route('alias') }}";
                var employeeId = $(this).val();
                var employeeCode = $('#employee_id option:selected').data('employee-code');
                
                resetKpiRows();
                
                if (employeeId) {
                    $.ajax({
                        url: `/${alias}/kpi-based-on-employee/${employeeCode}`,
                        type: 'GET',
                        success: function (response) {
                            availableKpis = response.kpisNames || [];
                            if (availableKpis.length === 0) {
                                Swal.fire({
                                    icon: 'info',
                                    title: 'No KPIs Found',
                                    text: 'This employee does not have any KPIs configured.',
                                });
                            }
                        }
                    });
                }
                else {
                    availableKpis = [];
                }
            });

            $('#addKpiDetail').click(function () {
                if ($('#employee_id').val() === '') {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Employee Required',
                        text: 'Please select an employee before adding KPI entries.',
                    });
                    return;
                }
                
                let html = '';
                html += '<div class="row kpi_row mt-1" style="border-bottom: 1px solid #ddd; margin-bottom:10px;">';
                html += '    <div class="mb-1 col-md-5">';
                html += '        <label class="form-label" for="kpi_id_' + kpiSrNo + '">KPI Name <span class="mendatory-field text-danger">*</span></label>';
                html += '        <select id="kpi_id_' + kpiSrNo + '" name="kpisEvaluations[' + kpiSrNo + '][kpi_id]" class="form-control select2 kpi_id_select">';
                html += '            <option value="">Select KPI</option>';
                availableKpis.forEach(function(kpi) {
                    html += '        <option value="' + kpi.id + '">' + kpi.kpi_name + '</option>';
                });
                html += '        </select>';
                html += '    </div>';
                html += '    <div class="col-md-3">';
                html += '        <label class="form-label" for="year_' + kpiSrNo + '">Year</label>';
                html += '        <select class="form-control mb-2 select2" name="kpisEvaluations[' + kpiSrNo + '][year]" id="year_' + kpiSrNo + '">';
                @foreach ($years as $val)
                    html += '<option value="{{ $val }}" {{ $val == $year ? "selected" : "" }}>{{ $val }}</option>';
                @endforeach
                html += '        </select>';
                html += '    </div>';
    
                html += '    <div class="col-md-3">';
                html += '        <label class="form-label" for="month_' + kpiSrNo + '">Month</label>';
                html += '        <select class="form-control mb-2 select2" name="kpisEvaluations[' + kpiSrNo + '][month]" id="month_' + kpiSrNo + '">';
                @foreach ($months as $key => $val)
                    html += '<option value="{{ $key }}" {{ $key == $month ? "selected" : "" }}>{{ $val }}</option>';
                @endforeach
                html += '        </select>';
                html += '    </div>';
    
                html += '    <div class="mb-1 col-md-5">';
                html += '        <label class="form-label" for="achieved_value_' + kpiSrNo + '">Achieved Value <span class="mendatory-field text-danger">*</span></label>';
                html += '        <input type="number" id="achieved_value_' + kpiSrNo + '" name="kpisEvaluations[' + kpiSrNo + '][achieved_value]" class="form-control" placeholder="Enter Achieved Value" />';
                html += '    </div>';
    
                html += '    <div class="mb-1 col-md-5">';
                html += '        <label class="form-label" for="percentage_' + kpiSrNo + '">Percentage <span class="mendatory-field text-danger">*</span></label>';
                html += '        <input type="number" id="percentage_' + kpiSrNo + '" name="kpisEvaluations[' + kpiSrNo + '][percentage]" class="form-control" placeholder="Enter Percentage" readonly/>';
                html += '    </div>';
    
                html += '    <div class="col-md-2">';
                html += '        <button type="button" class="btn btn-sm btn-secondary mt-2 delete_kpi_details">';
                html +=              feather.icons["trash"].toSvg({ class: "font-4" });
                html += '        </button>';
                html += '    </div>';
                html += '</div>';
    
                $('#kpi_eval_container').append(html);
                $('.select2').select2();
                kpiSrNo++;
            });
            
            $(document).on('input', 'input[id^="achieved_value_"]', function () {
                const inputId = $(this).attr('id'); 
                const index = inputId.split('_').pop();
                const selectedKpiId = $('#kpi_id_' + index).val();
                const achievedValue = parseFloat($(this).val()) || 0;
                
                if (!selectedKpiId) {
                        Swal.fire({
                            icon: 'warning',
                            text: 'Please select a KPI before entering achieved value.',
                        });
                        $('#percentage_' + index).val(''); 
                        $(this).val('');
                        return;
                }

                const kpiObj = availableKpis.find(kpi => kpi.id == selectedKpiId) || {};
                const targetValue = parseFloat(kpiObj.value) || 0;

                if (targetValue > 0) {
                    const percentage = (achievedValue / targetValue) * 100;
                    $('#percentage_' + index).val(percentage.toFixed(2));
                } else {
                    $('#percentage_' + index).val('');
                }
            });

            $(document).on('click', '.delete_kpi_details', function () {
                $(this).closest('.kpi_row').remove();
            });
    
        });
    </script>
@endpush