@extends('layouts.internal')

@section('content')
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<div class="card ">

    <div class="row">      
        <div class="col-sm-6 m-3">  
            <div class="pipleline-header">
                <div class="card-header pb-4">
                   <div class="row">  
                        <div class="col-sm-6">
                            <h4><b>Application Pipeline</b></h4>
                        </div>
                        <div class="col-sm-6">
                            <button type="button" onclick="editPipeline(this)" class="btn btn-light customize float-right"><i class="fas fa-edit"></i> Customize</button>
                        </div>
                    </div>
                </div>
                <div class="pipeline-records m-4" >
                    <ul class="list-group list-group-flush stopSortable">
                    <li class="list-group-item">New</li>

                        @foreach($pipelines as $pipeline)
                            <li class="list-group-item">{{$pipeline->name}}</li>
                        @endforeach
                    </ul>
                    <ul class="list-group list-group-flush runSortable" style="display:none">
                        <li class="list-group-item">New</li>
                    </ul>
                    <ul class="list-group list-group-flush sortable runSortable" style="display:none">
                        @foreach($pipelines as $pipeline)
                        <li class="list-group-item" id="{{$pipeline->id}}">
                            <div class="row">
                                <div class="col-sm-1"> <i class="fas fa-arrows-alt mt-2 ml-2"></i></div>
                                <div class="col-sm-5">
                                    <input type="text" value="{{$pipeline->name}}" onchange="updateValue(this, 'name', '{{$pipeline->id}}')" class="form-control pipeline_name" placeholder="Name">
                                </div>
                                <div class="col-sm-5">
                                    <select  class="form-control required_field" onchange="updateValue(this, 'required_field', '{{$pipeline->id}}')" >
                                        <option value="no_fields_required" @if($pipeline->required_field == 'no_fields_required'){{'selected'}}@endif>No fields required</option>
                                        <option value="disposition" @if($pipeline->required_field == 'disposition'){{'selected'}}@endif>Disposition</option>
                                        <option value="submission_date" @if($pipeline->required_field == 'submission_date'){{'selected'}}@endif>Submission Date</option>
                                        <option value="offer_date" @if($pipeline->required_field == 'offer_date'){{'selected'}}@endif>Offer Date</option>
                                        <option value="hire_date" @if($pipeline->required_field == 'hire_date'){{'selected'}}@endif>Hire Date</option>
                                    </select>
                                </div>
                                <div class="col-sm-1">
                                    <div class="row">
                                        <a href="javascript:;" title="Edit Disposition Record" onclick="addNewPipeline('{{$pipeline->id}}')"><i class="fas fa-edit mt-2"></i></a>
                                        <a href="javascript:;" class="ml-2" onclick="deletePipleline(this, '{{$pipeline->id}}')"><i class="fas fa-minus-circle mt-2"></i></a>
                                    </div>
                                </div>
                            </div>
                        </li>
                        @endforeach
                    </ul>
                </div>
                <div class="card-footer card-footer-color">
                    <button type="button" onclick="addNewPipeline()" class="btn btn-primary add_stage" style="display:none"><i class="fas fa-plus-circle"></i> Add Stage</button>
                </div>
            </div>
            </div>
            <div class="col-sm-5 mt-3">  
                <h4> Customize Your Application Pipeline</h4>
                <p>Gain visibility into your business by streamlining the hiring process for jobs into different stages of a candidates lifecycle for a job.</p>  
            </div>
        
    </div>

</div>
<div class="drawer drawer-right slide" tabindex="-1" role="dialog" aria-labelledby="drawer-1-title" aria-hidden="true" id="drawer-1">
    <div class="drawer-content drawer-content-scrollable" role="document">
        <div class="drawer-header">
            <h4 class="drawer-title" id="drawer-1-title">Application Pipeline</h4>
        </div>
        <div class="drawer-body">
            <form id="pipelines" autocomplete="off">
            @include('internal.pipelines.create', ['record' => []])
            </form>
        </div>
        <div class="drawer-footer">
            <div class="row">
                <div class="col-sm-6">
                    <button  class="btn btn-dark px-4 mt-3" type="button" onclick="saveRecords()">Save</button>
            </div>
            <div class="col-sm-6  text-right">
                    <button class="btn btn-dark px-4 mt-3" data-dismiss="drawer" type="button">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>
<link rel="stylesheet" href="{{ asset('css/bootstrap-drawer.css') }}">

<script src="{{ asset('js/bootstrap-drawer.js') }} "></script>

  <script>
  $(function() {
    $(".sortable").sortable({
        update: function(event, ui) { 
            updateOrder() 
        }
    });
});



function updateOrder(){
    var order= $(".sortable .list-group-item").map(function() {  
        return this.id;        
    }).get();
    $.ajax({
        type: "POST",
        data :{order:order},
        cache: false,
        url: "{{route('updateSorting')}}",

        success: function(data){
            //success
        }
    });
    return order;
}
function deletePipleline(event, id) {
    var url = "{{route('deletePipeline')}}";
    if(confirm("Are you sure you want to delete this item?")){
        $.post(url, {id:id},function(data) {
            $(event).closest('li').remove();
            toastr.success(data.message);
        })
    }
}
function updateValue(event, fieldName, id){
    var url = "{{route('updatePipeline')}}";
    var val = $(event).val();
    $.post(url, {fieldName: fieldName, id:id, value: val},function(data) {
        toastr.success(data.message);
    })
    
}
function editPipeline(event) {
    if($(event).hasClass('customize')){
        $('.stopSortable').hide();
        $('.runSortable').show();
        $('.add_stage').show();
        $(event).html(`<i class="fas fa-times"></i> Cancel`);
        $(event).removeClass('customize');
    }else{
        updateViewListing();
        $('.stopSortable').show();
        $('.runSortable').hide();
        $('.add_stage').hide();
        $(event).html(`<i class="fas fa-edit"></i> Customize`);
        $(event).addClass('customize');
    }
}
function updateViewListing() {
    var text = '';
    $('.stopSortable').html('<li class="list-group-item">New</li>');
    $('.sortable').find('li').each(function(key){
        text = $(this).find('.pipeline_name').val();
        $('.stopSortable').append(`<li class="list-group-item">${text}</li>`);

    })
}
function addNewPipeline(id = 0) {
    $('#name').val('');
    $('#id').val('');
    $('#required_field').val('no_fields_required');
    if(id == 0){
        $('.dispositionSortable').html('');
        addNewDisposition();
        updateDispositionOrder();
        $('.drawer').drawer('show');
    }else{
        $.get("{{url('users/pipeline')}}"+'/'+id+'/edit', function(data) {
        $('#pipelines').html(data.html);
            $('.drawer').drawer('show');
        })
    }

    
}

function saveRecords(){
  var formData = $('#pipelines').serializeArray();
    $.post("{{route('pipeline.store')}}", formData, function(data) {
        updateCustomizeList(data.data);
        toastr.success(data.message);
        $('.drawer').drawer('hide');
    }).fail(function(response) {
        var errors = response.responseJSON.errors;
        $.each(errors, function(index, value) {
            toastr.error(errors[index][0]);
        });
    });
}
function updateCustomizeList(data){
        if ($('#'+data.id).length)
        {
            $('#'+data.id).find('.pipeline_name').val(data.name);
            $('#'+data.id).find('.required_field').val(data.required_field);
           return;
        }
    $('.sortable').append(`<li class="list-group-item" id="${data.id}">
        <div class="row">
            <div class="col-sm-1"> <i class="fas fa-arrows-alt mt-2 ml-2"></i></div>
            <div class="col-sm-5">
                <input type="text" value="${data.name}" onchange="updateValue(this, 'name', ${data.id})" class="form-control pipeline_name" placeholder="Name">
            </div>
            <div class="col-sm-5">
                <select class="form-control required_field" onchange="updateValue(this, 'required_field', ${data.id})" >
                    <option value="no_fields_required" ${data.required_field == 'no_fields_required' ? 'selected' : ''}>No fields required</option>
                    <option value="disposition" ${data.required_field == 'disposition' ? 'selected' : ''}>Disposition</option>
                    <option value="submission_date" ${data.required_field == 'submission_date' ? 'selected' : ''}>Submission Date</option>
                    <option value="offer_date" ${data.required_field == 'offer_date' ? 'selected' : ''}>Offer Date</option>
                    <option value="hire_date" ${data.required_field == 'hire_date' ? 'selected' : ''}>Hire Date</option>
                </select>
            </div>
            <div class="col-sm-1">
                <div class="row">
                    <a href="javascript:;" title="Edit Disposition Record" onclick="addNewPipeline(${data.id})"><i class="fas fa-edit mt-2"></i></a>
                    <a href="javascript:;" class="ml-2" onclick="deletePipleline(this, ${data.id})"><i class="fas fa-minus-circle mt-2"></i></a>
                </div>
            </div>
        </div>
    </li>`);
}

function addNewDisposition(){
    $('.dispositionSortable').append(`<li class="list-group-item" >
                <div class="row">
                    <div class="col-sm-1"> <i class="fas fa-arrows-alt mt-2 ml-2"></i></div>
                    <div class="col-sm-10">
                        <input type="text" class="form-control disposition_name" name="disposition_name[]" placeholder="Disposition Name">
                    </div>
                    <div class="col-sm-1 deleteDispositionDiv"><a href="javascript:;" onclick="deleteDisposition(this)"><i class="fas fa-minus-circle mt-2"></i></a></div>

                </div>
            </li>`);
}
function deleteDisposition(event){
    $(event).closest('li').remove();
}
function updateDispositionOrder(){
    $('.deleteDispositionDiv').removeClass('disabledDiv');
    $('.dispositionSortable').find('li').each(function(key){
        if(key == 0){
            $(this).find('.deleteDispositionDiv').addClass('disabledDiv');
        }
    })
  
}

  </script>

@endsection