@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">Training Mapping</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 !!}/map-trainings">Mapping</a>
                    </li>
                    <li class="breadcrumb-item active">
                        @if (isset($trainingMapping) && $trainingMapping->id)
                            {{ trans('master/master.edit_training_mapping') }}
                        @else
                            {{ trans('master/master.add_new_training_mapping') }}
                        @endif
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@section('content')
    <!-- Basic multiple Column Form section start -->
    {!! Form::model($trainingMapping, [
        'method' => isset($trainingMapping) && $trainingMapping->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.mapping_details') }}</span>
                            <span class="bs-stepper-subtitle">{{ trans('master/master.add_mapping_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">{{ trans('master/master.mapping_details') }}</h5>
                        <small class="text-muted">{{ trans('master/master.enter_mapping_details') }}</small>
                    </div>
                    <div class="row">
                        <div class="mb-1 col-md-4">
                            <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($trainingMapping) && $trainingMapping->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-4">
                            <label class="form-label" for="department_id" >{{trans('employee/employee_create.department')}} <span class="mendatory-field text-danger">*</span></label>
                            <select class="form-control select2 {{{ $errors->has('department_id') ? 'error' : '' }}}" id="department_id" name="department_id"  onchange="fetchDesignationsByDepartment(this.value); fetchEmployees();">
                                <option value="">Select Department</option>
                                @foreach($departments as $department)
                                    <option value="{{$department->id}}"  @if(isset($trainingMapping) && ($trainingMapping->department_id == $department->id) || (old('department_id') == $department->id)) selected @endif>{{$department->name}}</option>
                                @endforeach
                            </select>
                            {!! $errors->first('department_id', '<label id="basic-default-name-error" for="department_id" class="error">:message</label>')!!}
                        </div>
                        <div class="mb-1 col-md-4">
                            <label class="form-label" for="designation_id" >{{trans('employee/employee_create.designation')}} </label>
                            <select class="form-control select2 {{{ $errors->has('designation_id') ? 'error' : '' }}}" id="designation_id" name="designation_id" onchange="fetchEmployees()">
                                <option value="">Select Designation</option>
                                @foreach($designations as $designation)
                                    <option value="{{$designation->id}}"  @if(isset($trainingMapping) && ($trainingMapping->designation_id == $designation->id) || (old('designation_id') == $designation->id)) selected @endif>{{$designation->name}}</option>
                                @endforeach
                            </select>
                            {!! $errors->first('designation_id', '<label id="basic-default-name-error" for="designation_id" class="error">:message</label>')!!}
                        </div>
                        <div class="mb-1 col-md-4">
                            <label class="form-label" for="employee_id" >Employee</label>
                            <label class="form-label" style="float: right"><input type="checkbox"
                                name="select_all_employees" id="select_all_employees"
                                > Select All
                            </label>
                            <select class="form-control select2 {{ $errors->has('employee_id') ? 'error' : '' }}"
                                    id="employee_id"
                                    name="employee_id[]"
                                    multiple>
                                    {{-- <option value="">Select Employee</option> --}}
                                    @foreach($employees as $employee)
                                    <option value="{{ $employee->id }}"
                                        {{ collect(old('employee_id', isset($trainingMapping) ? $trainingMapping->employee_id ?? [] : []))->contains($employee->id) ? 'selected' : '' }}>
                                        {{ $employee->name }}
                                    </option>
                                    @endforeach
                            </select>
                        </div>
                        <div class="mb-1 col-md-4">
                            <label class="form-label" for="training_id" >Training<span class="mendatory-field text-danger">*</span></label>
                            <select class="form-control select2 {{{ $errors->has('training_id') ? 'error' : '' }}}" id="training_id" name="training_id" >
                                <option value="">Select Training</option>
                                @foreach($trainings as $training)
                                    <option value="{{$training->id}}"  @if(isset($trainingMapping) && ($trainingMapping->training_id == $training->id) || (old('training_id') == $training->id)) selected @endif>{{$training->name}}</option>
                                @endforeach
                            </select>
                            {!! $errors->first('training_id', '<label id="basic-default-name-error" for="training_id" class="error">:message</label>')!!}
                        </div>
                    </div>
                    <div class="content-footer position-absolute 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>
    <script>
        $(document).ready(function() {
            $('.select2').select2();
        });

        function fetchEmployees() {
            const departmentId = document.getElementById('department_id').value;
            const designationId = document.getElementById('designation_id').value;
            let alias = "{{ request()->route('alias') }}";

            if (!departmentId) {
                $('#employee_id').empty().append('<option value="">Select Employee</option>');
                $('#select_all_employees').prop('checked', false);
                return;
            }

            $.ajax({
                url: `/${alias}/get-employees-by-dept-desig`,
                method: 'GET',
                data: {
                    department_id: departmentId,
                    designation_id: designationId,
                },
                success: function (response) {
                    $('#employee_id').empty();
                    if (response.employees.length > 0) {
                        response.employees.forEach(employee => {
                            $('#employee_id').append(
                                `<option value="${employee.id}">${employee.name}</option>`
                            );
                        });
                    } else {
                        $('#employee_id').append('<option value="">No employees found</option>');
                    }
                    $('#employee_id').trigger('change');
                }
            });
        }
        $('#employee_id').on('change', function () {
            let totalOptions = $(this).find('option').length;
            let selectedOptions = $(this).val() ? $(this).val().length : 0;

            if (totalOptions > 0 && totalOptions === selectedOptions) {
                $('#select_all_employees').prop('checked', true);
            } else {
                $('#select_all_employees').prop('checked', false);
            }
        });
        $('#select_all_employees').change(function() {
            if ($(this).is(':checked')) {
                $('#employee_id option').prop("selected", true);
            } else {
                $('#employee_id option').prop("selected", false);
            }
            $('#employee_id').trigger('change');
        });

        function fetchDesignationsByDepartment(departmentId) {
            let alias = "{{ request()->route('alias') }}";
    
            if (!departmentId) {
                $('#designation_id').empty().trigger('change');
                return;
            }
    
            $.ajax({
                url: `/${alias}/get-designations-by-department/${departmentId}`,
                method: 'GET',
                success: function(response) {
                    let designationDropdown = $('#designation_id');
                    designationDropdown.empty(); 
                    $('#designation_id').append('<option value="">Select Designation</option>');
                    if (response.designations && response.designations.length > 0) {
                        $.each(response.designations, function(index, designation) {
                            designationDropdown.append(new Option(designation.name, designation.id));
                        });
                    }
                    designationDropdown.trigger('change');
                },
                error: function() {
                    alert('Error fetching designations. Please try again.');
                }
            });
        }

    </script>    
    <!-- END: Page JS-->
@endpush