@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 Master</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($kpi) && $kpi->id)
                            Edit Kpis Details
                        @else
                            Add Kpis Details
                        @endif
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@section('content')
    <!-- Basic multiple Column Form section start -->
    {!! Form::model($kpi, [
        'method' => isset($kpi) && $kpi->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" style="height: 700px">
                    <div class="content-header">
                        <h5 class="mb-0">KPI Details</h5>
                        <small class="text-muted">Enter Kpi Details</small>
                    </div>
                    <div class="row">
                        <div class="mb-1 col-md-5">
                            <label class="form-label" for="type">
                                Type<span class="mendatory-field text-danger">*</span>
                            </label>
                            <select class="form-control select2 {{ $errors->has('type') ? 'error' : '' }}" id="type" name="type" >
                                <option value="">Select Type</option>
                                @foreach($types as $type )
                                    <option value="{{ $type }}"
                                        {{ (old('type') == $type) || (isset($kpi) && $kpi->type == $type) ? 'selected' : '' }}>
                                        {{ $type }}
                                    </option>
                                @endforeach
                            </select>
                            {!! $errors->first('type', '<label id="basic-default-name-error" for="type" class="error">:message</label>') !!}
                        </div>
                        <div class="mb-1 col-md-5">
                            <label class="form-label" for="employee_code" >Employee<span class="mendatory-field text-danger">*</span></label>
                            <select class="form-control select2 {{{ $errors->has('employee_code') ? 'error' : '' }}}" id="employee_code" name="employee_code" >
                                <option value="">Select Employee</option>
                                @foreach($employees as $employee)
                                    <option value="{{$employee->employee_code}}"  
                                        @if(isset($employee) && ($kpi->employee_code == $employee->employee_code) || 
                                        (old('employee_code') == $employee->employee_code)) selected @endif>{{$employee->name}}
                                    </option>
                                @endforeach
                            </select>
                            {!! $errors->first('employee_code', '<label id="basic-default-name-error" for="employee_code" class="error">:message</label>')!!}
                        </div>
                        <div class="col-md-2 mt-2 text-end">
                            <button type="button" class="btn btn-primary" id="addKpiDetail"> <i
                                data-feather="plus"></i> Add
                            </button>
                        </div>
                    </div>
                    <div id="kpi_container">
                        @php
                            $kpiDetails = old('kpis', $kpi->details ?? []);
                        @endphp

                        @if (count($kpiDetails))
                            @foreach ($kpiDetails as $key => $detail)
                                <div class="row kpi_row">
                                    <div class="mb-1 col-md-5">
                                        <label class="form-label" for="kpi_name_{{ $key }}">Name
                                            <span class="mendatory-field text-danger">*</span>
                                        </label>
                                        <input type="text" id="kpi_name_{{ $key }}" name="kpis[{{ $key }}][kpi_name]"
                                            class="form-control {{ $errors->has("kpis.$key.kpi_name") ? 'error' : '' }}"
                                            value="{{ old("kpis.$key.kpi_name", $detail['kpi_name'] ?? '') }}"
                                            placeholder="Enter KPI Name" />
                                        {!! $errors->first("kpis.$key.kpi_name", '<label class="error">:message</label>') !!}
                                    </div>
                                    <div class="mb-1 col-md-5">
                                        <label class="form-label" for="value_{{ $key }}">Value
                                            <span class="mendatory-field text-danger">*</span>
                                        </label>
                                        <input type="number" id="value_{{ $key }}" name="kpis[{{ $key }}][value]"
                                            class="form-control {{ $errors->has("kpis.$key.value") ? 'error' : '' }}"
                                            value="{{ old("kpis.$key.value", $detail['value'] ?? '') }}"
                                            placeholder="Enter Value" />
                                        {!! $errors->first("kpis.$key.value", '<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($kpiDetails) }};
                            </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() {
                
                $('#addKpiDetail').click(function(){
                    let currentCount = $('.kpi_row').length;

                    if (currentCount >= 5) {
                        Swal.fire({
                            icon: 'warning',
                            title: 'Limit Reached',
                            text: 'You can only add up to 5 KPI entries.',
                            confirmButtonColor: '#3085d6',
                        });
                        return;
                    }

                    let html = '';
                    html += '<div class="row kpi_row">';
                    html += '    <div class="mb-1 col-md-5">';
                    html += '        <label class="form-label" for="kpi_name_' + kpiSrNo + '">Name <span class="mendatory-field text-danger">*</span></label>';
                    html += '        <input type="text" id="kpi_name_' + kpiSrNo + '" name="kpis[' + kpiSrNo + '][kpi_name]" class="form-control" placeholder="Enter Kpi Name" />';
                    html += '    </div>';
                    html += '    <div class="mb-1 col-md-5">';
                    html += '        <label class="form-label" for="value_' + kpiSrNo + '">Value <span class="mendatory-field text-danger">*</span></label>';
                    html += '        <input type="number" id="value_' + kpiSrNo + '" name="kpis[' + kpiSrNo + '][value]" class="form-control" placeholder="Enter Value" />';
                    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_container').append(html);
                    kpiSrNo++;
                });

                $(document).on('click', '.delete_kpi_details', function () {
                    $(this).closest('.kpi_row').remove();
                });
                
                $('#type').on('change', function () {
                    let selectedType = $(this).val();
                    let alias = "{!! $alias !!}"; 
                    console.log(selectedType,alias);
                    $('#employee_code').empty().append('<option value="">Select Employee</option>');
    
                    if (selectedType !== '') {
                        $.ajax({
                            url: `/${alias}/employees-by-type/${selectedType}`,
                            type: 'GET',
                            success: function (response) {
                                console.log(response);
                                if (response.employees && response.employees.length > 0) {
                                    response.employees.forEach(function (employee) {
                                        $('#employee_code').append(
                                            `<option value="${employee.employee_code}">${employee.name}</option>`
                                        );
                                    });
                                }
                            },
                            error: function () {
                                alert('Failed to fetch employees. Please try again.');
                            }
                        });
                    }
                });
            });
    </script>   
@endpush