@extends('layouts.admin')

@section('content')

@section('content')
<!--
<div class="row">
    <h3>Templates</h3>
    <div class="col-md-4">
        <!--
        <div class="panel panel-default">
            <div class="panel-heading">SMS Templates List</div>
            <div class="panel-body">
                
            </div>
        </div> 
        <div class="panel-group" id="templates-acc" role="tablist" area-multiselectable=true>
            <div class="panel panel-default" id="smstemplates">
                <div class="panel-heading" role="tab" id="sms-heading">
                    <button type="button" class="btn btn-block" data-target="#sms-body" data-toggle="collapse" area-expanded="true" area-controls="sms-body">SMS Templates</button>
                </div>
                <div class="collapse in panel-collapse" area-labeledby="sms-heading" data-parent="#templates-acc" role="tabpanel" id="sms-body"> 
                <div class="panel-body" >
                    <ul class="boxed-ul">
                        <li class="hvr-back-pulse sms template" data-id = "10">Template One</li>
                        <li class="hvr-back-pulse sms template" data-id = "12">Template Two</li>
                    </ul>
                </div>
                </div>
            </div>
            <div class="panel panel-default" id="emailtemplates">
                <div class="panel-heading" id="email-acc-btn">
                    <button type="button" class="btn btn-block collapsed" data-target="#email-body" data-toggle="collapse" area-expanded="false" area-controls="email-body">E-mail Templates</button>
                </div>
                <div class="collapse" area-labeledby="email-acc-btn" role="tabpanel" data-parent="#templates-acc" id="email-body"> 
                <div class="panel-body">
                    <ul class="boxed-ul">
                        <li class="hvr-back-pulse email template">Template One</li>
                        <li class="hvr-back-pulse email template">Template Two</li>
                    </ul>
                </div>
                </div>
            </div>
            <div class="panel panel-default" id="wptemplates">
                <div class="panel-heading" id="wp-acc-btn">
                    <button type="button" class="btn btn-block collapsed" role="tabpanel" data-target="#wp-body" data-toggle="collapse" area-expanded="false" area-controls="wp-body">Whatsapp Templates</button>
                </div>
                <div class="collapse" area-labeledby="wp-acc-btn" data-parent="#templates-acc" id="wp-body"> 
                <div class="panel-body">
                    <ul class="boxed-ul">
                        <li class="hvr-back-pulse wp template">Template One</li>
                        <li class="hvr-back-pulse wp template">Template Two</li>
                    </ul>
                </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="panel panel-default">
            <div class="panel-heading">Template Source</div>
            <div class="panel-body">
                
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="panel panel-default">
            <div class="panel-heading">Preview</div>
            <div class="panel-body">
                
            </div>
        </div>
    </div>
</div> -->
<div class="row">
<div class="col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading">Columns In Excel</div>
                <div class="panel-body left">
				<ul class="source connected">
                    					@foreach ($colcollection['original'] as $list)
					<li data-id ="{{$list}}"><span class="disptext" style="display:block">{{ $list}}</span>
					<select class="selectpicker" multiple data-style="btn-info"  >
					@foreach ($ddlist as $key => $list2)
					@if(!empty($colcollection['ddlist'][$i]))
					<option  > {{$list2->category}} </option>
					@else
					<option> {{$list2->category}} </option>	
					@endif
					@endforeach
										</select></li>
					@endforeach
				</ul>
                </div>
            </div>
			</div>
			<div class="col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading">Viewable</div>
                <div class="panel-body right">
                    <ul id="viewlist" class="target connected">
					<li class="placeholder">Drop To View List</li>
					@if(count($colcollection)>2)
					@foreach ($colcollection['viewlist'] as $list)
					<li data-id ="{{$list}}">{{ $list}}<a href='#' class='dismiss'>x</a></li>
					@endforeach
					@endif
					</ul>
                </div>
            </div>
			</div>
			<div class="col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading">Editable</div>
                <div class="panel-body right">
                    <ul id="editlist" class="target connected">
					<li class="placeholder">Drop To Edit List</li>
					@if(count($colcollection)>2)
					@foreach ($colcollection['editlist'] as $list)
					<li data-id ="{{$list}}">{{ $list}}<a href='#' class='dismiss'>x</a></li>
					@endforeach
					@endif
					</ul>
                </div>
            </div>
			</div>
			</div>
			<div class="row">
			<button type="button" id="save_work" class="btn btn-block">Save And Assign To Staff</button>
</div>

<style>

ul.source, ul.target, .boxed-ul {
  min-height: 50px;
  margin: 0px 25px 10px 0px;
  padding: 2px;
  border-width: 1px;
  border-style: solid;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  list-style-type: none;
  list-style-position: inside;
}
ul.source {
  border-color: #f8e0b1;
}
ul.target {
  border-color: #add38d;
}
@-webkit-keyframes hvr-back-pulse {
  50% {
    background-color: #ffd58c;
  }
}
@keyframes hvr-back-pulse {
  50% {
    background-color: #ffd58c;
  }
}
.hvr-back-pulse.active {
    background-color: #2098D1;
    //color:white;
    border: 3px solid;
}
.hvr-back-pulse {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  overflow: hidden;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-property: color, background-color;
  transition-property: color, background-color;
}
.hvr-back-pulse:hover, .hvr-back-pulse:focus, .hvr-back-pulse:active {
  -webkit-animation-name: hvr-back-pulse;
  animation-name: hvr-back-pulse;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.source li, .target li, .boxed-ul li {
  margin: 5px;
  padding: 5px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  color: #c09853;
  background-color: #fcf8e3;
  border: 1px solid;
  padding: 5px 15px;
}
.source .filter-option, .target .filter-option {
    color: white;
}
.source li {
  background-color: #fcf8e3;
  border: 1px solid #fbeed5;
  color: #c09853;
}
.target li {
  background-color: #ebf5e6;
  border: 1px solid #d6e9c6;
  color: #468847;
}
.sortable-dragging {
  border-color: #ccc !important;
  background-color: #fafafa !important;
  color: #bbb !important;
}
.sortable-placeholder {
  height: 40px;
}
.source .sortable-placeholder {
  border: 2px dashed #f8e0b1 !important;
  background-color: #fefcf5 !important;
}
.target .sortable-placeholder {
  border: 2px dashed #add38d !important;
  background-color: #f6fbf4 !important;
}
body > li {
  width: 177px;
  margin: 5px;
  padding: 5px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  list-style-type: none;
  list-style-position: inside;
  border-width: 1px;
  border-style: solid;
  border-color: #ccc !important;
  background-color: #fafafa !important;
  color: #bbb !important;
}
.listActive {
  border: 1px solid #ccc;
  background-color: #fcfcfc;
  padding: 0.5em 0 3em 0 !important;
}
.placeholder {
  list-style-type: none;
  text-align: center;
  font-style: italic;
  border: 1px dashed #ddd !important;
  background-color: #fff !important;
  color: #aaa !important;
}
.dismiss {
  float: right;
  position: relative;
  top: -8px;
  line-height: 20px;
  font-size: 12px;
  font-weight: bold;
  text-decoration: none !important;
  color: #468847;
}
</style>
<script>
$(document).ready(function(){
    //$.post('{{url('admin/manage/getTemplates')}}',{},function(d){});
});
    $(".sms.template").click(function(e){
        console.log($(e.currentTarget).data());
        
    })
    $(".email.template").click(function(e){
        console.log($(e.currentTarget).data());
        
    })
    $(".wp.template").click(function(e){
        console.log($(e.currentTarget).data());
        
    })
</script>
			
@endsection



@endsection

@section('title')
<h1 class="workid" id="{{$workid}}" >Edit Work "{{$workname}}"</h1>
@endsection