@extends('layout.header')
@section('title')
Content Management
@endsection
<!--@section('maintitle')
Bid-Project
@endsection-->
@section('main')

<div class="m-grid__item m-grid__item--fluid m-wrapper">
    <!-- BEGIN: Subheader -->
    <div class="m-subheader ">
        <div class="d-sm-flex align-items-center subheader_border_bottom">
            <div class="mr-auto">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    Add New Content
                </h3>
                <ul class="m-subheader__breadcrumbs m-nav m-nav--inline">
                    <li class="m-nav__item m-nav__item--home">
                        <a href="#" class="m-nav__link m-nav__link--icon">
                            <i class="m-nav__link-icon la la-home"></i>
                        </a>
                    </li>
                    <li class="m-nav__separator">
                        -
                    </li>
                    <li class="m-nav__item">
                        <a href="" class="m-nav__link">
                            <span class="m-nav__link-text">
                                Content Management
                            </span>
                        </a>
                    </li>
                    <li class="m-nav__separator">
                        -
                    </li>
                    <li class="m-nav__item">
                        <a href="" class="m-nav__link">
                            <span class="m-nav__link-text">
                                Add New Content
                            </span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- END: Sub header -->
    <!-- START :: main Content-->
        <form id="myform" name="myform" action="content_management" method="post">
                        @csrf
    <div class="m-content Add-New-Store">
        <div class="m-portlet m-portlet--mobile margin_bottom_60">
            <div class="m-portlet__head">
                <div class="m-portlet__head-caption">
                    <div class="m-portlet__head-title">
                        <h3 class="m-portlet__head-text">
                            Add New Content
                        </h3>
                    </div>
                </div>
                <div class="">
                    <li class="m-portlet__nav-item">
                        <a href="content_list" class="new_order_btn">
                            <span>
                                <span>
                                    Cancel
                                </span>
                            </span>
                        </a>
                    </li>
                    <li class="m-portlet__nav-item" >
                        <a href="#" id="register" class="insertrecord new_order_btn"  onclick="validate_field()" >
                            <span>
                                <i class="fa fa-check"></i>
                                <span>
                                    Save
                                </span>
                            </span>
                        </a>
                    </li>

                </div>
            </div>




            <!-- Admin-Add_store From-->
            <div class="m-portlet__body">
            
                    @csrf
                    <div class="container">
                        <div class="login-details">
                            <h4>Content Information</h4>
                        </div>                               
                        <div class="form-group row">
                            <label for="Technology" class="col-sm-3  col-form-label">*Technology</label>
                            <div class="col-sm-9 ">
                                <select id="technology" name="technology" class="form-control" required>
                                    <option value="">--- Select Technology ---</option>
                                    @foreach ($technology as $tech)

                                    <option value="{{ $tech->tech_id }}" />{{ $tech->technology_name }}</option>
                                    @endforeach
                                </select>
                                  <label><span id="tech_result"></span></label>
                               
                            </div>
                           

                        </div>
                       
                         <div class="form-group row">
                             
                            <label for="Sub Technology" class="col-sm-3  col-form-label">*SubTechnology</label>
                           
                                
                                     <div class="col-lg-9">
                                         <select id="sub_technology" name="sub_technology" class="form-control" required>
                                                <option value="">--- Select SubTechnology ---</option>
                                                    @foreach ($sub_technology as $sub_tech)

                                                        <option value="{{ $sub_tech->id }}" />{{ $sub_tech->title }}</option>
                                                    @endforeach
                                        </select>
                                          <label><span id="sub_tech_result"></span></label>
                                    
                                 <div class="col-lg-3">
                                        <button type="button" class="btn btn-primary darkblue_btn add_new_tech" data-toggle="modal" data-target="#technology_modal">+</button>
                                 </div>
                            </div>


                        </div>
                           <div class="form-group row">
                            <label for="tags" class="col-sm-3  col-form-label">*Tags:</label>
                            <div class="col-sm-9 ">
                                <input type="text" class="form-control" id="tags" name="tags" autocomplete="off" placeholder="Please Enter Tags ">
                                <label><span id="tagsresult"></span></label>
                            </div>
                        </div>
                       
                       <div class="form-group row">
                            <label class="col-sm-3  col-form-label">*Content</label>
                            <div class="col-lg-9">
                                 <div id="summernote" name="summernote"></div>
                                  <div class="col-xs-12 text-right">
                                   <span id="editor_result"></span>
                                  </div>
                            </div>
                           
                        </div>
                       
                    </div>
             
            </div>
        </div>
        <!-- Admin-Add_store From End-->
        <!-- END EXAMPLE TABLE PORTLET-->
    </div>
    </form>         
    <!-- END :: main Content-->
</div>
<div id="technology_modal" class="modal fade bid_add_technology" role="dialog">
    <div class="modal-dialog modal-dialog-centered">

        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Add New Sub Technology</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <form action="SaveTechnology" method="post" id="SaveTechnology">
                @csrf
                <input type="hidden" name="hdn_user_id" value="" id="hdn_user_id">
                <div class="modal-body">
                    <div class="form-group techName"> 
                        <label for="tech_name">Sub Technology Name<span class="required">*</span></label>
                        <input type="text" name="sub_tech_name" id="sub_tech_name" maxlength="50">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success" data-dismiss="" id="SaveNewTech">Save</button>
                    <button type="reset" class="btn btn-default CancelAddClientTech" data-dismiss="modal" onClick="this.form.reset()">Cancel</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
      var APP_URL = {!! json_encode(url('/')) !!};
    $(document).ready(function(){
      $('#summernote').summernote({ height: 200});
     $('.note-codable').attr('name', 'body').html('{{old('body')}}');
    });
    
      $('#technology').blur(function ()
        {
            var technology=$("#technology").val();
            if (technology == '')
            {
                $('#tech_result').html('<span class="text-danger">Please Select Technology</span>');
                document.getElementById('register').style.pointerEvents = 'none';
            }
            else {
                $('#tech_result').html('<span class="text-success"></span>');
                document.getElementById('register').style.pointerEvents = 'auto';
            }

        });
        $('#sub_technology').blur(function ()
        {
            var sub_technology=$("#sub_technology").val();
            if (sub_technology == '')
            {
                $('#sub_tech_result').html('<span class="text-danger">Please Select Sub Technology</span>');
                document.getElementById('register').style.pointerEvents = 'none';
            }
            else {
                $('#sub_tech_result').html('<span class="text-success"></span>');
                document.getElementById('register').style.pointerEvents = 'auto';
            }

        });
      
         $('.insertrecord').blur(function ()
        {
            var technology=$("#technology").val();
            var sub_technology=$("#sub_technology").val();
            var tags=$("#tags").val();
           
            if (sub_technology == '')
            {
                $('#sub_tech_result').html('<span class="text-danger">Please Select Sub Technology</span>');
               
            }
            else {
                $('#sub_tech_result').html('<span class="text-success"></span>');
                document.getElementById('register').style.pointerEvents = 'auto';
            }
            if (technology == '')
            {
                $('#tech_result').html('<span class="text-danger">Please Select Technology</span>');
               
            }
            else {
                $('#tech_result').html('<span class="text-success"></span>');
                document.getElementById('register').style.pointerEvents = 'auto';
            }
          

        });
//         $('#myform').on('submit', function (e) {
//                var technology=$("#technology").val();
//                var sub_technology=$("#sub_technology").val();
//                var editor=$("#summernote").code();
//                  $(".error").remove();
// 
//                if (technology.length < 1) {
//                  $('#technology').after('<span class="error">This field is required</span>');
//                }
//                if (sub_technology.length < 1) {
//                  $('#sub_technology').after('<span class="error">This field is required</span>');
//                }
//         });
        
     $('.insertrecord').on('click', function (e) {
         debugger;
         var technology=$("#technology").val();
         var sub_technology=$("#sub_technology").val();
         var tags=$("#tags").val();
         var editor=$("#summernote").code();
         var maxeditor=$("#summernote").code().replace(/<\/?[^>]+(>|$)/g, "");
         var edittextlength=maxeditor.length;
         
         
       
         
         if(editor=='' || editor=='<p><br></p>'){
             $('#editor_result').html('<span class="text-danger"> Please Enter Text In Editor</span>');
              
         }
         else if(edittextlength>5000)
         {
              $('#editor_result').html('<span class="text-danger">Text Not More than <b>5000</b></span>');
         }
         
         else{
        var _token= jQuery('input[name="_token"]').val();
        
          $.ajax({
                url: 'savecontent',
                 headers: {
        'X-CSRF-TOKEN': _token
    },
                type: 'post',
                dataType: 'html',
                data: {'_token':_token,'technology': technology,'sub_technology':sub_technology,'tags':tags,'editor':editor},
                success: function (res) {
                    debugger;
                    location.href = APP_URL+"/content_list";
                },
              

            });
        }

    });  
   
     


 $('#SaveNewTech').on('click', function (e) {

        debugger;
        e.preventDefault();
        $('.success').empty();
        $('.error').remove();
        var tname = $('#sub_tech_name').val().trim();
      
        if (tname == "")
        {
            $('#sub_tech_name').after('<span class="error" style="color:red">Please Enter Technology Name</span>');
            return false;
        }
        else
        {
           
            $.ajax({
                
                url: 'savesubtech',
                type: 'GET',
                dataType: 'json',
                data: {'tech': tname},
                success: function (res) {
//                    debugger;
                    if (res == 0)
                    {
                        $('#sub_tech_name').after('<span class="error" style="color:red">Technology Already Exists</span>');
                        return false;
                    }
                    else if (res == -1)
                    {
                        location.reload();
                    }
                    else
                    {
                        $('.error').remove();
                        $('#sub_tech_name').val('');
//                        $('.dropdown-menu.inner').append('<li data-original-index="'+res+'"><a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"><span class="text">' + tname + '</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>');
//                        $('#technology').append('<option value="' + res + '">' + tname + '</option>')
                        $('.modal-footer').after('<span class="success" style="color:green">Sub Technology added successfully</span>');
                        $('#technology_modal').modal('hide');
                        $('.success').empty();
                        location.reload();
                    }
                },
               
            });
        }
    });
   
    
    
</script>

 
@stop