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

@section('content')
    <!-- Basic multiple Column Form section start -->
    {!! Form::model($hrmsTraining, [
        'method' => isset($hrmsTraining) && $hrmsTraining->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" style="height: 700px">
                    <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">
                        <div class="col-md-6">
                            <div class="mb-1  {{ $errors->has('name') ? 'has-error' : '' }}">
                                <label class="form-label" for="name">{{ trans('master/master.name') }} <span
                                        class="mendatory-field text-danger">*</span></label>
                                {!! Form::text('name', isset($hrmsTraining) && $hrmsTraining->name ? $hrmsTraining->name : old('name'), [
                                    'class' => 'form-control',
                                    'id' => 'name',
                                    'placeholder' => 'Enter Training Name',
                                ]) !!} {!! $errors->first(
                                    'name',
                                    '<label class="error" for="name">:message</label>',
                                ) !!}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-1  {{ $errors->has('validity') ? 'has-error' : '' }}">
                                <label class="form-label" for="validity">Validity (In Days)<span
                                        class="mendatory-field text-danger">*</span></label>
                                {!! Form::text(
                                    'validity',
                                    isset($hrmsTraining) && $hrmsTraining->validity ? $hrmsTraining->validity : old('validity'),
                                    [
                                        'class' => 'form-control',
                                        'id' => 'validity',
                                        'placeholder' => 'Enter Training validity',
                                    ],
                                ) !!} {!! $errors->first(
                                    'validity',
                                    '<label class="error" for="validity">:message</label>',
                                ) !!}
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-1  {{ $errors->has('validity_alert') ? 'has-error' : '' }}">
                                <label class="form-label" for="validity_alert">Validity Alert (In Days) </label>
                                {!! Form::text(
                                    'validity_alert',
                                    isset($hrmsTraining) && $hrmsTraining->validity_alert ? $hrmsTraining->validity_alert : old('validity_alert'),
                                    [
                                        'class' => 'form-control',
                                        'id' => 'validity_alert',
                                        'placeholder' => 'Enter Validity Alert',
                                    ],
                                ) !!} {!! $errors->first(
                                    'validity_alert',
                                    '<label class="error" for="validity_alert">:message</label>',
                                ) !!}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-1 {{ $errors->has('validity_frequency') ? 'has-error' : '' }}">
                                <label class="form-label" for="validity_frequency">
                                    Validity Frequency
                                </label>
                                {!! Form::select(
                                    'validity_frequency',
                                    $frequency,
                                    isset($hrmsTraining) && $hrmsTraining->validity_frequency
                                        ? $hrmsTraining->validity_frequency
                                        : old('validity_frequency'),
                                    [
                                        'class' => 'form-select select2',
                                        'id' => 'validity_frequency',
                                        'placeholder' => 'Select Validity Frequency',
                                    ],
                                ) !!}
                                {!! $errors->first('validity_frequency', '<label class="error" for="validity_frequency">:message</label>') !!}
                            </div>
                        </div> 
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-1  {{ $errors->has('completion') ? 'has-error' : '' }}">
                                <label class="form-label" for="completion">Completion (In Days)<span
                                        class="mendatory-field text-danger">*</span></label>
                                {!! Form::text(
                                    'completion',
                                    isset($hrmsTraining) && $hrmsTraining->completion ? $hrmsTraining->completion : old('completion'),
                                    [
                                        'class' => 'form-control',
                                        'id' => 'completion',
                                        'placeholder' => 'Enter Training Completion',
                                    ],
                                ) !!} {!! $errors->first(
                                    'completion',
                                    '<label class="error" for="completion">:message</label>',
                                ) !!}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-1  {{ $errors->has('completion_alert') ? 'has-error' : '' }}">
                                <label class="form-label" for="completion_alert">Completion Alert</label>
                                {!! Form::text(
                                    'completion_alert',
                                    isset($hrmsTraining) && $hrmsTraining->completion_alert ? $hrmsTraining->completion_alert : old('completion_alert'),
                                    [
                                        'class' => 'form-control',
                                        'id' => 'completion_alert',
                                        'placeholder' => 'Enter Completion Alert',
                                    ],
                                ) !!} {!! $errors->first('completion_alert', '<label class="error" for="completion_alert">:message</label>') !!}
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-1 {{ $errors->has('completion_frequency') ? 'has-error' : '' }}">
                                <label class="form-label" for="completion_frequency">
                                    Completion Frequency
                                </label>
                                {!! Form::select(
                                    'completion_frequency',
                                    $frequency,
                                    isset($hrmsTraining) && $hrmsTraining->completion_frequency
                                        ? $hrmsTraining->completion_frequency
                                        : old('completion_frequency'),
                                    [
                                        'class' => 'form-select select2',
                                        'id' => 'completion_frequency',
                                        'placeholder' => 'Select Completion Frequency',
                                    ],
                                ) !!}
                                {!! $errors->first('completion_frequency', '<label class="error" for="completion_frequency">:message</label>') !!}
                            </div>
                        </div>                        
                        <div class="col-md-6">
                            <div class="mb-1  {{ $errors->has('score') ? 'has-error' : '' }}">
                                <label class="form-label" for="score">Score<span
                                    class="mendatory-field text-danger">*</span></label>
                                {!! Form::number(
                                    'score',
                                    isset($hrmsTraining) && $hrmsTraining->score ? $hrmsTraining->score : old('score'),
                                    [
                                        'class' => 'form-control',
                                        'id' => 'score',
                                        'placeholder' => 'Enter Training Score',
                                        'step' => '0.01',
                                    ],
                                ) !!} {!! $errors->first(
                                    'score',
                                    '<label class="error" for="score">:message</label>',
                                ) !!}
                            </div>
                        </div>
                    </div>
                    <div class="row"> 
                        <div class="col-md-6">
                            <div class="mb-1  {{ $errors->has('passing_score') ? 'has-error' : '' }}">
                                <label class="form-label" for="passing_score">Passing Score<span
                                    class="mendatory-field text-danger">*</span></label>
                                {!! Form::number(
                                    'passing_score',
                                    isset($hrmsTraining) && $hrmsTraining->passing_score ? $hrmsTraining->passing_score : old('passing_score'),
                                    [
                                        'class' => 'form-control',
                                        'id' => 'passing_score',
                                        'placeholder' => 'Enter Training Passing Score',
                                        'step' => '0.01',
                                    ],
                                ) !!} {!! $errors->first(
                                    'passing_score',
                                    '<label class="error" for="passing_score">:message</label>',
                                ) !!}
                            </div>
                        </div>                     
                        <div class="col-md-6 mb-1">
                            <label class="form-label">{{ trans('master/master.status') }} <span
                                    class="mendatory-field text-danger">*</span></label>
                            <select class="form-select select2" name="status" required>
                                @foreach ($hrmsTrainingStatus as $val)
                                    <option value="{{ $val }}" @if ((isset($hrmsTraining) && $hrmsTraining->status == $val) || old('status') == $val) selected @endif>
                                        {{ ucwords($val) }}</option>
                                @endforeach
                            </select>
                        </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>
    <!-- END: Page JS-->

    <script>
        $(document).ready(function() {
            let maxRows = 4;
            let baseHeight = 700;
            let heightIncrement = 55;

            function adjustHeight() {
                let rowCount = $("#breaksTableBody tr").length;
                let minHeight = 700;
                @if ($errors->has('breaks'))
                    let additionalHeightPerRow = 65;
                @else
                    let additionalHeightPerRow = 55;
                @endif
                console.log(additionalHeightPerRow);

                let newHeight = minHeight + rowCount * additionalHeightPerRow;
                $("#personal-info-vertical").css("height", newHeight + "px");
            }

            function updateRowIndexes() {
                $("#breaksTableBody tr").each(function(index) {
                    $(this).find("td:first").text(index + 1);

                    $(this).find("input").each(function() {
                        let nameAttr = $(this).attr("name");
                        if (nameAttr) {
                            let updatedName = nameAttr.replace(/\[.*?\]/, `[${index}]`);
                            $(this).attr("name", updatedName);
                            $(this).attr("id", updatedName.replace(/\[|\]/g, "."));
                        }
                    });

                    $(this).find("label.error").each(function() {
                        let forAttr = $(this).attr("for");
                        if (forAttr) {
                            let updatedFor = forAttr.replace(/\.\d+\./, `.${index}.`);
                            $(this).attr("for", updatedFor);
                        }
                    });
                });
            }

            $(document).on("click", ".addRow", function() {
                let rowCount = $("#breaksTableBody tr").length;

                if (rowCount > maxRows) {
                    swal("Warning!", "Maximum 4 breaks can be considered.", "warning");
                    return;
                }

                let newRow = `
                <tr>
                    <td>${rowCount + 1}</td>
                    <td>
                        <input type="text" name="breaks[${rowCount}][name]" class="form-control name" id="breaks.${rowCount}.name">
                    </td>
                    <td>
                        <input type="time" name="breaks[${rowCount}][from_time]" class="form-control from_time" id="breaks.${rowCount}.from_time">
                    </td>
                    <td>
                        <input type="time" name="breaks[${rowCount}][to_time]" class="form-control to_time" id="breaks.${rowCount}.to_time">
                    </td>
                    <td>
                        <label>
                            <input type="radio" name="breaks[${rowCount}][include]" value="1" checked>
                            Exclude
                        </label>
                        <label>
                            <input type="radio" name="breaks[${rowCount}][include]" value="0">
                            Include
                        </label>
                    </td>
                    <td><button type="button" class="btn btn-danger btn-sm removeRow">Remove</button></td>
                </tr>`;

                $("#breaksTableBody").append(newRow);
                adjustHeight();
            });

            $(document).on("click", ".removeRow", function() {
                $(this).closest("tr").remove();
                updateRowIndexes();
                adjustHeight();
            });

            adjustHeight();
        });
    </script>
    <script>
        $(document).ready(function() {
            $("#is-auto-shift").change(function() {
                $("#auto-shift-range").toggle(this.checked);
            });
        });
    </script>
@endpush