@extends('layouts.main')

@section('container')


<style>
    a{cursor: pointer;}
    .btn-hide{display:none}
</style>
<div class="page-title">
    <h1>
        Company Description
    </h1>
</div>

 <div class="container-fluid main-content">
    
      
    
     
       
        <div class="row">
        	
          <div class="col-lg-12">
          	 <div class="widget-container fluid-height clearfix">
              
              <div class="widget-content padded clearfix">
              	  <details>
  <summary> 
  	<div class="btn-group btn btn-sm btn-info-outline pull-left"><i class="fa fa-plus"></i>Add Company category</div></summary>
<div class="row">
              <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                  <div class="x_title">
                    <h2>Add New Category</h2>
                  	<div class="clearfix"></div>
                  </div>
                  <div class="x_content">
                    <br>
                    <form action="{{url('panel/company')}}" method="post" enctype="multipart/form-data" id="demo-form2" data-parsley-validate="" class="form-horizontal form-label-left" >
{{csrf_field()}}
                      <div class="form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name">Header Name <span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <input type="text" id="first-name" required="required" name="company" class="form-control col-md-7 col-xs-12">
                        </div>
                      </div>
                      <div class="row">    
        <div class="col-xs-12 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">  
            <!-- image-preview-filename input [CUT FROM HERE]-->
            <div class="input-group image-preview">
                <input type="text" class="form-control image-preview-filename" name="upload[]" disabled="disabled"> <!-- don't give a name === doesn't send on POST/GET -->
                <span class="input-group-btn">
                    <!-- image-preview-clear button -->
                    <button type="button" class="btn btn-default image-preview-clear" style="display:none;">
                        <span class="glyphicon glyphicon-remove"></span> Clear
                    </button>
                    <!-- image-preview-input -->
                    <div class="btn btn-default image-preview-input">
                        <span class="glyphicon glyphicon-folder-open"></span>
                        <span class="image-preview-input-title">Browse</span>
                        <input type="file" accept="image/png, image/jpeg, image/gif" name="upload[]"/> <!-- rename it -->
                        <input type="hidden" name="title" value="company">
                    </div>
                </span>
            </div><!-- /input-group image-preview [TO HERE]--> 
        </div>
    </div>
    <style>
    .image-preview-input {
    position: relative;
	overflow: hidden;
	margin: 0px;    
    color: #333;
    background-color: #fff;
    border-color: #ccc;    
}
.image-preview-input input[type=file] {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	padding: 0;
	font-size: 20px;
	cursor: pointer;
	opacity: 0;
	filter: alpha(opacity=0);
}
.image-preview-input-title {
    margin-left:2px;
}
    </style>
    <script>
    $(document).on('click', '#close-preview', function(){ 
    $('.image-preview').popover('hide');
    // Hover befor close the preview
    $('.image-preview').hover(
        function () {
           $('.image-preview').popover('show');
        }, 
         function () {
           $('.image-preview').popover('hide');
        }
    );    
});

$(function() {
    // Create the close button
    var closebtn = $('<button/>', {
        type:"button",
        text: 'x',
        id: 'close-preview',
        style: 'font-size: initial;',
    });
    closebtn.attr("class","close pull-right");
    // Set the popover default content
    $('.image-preview').popover({
        trigger:'manual',
        html:true,
        title: "<strong>Preview</strong>"+$(closebtn)[0].outerHTML,
        content: "There's no image",
        placement:'bottom'
    });
    // Clear event
    $('.image-preview-clear').click(function(){
        $('.image-preview').attr("data-content","").popover('hide');
        $('.image-preview-filename').val("");
        $('.image-preview-clear').hide();
        $('.image-preview-input input:file').val("");
        $(".image-preview-input-title").text("Browse"); 
    }); 
    // Create the preview image
    $(".image-preview-input input:file").change(function (){     
        var img = $('<img/>', {
            id: 'dynamic',
            width:250,
            height:200
        });      
        var file = this.files[0];
        var reader = new FileReader();
        // Set preview image into the popover data-content
        reader.onload = function (e) {
            $(".image-preview-input-title").text("Change");
            $(".image-preview-clear").show();
            $(".image-preview-filename").val(file.name);            
            img.attr('src', e.target.result);
            $(".image-preview").attr("data-content",$(img)[0].outerHTML).popover("show");
        }        
        reader.readAsDataURL(file);
    });  
});
    </script>
                    
                      <div class="ln_solid"></div>
                      <div class="form-group">
                        <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
                        
						  <button class="btn btn-primary" type="reset">Reset</button>
                          <button type="submit" class="btn btn-success">Submit</button>
                        </div>
                      </div>

                    </form>
                  </div>
                </div>
              </div>
            </div>
</details>
              	
                <table class="table table-bordered table-striped" id="dataTable1">
                  <thead>
                    <th class="check-header hidden-xs">
                     Sr
                    </th>
                     <th>
                    Image
                    </th>

                    <th>
                      First Name
                    </th>
                    <th>
                      URL
                    </th>
                    <th class="hidden-xs">
                      Date Added
                    </th>
                    <th class="hidden-xs">
                      Status
                    </th>
                    <th class="hidden-xs">
                      Skip SubCategory
                    </th>
                 
                  </thead>
                  <tbody>
                  	@if(!empty($fetch))
                  	   @foreach($fetch as $dval)
                    @php
                        $module=json_decode($dval,true);
                        
                     @endphp
      	
      	        
      
           @endforeach
           	@endif  
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
        <!-- end DataTables Example -->
      </div>
<div class="row" style="display:none">
    <div class="col-lg-1"></div>
    <div class="col-lg-10">
        <div class="widget-container fluid-height clearfix">
            @if (session('message'))
            <div class="alert alert-success flash">
                {{ session('message') }}
            </div>
            @endif
            <div class="widget-content padded clearfix">
                <div class="row">
                    <!-- <div class="col-md-2">
                         <div class="btn-group">
                             <a class="btn btn-danger-outline" data-toggle="modal" href="#delete_multiple" id="add-row" disabled=""><i class="fa fa-trash-o"></i>Delete Selected</a>
                            </div>
                     </div> -->
                    <div class="col-md-2">
                        <div class="btn-group">
                            <a class="btn btn-sm btn-info-outline pull-right" data-toggle="modal" href="#staticc" id="add-row"><i class="fa fa-plus"></i>Add Company category</a>
                        </div>
                    </div>
                    <!--<div class="col-md-4">
                        <div class="btn-group">
                            <a class="btn btn-sm btn-primary-outline pull-right" data-toggle="modal" href="#dragHeader" id="add-row"><i class="fa fa-plus"></i>Sort Detail</a>
                        </div>
                    </div>-->
                </div>
                <div class="modal-shiftfix" id="companyRecord">
                    <div class="container-fluid main-content">
                                                        </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
</div>

<style>
    .feed-back ul {
        padding: 0;
        position: relative;
        top: -9px;
    }

    .social-icons .col-87 li a{
        color:#fff;
    }

    .social-icons {
        height: 100px;
        width: 295px;
        margin-top:20px;
    }
    .feed-back {

        color: #fff;
        cursor: pointer;
        position: relative;
        text-align: center;
        width: 30px;
        -webkit-box-shadow: -5px 0px 3px -3px rgba(0,0,0,0.32);
        -moz-box-shadow: -5px 0px 3px -3px rgba(0,0,0,0.32);
        box-shadow: -5px 0px 3px -3px rgba(0,0,0,0.32);
    }
    .col-87 {
        background: none repeat scroll 0 0 #fff;
        display: none;
        float: left;
        height: 100px;
        width: 265px;
        -webkit-box-shadow: -6px 2px 5px 1px rgba(0,0,0,0.37);
        -moz-box-shadow: -6px 2px 5px 1px rgba(0,0,0,0.37);
        box-shadow: -6px 2px 5px 1px rgba(0,0,0,0.37);
    }
    .col-87 ul {
        float: left;
        padding: 24px 16px 14px;
    }
    .col-87 ul li {
        background: #162983;
        border-radius: 35px;
        float: left;
        height: 50px;
        list-style: outside none none;
        margin-right: 8px;
        width: 50px;
        -webkit-box-shadow: inset 1px -7px 5px 0px rgba(0,0,0,0.37);
        -moz-box-shadow: inset 1px -7px 5px 0px rgba(0,0,0,0.37);
        box-shadow: inset 1px -7px 5px 0px rgba(0,0,0,0.37);
    }
    .col-87 ul li:hover{
        background:#777676;
        cursor:pointer;
    }
    .trash1 {
        left: 19px;
        position: relative;
        top: 15px;
    }

</style>

<!-- end DataTables Example -->

<!--Facilties Confirmation model-->
<div id="staticc" class="modal fade" tabindex="-1" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="container">
            <div class="row">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times"></i></button>
                        <h4 class="modal-title">Create a New Company List</h4>
                    </div>
                    <form action="{{url('company')}}" method="post" enctype="multipart/form-data">


                        {!! csrf_field() !!}
                        <div class="modal-body">
                            <div class="picture-container">
                                <div class="picture">

                                    <img src="{{URL::asset('images/logo.png')}}" class="picture-src" id="wizardPicturePre" title="">
                                    <input type="file" id="wizard-pic" class="" name="upload[]" >
                                </div>
                                <h6 class="">Choose Picture</h6>

                            </div>
                            <div class="form-group" >
                                <label for="userEmail">Add New Category</label>
                                <input type="text" class="form-control" name="company" >
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <input type="hidden" value="company"  name="title">
                        <div class="modal-footer">
                            <button type="submit"  name="submit"  class="btn btn-success btn-icon"><i class="fa fa-check"></i>Submit</button>
                            <button type="button" class="btn btn-default btn-icon" data-dismiss="modal"><i class="fa fa-times-circle"></i> Cancel</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Delete Multiple confirmation -->
<div id="delete_multiple" class="modal fade" tabindex="-1" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <form action="delete_property" method="post">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <h4 class="modal-title">Confirmation</h4>
                </div>
                <div class="modal-body">
                    <p> Would you like to Delete the Record? </p>
                </div>
                <div class="modal-footer">
                    <button type="button" data-dismiss="modal" class="btn dark btn-outline">Cancel</button>
                    <button type="button"  onclick="multiDelete();" class="btn green">Continue Task</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!--script for getting checkbox value-->
<script src="{{ URL::asset('drag/j/dropMe1.js') }}"></script>
<script type="text/javascript">
    function multiDelete()
    {	var token = $("input[name=_token]").val();
        var favorite = [];
        $.each($("input[name='multidelete']:checked"), function()
        {
            favorite.push($(this).val());


        });
    }
</script>

<!--end Script here-->
<script>
    function  disable(val){

        if(val==""){

            $("#header_val").show();
        }
        else{
            $("#header_val").hide();

        }

    }
</script>
<script>
    $(document).ready(function() {
        $("#userform1").validate({
            rules: {
                property_header1: {},
                property_header: {
                    required: true
                },
                property_type: {
                    required: true
                }

            },
            messages: {
                property_header1: "",
                property_header: "Please enter a valid property header ",
                property_type: {
                    required: "Please enter your property type"
                }
            }
        });
    });
</script>
<script>
    $('.dropme').dropme('enable');
    $('.exclude').dropme({
        items: ':not(.disabled)'
    });
    $('.connected').dropme({
        linkTo: '.connected'
    });



</script>
<!--script for image Preview-->


<style>
    /*Profile Pic Start*/
    .picture-container{
        position: relative;
        cursor: pointer;
        text-align: center;
    }
    .picture{
        width: 106px;
        height: 106px;
        background-color: #999999;
        border: 4px solid #CCCCCC;
        color: #FFFFFF;
        border-radius: 50%;
        margin: 0px auto;
        overflow: hidden;
        transition: all 0.2s;
        -webkit-transition: all 0.2s;
    }
    .picture:hover{
        border-color: #2ca8ff;
    }
    .content.ct-wizard-green .picture:hover{
        border-color: #05ae0e;
    }
    .content.ct-wizard-blue .picture:hover{
        border-color: #3472f7;
    }
    .content.ct-wizard-orange .picture:hover{
        border-color: #ff9500;
    }
    .content.ct-wizard-red .picture:hover{
        border-color: #ff3b30;
    }
    .picture input[type="file"] {
        cursor: pointer;
        display: block;
        height: 100%;
        left: 0;
        opacity: 0 !important;
        position: absolute;
        top: 0;
        width: 100%;
    }

    .picture-src{
        width: 100%;

    }
    /*Profile Pic End*/
</style>




<style>
    /*******************************
* MODAL AS LEFT/RIGHT SIDEBAR
* Add "left" or "right" in modal parent div, after class="modal".
* Get free snippets on bootpen.com
*******************************/
    .modal.left .modal-dialog,
    .modal.right .modal-dialog {
        position: fixed;

        width: 320px;
        height: 100%;
        -webkit-transform: translate3d(0%, 0, 0);
        -ms-transform: translate3d(0%, 0, 0);
        -o-transform: translate3d(0%, 0, 0);
        transform: translate3d(0%, 0, 0);
    }

    .modal.left .modal-content,
    .modal.right .modal-content {
        height: 100%;
        overflow-y: auto;
    }

    .modal.left .modal-body,
    .modal.right .modal-body {
        padding: 15px 15px 80px;
    }

    /*Left*/
    .modal.left.fade .modal-dialog{
        left: -320px;
        -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
        -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
        -o-transition: opacity 0.3s linear, left 0.3s ease-out;
        transition: opacity 0.3s linear, left 0.3s ease-out;
    }

    .modal.left.fade.in .modal-dialog{
        left: 0;
    }

    /*Right*/
    .modal.right.fade .modal-dialog {
        right: -320px;
        -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
        -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
        -o-transition: opacity 0.3s linear, right 0.3s ease-out;
        transition: opacity 0.3s linear, right 0.3s ease-out;
    }

    .modal.right.fade.in .modal-dialog {
        right: 0;
    }

    /* ----- MODAL STYLE ----- */
    .modal-content {
        border-radius: 0;
        border: none;
    }

    .modal-header {
        border-bottom-color: #EEEEEE;
        background-color: #FAFAFA;
    }

    /* ----- v CAN BE DELETED v ----- */

    .demo {
        padding-top: 60px;
        padding-bottom: 110px;
    }

    .btn-demo {
        margin: 15px;
        padding: 10px 15px;
        border-radius: 0;
        font-size: 16px;
        background-color: #FFFFFF;
    }

    .btn-demo:focus {
        outline: 0;
    }

    .demo-footer {
        position: fixed;
        bottom: 0;
        width: 100%;
        padding: 15px;
        background-color: #212121;
        text-align: center;
    }

    .demo-footer > a {
        text-decoration: none;
        font-weight: bold;
        font-size: 16px;
        color: #fff;
    }
</style>
<script>
    $(document).ready(function(){

        // Prepare the preview for profile picture
        $("#wizard-pic").change(function(){

            readURL(this);
        });
    });
    function readURL(input) {


        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {

                $('#wizardPicturePre').attr('src', e.target.result).fadeIn('slow');
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
</script>
@stop