@extends('backend.layout')
@section('title', $title)

@section('headerStyles')

@endsection

@section('content')
    {!! getBreadcrumbs(
               array(
               'dashboard'=>'Home',

               ''=>'Company Info'
               ),'Company Info'
            ) !!}

<style>
.bt_m{border:none;background:#8f24f9; color:#fff;}
.add_more_button{border:none;background:#8f24f9 !important; color:#fff;}
.add_more_button:hover{background:#8f24f9; color:#fff;}
   .f_po {
    border-radius: 0px;
    height: 42px;
    border: 2px dotted #ccc;
}
.l_txt {
    color: #808080;
    font-weight: 500;
    padding: 0px;
}
.err_or {
    color: red;
}
 .pa_bg{width:100%; height:150px; background-image:url({{ asset('images/company_info.png') }}); background-repeat:no-repeat; background-size:contain;}
</style>

<div class="col-md-12 pa_bg">

</div>


    <div class="content mt-3">
        <div class="animated fadeIn">
            <div class="row">
                <div class="col-md-12">
                    <div class="card">

                        @if (Session::has('flash_message'))
                            <br/>
                            <div class="alert alert-success alert-dismissable">
                                <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                                <strong>{{ Session::get('flash_message' ) }}</strong>
                            </div>
                        @endif

                        <div class="card-body card-block">

                            <form method="POST" id="notifications" action="{{ route('admin.introduction-content') }}"
                                  accept-charset="UTF-8" class="form-horizontal" enctype="multipart/form-data" method="post">
                                {{ csrf_field() }}
                                
                                <div class="row form-group">
                                    <div class="col col-md-3">
                                        <label for="hf-email" class=" form-control-label l_txt">Title<span class="err_or">*</span></label>
                                    </div>
                                    <div class="col-12 col-md-9">

                                        <input class="form-control f_po tags" id="title" type="text"
                                               placeholder="Enter title"
                                               name="title">
                                     </div>
                                </div>
								<div class="row form-group">
                                    <div class="col col-md-3">
                                        <label for="hf-email" class=" form-control-label l_txt">Video URL<span class="err_or">*</span></label>
                                    </div>
                                    <div class="col-12 col-md-9">

                                        <input class="form-control f_po tags" id="video_url" type="text"
                                               placeholder="Enter Video URL"
                                               name="video_url">
                                     </div>
                                </div>
									<div class="row form-group">
									<div class="col col-md-3">
                                        <label for="hf-email" class="form-control-label l_txt">Heading<span class="err_or">*</span></label>
                                    </div>
										 <div class="input_fields_container col-12 col-md-9">
											  <div style="width: 100%;"><input type="text" name="heading[]" class="form-control tags col-md-9 f_po" style="float: left;">
												   <button class="btn btn-sm btn-primary add_more_button" style="height: 37px;
   float: right;">Add More Details</button>
												   
											  </div>
											  
											  <div class="col-12 col-md-12" style="padding: 0px !important;margin-bottom: 15px;    margin-top: 15px;">
												<textarea class="form-control" rows="4" cols="30" id="discription" type="text" name="discription[]"></textarea>

										 </div>
											</div>
									</div>
									
                                <div class="card-footer">
                                    <button type="submit" class="btn btn-primary bt_m btn-sm">
                                         Submit
                                    </button>
                                    <button type="reset" class="btn btn-danger bt_n btn-sm">
                                       Reset
                                    </button>
                                </div>
                            </form>
                        </div>


                    </div>
                </div>
            </div>
        </div><!-- .animated -->
    </div><!-- .content -->

@endsection
@section('footerScripts')
<script src="https://cdn.ckeditor.com/4.16.0/standard/ckeditor.js"></script>
<script src="//cdn.jsdelivr.net/bootstrap.tagsinput/0.4.2/bootstrap-tagsinput.min.js"></script>


    <script>
		$(document).ready(function() {
    var max_fields_limit      = 10; //set limit for maximum input fields
    var x = 1; //initialize counter for text box
    $('.add_more_button').click(function(e){ //click event on add more fields button having class add_more_button
        e.preventDefault();
        if(x < max_fields_limit){ //check conditions
            x++; //counter increment
            $('.input_fields_container').append('<div><input type="text" name="heading[]" class="form-control tags col-md-10" style="float:left;"/><a href="#" class="remove_field" style="margin-left:10px;float:right;">Remove</a></div><div class="col-12 col-md-12" style="padding: 0px !important;margin-bottom: 15px;    margin-top: 15px;"><textarea class="form-control" rows="4" cols="30" id="discription" type="text" name="discription[]"></textarea></div>'); //add input field
        }
    });  
    $('.input_fields_container').on("click",".remove_field", function(e){ //user click on remove text links
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});
       
    </script>

@endsection
