@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">Skills Master</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ $orgUrl.'/home' }}">Home</a>
                    </li>
                    <li class="breadcrumb-item"><a href="{{ $orgUrl.'/skill' }}">Skills Master</a>
                    </li>
                    <li class="breadcrumb-item active">
                        Add Skills Master
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@section('content')
<!-- Basic multiple Column Form section start -->
<form role="post-data" method="POST" action="{{ $orgUrl.'/skill/store' }}" redirect="{{ $orgUrl.'/skill' }}">
    <section class="vertical-wizard">
        <div class="bs-stepper vertical vertical-wizard-example table-responsive">
            <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">Skills Master</span>
                            <span class="bs-stepper-subtitle">Add Skills Master</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: 470px">
                    <div class="content-header">
                        <h5 class="mb-0">Skills Master</h5>
                        <small class="text-muted">Enter Skills Master</small>
                    </div>
                    <div class="row" id="dynamicTable">
                        <div class="col-md-6">
                            <input type="hidden" name="organization_id" value="{{$organization->id}}">
                            <div class="mb-1  {{{ $errors->has('name') ? 'has-error' : '' }}}">
                                <label class="form-label" for="name">Name<span class="mendatory-field text-danger">*</span></label>
                                <input type="text" value="{{ old('name') }}" name="skills[0][name]" class="form-control" placeholder="Enter Name" id="name">
                                {!! $errors->first('name', '<label class="error" for="name">:message</label>')!!}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <td><button type="button" name="add" id="add" class="btn btn-success mt-2">Add More</button></td>  
                        </div>

                        </div>
                    </div>
                    <div class="content-footer position-absolute bottom-0 col-md-12">
                        <div class="d-flex justify-content-between content-footer">
                            <button type="button" data-request="ajax-submit" data-target="[role=post-data]" class="btn btn-success btn-submit user-submit" id="submit-text">{{trans('common/common.submit')}}</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
 
</form>
<!-- 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 src="{{ asset('js/common-script.js') }}"></script>
<script src="{{ asset('js/sweetalert.js') }}"></script>

<script>

    var i = 0;
    $("#add").click(function(){
        ++i;
        $("#dynamicTable").append('<div class="row skill_delete"><div class="col-md-6"><input type="text" name="skills['+i+'][name]" placeholder="Enter your Name" class="form-control" /></div>  <div class="col-md-6"><button type="button" class="btn btn-danger remove-tr mb-2">Remove</button></div></div>');
    });
    $(document).on('click', '.remove-tr', function(){  

         $(this).parents('.skill_delete').remove();
    });  
</script>

@endpush