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

        <div class="px-sm-4">
            <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="contact" role="tabpanel"
                            aria-labelledby="contact-tab">
                            <div class="row">
                                <div class="col-md-7 col-10">
                                    <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
                                                    Pricing
                                                </li>
                                            </ol>
                                        </nav>
                                    </div>
                                </div>
                                <div class="col-md-5 text-sm-right text-left">
                                   
                                    
                                   <div class="d-flex align-items-center justify-content-end">
                                   <a href="/projects/step-2/{{ $project->id }}">
                                    <button
                                    class="btn cancel-btn mr-1"> Back
                                    </button>
                                    </a>

                                    <form class="form" role="post-data" method="POST" action="/projects/next-or-publish/step-3"
                                        redirect="/projects">
                                        @csrf
                                        <input type="hidden" name="project_id" value="{{ $project->id }}">
                                        <input type="hidden" name="mode" id="mode" value="{{ @$project->mode ? $project->mode : 'draft' }}">
                                       
                                        <!-- <button type="button" data-target="#profile" data-toggle="tab"
                                            class="btn save-btn saveandnext">Save & Next</button> -->
                                        @if((@$project->mode != 'published') || (@$project->mode == ''))
                                        <button type="button" class="btn draft-btn mr-1 mr-sm-2" role="button"
                                            data-request="ajax-submit" data-status="draft"
                                            data-target="[role=post-data]"><img src="/assets/img/loding.svg"
                                                class="mr-1 save-as-draft" alt="">Save as
                                            Draft</button>
                                        @endif

                                        @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
                                    </form>
                                   </div>
                                   
                                </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 class="active">
                                    <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>
                                </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-3 mt-sm-5">
                                <div class="col-md-12">
                                    <div class="top-head text-center">
                                        <h1>{{ @$project->name }}</h1>
                                    </div>
                                </div>
                            </div>
                            <div class="row mt-3">
                                <div class="col-md-12">
                                    <div class="accordion settings-accord" id="accordionExample">
                                        @foreach ($project->mileStones as $key => $milestone)
                                        <div class="card">
                                            <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>
                                                                <span>{{ @$milestone->title }}</span>
                                                            </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 id="form-container{{$key}}">
                                                        <div class="row justify-content-end mb-2">
                                                            <div class="col-md-2 text-right">
                                                                <button type="button" data-toggle="modal" data-target="#exampleModalnew"
                                                                    class="plus-btn add-more mr-2"
                                                                    onclick='setMilestoneIdInForm({{$milestone->id}}, "{{$milestone->depend_on}}")'
                                                                    id="milestonePricingAddMore{{$key}}">
                                                                    <img src="{{asset('assets/img/plus-white.svg')}}" alt="">
                                                                </button>  
                                                            </div>
                                                        </div>
                                                            <!-- onclick='addMoreMilestonePricing("{{$key}}","{{$milestone->id}}")' -->
                                                        <div id="priceAccordianRowGroup{{$key}}"> 
                                                            <div class="row">
                                                                <div class="col-md-12">
                                                                    <div class="card">
                                                                        <div class="card-body">
                                                                            <div class="table-responsive">
                                                                                <table class="table dam-constructiontable">
                                                                                    <thead>
                                                                                        <tr>
                                                                                        <th style="width: 190px;"><label class="edit-label">Material</label></th>
                                                                                        <th style="width: 150px;"><label class="edit-label">Type</label></th>
                                                                                        <th style="width: 100px;"><label class="edit-label">Capacity/Thickness</label></th>
                                                                                        <th style="width: 100px;"><label class="edit-label">UOM for costing</label></th>
                                                                                        <th><label class="edit-label">Price</label></th>
                                                                                        <th><label class="edit-label">Dependent</label></th>
                                                                                        <th style="width: 150px;"><label class="edit-label">Per unit of</label></th>
                                                                                        <th><label class="edit-label">Factor</label></th>
                                                                                        <th><label class="edit-label">Fixed Size</label></th>
                                                                                        <th><label class="edit-label">Type</label></th>
                                                                                        <th><label class="edit-label">Hours/Unit</label></th>
                                                                                        <th><label class="edit-label">Duration(Hours)</label></th>
                                                                                        <th></th>
                                                                                        </tr>
                                                                                    </thead>
                                                                                    <tbody id="milestonePricingBody{{$key}}">
                                                                                        <!-- if data already exist -->
                                                                                            <!-- Existing Row start-->
                                                                                            @if(count($milestone->prices) > 0)
                                                                                                @foreach($milestone->prices as $key1 => $priceData) 
                                                                                                    @php
                                                                                                    $projectUom = $projectUomsData->where('id',@$priceData->uom_id)->first();
                                                                                                    @endphp
                                                                                                <tr id="milestonePricingRow-{{$key}}-{{$key1}}" data-id="{{@$priceData->id}}">
                                                                                                    <input type="hidden" id="hidden_project_milestone_id-{{$key}}-{{$key1}}" value="{{@$milestone->id}}">
                                                                                                    <td >
                                                                                                        <input type="text" class="form-control edit-input edit-inoutnew material" id="material-{{$key}}-{{$key1}}" placeholder="" name="milestone_pricing[{{$milestone->id}}][{{$key1}}][material]" value="{{@$priceData->resource_name}}" readonly>
                                                                                                    </td>
                                                                                                    <td>
                                                                                                        <input type="text" class="form-control edit-input edit-inoutnew" id="type-{{$key}}-{{$key1}}" placeholder="" name="milestone_pricing[{{$milestone->id}}][{{$key1}}][type]" value="{{@$priceData->resource_type}}" readonly>
                                                                                                    </td>
                                                                                                    <td>
                                                                                                        <input type="text" class="form-control edit-input edit-inoutnew" id="capacity-{{$key}}-{{$key1}}" placeholder="" name="milestone_pricing[{{$milestone->id}}][{{$key1}}][capacity]" value="{{@$priceData->resource_capacity}}" readonly>
                                                                                                    </td>
                                                                                                    <td>
                                                                                                        <!-- <input type="text" class="form-control edit-input edit-inoutnew" id="uom-{{$key}}-0" placeholder="" name="milestone_pricing[{{$milestone->id}}][0][uom]"> -->
                                                                                                            <input type="text" class="form-control edit-input edit-inoutnew" id="uom-{{$key}}-{{$key1}}" placeholder="" name="milestone_pricing[{{$milestone->id}}][{{$key1}}][uom]" value="{{@$projectUom->name}}" readonly>
                                                                                                    </td>
                                                                                                    <td>
                                                                                                        <input type="text" class="form-control edit-input edit-inoutnew" id="price-{{$key}}-{{$key1}}" placeholder="" name="milestone_pricing[{{$milestone->id}}][{{$key1}}][price]" value="{{@$priceData->resource_price}}" readonly>
                                                                                                    </td>
                                                                                                    <td>
                                                                                                        <!-- <input type="text" class="form-control edit-input edit-inoutnew" id="dependent-{{$key}}-0" placeholder="" name="milestone_pricing[{{$milestone->id}}][0][dependent]"> -->
                                                                                                        <select class="form-control edit-input edit-select edit-inoutnew" onchange='hideShowPerUnitFactorFixedSize({{$key}},{{$key1}})' id="dependent-{{$key}}-{{$key1}}" name="milestone_pricing[{{$milestone->id}}][{{$key1}}][dependent]" disabled>
                                                                                                            <option value="">Select</option>
                                                                                                            <option value="variable" @if(@$priceData->resource_size_type == 'variable') selected @endif>Variable</option>
                                                                                                            <option value="fixed" @if(@$priceData->resource_size_type == 'fixed') selected @endif>Fixed</option> 
                                                                                                        </select>
                                                                                                    </td>
                                                                                                    <td>
                                                                                                        <!-- <input type="text" class="form-control edit-input edit-inoutnew" id="per_unit_of-{{$key}}-0" placeholder="" name="milestone_pricing[{{$milestone->id}}][0][per_unit_of]"> -->
                                                                                                        <select class="form-control edit-input edit-select unit-selectnew per-unit-of" id="per_unit_of-{{$key}}-{{$key1}}" name="milestone_pricing[{{$milestone->id}}][{{$key1}}][per_unit_of]" disabled>
                                                                                                            <option value="">Select</option>
                                                                                                            @foreach(@$dependents as $dependent)
                                                                                                            <option value="{{$dependent->name}}" @if(@$priceData->resource_size_dependency == $dependent->name) selected @endif>{{$dependent->name}}</option>
                                                                                                            @endforeach
                                                                                                        </select>
                                                                                                    </td>
                                                                                                    <td>
                                                                                                        <input type="text" class="form-control edit-input edit-inoutnew" id="factor-{{$key}}-{{$key1}}" placeholder="" name="milestone_pricing[{{$milestone->id}}][{{$key1}}][factor]" value="{{@$priceData->resource_size_factor}}" readonly>
                                                                                                    </td>
                                                                                                    <td>
                                                                                                        <input type="text" class="form-control edit-input edit-inoutnew" id="fixed_size-{{$key}}-{{$key1}}" placeholder="" name="milestone_pricing[{{$milestone->id}}][{{$key1}}][fixed_size]" value="{{@$priceData->resource_size_fixed}}" readonly>
                                                                                                    </td>
                                                                                                    <td>
                                                                                                        <!-- <input type="text" class="form-control edit-input edit-inoutnew" id="dependent-{{$key}}-0" placeholder="" name="milestone_pricing[{{$milestone->id}}][0][dependent]"> -->
                                                                                                        <select class="form-control edit-input edit-select edit-inoutnew" id="duration_type-{{$key}}-{{$key1}}" name="milestone_pricing[{{$milestone->id}}][{{$key1}}][type]" disabled>
                                                                                                            <option value="">Select</option>
                                                                                                            <option value="variable" @if(@$priceData->duration_type == 'variable') selected @endif>Variable</option>
                                                                                                            <option value="fixed" @if(@$priceData->duration_type == 'fixed') selected @endif>Fixed</option> 
                                                                                                        </select>
                                                                                                    </td>
                                                                                                    <td>
                                                                                                        <input type="text" class="form-control edit-input edit-inoutnew" id="duration_factor-{{$key}}-{{$key1}}" placeholder="" name="milestone_pricing[{{$milestone->id}}][{{$key1}}][duration_factor]" value="{{@$priceData->duration_factor}}" readonly>
                                                                                                    </td>
                                                                                                    <td>
                                                                                                        <input type="text" class="form-control edit-input edit-inoutnew" id="duration_hours-{{$key}}-{{$key1}}" placeholder="" name="milestone_pricing[{{$milestone->id}}][{{$key1}}][duration_hours]" value="{{@$priceData->duration_hours}}" readonly>
                                                                                                    </td>
                                                                                                    <td>
                                                                                                        <button type="button" class="plus-btn add-more"
                                                                                                            data-toggle="modal" data-target="#exampleModalnew" 
                                                                                                            data-id="{{@$priceData->id}}"
                                                                                                            style="background: transparent;"
                                                                                                            onclick='editMilestonePricing({{$key}},{{$key1}})'>
                                                                                                            <img height="20px;" src="{{asset('assets/img/edit.svg')}}" alt="">
                                                                                                        </button>
                                                                                                    </td>
                                                                                                    <td>
                                                                                                        <button type="button" class="plus-btn add-more" 
                                                                                                            data-id="{{@$priceData->id}}"
                                                                                                            style="background: transparent;"
                                                                                                            onclick='removeMilestonePricing({{ $project->id }},{{$key}},{{$key1}})'>
                                                                                                            <img height="42px" src="{{asset('assets/img/closered.svg')}}" alt="">
                                                                                                        </button>
                                                                                                    </td>
                                                                                                    </tr>
                                                                                                @endforeach
                                                                                            <!-- Existing Row close-->
                                                                                            @else
                                                                                            <!-- Else -->
                                                                                            @endif
                                                                                    </tbody>
                                                                                </table>
                                                                            </div> 
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<div class="modal fade mobile-header filter-popup join-popup modal-dialog-slideout" id="exampleModalnew" tabindex="-1"
		role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content border-0">
            <div class="modal-header pb-0 mobile-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">
                        <!-- &times; -->
                        <img src="{{asset('assets/img/dash-cross.svg')}}" class="cross-dash" alt="">
                    </span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row align-items-center">
                    <div class="col-md-9 col-9">
                        <div class="pop-head">
                            <h2>Add Milestone Resource</h2>
                        </div>
                    </div>
                </div>
                <form class="form" id="resourcePricingForm" role="post-data" method="POST" action="/api/projects/step-3">
                    @csrf
                    <input type="hidden" name="project_id" value="{{ @$project->id }}">
                    <input type="hidden" name="project_milestone_id" value="" id="milestoneHiddenId">
                    <input type="hidden" name="project_resource_id" value="" id="resourceHiddenId">
                    <div class="row mt-4">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="edit-label">Material</label>
                                <div class="combobox">
                                    <input type="text" class="form-control edit-input" onkeyup='uomSuggestion("material")' id="materialName" placeholder="" name="material" required>
                                    <ul class="suggestions suggestionList" id="suggestionListMaterial"></ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="edit-label">Type</label>
                                <div class="combobox">
                                    <input type="text" class="form-control edit-input" onkeyup='typeSuggestion("types")' id="materialType" placeholder="" name="type" required>
                                    <ul class="suggestions suggestionList" id="suggestionListTypes"></ul>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="edit-label">Capacity/Thickness</label>
                                <input type="text" class="form-control edit-input" id="materialCapacity" placeholder="" name="capacity" required>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="edit-label">UOM for costing</label>
                                <div class="combobox">
                                    <input type="text" class="form-control edit-input" onclick='uomSuggestion("uom")' id="materialUOM" placeholder="" name="uom" value="" required>
                                    <ul class="suggestions suggestionList" id="suggestionListUom"></ul>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="edit-label">Price</label>
                                <input type="text" class="form-control edit-input" id="materialPrice" placeholder="" name="price" onkeyup="formatInput(this)" required>
                            </div>
                        </div>
                        <div class="col-md-6"></div>
                        
                        <div class="col-md-12">
                            <hr>
                        </div>


                        <div class="col-md-12 mb-2">
                            <h5>Resource Value</h5>
                        </div>
                       
                        <div class="col-md-3">
                            <div class="form-group">
                                <label class="edit-label">Dependent</label>
                                <select class="form-control edit-input edit-select" onchange='hideShowPerUnitFactorFixedSize()' id="materialDependent" name="dependent" required>
                                    <option value="">Select</option>
                                    <option value="variable">Variable</option>
                                    <option value="fixed">Fixed</option> 
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6" id="per-unit-col">
                            <div class="form-group">
                                <label class="edit-label">Per unit of</label>
                                <select class="form-control edit-input edit-select" id="materialPerUnitOf" name="per_unit_of">
                                    <option value="">Select</option>
                                    @foreach(@$dependents as $dependent)
                                    <option value="{{$dependent->name}}" @if(@$priceData->resource_size_dependency == $dependent->name) selected @endif>{{$dependent->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="col-md-3" id="factor-col">
                            <div class="form-group">
                                <label class="edit-label">Factor</label>
                                <input type="text" name="factor" class="form-control edit-input" id="materialFactor">
                            </div>
                        </div>
                        <div class="col-md-6" id="project-size-col" style="display:none;">
                            <div class="form-group">
                                <label class="edit-label">Fixed Size</label>
                                <input type="text" name="fixed_size" class="form-control edit-input" id="materialFixedSize">
                            </div>
                        </div>
                        <!-- Resource Duration -->
                        <div class="col-md-12">
                            <hr>
                        </div>

                        <div class="col-md-12 mb-2">
                            <h5>Resource Duration</h5>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="edit-label">Type</label>
                                <select class="form-control edit-input edit-select" id="duration_type" name="duration_type" required>
                                    <option value="">Select</option>
                                    <option value="variable">Variable</option>
                                    <option value="fixed">Fixed</option> 
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6" id="duration_hours_per_unit" style="">
                            <div class="form-group">
                                <label class="edit-label">Hours Per Unit</label>
                                <input type="text" name="duration_factor" class="form-control edit-input" id="duration-factor">
                            </div>
                        </div>
                        <div class="col-md-6" id="duration_hours" style="display:none;">
                            <div class="form-group">
                                <label class="edit-label">Duration(Hours)</label>
                                <input type="text" name="duration_hours" class="form-control edit-input" id="duration-hours">
                            </div>
                        </div>
                    </div>                    
                    <div class="row justify-content-center mt-2">
                        <div class="col-md-8 col-8">
                            <button type="button" class="btn save-btn btn-block" id="pricingSubmitBtn">Submit</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection
@section('scripts')
<script type="text/javascript">

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

    $('.save-as-draft').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) {
                console.log($response.message);
                // if ($response.status === 200) {
                    toast("success", $response.message);
                    setTimeout(function() {
                        window.location.reload();
                    }, 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)
                }
            }
        });
    });

    $('.published').click(function() {
        let resourceCount = '';
    
        if(resourceCount > 0){
            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)
                    }
                }
            });
        }else{
            Swal.fire(
                        'Error', 'Please add resources for milestones before publishing the project!!', 'warning'
                    )
        }
    });

    $('#pricingSubmitBtn').click(function() {
        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/step-3/"+$response?.data?.project_id;
                    }, 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 updateSuggestions(inputField,suggestionList,suggestions) {
            var sugg = Object.values(suggestions);

            // console.log(sugg);
            const inputValue = inputField.value.toString().toLowerCase();
            // const inputValue = inputField.value;
            suggestionList.innerHTML = '';
            const filteredSuggestions = sugg.filter((item) =>
                item.toLowerCase().includes(inputValue)
                // item.includes(inputValue)
            );

            filteredSuggestions.forEach((item) => {
                const listItem = document.createElement('li');
                listItem.textContent = item;
                listItem.addEventListener('click', () => {
                    inputField.value = item;
                    suggestionList.innerHTML = '';
                });
                suggestionList.appendChild(listItem);
               
            });
    }

    function uomSuggestion(field,arrayList=null){
        let inputField = '';
        let suggestions = [];
        let suggestionList = '';
        if(field == 'uom'){
           inputField = document.getElementById('materialUOM');
           suggestionList = document.getElementById('suggestionListUom');
           suggestions = null;
        }
        if(field == 'material'){
            inputField = document.getElementById('materialName');
            suggestionList = document.getElementById('suggestionListMaterial');
            suggestions = null;
        }
        if(field == 'types'){
            inputField = document.getElementById('materialType');
            suggestionList = document.getElementById('suggestionListTypes');
            suggestions = arrayList;
        }
            // console.log('hi', suggestions);

        // Function to update the suggestion list based on user input
        inputField.addEventListener('input', updateSuggestions(inputField,suggestionList,suggestions));
        // Close the suggestion list when clicking outside of it
        document.addEventListener('click', (e) => {
            if (!suggestionList.contains(e.target) && e.target !== inputField) {
                suggestionList.innerHTML = '';
            }
        });

    }

    // Start Side Modal Form Functionality

    // Resource Value Selection
    $('#materialDependent').on('change', function(){

        if($('#materialDependent').val() == 'fixed'){
            $('#per-unit-col').hide();
            $('#factor-col').hide();
            $('#project-size-col').css('display','block');

        }else{
            $('#per-unit-col').show();
            $('#factor-col').show();
            $('#project-size-col').css('display','none');
        }
    });

    // Resource Duration Selection
    $('#duration_type').on('change', function(){

        if($('#duration_type').val() == 'fixed'){
            $('#duration_hours_per_unit').hide();
            $('#duration_hours').css('display','block');

        }else{
            $('#duration_hours').hide();
            $('#duration_hours_per_unit').css('display','block');
        }
    });

    function setMilestoneIdInForm(milestoneId, depend_on){
        $('#milestoneHiddenId').val(milestoneId);
        // check if dependent value is not null and depends on Resource Duration then exclude Milestone Duration from dependent options 
        var dependentOptions = ;
        if(dependentOptions){
            if(depend_on && depend_on == 'Resource Duration'){
                $('#materialPerUnitOf').empty();
                $.each(dependentOptions, (key, option) => {
                    if(option.name !== 'Milestone Duration'){
                        $('#materialPerUnitOf').append($('<option>', {
                            value: option.name,
                            text: option.name
                        }));
                    }
                })
            }
        }
        $('#resourcePricingForm')[0].reset();
    }

    function editMilestonePricing(milestoneRow,rowId){
        
        var milestoneId = $('#hidden_project_milestone_id-'+milestoneRow+'-'+rowId).val();
        $('#milestoneHiddenId').val(milestoneId);
        var resourceId = $('#milestonePricingRow-'+milestoneRow+'-'+rowId).data('id');
        console.log('resourceId:',$(this).data('id'));
        $('#resourceHiddenId').val(resourceId);
        var materialValue = $('#material-'+milestoneRow+'-'+rowId).val();
        console.log('clicked:',materialValue);
        $('#materialName').val(materialValue);
        var typeValue = $('#type-'+milestoneRow+'-'+rowId).val();
        $('#materialType').val(typeValue);
        var capacityValue = $('#capacity-'+milestoneRow+'-'+rowId).val();
        $('#materialCapacity').val(capacityValue);
        var priceValue = $('#price-'+milestoneRow+'-'+rowId).val();
        $('#materialPrice').val(priceValue);
        var uomValue = $('#uom-'+milestoneRow+'-'+rowId).val();
        $('#materialUOM').val(uomValue);
        var dependentValue = $('#dependent-'+milestoneRow+'-'+rowId).val();
        $('#materialDependent').val(dependentValue);
        var perUnitOfValue = $('#per_unit_of-'+milestoneRow+'-'+rowId).val();
        $('#materialPerUnitOf').val(perUnitOfValue);
        var factorValue = $('#factor-'+milestoneRow+'-'+rowId).val();
        $('#materialFactor').val(factorValue);
        var fixedSizeValue = $('#fixed_size-'+milestoneRow+'-'+rowId).val();
        $('#materialFixedSize').val(fixedSizeValue);
        var durationTypeValue = $('#duration_type-'+milestoneRow+'-'+rowId).val();
        $('#duration_type').val(durationTypeValue);
        var durationFactorValue = $('#duration_factor-'+milestoneRow+'-'+rowId).val();
        $('#duration-factor').val(durationFactorValue);
        var durationHoursValue = $('#duration_hours-'+milestoneRow+'-'+rowId).val();
        $('#duration-hours').val(durationHoursValue);
        

        if(dependentValue == 'fixed'){
            $('#per-unit-col').hide();
            $('#factor-col').hide();
            $('#project-size-col').css('display','block');

        }else{
            $('#per-unit-col').show();
            $('#factor-col').show();
            $('#project-size-col').css('display','none');
        } 
        
        if(durationTypeValue == 'fixed'){
            $('#duration_hours_per_unit').hide();
            $('#duration_hours').css('display','block');

        }else{
            $('#duration_hours').hide();
            $('#duration_hours_per_unit').css('display','block');
        }
        
    }

    function removeMilestonePricing(projectId,milestoneRow,rowId){
        var milestoneId = $('#hidden_project_milestone_id-'+milestoneRow+'-'+rowId).val();
        var resourceId = $('#milestonePricingRow-'+milestoneRow+'-'+rowId).data('id');
        
        $.ajax({
            url  : "{{url('projects/delete/material-resource')}}",
            type : "POST",
            data : {
                        _token: "{{ csrf_token() }}",
                        projectId : projectId,
                        milestoneId : milestoneId,
                        resourceId : resourceId,
                    },
            success	: function(response){
                if(response){
                    Swal.fire({
                        type: 'success',
                        title: 'Deleted',
                        text: 'Material Resource Deleted Successfully!',
                    });
                    setTimeout(function() {
                        window.location.reload();
                    }, 3000);
                }else{
                    Swal.fire({
                        type: 'error',
                        title: 'Oops..',
                        text: 'Something went wrong!',
                    });
                }
            }
        });
    }

    function typeSuggestion(field){
        let inputField = '';
        inputField = document.getElementById('materialName');
        let material = inputField.value;

        $.ajax({
            url  : "{{url('projects/get/material-type')}}",
            type : "POST",
            data : {
                        _token: "{{ csrf_token() }}",
                        material : material,
                    },
            success	: function(typesArray){
                console.log(typesArray);
                uomSuggestion(field,typesArray);
            }
        });
        
    }

    function formatInput(input) {
        const numberWithCommas = input.value;
        const numberWithNoCommas = numberWithCommas.replace(/,/g, '');
        const normalNumber = parseFloat(numberWithNoCommas);
        if(!isNaN(normalNumber)){
            const number = Number(normalNumber);
            const formatter = new Intl.NumberFormat('en-US');
            const formattedNumber = formatter.format(normalNumber);
            input.value = formattedNumber;
        }
	}

    
</script>
@endsection