@extends('admin.layouts.app')

@section('title', 'Task Settings')

@section('content')

	<!-- TOPBAR -->
				<div class="top_bar page-content" style="min-height:534px">
					<!-- LOADER -->
					<div class="loader">
						<div class="top_status_bar load">
							<div class="progress_bar bar" style="left: 0px;">
							</div>
						</div>
					</div>
					<!-- END LOADER -->
					<!-- BREADCRUMBS -->
					<div class="breadcrumbs">
					<ul>
                        <li><a href="{{ route('admin.dashboard') }}">Home</a></li>
                        <li><a href="{{ route('admin.settings.index') }}" class="">Settings</a></li>
                        <li><a href="#" class="breadcrumb_link" onclick="return false">Task Settings</a></li>
                    </ul>
						<button class="btn btn-large pull-right help theme_btn help_btn">?</button>
					</div>
					<!-- END BREADCRUMBS -->
				</div>
				<!-- END TOPBAR -->
				<!-- PAGE CONTENT -->
				<div class="page-content">
					<div class="row">
						<div class="col-md-12">
							<!-- Begin: life time stats -->
							<div class="portlet setting_landing">
								<!-- MAIN CAPTION START -->
								<div class="portlet-title">
									<div class="caption">
                                    <h2>
                                        Task Settings
                                        <span>Setup your task pipeline status.</span>
                                    </h2>
									</div>
								</div>
								<!-- MAIN CAPTION END -->
								<hr>
								<!-- MAIN CONTENT START -->
								<div class="portlet-body">
                                    <div class="settings">
                                    <!--LEAD STAGE-->
                                        <div class="settings_inner_row">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="col-md-4">
                                                        <span class="main_title">Task Stages</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row each_row lead_stage_wrap">
                                                <div class="col-md-12">
                                                    <div class="col-md-4">
                                                        <span class="sub_heading">What steps are you following for managing a potential opportunity?</span>
                                                        <span class="sub_heading">You can define the stages here and will help you to manage your opportunities and taking appropriate actions.</span>
                                                    </div>
                                                    <div class="col-md-1"></div>
                                                        <div class="col-md-6">
                                                            <div class="row">
                                                                <div class="portlet-body">
                                                                    <div class="products box">
                                                                        <div class="header_tbl">
                                                                            <div class="row">
                                                                                <div class="col-md-12">
                                                                                    <div class="col-md-6 row_header">Task Stage</div>
                                                                                    <div class="col-md-5 row_header b4_del_header">Description</div>
                                                                                    <div class="del_header"></div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    <div class="row_wrap opportunity_stages">

                                                                @if(!is_null($tasks))
                                                                
                                                                @foreach($tasks as $o_stage)
                                                                @if($o_stage->is_reserved == 1 && $o_stage->title == "New")
                                                                <div class="row_inner_wrap">
                                                                    <div class="row">
                                                                        <input type="hidden" class="sorting" data-uuid="{{$o_stage->record_uuid}}" value="{{($o_stage->sorting == 0)?$i_sort:$o_stage->sorting}}" />
                                                                        <div class="col-md-12">
                                                                            <div class="col-md-6 inner_row">
                                                                                <input type="text" id="{{$o_stage->record_uuid}}_title" name="channel" placeholder="" value="{{$o_stage->title}}" class="form-control source" readonly>
                                                                                <i class="fa fa-check edit_source edit_field edit_field_title" data-uuid="{{$o_stage->record_uuid}}_title" data-type="stage"></i>
                                                                            </div>

                                                                            <div class="col-md-5 inner_row b4_del_header">
                                                                                <input type="text" id="{{$o_stage->record_uuid}}_description" name="description" placeholder="{{ empty($o_stage->description) || is_null($o_stage->description) ? 'Stage description...' : ''}}" value="{{$o_stage->description}}" class="form-control desc" readonly>
                                                                                <i class="fa fa-check edit_desc edit_field edit_field_description" data-uuid="{{$o_stage->record_uuid}}_description" data-type="stage"></i>
                                                                            </div>
                                                                            @if($o_stage->is_reserved == 0)
                                                                            <div class="del_icon">
                                                                                <i class="fa fa-trash-o del" data-uuid="{{$o_stage->record_uuid}}" data-type="stage" aria-hidden="true" style="visibility: visible"></i>
                                                                            </div>
                                                                            <div class="sort_arrow" data-type="stage">
                                                                                <img src="{{ asset('images/sort_arrow.png') }}">
                                                                            </div>
                                                                            <div class="sort_arrow_down" data-type="stage">
                                                                                <img src="{{ asset('images/sort_arrow_down.png') }}">
                                                                            </div>
                                                                            @endif
                                                                            <div class="add_icon" style="display: none;">
                                                                                <i class="fa fa-plus add_row"></i>
                                                                            </div>
                                                                            <div class="edit_icon" style="display: none;">
                                                                                <i class="fa fa-check edit_row"></i>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                @endif

                                                                @if($o_stage->is_reserved == 0)
                                                                
                                                                <div class="row_inner_wrap {{($o_stage->is_reserved == 0)?'reserved':''}}">
                                                                    <div class="row">
                                                                        <input type="hidden" class="sorting" data-uuid="{{$o_stage->record_uuid}}" value="{{($o_stage->sorting == 0)?$i_sort:$o_stage->sorting}}" />
                                                                        <div class="col-md-12">
                                                                            <div class="col-md-6 inner_row">
                                                                                <input type="text" id="{{$o_stage->record_uuid}}_title" name="channel" placeholder="" value="{{$o_stage->title}}" class="form-control source stage" readonly>
                                                                                <i class="fa fa-check edit_source edit_stage edit_field edit_field_title" data-uuid="{{$o_stage->record_uuid}}_title" data-type="stage"></i>
                                                                            </div>

                                                                            <div class="col-md-5 inner_row b4_del_header">
                                                                                <input type="text" id="{{$o_stage->record_uuid}}_description" name="description" placeholder="{{ empty($o_stage->description) || is_null($o_stage->description) ? 'Stage description...' : ''}}" value="{{$o_stage->description}}" class="form-control desc" readonly>
                                                                                <i class="fa fa-check edit_desc edit_field edit_field_description" data-uuid="{{$o_stage->record_uuid}}_description" data-type="stage"></i>
                                                                            </div>
                                                                            @if($o_stage->is_reserved == 0)
                                                                            <div class="del_icon">
                                                                                <i class="fa fa-trash-o del" data-uuid="{{$o_stage->record_uuid}}" data-type="stage" aria-hidden="true" style="visibility: visible"></i>
                                                                            </div>
                                                                            <div class="sort_arrow " data-type="stage">
                                                                                <img src="{{ asset('images/sort_arrow.png') }}">
                                                                            </div>
                                                                            <div class="sort_arrow_down" data-type="stage">
                                                                                <img src="{{ asset('images/sort_arrow_down.png') }}">
                                                                            </div>
                                                                            @endif
                                                                            <div class="add_icon" style="display: none;">
                                                                                <i class="fa fa-plus add_row"></i>
                                                                            </div>
                                                                            <div class="edit_icon" style="display: none;">
                                                                                <i class="fa fa-check edit_row"></i>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                @endif
                                                                @if($o_stage->is_reserved == 1 && $o_stage->title == "Completed" || $o_stage->title == "In progress" || $o_stage->title == "Accepted")
                                                                
                                                                <div class="row_inner_wrap fixed">
                                                                    <div class="row">
                                                                        <input type="hidden" class="sorting" data-uuid="{{$o_stage->record_uuid}}" value="{{($o_stage->sorting == 0)?$i_sort:$o_stage->sorting}}" />
                                                                        <div class="col-md-12">
                                                                            <div class="col-md-6 inner_row">
                                                                                <input type="text" id="{{$o_stage->record_uuid}}_title" name="channel" placeholder="" value="{{$o_stage->title}}" class="form-control source" readonly>
                                                                                <i class="fa fa-check edit_source edit_field edit_field_title" data-uuid="{{$o_stage->record_uuid}}_title" data-type="stage"></i>
                                                                            </div>

                                                                            <div class="col-md-5 inner_row b4_del_header">
                                                                            <input type="text" id="{{$o_stage->record_uuid}}_description" name="description" placeholder="{{ empty($o_stage->description) || is_null($o_stage->description) ? 'Stage description...' : ''}}" value="{{$o_stage->description}}" class="form-control desc" readonly>
                                                                                <i class="fa fa-check edit_desc edit_field edit_field_description" data-uuid="{{$o_stage->record_uuid}}_description" data-type="stage"></i>
                                                                            </div>

                                                                            <div class="add_icon" style="display: none;">
                                                                                <i class="fa fa-plus add_row"></i>
                                                                            </div>
                                                                            <div class="edit_icon" style="display: none;">
                                                                                <i class="fa fa-check edit_row"></i>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                @endif
                                                                                                                                @endforeach
                                                                @endif
                                                                <div class="row_inner_wrap">
                                                                    <div class="row">
                                                                        <input type="hidden" class="sorting" data-uuid="" value="" />
                                                                        <div class="col-md-12">
                                                                            <div class="col-md-6 inner_row">
                                                                                <input type="text" name="title" placeholder="Task stage..." value="" class="form-control source title">
                                                                                <i class="fa fa-check edit_source edit_field edit_field_title" data-uuid="" data-type="stage"></i>
                                                                            </div>
                                                                            <div class="col-md-5 inner_row b4_del_header">
                                                                                <input type="text" name="description" placeholder="Stage description..." value="" class="form-control desc description" >
                                                                                <i class="fa fa-check edit_desc edit_field edit_field_description" data-uuid="" data-type="stage"></i>
                                                                            </div>
                                                                            <div class="del_icon">
                                                                                <i class="fa fa-trash-o del" data-uuid="" data-type="stage" aria-hidden="true" style=""></i>
                                                                            </div>
                                                                            <div class="sort_arrow" data-type="stage" style="display: none;">
                                                                                <img src="{{ asset('images/sort_arrow.png') }}">
                                                                            </div>
                                                                            <div class="sort_arrow_down" data-type="stage" style="display: none;">
                                                                                <img src="{{ asset('images/sort_arrow_down.png') }}">
                                                                            </div>
                                                                            <div class="add_icon" style="">
                                                                                <i class="fa fa-plus add_row" data-type="stage"></i>
                                                                            </div>
                                                                            <div class="edit_icon" style="display: none;">
                                                                                <i class="fa fa-check edit_row"></i>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>  
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
						</div>
					<!-- MAIN CONTENT END -->
					</div>
					<!-- End: life time stats -->
				</div>
	<div id="sweetalert_wrap" class="sweet_alert_wrap">
    <!-- Sweet alert -->
    <div class="sweet-alert showSweetAlert" data-custom-class="" data-has-cancel-button="true" data-has-confirm-button="true" data-allow-outside-click="false" data-has-done-function="true" data-animation="pop" data-timer="null" >
        <div class="sa-icon sa-warning pulseWarning" style="display: block;">
            <span class="sa-body pulseWarningIns"></span>
            <span class="sa-dot pulseWarningIns"></span>
        </div>
        <h2>Are You Sure?</h2>
        <p>it will delete this channel straight away.</p>
        <div class="sa-button-container">
            <button class="cancel" tabindex="2">Cancel</button>
            <div class="sa-confirm-button-container">
                <button class="confirm" tabindex="1">Confirm</button>
            </div>
        </div>
    </div>
</div>


@stop
@section('styles')
<link rel="stylesheet" type="text/css" href="{{ asset('css/settings.css') }}" />
@stop
@section('admin_js')
<script type="text/javascript">
	
	$(document).on('click', '.add_row', function () {
        var parent_target = $(this).parent().parent().parent().parent();
        var this_parent = $(this).parent();
        var title = parent_target.find('.title').val();
        var description = parent_target.find('.description').val();
        var type_data = $(this).attr('data-type');
        if (title != '') {
            $('#busyloading').show();
             $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('input[name="_token"]').val()
                }
            });
            var url = "{{route('admin.settings.task-settings.store')}}";
            var formData = new FormData();
            formData.append('title', title);
            formData.append('description', description);
            $.ajax({
                type: 'POST',
                url: url,
                data: formData,
                contentType: false,
                processData: false,
                success: function (response) {
                    if (response['status'] == '1000') {
                        parent_target.find('.title').attr('id', response['uuid'] + '_title');
                        parent_target.find('.description').attr('id', response['uuid'] + '_description');
                        parent_target.find('.edit_field_title').attr('data-uuid', response['uuid'] + '_title');
                        parent_target.find('.edit_field_description').attr('data-uuid', response['uuid'] + '_description');
                        parent_target.find('.del').attr('data-uuid', response['uuid']);
                        parent_target.find('.title').removeClass('error_custom');

                        //For adding new dummy row
                        this_parent.hide();
                        parent_target.find('.del').css('visibility', 'visible');
                        if (parent_target.is(':last-child')) {

                            parent_target.find('.title').removeClass('error_custom');
                            var clone = parent_target.clone();

                            clone.find('.select_department').removeClass('select2');
                            clone.find('.select_designation').removeClass('select2');
                            clone.find("span.select2").remove();

                            clone.find(".select_department").select2({
                                'placeholder': '--Select--'
                            });
                            clone.find(".select_designation").select2({
                                'placeholder': '--Select--'
                            });
                            clone.find('select').val(0);
                            clone.find('input').val('');

                            clone.find('.del').css('visibility', 'hidden');
                            clone.find('.add_icon').show();
                            parent_target.parent().append(clone);
                            parent_target.find('input').attr('readonly', 'readonly');
                            clone.find('input').removeAttr('readonly');

                            //Sorting rows
                            parent_target.find('.sort_arrow').show();
                            parent_target.find('.sort_arrow_down').show();

                            parent_target.insertBefore(".opportunity_stages .fixed:first");

                            $('.lead_stage_wrap .row_wrap .row_inner_wrap .sort_arrow_down').removeClass('unclickable');
                            $('.lead_stage_wrap .row_wrap .row_inner_wrap .sort_arrow').removeClass('unclickable');
                            $('.lead_stage_wrap .row_wrap .row_inner_wrap:nth-child(2) .sort_arrow').addClass('unclickable');
                            $('.lead_stage_wrap .row_wrap .row_inner_wrap:nth-last-child(5) .sort_arrow_down').addClass('unclickable');
                        }
                            if (type_data == 'stage') {
                            parent_target.find('.sorting').val(response['sorting']);
                            parent_target.find('.sorting').attr('data-uuid', response['uuid']);
                            }

                        alertbox('success','Task stage added successfully.');
                    } else if(response['status'] == '3000'){
                        alertbox('warning',response.message);
                    }  else {
                        alertbox('danger','Something went wrong. Please try again later or contact to administrator.');
                    }
                    $('#busyloading').hide();
                    return false;
                },error: function (res) {
                    var errors = jQuery.parseJSON(res.responseText);
                    $.each(errors, function (key, val) {
                        alertbox('danger', val);
                        $('#busyloading').hide();
                        return false;
                    });
                }
            });
        } else {
            alertbox('danger','There are errors on page');
            parent_target.find('.title').addClass('error_custom');
            $('#busyloading').hide();
            return false;
        }
    });

    //On click to edit
    $('body').on('click', '.stage', function () {
        var attr = $(this).attr('readonly');

        if (typeof attr !== typeof undefined && attr !== false) {
            $(this).removeAttr('readonly').focus();
            $(this).parent().find('.edit_stage').css('visibility', 'visible');
        }
    });
    $('body').on('click', '.edit_stage', function () {
        $(this).css('visibility', 'hidden');
        $(this).parent().find('.stage').attr('readonly', 'readonly');
    });
    $('body').on('click', '.desc', function () {
        var attr = $(this).attr('readonly');

        if (typeof attr !== typeof undefined && attr !== false) {
            $(this).removeAttr('readonly').focus();
            $(this).parent().find('.edit_desc').css('visibility', 'visible');
        }
    });


     //Update on click tick
    $('body').on('click', '.edit_field', function () {

        var uuid = $(this).attr('data-uuid');
        var value = $('#' + uuid).val();
        
        var title = 1;
        if ($('#' + uuid).attr('name') == 'description') {
            title = 0;
        }

        if (value == '' && title == 1) {
            $('#' + uuid).addClass('error_custom');
            alertbox('danger','There are errors on page');
            return false;
        } else {
            $('#busyloading').show();
            var formData = new FormData();
            formData.append('value', value);
            formData.append('uuid', uuid);
            var url = "{{route('admin.settings.task.stage')}}";
            $.ajax({
                type: 'POST',
                url: url,
                data: formData,
                contentType: false,
                processData: false,
                success: function (response) {
                    if (response['status'] == 1000) {
                        $('input#' + uuid).parent().find('.source').attr('readonly', 'readonly');
                        $('input#' + uuid).next('.edit_field').css('visibility', 'hidden');
                         alertbox('success',response['success']);
                        $('#' + uuid).removeClass('error_custom');
                        $(this).css('visibility', 'hidden');
                        $('#' + uuid).attr('readonly', 'readonly');
                    } else if(response['status'] == 3000) {
                        alertbox('danger',response['message']);
                    }
                    $('#busyloading').hide();
                    return false;
                }
            });
        }
    });

  

        var target;
        $('body').on('click', '.del', function () {
            target = $(this).parent().parent().parent().parent();
            var uuid = $(this).attr('data-uuid');
            $('#sweetalert_wrap').show();
            $('.confirm').addClass('opportunity_stage_del');
            $(".confirm").attr("opportunity_stage",uuid);
        });

        $(document).on('click', '.cancel', function () {
            $(".confirm").removeAttr("opportunity_stage");
            $('#sweetalert_wrap').hide();
            return false;
        });

        $(document).on('click', '.opportunity_stage_del', function () {
            var uuid = $(this).attr("opportunity_stage");
            target = target;
        	$.ajax({
                            
                            method: 'DELETE',
                            url: "{{ url('/admin/settings/task-settings/') }}/"+uuid,
                            headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}'},
                            
                            success: function (response) {
                            	if (response['status'] == 1000) {

                                target.remove();
                                $('.lead_stage_wrap .row_wrap .row_inner_wrap:nth-last-child(5) .sort_arrow_down').addClass('unclickable');
                                alertbox('success',response['success']);
                                $('#busyloading').hide();
                                return false;
                                
                            	}else if(response['status'] == 3000) {
                        			alertbox('warning',response['message']);
                        			$('#busyloading').hide();
                                	return false;
                   				}
                            }
        	});
        	$('#sweetalert_wrap').hide();
                        
             });
    

    //Sorting
    $(document).ready(function () {

        var selected = 0;

        var itemlist = $('.lead_stage_wrap .row_wrap');
        var len = $(itemlist).children().length;

        len = len - 1;

        $('.lead_stage_wrap .row_wrap .row_inner_wrap:first-child .sort_arrow').addClass('unclickable');
        $('.lead_stage_wrap .row_wrap .row_inner_wrap:nth-last-child(5) .sort_arrow_down').addClass('unclickable');


        $(document).on('click','.lead_stage_wrap .sort_arrow',function (e) {

            e.preventDefault();
            var selected = $(this).parent().parent().parent().index();
            var target = $(this).parent().parent().parent();
            var curr_sorting = target.find('.sorting').val();
            var pre_val = target.prev().find('.sorting').val();
            var current_uuid = target.find('.sorting').attr('data-uuid');
            var pre_uuid = target.prev().find('.sorting').attr('data-uuid');
            $('#busyloading').show();
            var formData = new FormData();
            formData.append('curr_sorting', pre_uuid + '~' + curr_sorting);
            formData.append('next_val', current_uuid + '~' + pre_val);
            var url = "{{route('admin.settings.task.sort')}}";
            if (pre_val != 1) {
                $.ajax({
                    type: 'POST',
                    url: url,
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function (response) {
                            target.prev().find('.sorting').val(curr_sorting);
                            target.find('.sorting').val(pre_val);
                            alertbox('success','Task stage order updated successfully.');
                            if (selected > 0) {
                                jQuery($(itemlist).children().eq(selected - 1)).before(jQuery($(itemlist).children().eq(selected)));
                                // selected = selected - 1;
                                $('.lead_stage_wrap .row_wrap .row_inner_wrap .sort_arrow').removeClass('unclickable');
                                $('.lead_stage_wrap .row_wrap .row_inner_wrap .sort_arrow_down').removeClass('unclickable');
                                $('.lead_stage_wrap .row_wrap .row_inner_wrap:nth-child(2) .sort_arrow').addClass('unclickable');
                                $('.lead_stage_wrap .row_wrap .row_inner_wrap:nth-last-child(5) .sort_arrow_down').addClass('unclickable');
                            } else {
                                alertbox('danger','Something went wrong. Please try again later or contact to administrator.');
                            }
                            $('#busyloading').hide();
                            return false;
                        }
                        
                    
                });
            } else {
                alertbox('danger','Something went wrong. can not update .');
                $('#busyloading').hide();
                           
            }
        });

        $(document).on('click','.lead_stage_wrap .sort_arrow_down',function (e) {
            e.preventDefault();
            var selected = $(this).parent().parent().parent().index();
            var target = $(this).parent().parent().parent();
            var curr_sorting = target.find('.sorting').val();
            var next_val = target.next().find('.sorting').val();

            var current_uuid = target.find('.sorting').attr('data-uuid');
            var next_uuid = target.next().find('.sorting').attr('data-uuid');

            $('#busyloading').show();
            var formData = new FormData();
            formData.append('curr_sorting', current_uuid + '~' + next_val);
            formData.append('next_val', next_uuid + '~' + curr_sorting);
            var url = "{{route('admin.settings.task.sort')}}";
            $.ajax({
                type: 'POST',
                url: url,
                data: formData,
                contentType: false,
                processData: false,
                success: function (response) {
                    var result = $.parseJSON(response);
                        target.next().find('.sorting').val(curr_sorting);
                        target.find('.sorting').val(next_val);
                        alertbox('success','Task stage order updated successfully.');
                        if (selected < len) {
                            jQuery($(itemlist).children().eq(selected + 1)).after(jQuery($(itemlist).children().eq(selected)));
                            // selected = selected + 1;
                            $('.lead_stage_wrap .row_wrap .row_inner_wrap .sort_arrow').removeClass('unclickable');
                            $('.lead_stage_wrap .row_wrap .row_inner_wrap .sort_arrow_down').removeClass('unclickable');
                            $('.lead_stage_wrap .row_wrap .row_inner_wrap:nth-child(2) .sort_arrow').addClass('unclickable');
                            $('.lead_stage_wrap .row_wrap .row_inner_wrap:nth-last-child(5) .sort_arrow_down').addClass('unclickable');
                        }
                   
                    $('#busyloading').hide();
                    return false;
                }
            });


        });

    });
</script>
@stop