@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.employee_transaction_master')}}</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/{!! $alias !!}/home">{{trans('master/master.home')}}</a>
                    </li>
                    <li class="breadcrumb-item"><a href="/{!! $alias !!}/emp-transaction-masters">{{trans('master/master.employee_transaction_master')}}</a>
                    </li>
                    <li class="breadcrumb-item active">
                     @if(isset($empApprovalTransaction) && ($empApprovalTransaction->id))
                        {{trans('master/master.employee_transaction_edit')}}
                    @else
                        {{trans('master/master.employee_transaction_add')}}
                    @endif
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@section('content')
{!! Form::model($empApprovalTransaction, ['method' => isset($empApprovalTransaction) && $empApprovalTransaction->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">Employee Transaction Master</span>
                        <span class="bs-stepper-subtitle"> @if(isset($empApprovalTransaction) && ($empApprovalTransaction->id))
                        {{trans('master/master.employee_transaction_edit')}}
                    @else
                        {{trans('master/master.employee_transaction_add')}}
                    @endif
                    Details
                </span>
                    </span>
                </button>
            </div>
        </div>

      <div class="bs-stepper-content">
    <div id="personal-info-vertical" class="content position-relative" role="tabpanel" style="height: 350px">
        
        <div class="content-header">
            <h5 class="mb-0">Employee Transaction Master Details</h5>
            <small class="text-muted">Enter Employee Transaction Master Details</small>
        </div>
            <div class="col-md-6 mb-1">
                <label class="form-label">Date <span class="mendatory-field text-danger">*</span></label>

                {!! Form::text('date',
                    isset($empApprovalTransaction->date) ? $empApprovalTransaction->date->format('Y-m-d') : old('date'),
                    ['class' => 'form-control flatpickr-basic', 'id' => 'date', 'placeholder' => 'Select Date']
                ) !!}

                {!! $errors->first('date', '<label id="date-error" for="date" class="error">:message</label>') !!}

            </div>
            <div class="col-md-6 mb-1 {{{ $errors->has('approval_ot_hours') ? 'has-error' : '' }}}" id="approval_ot_hours" >
                <label class="form-label">Approval OverTime Hours <span class="mendatory-field text-danger">*</span></label>
                <input type="number" class="form-control" name="approval_ot_hours" id="value_input" placeholder="Enter Value" value="{{ isset($empApprovalTransaction->value) ? $empApprovalTransaction->value : old('approval_ot_hours') }}">
                {!! $errors->first('approval_ot_hours', '<label id="value-error" for="approval_ot_hours" class="error">:message</label>') !!}
                
        </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">
                    Submit
                </button>
            </div>
        </div>
        </div>
</div>
    </div>
</section>
{!! Form::close() !!}
@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>
function toggleAmount(value) {
    const amountDiv = document.getElementById('amount_div');

    if (value === 'fix') {
        amountDiv.style.display = 'block';
        amountDiv.querySelector('input').setAttribute('required', 'required');
    } else {
        amountDiv.style.display = 'none';
    }
}
document.addEventListener('DOMContentLoaded', function () {
    const uom = document.getElementById('uom').value;
    toggleAmount(uom);
});
</script>
@endpush