@extends('layouts.app')
@section('content')
    <section class="content">
        <div class="container-fluid">

            <div class="px-sm-4">
                <form class="form" role="post-data" method="POST" action="/api/projects/step-2"
                    redirect="/projects/step-3/{{ $project->id }}" id="glad-project-step-form">
                    @csrf
                    <input type="hidden" name="project_id" value="{{ $project->id }}">
                    <input type="hidden" name="mode" id="mode" value="{{ $project->mode }}">
                    <div class="row mt-2 mt-sm-3">
                        <div class="col-md-12">
                            <div class="tab-content" id="myTabContent">
                                <div class="tab-pane fade show active" id="profile" role="tabpanel"
                                    aria-labelledby="profile-tab">
                                    <div class="row">
                                        <div class="col-md-7">
                                            <div class="top-head">
                                                <h1>Projects</h1>
                                                <nav aria-label="breadcrumb">
                                                    <ol class="breadcrumb">
                                                        <li class="breadcrumb-item"><a href="#">Settings</a></li>
                                                        <li class="breadcrumb-item"><a href="{{url('/projects')}}">Projects</a></li>
                                                        <li class="breadcrumb-item active" aria-current="page">Project
                                                            Milestones</li>
                                                    </ol>
                                                </nav>
                                            </div>
                                        </div>
                                        <div class="col-md-5 text-sm-right text-left">
                                            <a href="/projects/step-1?id={{ $project->id }}"
                                                class="btn cancel-btn mr-2">Back</a>
                                           
                                            <!-- <button type="button" data-target="#profile" data-toggle="tab"
                                                class="btn save-btn saveandnext">Save & Next</button> -->
                                        
                                            <button type="button" class="btn save-btn glad-form-step-2" role="button"
                                                data-request="ajax-submit" data-target="[role=post-data]">Save &
                                                Next
                                            </button>
                                            @if(count($request->segments()) == 3)
                                            <button type="button" class="btn save-btn published" role="button"
                                                data-toggle="tab" data-status="published"
                                                data-target="#profile">Publish
                                            </button>
                                            @endif

                                            {{-- <button type="button" data-target="#contact" data-toggle="tab"
                                                class="btn save-btn saveandnext">Save & Next</button> --}}
                                            
                                        </div>
                                    </div>

                                    <ul class="supplier-tab mt-3">
                                        <li class="active">
                                            <a href="/projects/step-1?id={{ $project->id }}" class="glad-project-step"><span class="tab-circle"><i
                                                        class="fa fa-check" aria-hidden="true"></i></span>
                                                1.
                                                Project Details</a>
                                        </li>
                                        <li class="active">
                                            <a href="/projects/step-2/{{ @$project->id }}" class="glad-project-step"><span class="tab-circle"><i
                                                        class="fa fa-check" aria-hidden="true"></i></span>
                                                2.
                                                Project Milestones</a>
                                        </li>
                                        <li>
                                        @if(count($request->segments()) == 3 && count($project->mileStones) > 0)
                                            <a href="/projects/step-3/{{ @$project->id }}" class="glad-project-step"><span class="tab-circle"><i
                                                        class="fa fa-check" aria-hidden="true"></i></span>
                                                3.Project Pricing
                                            </a>
                                        @else
                                        <span class="tab-circle"><i class="fa fa-check" aria-hidden="true"></i></span>
                                            3.Project Pricing
                                        @endif
                                        </li>
                                        <!-- <li>
                                            <a href="/projects/step-4/{{ @$project->id }}" class="glad-project-step"><span class="tab-circle"><i
                                                        class="fa fa-check" aria-hidden="true"></i></span>
                                                4.
                                                Payment Terms</a>
                                        </li> -->
                                    </ul>

                                    <div class="row mt-4 mt-sm-5">
                                        <div class="col-md-12">
                                            <div class="accordion settings-accord" id="accordionExample">
                                                <div id="appendProjectMilestone">
                                                    @if (count($project->mileStones) > 0)
                                                        @foreach ($project->mileStones as $key => $milestone)
                                                            <div class="card" id="removeMilestoneRow{{ $key }}">
                                                                <div class="card-header" id="heading{{ $key }}">
                                                                    <h2 class="mb-0">
                                                                        <button class="btn" type="button"
                                                                            data-toggle="collapse"
                                                                            data-target="#collapse{{ $key }}"
                                                                            aria-expanded="true"
                                                                            aria-controls="collapse{{ $key }}">
                                                                            <div class="row align-items-center">
                                                                                <div class="col-md-9 col-9">
                                                                                    <p> Milestone {{ $key + 1 }}</p>
                                                                                </div>
                                                                                <div class="col-md-3 col-3">
                                                                                    <i class="fa-fa-plus float-right"
                                                                                        aria-hidden="true"></i>
                                                                                    <i class="fa fa-minus float-right"
                                                                                        aria-hidden="true"></i>
                                                                                </div>
                                                                            </div>
                                                                        </button>
                                                                    </h2>
                                                                </div>

                                                                <div id="collapse{{ $key }}" class="collapse show"
                                                                    aria-labelledby="heading{{ $key }}"
                                                                    data-parent="#accordionExample">
                                                                    <div class="card-body pt-0">
                                                                        <div class="border-bottom"></div>
                                                                        <div class="row justify-content-end mt-4">
                                                                            <div class="col-md-6">
                                                                                <h6>Milestone Duration</h6>
                                                                            </div>
                                                                        </div>
                                                                        <div class="row mt-3">
                                                                            <input type="hidden"
                                                                                id="milestone_id_{{$key}}"
                                                                                name="milestone[{{ $key }}][id]"
                                                                                value="{{ $milestone->id }}">
                                                                            <div class="col-md-6 mb-sm-0 mb-3">
                                                                                <div class="form-group">
                                                                                    <label class="edit-label">Title</label>
                                                                                    <input type="text"
                                                                                        name="milestone[{{ $key }}][title]"
                                                                                        value="{{ @$milestone->title }}"
                                                                                        class="form-control edit-input"
                                                                                        placeholder="eg:Water tank"
                                                                                        id="tilte_milestone{{ $key }}">
                                                                                </div>

                                                                                <div class="form-group">
                                                                                    <label
                                                                                        class="edit-label">Description</label>
                                                                                    <textarea class="form-control edit-input" name="milestone[{{ $key }}][description]" placeholder="Write..."
                                                                                        rows="3" id="description_milestone{{ $key }}">{{ @$milestone->description }}</textarea>
                                                                                </div>
                                                                            </div>

                                                                            <div class="col-md-6">
                                                                               <div class="parentmilestoneTask">
                                                                                    
                                                                                    <div class="row">
                                                                                        <div class="col-md-4">
                                                                                            <div class="">
                                                                                                <label class="edit-label">Type</label>
                                                                                                <select class="form-control edit-input edit-select" name="milestone[{{ $key }}][type]" id="type{{ $key }}" onchange='durationSelection({{ $key }}, "{{$milestone->depend_on}}")'>
                                                                                                    <option value="">Select</option>
                                                                                                    <option value="variable" @if(@$milestone->type == 'variable') selected @endif>Variable</option>
                                                                                                    <option value="fixed" @if(@$milestone->type == 'fixed') selected @endif>Fixed</option> 
                                                                                                </select>
                                                                                            </div>
                                                                                        </div>
                                                                                       
                                                                                        <div class="col-md-4" id="per-unit-col{{ $key }}" style={{@$milestone->type == 'variable' ? 'display:block;' : 'display:none;'}}>
                                                                                            <div class="">
                                                                                                <label class="edit-label">Depends On</label>
                                                                                                <select class="form-control edit-input edit-select" name="milestone[{{ $key }}][depend_on]" onchange="filterDependents(this,{{$key}})">
                                                                                                    <option value="">Select</option>
                                                                                                    @foreach($dependents as $dependent)
                                                                                                    <option value="{{$dependent->name}}" @if(@$milestone->depend_on == $dependent->name) selected @endif>{{$dependent->name}}</option>
                                                                                                    @endforeach
                                                                                                </select>
                                                                                            </div>
                                                                                        </div>
                                                                                        <div class="col-md-4" id="factor-col{{ $key }}" style={{@$milestone->type == 'variable' && @$milestone->depend_on !== 'Resource Duration' ? 'display:block;' : 'display:none;'}}>
                                                                                            <div class="form-group">
                                                                                                <label class="edit-label">Factor</label>
                                                                                                <input type="text" name="milestone[{{ $key }}][factor]" value="{{@$milestone->factor}}" class="form-control edit-input" placeholder="Enter factor">
                                                                                            </div>
                                                                                        </div>
                                                                                       
                                                                                        <div class="col-md-4" id="duration-col{{ $key }}" style={{@$milestone->type == 'fixed' ? 'display:block;' : 'display:none;'}}>
                                                                                            <div class="parentmilestoneTask">
                                                                                                <label class="edit-label">Milestone
                                                                                                    Duration</label>
                                                                                                <input type="text"
                                                                                                    name="milestone[{{ $key }}][duration]"
                                                                                                    class="form-control edit-input"
                                                                                                    value="{{@$milestone->duration}}"
                                                                                                    placeholder="eg: 15 Days"
                                                                                                    id="duration_milestone{{ $key }}">  
                                                                                            </div>
                                                                                        </div>
                                                                                       
                                                                                    </div>
                                                                                    <div class="mb-2 mt-3">
                                                                                        <label class="edit-label">Task
                                                                                            Involved</label>
                                                                                        <input type="text"
                                                                                            name="milestone[{{ $key }}][task_involved]"
                                                                                            class="form-control edit-input milestoneTask"
                                                                                            placeholder="Add task name..."
                                                                                            data-row="{{ $key }}">
                                                                                    </div> 
                                                                                    <div class="mb-2 mt-2 mt-sm-2">
                                                                                        <div class="milestoneTaskvalues">
                                                                                            @foreach ($milestone->tasks as $key1 => $task)
                                                                                                <span
                                                                                                    class="badge plastic-badge removemilestoneTaskvalues">{{ $task->name }}
                                                                                                    <input type="hidden"
                                                                                                        name="milestone[{{ $key }}][task_involved][]"
                                                                                                        value="{{ $task->name }}"
                                                                                                        id="task_involved_milestone{{ $key }}">
                                                                                                    <span
                                                                                                        class="cross-plastic crossmilestoneTaskvalues"><i
                                                                                                            class="fa fa-times"
                                                                                                            aria-hidden="true"></i></span>
                                                                                                </span>
                                                                                            @endforeach
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            @if ($loop->last)
                                                                <script>
                                                                    var milestoneSrNo = {{ $key + 1 }};
                                                                </script>
                                                            @endif
                                                        @endforeach
                                                    @else
                                                        <div class="card">
                                                            <div class="card-header" id="headingOne">
                                                                <h2 class="mb-0">
                                                                    <button class="btn" type="button"
                                                                        data-toggle="collapse" data-target="#collapseOne"
                                                                        aria-expanded="true" aria-controls="collapseOne">
                                                                        <div class="row align-items-center">
                                                                            <div class="col-md-9 col-9">
                                                                                <p> Milestone 1</p>
                                                                            </div>
                                                                            <div class="col-md-3 col-3">
                                                                                <i class="fa-fa-plus float-right"
                                                                                    aria-hidden="true"></i>
                                                                                <i class="fa fa-minus float-right"
                                                                                    aria-hidden="true"></i>
                                                                            </div>
                                                                        </div>
                                                                    </button>
                                                                </h2>
                                                            </div>

                                                            <div id="collapseOne" class="collapse show"
                                                                aria-labelledby="headingOne"
                                                                data-parent="#accordionExample">
                                                                <div class="card-body pt-0">
                                                                    <div class="border-bottom"></div>
                                                                    <div class="row mt-3">
                                                                        <div class="col-md-6 mb-sm-0 mb-3">
                                                                            <div class="form-group">
                                                                                <label class="edit-label">Title</label>
                                                                                <input type="text"
                                                                                    name="milestone[0][title]"
                                                                                    class="form-control edit-input"
                                                                                    placeholder="eg:Water tank"
                                                                                    id="tilte_milestone0">
                                                                            </div>

                                                                            <div class="form-group">
                                                                                <label
                                                                                    class="edit-label">Description</label>
                                                                                <textarea class="form-control edit-input" name="milestone[0][description]" placeholder="Write..." rows="3"
                                                                                    id="description_milestone0"></textarea>
                                                                            </div>
                                                                        </div>

                                                                        <div class="col-md-6">
                                                                            <h6>Milestone Duration</h6>
                                                                            <div class="row mt-2">
                                                                                <div class="col-md-4">
                                                                                    <div class="">
                                                                                        <label class="edit-label">Type</label>
                                                                                        <select class="form-control edit-input edit-select" name="milestone[0][type]" id="type0" onchange="durationSelection(0)">
                                                                                            <option value="">Select</option>
                                                                                            <option value="variable">Variable</option>
                                                                                            <option value="fixed">Fixed</option> 
                                                                                        </select>
                                                                                    </div>
                                                                                </div>
                                                               
                                                                                <div class="col-md-4" id="per-unit-col0">
                                                                                    <div class="">
                                                                                        <label class="edit-label">Depends On</label>
                                                                                        <select class="form-control edit-input edit-select" name="milestone[0][depend_on]" onchange="filterDependents(this,0)">
                                                                                            <option value="">Select</option>
                                                                                            @foreach($dependents as $dependent)
                                                                                            <option value="{{$dependent->name}}">{{$dependent->name}}</option>
                                                                                            @endforeach
                                                                                        </select>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="col-md-4" id="factor-col0">
                                                                                    <div class="form-group">
                                                                                        <label class="edit-label">Factor</label>
                                                                                        <input type="text" name="milestone[0][factor]" value="" class="form-control edit-input" placeholder="Enter factor">
                                                                                    </div>
                                                                                </div>
                                                                                <div class="col-md-4" id="duration-col0" style="display:none;">
                                                                                    <div class="parentmilestoneTask">
                                                                                        <label class="edit-label">Milestone
                                                                                            Duration</label>
                                                                                        <input type="text"
                                                                                            name="milestone[0][duration]"
                                                                                            class="form-control edit-input"
                                                                                            placeholder="eg: 15 Days"
                                                                                            id="duration_milestone0">  
                                                                                    </div>
                                                                                </div>
                                                                            </div>

                                                                            <div class="parentmilestoneTask mt-3">
                                                                                <div class="mb-2">
                                                                                    <label class="edit-label">Task
                                                                                        Involved</label>
                                                                                    <input type="text" name="milestone[0][task_involved]" class="form-control edit-input milestoneTask" placeholder="Add task name..." data-row="0">
                                                                                </div>
                                                                                <div class="milestoneTaskvalues">
                                                                                    <!-- <span class="badge plastic-badge removemilestoneTaskvalues">task<input type="hidden" name="milestone[0][task_involved][]" value="task" id="task_involved_milestone0"><span class="cross-plastic crossmilestoneTaskvalues"><i class="fa fa-times" aria-hidden="true"></i></span></span> -->
                                                                            
                                                                                </div>
                                                                            </div>                                                                            
                                                                        </div>

                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <script>
                                                            var milestoneSrNo = 1;
                                                        </script>
                                                    @endif
                                                </div>
                                            </div>
                                            <div class="row mt-12">
                                                <div class="col-md-6 text-left">
                                                    <button type="button" id="addProjectMilestone"
                                                        class="btn save-btn">Add
                                                        More</button>
                                                </div>
                                                
                                                <div class="col-md-6 text-right">
                                                    <a class="clear-filter removeRowprojectList"
                                                        href="javascript:void(0);">Remove</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>

        </div>
    </section>
@endsection
@section('scripts')
    <script type="text/javascript">
        // Dependent options html to use in select option in Milestone Duration
        var dependentOptions = ;
        var options = '';
        var optionsHtml = $.each(dependentOptions, (key,value) => {
            options += `<option value="${value.name}">${value.name}</option>`;
        })
        
        $(document).ready(function(){
            if(milestoneSrNo == 1){
                $('.removeRowprojectList').hide();
            }else{
                $('.removeRowprojectList').show(); 
            }
        });

        $('.saveandnext').click(function() {
            // var targetTab = $(this).data('target');
            var form = $(this).closest('form');
            var formData = new FormData(form[0]);
            var url = $(form[0]).attr('action');
            
            $.ajax({
                url: url,
                data: formData,
                cache: false,
                type: 'POST',
                dataType: 'JSON',
                contentType: false,
                processData: false,
                beforeSend: function() {
                    $('.loader').show();
                    $('.help-block').remove();
                },
                success: function($response) {
                    console.log($response);
                    $('#id').val($response.data.id);
                    if ($response.status === 200) {
                        toast("success", $response.message);
                        setTimeout(function() {
                            location.href = "/projects/step-3/" + $response.data.id;
                        }, 2200);
                    }
                },
                error: function($response) {
                    $('.loader').hide();
                    if ($response.status === 422) {
                        if (Object.size($response.responseJSON) > 0 && Object.size($response
                                .responseJSON.errors) > 0) {
                            show_validation_error($response.responseJSON.errors);
                        }
                    } else {
                        Swal.fire(
                            'Error', $response.responseJSON.message, 'warning'
                        )
                        setTimeout(function() {}, 1200)
                    }
                }
            });
        });

        $('.published').click(function() {
            var mode = $('#mode').val($(this).data('status'));
            var form = $(this).closest('form');
            var formData = new FormData(form[0]);
            var url = $(form[0]).attr('action');

            $.ajax({
                url: url,
                data: formData,
                cache: false,
                type: 'POST',
                dataType: 'JSON',
                contentType: false,
                processData: false,
                beforeSend: function() {
                    $('#loaderDiv').show();
                    $('.help-block').remove();
                },
                success: function($response) {
                    if ($response.status === 200) {
                        toast("success", $response.message);
                        setTimeout(function() {
                            location.href = "/projects";
                        }, 2200);
                    }
                },
                error: function($response) {
                    $('#loaderDiv').hide();
                    if ($response.status === 422) {
                        if (Object.size($response.responseJSON) > 0 && Object.size($response
                                .responseJSON.errors) > 0) {
                            show_validation_error($response.responseJSON.errors);
                        }
                    } else {
                        Swal.fire(
                            'Error', $response.responseJSON.message, 'warning'
                        )
                        setTimeout(function() {}, 1200)
                    }
                }
            });
        });

        function activeStatus() {
            var status = 'active';
            $('#status').val(status);
            document.getElementById('status').setAttribute('onclick', 'inactiveStatus()');
        }



        function inactiveStatus() {
            var status = 'inactive';
            $('#status').val(status);
            document.getElementById('status').setAttribute('onclick', 'activeStatus()');
        }


        $('#addProjectMilestone').click(function() {
            if(milestoneSrNo > 0){
                let checkValue = milestoneSrNo - 1;
                let tilte_milestone = $('#tilte_milestone' + checkValue).val();
                let description_milestone = $('#description_milestone' + checkValue).val();
                let task_involved_milestone = $('#task_involved_milestone' + checkValue).val();
                // let applicable_type_milestone = $('#applicable_type_milestone' + checkValue).val();
                // let applicable_size_milestone = $('#applicable_size_milestone' + checkValue).val();
                // let duration_milestone = $('#duration_milestone' + checkValue).val();
    
                if (!tilte_milestone || !task_involved_milestone || !description_milestone) {
                    Swal.fire({
                        title: "Please fill all mandatory data.",
                        text: "Please fill all mandatory data.",
                        type: 'warning'
                    });
                    return;
                }
            }

            var html = '<div class="card" id="removeMilestoneRow'+ milestoneSrNo +'">';
            html += '<div class="card-header" id="heading' + milestoneSrNo + '">';
            html += '<h2 class="mb-0">';
            html += '<button class="btn" type="button" data-toggle="collapse"  data-target="#collapse' +
                milestoneSrNo + '" aria-expanded="true" aria-controls="collapse' + milestoneSrNo + '">';
            html += '<div class="row align-items-center">';
            html += '<div class="col-md-9 col-9">';
            html += '<p> Milestone ' + (milestoneSrNo + 1) + '</p>';
            html += '</div>';
            html += '<div class="col-md-3 col-3">';
            html += '<i class="fa-fa-plus float-right" aria-hidden="true"></i>';
            html += '<i class="fa fa-minus float-right" aria-hidden="true"></i>';
            html += '</div>';
            html += '</div>';
            html += '</button>';
            html += '</h2>';
            html += '</div>';
            html += '<div id="collapse' + milestoneSrNo + '" class="collapse show" aria-labelledby="heading' +
                milestoneSrNo + '" data-parent="#accordionExample">';
            html += '<div class="card-body pt-0">';
            html += '<div class="border-bottom"></div>';
            html += `<div class="row justify-content-end mt-4">
                        <div class="col-md-6">
                            <h6>Milestone Duration</h6>
                        </div>
                    </div>`;
            html += '<div class="row mt-3">';
            html += '<div class="col-md-6 mb-sm-0 mb-3">';
            html += '<div class="form-group">';
            html += '<label class="edit-label">Title</label>';
            html += '<input type="text" name="milestone[' + milestoneSrNo + '][title]" class="form-control edit-input" placeholder="eg:Water tank" id="tilte_milestone' +milestoneSrNo + '">';
            html += '</div>';
            html += '<div class="form-group">';
            html += '<label class="edit-label">Description</label>';
            html +=
                '<textarea class="form-control edit-input" name="milestone[' + milestoneSrNo +
                '][description]" placeholder="Write..." rows="3" id="description_milestone' + milestoneSrNo +
                '"></textarea>';
            html += '</div>';
            
            html += '</div>';
            html += '<div class="col-md-6">';

            // html += '<div class="parentmilestoneType">';
            // html += '<div class="mb-2">';
            // html += '<label class="edit-label">Milestone Duration</label>';
            // html +=
            //     '<input type="text" name="milestone[' + milestoneSrNo +
            //     '][duration]"  class="form-control edit-input" placeholder="eg: 15 Days" id="duration_milestone' +
            //     milestoneSrNo + '">';
            // html += '</div>';
            // html += '</div>';

            html+= `
                    <div class="row">
                        <div class="col-md-4">
                            <div class="">
                                <label class="edit-label">Type</label>
                                <select class="form-control edit-input edit-select" name="milestone[${milestoneSrNo}][type]" id="type${milestoneSrNo}" onchange="durationSelection(${milestoneSrNo})">
                                    <option value="">Select</option>
                                    <option value="variable">Variable</option>
                                    <option value="fixed">Fixed</option> 
                                </select>
                            </div>
                        </div>
        
                        <div class="col-md-4" id="per-unit-col${milestoneSrNo}">
                            <div class="">
                                <label class="edit-label">Depends On</label>
                                <select class="form-control edit-input edit-select" name="milestone[${milestoneSrNo}][depend_on]" onchange="filterDependents(this,${milestoneSrNo})">
                                    <option value="">Select</option>
                                    ${options}
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4" id="factor-col${milestoneSrNo}">
                            <div class="form-group">
                                <label class="edit-label">Factor</label>
                                <input type="text" name="milestone[${milestoneSrNo}][factor]" value="" class="form-control edit-input" placeholder="Enter factor">
                            </div>
                        </div>
                        <div class="col-md-4" id="duration-col${milestoneSrNo}" style="display:none;">
                            <div class="parentmilestoneTask">
                                <label class="edit-label">Duration</label>
                                <input type="text"
                                    name="milestone[${milestoneSrNo}][duration]"
                                    class="form-control edit-input"
                                    placeholder="eg: 15 Days"
                                    id="duration_milestone${milestoneSrNo}">  
                            </div>
                        </div>
                    </div>`;
            html += '<div class="parentmilestoneTask">';
            html += '<div class="mt-3">';
            html += '<label class="edit-label">Task Involved</label>';
            html +=
                '<input type="text" name="milestone[' + milestoneSrNo +
                '][task_involved]" class="form-control edit-input milestoneTask" placeholder="Add task name..." data-row="' +
                milestoneSrNo + '">';
            html += '</div>';
            html += '<div class="milestoneTaskvalues">';
            html += '</div>';
            html += '</div>';
            html += '</div>';
            html += '</div>';
            html += '</div>';
            html += '</div>';


            $('#appendProjectMilestone').append(html);
            milestoneSrNo++;

            $('.removeRowprojectList').show(); 
        });

        $(document).on('click', '.removeRowprojectList', function() {
            milestoneSrNo--;
            // console.log(milestoneSrNo);
            // return false;
            $('#removeMilestoneRow'+milestoneSrNo).remove();

            if(milestoneSrNo == 1){
                $('.removeRowprojectList').hide();
            }else{
                $('.removeRowprojectList').show(); 
            }
        });

        $(document).on('keyup', '.milestoneTask', function(e) {
            var row = $(this).data('row');
            if (event.key === 'Enter' || event.keyCode === 13) {
                var taskValue = e.target.value;
                e.target.value = '';
                var html = '<span class="badge plastic-badge removemilestoneTaskvalues">' + taskValue;
                html += '<input type="hidden" name="milestone[' + row + '][task_involved][]"  value="' + taskValue +
                    '" id="task_involved_milestone' + row + '">';
                html +=
                    '<span class="cross-plastic crossmilestoneTaskvalues"><i class="fa fa-times" aria-hidden="true"></i></span>';
                html += '</span>';
                $(this).closest('.parentmilestoneTask').find('.milestoneTaskvalues').append(html);
            }
        });

        $(document).on('click', '.crossmilestoneTaskvalues', function() {
            $(this).closest('.removemilestoneTaskvalues').remove();
        });

        $(document).on('keyup', '.milestoneType', function(e) {
            var row = $(this).data('row');
            if (event.key === 'Enter' || event.keyCode === 13) {
                var typeValue = e.target.value;
                e.target.value = '';
                var html = '<span class="badge plastic-badge removemilestonetypeValue">' + typeValue;
                html += '<input type="hidden" name="milestone[' + row + '][applicable_type][]" value="' +
                    typeValue + '" id="applicable_type_milestone' + row + '">';
                html +=
                    '<span class="cross-plastic crossmilestonetypeValue"><i class="fa fa-times" aria-hidden="true"></i></span>';
                html += '</span>';
                $(this).closest('.parentmilestoneType').find('.milestoneTaskTypevalues').append(html);
            }

        });

        $(document).on('click', '.crossmilestonetypeValue', function() {
            $(this).closest('.removemilestonetypeValue').remove();
        });

        $(document).on('keyup', '.milestoneprice', function(e) {
            var row = $(this).data('row');
            if (event.key === 'Enter' || event.keyCode === 13) {
                var priceValue = e.target.value;
                e.target.value = '';
                var html = '<span class="badge plastic-badge removemilestonepriceValue">' + priceValue;
                html += '<input type="hidden" name="milestone[' + row + '][applicable_size][]" value="' +
                    priceValue + '" id="applicable_size_milestone' + row + '">';
                html +=
                    '<span class="cross-plastic crossmilestonepriceValue"><i class="fa fa-times" aria-hidden="true"></i></span>';
                html += '</span>';
                $(this).closest('.parentmilestoneprice').find('.milestoneTaskpricevalues').append(html);
            }

        });

        $(document).on('click', '.crossmilestonepriceValue', function() {
            $(this).closest('.removemilestonepriceValue').remove();
        });

        $('.glad-project-step').on('click', function () {
            $('.glad-form-step-2').click();
        })

         // Hide Fields on change of type
        function durationSelection(count, dependent_on=''){
            
            console.log(dependent_on);
            if($('#type'+count).val() == 'fixed'){
                $('#per-unit-col'+count).hide();
                $('#factor-col'+count).hide();
                $('#duration-col'+count).css('display','block');

            }else{
                if(dependent_on == 'Resource Duration'){
                    $('#per-unit-col'+count).show();
                    $('#factor-col'+count).hide();
                }else{
                    $('#per-unit-col'+count).show();
                    $('#factor-col'+count).show();
                    $('#duration-col'+count).css('display','none');
                }
            }
        };

        // Function for Hide Factor if dependent is Resource Duration
        function filterDependents(__this,count){
            console.log(__this.value);
            if(__this.value == 'Resource Duration'){
                $('#factor-col'+count).hide();
            }else{
                $('#factor-col'+count).show();
            }
        }
    </script>
@endsection