@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">Employee Training </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 !!}/emp-trainings">Emp Training</a>
                    </li>
                    <li class="breadcrumb-item active">
                        @if (isset($empTraining) && $empTraining->id)
                            {{ trans('master/master.edit_training') }}
                        @else
                            Add New Employee Trainings Details
                        @endif
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@section('content')
    <!-- Basic multiple Column Form section start -->
    {!! Form::model($empTraining, [
        'method' => isset($empTraining) && $empTraining->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">{{ trans('master/master.training_details') }}</span>
                                <span class="bs-stepper-subtitle">{{ trans('master/master.add_training_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">{{ trans('master/master.training_details') }}</h5>
                            <small class="text-muted">{{ trans('master/master.enter_training_details') }}</small>
                        </div>
                        <div class="row">
                                <input type="hidden" id="currDate" value="{{ now()->format('Y-m-d') }}">
                                <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($empTraining)&& $empTraining->id)
                                            <input type="text" class="form-control" value="{{ $empTraining->employee->name ?? '' }}" readonly>
                                            <input type="hidden" name="employee_id"  id="employee_id"  value="{{ $empTraining->employee_id }}">
                                        @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}}"  @if(isset($empTraining) && ($empTraining->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="mb-1 col-md-4">
                                    <label class="form-label" for="joining_date" >Joining Date</label>
                                    <div class="form-control joining-date-display">
                                        @if(isset($empTraining) && $empTraining->employee)
                                            {{ $empTraining->employee->date_of_joining }}
                                        @else
                                            Joining Date
                                        @endif
                                    </div>
                                </div>
                                <div class="mb-1 col-md-4" style="display:none">
                                    <label class="form-label" for="created_at" >Created At</label>
                                    <div class="form-control created_at_display">
                                        Created At
                                    </div>
                                </div>
                                <div class="mb-1 mt-2 col-md-4">
                                    <button type="button" class="btn btn-primary" id="addTraining"> <i data-feather="plus"></i> Add</button>
                                </div>
                                <div id="trainingContainer">
                                    @php
                                        $trainings = old('trainings') ?: (isset($empTraining->trainings) ? $empTraining->trainings : [ [] ]);
                                    @endphp
                                    @foreach ($trainings as $index => $training)
                                        <div class="row training_row mt-1" data-index="{{ $index }}" style="border-bottom: 1px solid #ddd; margin-bottom:10px;">
                                            <div class="mb-1 col-md-3">
                                                <label class="form-label">Training <span class="mendatory-field text-danger">*</span></label>
                                                <select class="form-control select2 training_id_select {{ $errors->has("trainings.$index.training_id") ? 'error' : '' }}"
                                                        name="trainings[{{ $index }}][training_id]">
                                                    <option value="">Select Training</option>
                                                            @foreach($trainingsList as $trainingOption)
                                                                <option value="{{ $trainingOption->id }}"
                                                                    {{ old("trainings.$index.training_id", $training['training_id'] ?? '') == $trainingOption->id ? 'selected' : '' }}>
                                                                    {{ $trainingOption->name }}
                                                                </option>
                                                            @endforeach
                                                </select>
                                                {!! $errors->first("trainings.$index.training_id", '<label id="basic-default-name-error" for="training_id" class="error">:message</label>') !!}
                                            </div>                                         
                                            <div class="mb-1 col-md-3">
                                                <label classATBBCwbfWp58mB3UgBZecvEAhatXF1FBB3F9="form-label">Due Date</label>
                                                <input type="date" name="trainings[{{ $index }}][due_date]" class="form-control due_date_div"
                                                       value="{{ old("trainings.$index.due_date", @$training['due_date'] ?? '') }}" readonly />
                                            </div>
                                            <div class="mb-1 col-md-3">
                                                <label class="form-label">Completion Date<span class="mendatory-field text-danger">*</span></label>
                                                <input type="date" name="trainings[{{ $index }}][completion_date]" class="form-control completion_date_select"
                                                       value="{{ old("trainings.$index.completion_date", @$training['completion_date'] ?? '') }}" />
                                                {!! $errors->first("trainings.$index.completion_date", '<label id="basic-default-name-error" for="name" class="error">:message</label>') !!}
                                            </div>
                                            <div class="mb-1 col-md-3">
                                                <label class="form-label">Valid Till Date</label>
                                                <input type="date" name="trainings[{{ $index }}][valid_till_date]" class="form-control valid_date_div"
                                                       value="{{ old("trainings.$index.valid_till_date", @$training['valid_till_date'] ?? '') }}" readonly />
                                            </div>
                                            <div class="mb-1 col-md-3">
                                                <label class="form-label">Obtained Score<span class="mendatory-field text-danger">*</span></label>
                                                <input type="text" name="trainings[{{ $index }}][obtained_score]" class="form-control"
                                                       value="{{ old("trainings.$index.obtained_score", @$training['obtained_score'] ?? '') }}" 
                                                       step="0.01"/>
                                                {!! $errors->first("trainings.$index.obtained_score", '<label id="basic-default-name-error" for="name" class="error">:message</label>') !!}
                                            </div>
                                            
                                            <div class="mb-1 col-md-8">
                                                <label class="form-label" for="trainings[{{ $index }}][remarks]">Remarks</label>
                                                <textarea name="trainings[{{ $index }}][remarks]"
                                                          class="form-control {{ $errors->has("trainings.$index.remarks") ? 'error' : '' }}"
                                                          rows="1">{{ old("trainings.$index.remarks", @$training['remarks'] ?? '') }}</textarea>
                                                {!! $errors->first("trainings.$index.remarks", '<label id="basic-default-name-error" for="name" class="error">:message</label>') !!}
                                            </div>
                                            <div class="col-md-1">
                                                <button type="button" class="btn btn-sm btn-secondary mt-3 removeTrainingRow">
                                                    <i data-feather="trash" class="font-4" aria-hidden="true"></i>
                                                </button>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                        </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">
                                    {{ 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>
    <script>
        const employeeJoinDates = @json($employees->pluck('date_of_joining', 'id'));
        const employeeCreatedAt = @json($createdAt);

        $(document).ready(function () {
            $('.select2').select2();
            let fetchedTrainings = [];
            let maxTrainingsAllowed = 1; 
            function loadTrainingsForEmployee(employeeId) {
                const $trainingSelects = $('.training_id_select');
                let alias = "{{ request()->route('alias') }}";
                if (!employeeId) {
                    $trainingSelects.html('<option value="">Select Training</option>').trigger('change');
                    fetchedTrainings = [];
                    return;
                }
                
                $.ajax({
                    url: `/${alias}/get-trainings/${employeeId}`,
                    type: 'GET',
                    success: function (response) {
                        fetchedTrainings = response.trainings || [];
                        maxTrainingsAllowed = fetchedTrainings.length;
                        
                        if (fetchedTrainings.length === 0) {
                            $trainingSelects.html('<option value="">No trainings found</option>').trigger('change');
                        } else {
                            $trainingSelects.each(function () {
                                const $select = $(this);
                                const selectedVal = $select.val();
                                $select.empty().append('<option value="">Select Training</option>');
                                fetchedTrainings.forEach(function (training) {
                                    $select.append(
                                        $('<option>', {
                                            value: training.id,
                                            text: training.name,
                                            'data-validity': training.validity,
                                            'data-completion': training.completion,
                                        })
                                    );
                                });
                                $select.val(selectedVal).trigger('change.select2'); 
                            });
                        }
                    },
                    error: function () {
                        $trainingSelects.html('<option value="">Error loading trainings</option>').trigger('change');
                        fetchedTrainings = [];
                    }
                });
                console.log(fetchedTrainings,'4365464');
            }
    
            $('#employee_id').on('change', function () {
                const employeeId = $(this).val();
                console.log(employeeId);
                loadTrainingsForEmployee(employeeId);
    
                const joinDate = employeeJoinDates[employeeId] || '';
                $('.joining-date-display').text(joinDate);
                
                const createdAt =employeeCreatedAt[employeeId] || '';
                $('.created_at_display').text(createdAt);

                const $trainingRows = $('#trainingContainer .training_row');
                if ($trainingRows.length > 1) {
                    $trainingRows.slice(1).remove();
                }
            });
    
            const initialEmployeeId = $('#employee_id').val();
            if (initialEmployeeId) {
                loadTrainingsForEmployee(initialEmployeeId);
                const joinDate = employeeJoinDates[initialEmployeeId] || '';
                $('.joining-date-display').text(joinDate);
                const createdAt =employeeCreatedAt[initialEmployeeId] || '';
                $('.created_at_display').text(createdAt);
            }
    
            let trainingIndex = $('#trainingContainer .training_row').length;
    
            $('#addTraining').click(function () {
                console.log('Add clicked, fetchedTrainings:', fetchedTrainings);
                if ($('#trainingContainer .training_row').length >= maxTrainingsAllowed) {
                    return; 
                }
                let newRow = `
                    <div class="row training_row mt-3" data-index="${trainingIndex}" style="border-bottom: 1px solid #ddd; margin-bottom:10px;">
                        <div class="mb-1 col-md-3">
                            <label class="form-label">Training</label>
                            <select class="form-control select2 training_id_select" name="trainings[${trainingIndex}][training_id]">
                                <option value="">Select Training</option>
                            </select>
                        </div>
                        <div class="mb-1 col-md-3">
                            <label class="form-label">Due Date</label>
                            <input type="date" name="trainings[${trainingIndex}][due_date]" class="form-control due_date_div" readonly />
                        </div>
                        <div class="mb-1 col-md-3">
                            <label class="form-label">Completion Date</label>
                            <input type="date" name="trainings[${trainingIndex}][completion_date]" class="form-control completion_date_select" />
                        </div>
                        <div class="mb-1 col-md-3">
                            <label class="form-label">Valid Till Date</label>
                            <input type="date" name="trainings[${trainingIndex}][valid_till_date]" class="form-control valid_date_div" readonly />
                        </div>
                        <div class="mb-1 col-md-3">
                            <label class="form-label" for="obtained_score">Obtained Score</label>
                            <input type="number" name="trainings[${trainingIndex}][obtained_score]"  class="form-control " 
                                step="0.01"/>
                            {!! $errors->first('obtained_score', '<label class="error" for="obtained_score">:message</label>')!!}
                        </div>
                        <div class="mb-1 col-md-8">
                            <label class="form-label">Remarks</label>
                            <textarea name="trainings[${trainingIndex}][remarks]" class="form-control" rows="1"></textarea>
                        </div>
                        <div class="col-md-1">
                            <button type="button" class="btn btn-sm btn-secondary mt-3 removeTrainingRow">
                                <i data-feather="trash"></i>
                            </button>
                        </div>
                    </div>
                `;
    
                $('#trainingContainer').append(newRow);
                const $newCompletionDateInput = $('#trainingContainer .training_row:last .completion_date_select');
                $newCompletionDateInput.attr('max', today);
   
                // Populate trainings dropdown for the new row
                const $newSelect = $('#trainingContainer .training_row:last .training_id_select');
                $newSelect.empty().append('<option value="">Select Training</option>');
                fetchedTrainings.forEach(function (training) {
                    $newSelect.append(
                        $('<option>', {
                            value: training.id,
                            text: training.name,
                            'data-validity': training.validity,
                            'data-completion': training.completion
                        })
                    );
                });
                $newSelect.select2();
    
                trainingIndex++;
    
                if (typeof feather !== 'undefined') {
                    feather.replace();
                }
            });
    
            $('#trainingContainer').on('click', '.removeTrainingRow', function () {
                if ($('.training_row').length > 1) {
                    $(this).closest('.training_row').remove();
                } else {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Cannot remove',
                        text: 'At least one training entry must remain.'
                    });
                }
            });
    
            $('#trainingContainer').on('change', '.training_id_select', function () {
                const selectedValue = $(this).val();
                const $selectedOption = $(this).find(`option[value="${selectedValue}"]`);
                const completionDays = parseInt($selectedOption.attr('data-completion'), 10);
    
                if (isNaN(completionDays)) return;
                const $row = $(this).closest('.training_row');
                const createdAtText = $('.created_at_display').text().trim();
                if (!createdAtText || isNaN(Date.parse(createdAtText))) return;
                
                const createdAt = new Date(createdAtText);
                const dueDate = new Date(createdAt);
                
                dueDate.setDate(createdAt.getDate() + completionDays);
                const formatDate = date => date.toISOString().split('T')[0];
    
                $row.find('input[name*="[due_date]"]').val(formatDate(dueDate));
            });

            $('#trainingContainer').on('change', '.completion_date_select', function () {
                const $row = $(this).closest('.training_row');
                const selectedCompletionDate = $(this).val();
                if (!selectedCompletionDate || isNaN(Date.parse(selectedCompletionDate))) return;

                const $selectedTraining = $row.find('.training_id_select option:selected');
                const validityDays = parseInt($selectedTraining.attr('data-validity'), 10);

                if (isNaN(validityDays)) return;

                const completionDate = new Date(selectedCompletionDate);
                const validTillDate = new Date(completionDate);
                validTillDate.setDate(validTillDate.getDate() + validityDays);

                const formatDate = date => date.toISOString().split('T')[0];
                $row.find('input[name*="[valid_till_date]"]').val(formatDate(validTillDate));
            });

            const today = $('#currDate').val();
            
            $('#trainingContainer .completion_date_select').each(function () {
                $(this).attr('max', today);
            });
        });
    </script>
@endpush