HEX
Server: Apache/2.4.46 (Ubuntu)
System: Linux localhost 5.11.0-49-generic #55-Ubuntu SMP Wed Jan 12 17:36:34 UTC 2022 x86_64
User: root (0)
PHP: 7.4.16
Disabled: pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wifcontinued,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_get_handler,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority,pcntl_async_signals,pcntl_unshare,
Upload Files
File: /var/www/html/hrms-production/resources/views/admin/EmployeeProfile/add-training-detail.blade.php
@extends('admin.include.master')

@section('content')
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <div class="container-fluid">
            {{-- <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>All Employees</h1>
                </div>
                <div class="col-sm-6 text-right">
                    <button type="button" class="btn btn-sm btn-outline-info mx-1" data-toggle="modal"
                        data-target="#">Add New</button>
                </div>
            </div> --}}
        </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">

            {{-- Previous Job Detail --}}
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h5>Employee Training Details</h5>
                        </div>
                        <!-- /.card-header -->
                        <div class="card-body">
                            <form class="form-horizontal" id="addTrainingDetailForm">
                                <input type="hidden" name="_token" id="csrf_token" value="{{ csrf_token() }}">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group row mb-0">
                                            <label for="EmployeeCode"
                                                class="col-sm-4 col-form-label text-right">Employee Code:</label>
                                            <div class="col-sm-8">
                                                <select class="form-control form-control-sm select2"
                                                    style="width: 100%;" aria-hidden="true" name="EmployeeCode"
                                                    id="EmployeeCode" data-placeholder="Employee Code" required>
                                                    <option selected="selected" disabled>Employee Code</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group row mb-0">
                                            <label for="EmployeeName"
                                                class="col-sm-4 col-form-label text-right">Employee Name:</label>
                                            <div class="col-sm-8">
                                                <div class="input-group">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text"><i class="fas fa-pen"></i></span>
                                                    </div>
                                                    <input type="text" class="form-control form-control-sm emp-detail"
                                                        name="EmployeeName" id="employeeName" readonly>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group row mb-0">
                                            <label for="Designation"
                                                class="col-sm-4 col-form-label text-right">Designation:</label>
                                            <div class="col-sm-8">
                                                <div class="input-group">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text"><i class="fas fa-pen"></i></span>
                                                    </div>
                                                    <input type="text" class="form-control form-control-sm emp-detail"
                                                        name="Designation" id="designation" readonly>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group row mb-0">
                                            <label for="TrainingOrganization"
                                                class="col-sm-4 col-form-label text-right">Training
                                                Organization:</label>
                                            <div class="col-sm-8">
                                                <div class="input-group">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text"><i class="fas fa-pen"></i></span>
                                                    </div>
                                                    <input type="text" class="form-control form-control-sm"
                                                        name="TrainingOrganization" id="trainingOrganization">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group row mb-0">
                                            <label for="FromDate" class="col-sm-4 col-form-label text-right">From
                                                Date:</label>
                                            <div class="col-sm-8">
                                                <div class="form-group mb-2">
                                                    <div class="input-group date" id="jobFromDate"
                                                        data-target-input="nearest">
                                                        <input type="text" id="fromDate" name="FromDate"
                                                            class="form-control form-control-sm datetimepicker-input"
                                                            placeholder="DD/MM/YYYY" data-target="#fromDate" required />
                                                        <div class="input-group-append" data-target="#fromDate"
                                                            data-toggle="datetimepicker">
                                                            <div class="input-group-text"><i class="fa fa-calendar"></i>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group row mb-0">
                                            <label for="Remarks"
                                                class="col-sm-4 col-form-label text-right">Remarks:</label>
                                            <div class="col-sm-8">
                                                <textarea class="form-control form-control-sm" name="Remarks"
                                                    id="remarks"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group row mb-0">
                                            <label for="DDO" class="col-sm-4 col-form-label text-right">DDO:</label>
                                            <div class="col-sm-8">
                                                <div class="input-group">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text"><i class="fas fa-pen"></i></span>
                                                    </div>
                                                    <input type="text" class="form-control form-control-sm" name="DDO"
                                                        id="ddo" readonly>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group row mb-0">
                                            <label for="Department"
                                                class="col-sm-4 col-form-label text-right">Department:</label>
                                            <div class="col-sm-8">
                                                <div class="input-group">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text"><i class="fas fa-pen"></i></span>
                                                    </div>
                                                    <input type="text" class="form-control form-control-sm emp-detail"
                                                        name="Department" id="department" readonly>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group row mb-0">
                                            <label for="Description"
                                                class="col-sm-4 col-form-label text-right">Description:</label>
                                            <div class="col-sm-8">
                                                <div class="input-group">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text"><i class="fas fa-pen"></i></span>
                                                    </div>
                                                    <input type="text" class="form-control form-control-sm"
                                                        name="Description" id="description">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group row mb-0">
                                            <label for="Venue" class="col-sm-4 col-form-label text-right"
                                                style="font-size:15px !important">Venue:</label>
                                            <div class="col-sm-8">
                                                <div class="input-group">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text"><i class="fas fa-pen"></i></span>
                                                    </div>
                                                    <input type="text" class="form-control form-control-sm" name="Venue"
                                                        id="venue" required>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group row mb-0">
                                            <label for="ToDate" class="col-sm-4 col-form-label text-right">To
                                                Date:</label>
                                            <div class="col-sm-8">
                                                <div class="form-group mb-2">
                                                    <div class="input-group date" id="jobToDate"
                                                        data-target-input="nearest">
                                                        <input type="text" id="toDate" name="ToDate"
                                                            class="form-control form-control-sm datetimepicker-input"
                                                            placeholder="DD/MM/YYYY" data-target="#toDate" required />
                                                        <div class="input-group-append" data-target="#toDate"
                                                            data-toggle="datetimepicker">
                                                            <div class="input-group-text"><i class="fa fa-calendar"></i>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group row mb-0">
                                            <label for="UploadDocument"
                                                class="col-sm-4 col-form-label text-right">Upload Document:</label>
                                            <div class="col-sm-8">
                                                <div class="input-group input-group-sm">
                                                    <div class="custom-file">
                                                        <input type="file" class="custom-file-input"
                                                            name="TrainingCertificate" id="TrainingCertificate"
                                                            accept="image/*, .pdf">
                                                        <label class="custom-file-label"
                                                            for="TrainingCertificate">Choose
                                                            file</label>
                                                    </div>
                                                    <div class="input-group-append">
                                                        <button type="button" id="removeTrainingCertificate"
                                                            class="btn btn-warning text-white">Remove file</button>
                                                    </div>
                                                </div>
                                                <small class="text-danger">(Size should not be greater than 2MB)</small>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group row">
                                            <button type="submit" id="btn-save-job-detail"
                                                class="btn btn-warning text-white">Save</button> &nbsp;&nbsp;
                                            <button type="button" onclick="formReset();"
                                                class="btn btn-warning text-white">Reset</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <!-- /.card-body -->
                    </div>
                    <!-- /.card -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->

            {{-- Training List Table --}}
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h5>List of Employee Training <span id="EmployeeTableTitle" class="text-info"></span></h5>
                        </div>
                        <!-- /.card-header -->
                        <div class="card-body">
                            <table id="table_training" class="table table-bordered table-striped table-sm">
                                <thead>
                                    <tr>
                                        <th>S.No.</th>
                                        <th>Description</th>
                                        <th>Venue</th>
                                        <th>From Date</th>
                                        <th>To Date</th>
                                        <th>Training Org.</th>
                                        <th>Remarks</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody id="EmpTraining">

                                </tbody>
                            </table>
                        </div>
                        <!-- /.card-body -->
                    </div>
                    <!-- /.card -->
                </div>
                <!-- /.col -->
            </div>
        </div>
        <!-- /.container-fluid -->
    </section>
    <!-- /.content -->
</div>

{{-- Update Training Detail --}}
<div class="modal fade" id="updateTrainingDetail">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Training Detail <span id="TrainingOrganizationName" class="text-info"></span>
                </h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- Main content -->
                <form id="updateTrainingDetailForm">
                    <input type="hidden" name="_token" id="csrf_token_update" value="{{ csrf_token() }}">
                    <input type="hidden" id="TrainingIdEdit" name="TrainingDetailId">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-2">
                                    <label class="mb-0" for="TrainingOrganization">Training Organization<span
                                            class="text-danger">*</span></label>
                                    <input type="text" class="form-control form-control-sm" name="TrainingOrganization"
                                        id="trainingOrganizationEdit" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group mb-2">
                                    <label class="mb-0" for="Venue">Venue<span class="text-danger">*</span></label>
                                    <input type="text" class="form-control form-control-sm" name="Venue" id="venueEdit"
                                        required>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-2">
                                    <label class="mb-0" for="FromDate">From Date <span
                                            class="text-danger">*</span></label>
                                    <div class="input-group date" id="jobFromDateEdit" data-target-input="nearest">
                                        <input type="text" id="fromDateEdit" name="FromDate"
                                            class="form-control form-control-sm datetimepicker-input"
                                            data-target="#fromDateEdit" placeholder="DD/MM/YYYY" required=""
                                            aria-invalid="false">
                                        <div class="input-group-append" data-target="#fromDateEdit"
                                            data-toggle="datetimepicker">
                                            <div class="input-group-text"><i class="fa fa-calendar"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group mb-2">
                                    <label class="mb-0" for="ToDate">To Date <span class="text-danger">*</span></label>
                                    <div class="input-group date" id="jobToDateEdit" data-target-input="nearest">
                                        <input type="text" id="toDateEdit" name="ToDate"
                                            class="form-control form-control-sm datetimepicker-input"
                                            data-target="#toDateEdit" placeholder="DD/MM/YYYY" required=""
                                            aria-invalid="false">
                                        <div class="input-group-append" data-target="#toDateEdit"
                                            data-toggle="datetimepicker">
                                            <div class="input-group-text"><i class="fa fa-calendar"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group mb-2">
                                    <label class="mb-0" for="Description">Description <span
                                            class="text-danger">*</span></label>
                                    <input type="text" class="form-control form-control-sm" name="Description"
                                        id="descriptionEdit">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group mb-2">
                                    <label class="mb-0" for="Venue">Reamrks </label>
                                    <textarea class="form-control form-control-sm" name="Remarks"
                                        id="remarksEdit"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="mb-0" for="TrainingCertificate">Change File </label>
                                    <div class="input-group input-group-sm">
                                        <div class="custom-file">
                                            <input type="file" class="custom-file-input" name="TrainingCertificate"
                                                id="TrainingCertificateEdit" accept="image/*, .pdf">
                                            <label class="custom-file-label" for="TrainingCertificate">Choose
                                                file</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr />
                        <div class="row">
                            <div class="col-12">
                                <div class="d-flex align-items-center justify-content-center">
                                    <button type="button" class="btn btn-sm btn-outline-secondary mx-1"
                                        data-dismiss="modal" aria-label="Close">Cancel</button>
                                    <button type="submit" id="btn-update-awp" name="Update" value="Update"
                                        class="btn btn-sm btn-info mx-1">Update</button>
                                </div>
                            </div>
                        </div>
                </form>
            </div>
        </div>
    </div>
    <!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->

{{-- JS Start Here --}}

{{-- Reset Form Button --}}
<script>
    function formReset()
  { 
    Swal.fire({
            title: 'Do you want to reset form?',
            text: "Are you sure you want to reset this form!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, reset it!'
        }).then(function() {
            $('form#addTrainingDetailForm').each(function() {
                    this.reset();
            });
        });
  }

  // Remove File

  $("#removeTrainingCertificate").on("click", function(e) {
    
    var fileName = $('#TrainingCertificate').val();
    
    if(fileName) { 
        Swal.fire({
            title: 'Do you want to remove file?',
            text: "Are you sure you want to remove this file!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, remove it!'
        }).then(function() {
            $('#TrainingCertificate').val("");
        });
    } else {
        Swal.fire({
            icon: 'error',
            title: 'Oops! There is no file.',
            showConfirmButton: false,
            timer: 2000
            });
    }
    });
</script>

{{-- Employee List --}}
<script>
    $(document).ready(function() {
        $.ajax({
          type: "GET",
          url: "{{ url('/employee-list') }}",
          dataType: "json",
          success: function(response) {
            var json = response.EmployeeList;
            $.each(json, function(i, employee) {
              $("#EmployeeCode").append("<option value='" + employee.EmployeeId + "'>" + employee.EmployeeCode + " (" + employee.EmployeeName + ") " + "</option>");
              $('#EmployeeCode').trigger('change');
            });
          }
        });
    });

    // Get Employee Details
    $('#EmployeeCode').on('select2:select', function (e) {
      
        var data = e.params.data;
        var EmployeeId = data.id;
        $('.emp-detail').val('');
        getEmployeeDetail(EmployeeId);
        getEmpTrainingList(EmployeeId)
        // Reset Member field on change Employee Code
        $('#description, #trainingOrganization, #venue, #remarks, #TrainingCertificate').val('');
    });

    function getEmployeeDetail(EmployeeId){
        var EmployeeId = EmployeeId;
            $.ajax({
            type: "post",
            url: "{{ url('/') }}/get-employee-current-detail",
            dataType: "json",
            data: { 
                    _token: "{{csrf_token()}}",
                    EmployeeId: EmployeeId,
                },
            success: function(response) {
                var json = response.GetEmpCurrentDetail;
                $('#EmployeeId').val(json.EmployeeId);
                $('#EmpCode').val(json.EmployeeCode);
                $('#employeeName').val(json.EmployeeName);
                $('#department').val(json.DepartmentName);
                $('#ddo').val(json.Ddo);
                $('#designation').val(json.DesignationName);
                $('span#EmployeeTableTitle').html('#' +json.EmployeeName+ ' (' +json.EmployeeCode+ ')' );
            }
        });
    }
</script>

{{-- Validate form and Save data --}}
<script>
    $(function () {
      $.validator.setDefaults({
        submitHandler: function () {
            event.preventDefault();
            // Get Form Data
        var token = $("#csrf_token").val();
        var EmployeeCode = $('#EmployeeCode').find('option:selected').text();
        var EmployeeId = $('#EmployeeCode :selected').val();
        var TrainingOrganization = $('#trainingOrganization').val();
        var Description = $('#description').val();
        var Venue = $('#venue').val();
        var FromDate = $('#fromDate').val();
        var ToDate = $('#toDate').val();
        var Remarks = $('#remarks').val();
        var TrainingCertificate = $('#TrainingCertificate')[0].files;
        
        var fd = new FormData();
            fd.append('_token',token);
            fd.append('EmployeeId',EmployeeId);
            fd.append('EmployeeCode',EmployeeCode);
            fd.append('TrainingOrganization',TrainingOrganization);
            fd.append('Description',Description);
            fd.append('Venue',Venue);
            fd.append('StartDate',FromDate);
            fd.append('EndDate',ToDate);
            fd.append('Remarks',Remarks);
            // files data
            fd.append('TrainingCertificate',TrainingCertificate[0]);

        $.ajax({
                type: "post",
                url: "{{ url('store-training-detail') }}",
                data: fd,
                contentType: false,
                processData: false,
                success: function(response) {
                  const Toast = Swal.mixin({
                      toast: true,
                      position: 'top-end',
                      showConfirmButton: false,
                      timer: 2000,
                      timerProgressBar: true,
                      didOpen: (toast) => {
                        toast.addEventListener('mouseenter', Swal.stopTimer)
                        toast.addEventListener('mouseleave', Swal.resumeTimer)
                      }
                    })
                    Toast.fire({
                      icon: 'success',
                      title: 'Employee training added successfully!'
                    });
                    // Get EmployeeId and Member List
                    var EmployeeId = $('#EmployeeCode :selected').val();
                    getEmpTrainingList(EmployeeId);
                    // Reset Form
                    $('form#addTrainingDetailForm').each(function() {
                    this.reset();
                    $('#EmployeeCode').val(null).trigger('change');
                });
                },
                error: function(data) {
                  const Toast = Swal.mixin({
                      toast: true,
                      position: 'top-end',
                      showConfirmButton: false,
                      timer: 2000,
                      timerProgressBar: true,
                      didOpen: (toast) => {
                        toast.addEventListener('mouseenter', Swal.stopTimer)
                        toast.addEventListener('mouseleave', Swal.resumeTimer)
                      }
                    })
                    Toast.fire({
                      icon: 'error',
                      title: 'Something went wrong!'
                    });
                }
            });
        }
      });
      $('#addTrainingDetailForm').validate({
        rules: {
            EmployeeCode: {
            required: true,
          },
          TrainingOrganization: {
            required: true,
          },
          Description: {
            required: true,
          },
          Venue: {
            required: true
          },
          FromDate: {
            required: true,
          },
          ToDate: {
            required: true,
          },
          TrainingCertificate: {
            required: true,
            accept: "image/*, pdf",
          },
          Remarks: {
          required: true,
        },
        },
        messages: {
            EmployeeCode: {
            required: "Please select employee code.",
          },
            NomineeCertificate: {
                accept: "Only image and pdf file is allowed.",
                filesize: "Maximum 2MB of file is allowed."
            },
        },
        errorElement: 'span',
        errorPlacement: function (error, element) {
          error.addClass('invalid-feedback');
          element.closest('.form-group').append(error);
        },
        highlight: function (element, errorClass, validClass) {
          $(element).addClass('is-invalid');
        },
        unhighlight: function (element, errorClass, validClass) {
          $(element).removeClass('is-invalid');
        }
      });
    });
</script>

{{-- Training List Table --}}
<script>
    function getEmpTrainingList(EmployeeId)
    {
      var EmployeeId = EmployeeId;
      var i = 1;
      $.ajax({
        type: "post",
        url: "{{ url('/') }}/get-employee-detail",
            dataType: "json",
            data: { 
                    _token: "{{csrf_token()}}",
                    EmployeeId: EmployeeId,
                },
        success: function (response) {
          //console.log( "Total");
          $('tbody#EmpTraining').html("");
          $.each(response.GetEmpTrainingList, function (key, item){
            //console.log($(response).find('tr').length);
            var dfrom = new Date(item.FromDate);
            var monthfrom = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
            var datefrom = dfrom.getDate() + "-" + monthfrom[dfrom.getMonth()] + "-" + dfrom.getFullYear();
            //var time = d.toLocaleTimeString().toLowerCase();
            //var FromDate = (date + " " +time);
            var FromDate = (datefrom);
            // To Date
            var dto = new Date(item.ToDate);
            var monthto = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
            var dateto = dto.getDate() + "-" + monthto[dto.getMonth()] + "-" + dto.getFullYear();
            //var time = d.toLocaleTimeString().toLowerCase();
            //var FromDate = (date + " " +time);
            var ToDate = (dateto);
            
            //alert(newDate);
            $('#table_training tbody').append('<tr>\
              <td>'+ i++ +'</td>\
              <td>'+ item.Description +'</td>\
              <td>'+ item.Venue +'</td>\
              <td>'+ FromDate +'</td>\
              <td>'+ ToDate +'</td>\
              <td>'+ item.TrainingOrganization +'</td>\
              <td>'+ item.Remarks +'</td>\
              <td><a href="{{ url("/") }}'+ item.TrainingCertificatePath +'" title="Download Certificate"  class="btn btn-xs btn-outline-success" target="_blank" download="'+ item.EmployeeCode +'_training_'+ item.TrainingOrganization +'"><i class="fas fa-download"></i></a> <button type="button" title="Delete" onClick=editTrainingDetail("'+ item.TrainingDetailId +'"); class="btn btn-xs btn-outline-info" data-id="'+ item.TrainingDetailId +'"><i class="fas fa-edit"></i></button> <button type="button" title="Delete" onClick=deleteTrainingDetail("'+ item.TrainingDetailId +'"); class="btn btn-xs btn-outline-danger" data-id="'+ item.TrainingDetailId +'"><i class="fas fa-trash-alt"></i></button></td>\
            ');
          });
        }
      });
    }
</script>

{{-- Delete Training Detail --}}
<script>
    function deleteTrainingDetail(TrainingDetailId) {
    var TrainingId = TrainingDetailId;
                Swal.fire({
                    title: "Delete Training Detail?",
                    text: "Are you sure you want to delete this Training Detail?",
                    icon: "warning",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#3085d6",
                    cancelButtonColor: "#d33",
                    confirmButtonText: "Yes, delete it!",
                }).then((result) => {
                    if (result.isConfirmed) {
                        var TrainingId = TrainingDetailId;
                        $.ajax({
                            type: "post",
                            url: "{{ url('/') }}/delete-training-detail",
                            dataType: "json",
                            data: {
                                _token: "{{csrf_token()}}",
                                TrainingId: TrainingId,
                            },
                            success: function (response) {
                                Swal.fire({
                                    icon: "success",
                                    title: "Training Detail has been deleted!",
                                    showConfirmButton: false,
                                    timer: 1500,
                                }).then(function () {
                                    //location.reload();
                                    // Get EmployeeId and Member List
                                    var EmployeeId = $(
                                        "#EmployeeCode :selected"
                                    ).val();
                                    getEmpTrainingList(EmployeeId);
                                });
                            },
                        });
                    }
                });
    }
</script>

{{-- Edit Training Detail --}}
<script>
    function editTrainingDetail(TrainingDetailId)
  {
      var TrainingId = TrainingDetailId;
      $('#updateTrainingDetail').modal('show');
      $.ajax({
          type: "post",
          url: "{{ url('/') }}/edit-training-detail",
          dataType: "json",
          data: { 
                    _token: "{{csrf_token()}}",
                    TrainingId: TrainingId,
                },
          success: function (response) {
               $('#TrainingIdEdit').val(response.GetTrainingDetail.TrainingDetailId);
               $('span#TrainingOrganizationName').html('#' +response.GetTrainingDetail.TrainingOrganization);
               $('#trainingOrganizationEdit').val(response.GetTrainingDetail.TrainingOrganization);
               $('#venueEdit').val(response.GetTrainingDetail.Venue);
               
                var fromDate = new Date(response.GetTrainingDetail.FromDate);
                $('#fromDateEdit').val(((fromDate.getDate() > 9) ? fromDate.getDate() : ('0' + fromDate.getDate())) + '/' + ((fromDate.getMonth() > 8) ? (fromDate.getMonth() + 1) : ('0' + (fromDate.getMonth() + 1))) + '/' + fromDate.getFullYear());
 
                var toDate = new Date(response.GetTrainingDetail.ToDate);
                $('#toDateEdit').val(((toDate.getDate() > 9) ? toDate.getDate() : ('0' + toDate.getDate())) + '/' + ((toDate.getMonth() > 8) ? (toDate.getMonth() + 1) : ('0' + (toDate.getMonth() + 1))) + '/' + toDate.getFullYear());

               $('#descriptionEdit').val(response.GetTrainingDetail.Description);
               $('#remarksEdit').val(response.GetTrainingDetail.Remarks);
          }
      });
  }
</script>

{{-- Validate form and Update data --}}
<script>
    $(function () {
      $.validator.setDefaults({
        submitHandler: function () {
            event.preventDefault();
            // Get Form Data
        var token = $("#csrf_token_update").val();
        var TrainingId = $("#TrainingIdEdit").val();
        var TrainingOrganization = $('#trainingOrganizationEdit').val();
        var Description = $('#descriptionEdit').val();
        var Venue = $('#venueEdit').val();
        var FromDate = $('#fromDateEdit').val();
        var ToDate = $('#toDateEdit').val();
        var Remarks = $('#remarksEdit').val();
        var TrainingCertificate = $('#TrainingCertificateEdit')[0].files;
        
        var fd = new FormData();
            fd.append('_token',token);
            fd.append('TrainingId',TrainingId);
            fd.append('TrainingOrganization',TrainingOrganization);
            fd.append('Description',Description);
            fd.append('Venue',Venue);
            fd.append('StartDate',FromDate);
            fd.append('EndDate',ToDate);
            fd.append('Remarks',Remarks);
            // files data
            fd.append('TrainingCertificate',TrainingCertificate[0]);

        $.ajax({
                type: "post",
                url: "{{ url('update-training-detail') }}",
                data: fd,
                contentType: false,
                processData: false,
                success: function(response) {
                  const Toast = Swal.mixin({
                      toast: true,
                      position: 'top-end',
                      showConfirmButton: false,
                      timer: 2000,
                      timerProgressBar: true,
                      didOpen: (toast) => {
                        toast.addEventListener('mouseenter', Swal.stopTimer)
                        toast.addEventListener('mouseleave', Swal.resumeTimer)
                      }
                    })
                    Toast.fire({
                      icon: 'success',
                      title: 'Employee training updated successfully!'
                    });
                    // Get EmployeeId and Refresh List
                    var EmployeeId = $('#EmployeeCode :selected').val();
                    getEmpTrainingList(EmployeeId);
                    // Hide Popup Form
                    $('#updateTrainingDetail').modal('hide');
                    
                },
                error: function(data) {
                  const Toast = Swal.mixin({
                      toast: true,
                      position: 'top-end',
                      showConfirmButton: false,
                      timer: 2000,
                      timerProgressBar: true,
                      didOpen: (toast) => {
                        toast.addEventListener('mouseenter', Swal.stopTimer)
                        toast.addEventListener('mouseleave', Swal.resumeTimer)
                      }
                    })
                    Toast.fire({
                      icon: 'error',
                      title: 'Something went wrong!'
                    });
                }
            });
        }
      });
      $('#updateTrainingDetailForm').validate({
        rules: {
          TrainingOrganization: {
            required: true,
          },
          Description: {
            required: true,
          },
          Venue: {
            required: true
          },
          FromDate: {
            required: true,
          },
          ToDate: {
            required: true,
          },
          Remarks: {
          required: true,
        },
        },
        messages: {
            EmployeeCode: {
            required: "Please select employee code.",
          },
            NomineeCertificate: {
                accept: "Only image and pdf file is allowed.",
                filesize: "Maximum 2MB of file is allowed."
            },
        },
        errorElement: 'span',
        errorPlacement: function (error, element) {
          error.addClass('invalid-feedback');
          element.closest('.form-group').append(error);
        },
        highlight: function (element, errorClass, validClass) {
          $(element).addClass('is-invalid');
        },
        unhighlight: function (element, errorClass, validClass) {
          $(element).removeClass('is-invalid');
        }
      });
    });
</script>


<!-- /.content-wrapper -->
@endsection