@extends ('../welcome')
<!-- namespace App; -->


@section ('content')
<div class="card">
    <div class="card-body register-card-body mt-5 ml-4">

        <form action="{{ route('leads.update',$lead->id) }}" method="POST">
            @csrf
            @method('PUT')
            <input type="hidden" value="{{$lead->id}}" name="id">
            <div class="row">
                <div class="col-6">
                    <div class="row">
                        <div class="form-group col-10">
                            <label>Name</label>
                            <input type="text" name="name" value="{{old('name',$lead->name)}}" class="form-control">
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-5">
                            <label>Job Title</label>
                            <input type="text" class="form-control" value="{{old('job_title',$lead->job_title)}}" name="job_title">
                        </div>
                        <div class="form-group col-5">
                            <label>Email</label>
                            <input type="email" class="form-control" placeholder="email@example.com" value="{{old('email',$lead->email)}}" name="email">
                        </div>
                    </div>

                    <div class="row">
                        <div class="form-group col-5">
                            <label>Campaign</label>
                            <select name="campaign_id" class="custom-select form-control-border" id="campaigns">
                                <option></option>
                                @foreach ($campaigns as $campaign)
                                <option value="{{$campaign->id}}" {{$campaign->id == $lead->campaign_id ? 'selected' : ''}}>{{$campaign->name}}
                                </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group col-5">
                            <label for="sources">Lead Target</label>
                            <select name="source_id" id="sources" class="select2 custom-select form-control-border">

                            </select>
                        </div>
                        <br>
                        <label for="sources">Current Source: {{$lead->source?->name}}</label>
                        <br>
                        <div class="form-group col-5">
                            <label>Source</label>
                            <input type="text" class="form-control" value="{{$lead->came_from}}" name="came_from">
                        </div>
                    </div>
                    <div class="row">
                        {{--<div class="form-group col-5">
                            <label for="user_id">Assigned User</label>
                            <select name="user_id" class="select2 custom-select form-control-border" id="user_id">
                                <option value=""></option>
                                @foreach ($users as $user)
                                <option {{ $user->id === old('user_id',$lead->user_id) ? 'selected' : '' }}
                        value="{{$user->id}}">
                        {{$user->name}} - {{$user->roles[0]->name}}</option>
                        @endforeach
                        </select>
                    </div>--}}
                    {{--<div class="form-group col-3">
                            <label>Status</label>
                            <select name="status" class="select2 custom-select form-control-border" id="status">
                                <option value="new" {{old('status',$lead->status) == 'new' ?'selected':''}}>New</option>
                    <option value="in-process" {{old('status',$lead->status) == 'in-process' ?'selected':''}}>In-Process
                    </option>
                    <option value="interestad" {{old('status',$lead->status) == 'interestad' ?'selected':''}}>Interestad
                    </option>
                    <option value="not_interested" {{old('status',$lead->status) == 'not_interested' ?'selected':''}}>
                        Not Interested</option>
                    <option value="wait" {{old('status',$lead->status) == 'wait' ?'selected':''}}>Wait
                    </option>
                    <option value="follow_up" {{old('status',$lead->status) == 'follow_up' ?'selected':''}}>
                        Follow Up
                    </option>
                    <option value="recycled" {{old('status',$lead->status) == 'recycled' ?'selected':''}}>
                        Recycled
                    </option>
                    <option value="converted" {{old('status',$lead->status) == 'converted' ?'selected':''}}>
                        Converted
                    </option>
                    <option value="dead" {{old('status',$lead->status) == 'dead' ?'selected':''}}>Dead
                    </option>
                    </select>
                </div>--}}


                <!-- <div class="col-9"></div> -->
                <div class="col-10" style="display:flex;justify-content:center;">
                    <button type="submit" class="btn btn-primary" style="width: 33%; margin-top:20px;">Submit</button>
                </div>
            </div>
    </div>
    <div class="col-6">
        <div id="inputFormRow">
            <div class="row">
                <div class="col-4">
                    <label>Mobile Numbers</label>
                    <button style="margin-top:-5px" id="addRow" type="button" class="btn btn-light" style="margin-top:33px">
                        <i class="fas fa-plus"></i>
                    </button>
                </div>
            </div>
            @foreach($phones as $phone)
            <div class="row">
                <div class="col-3">
                    <div class="form-group" style="margin-top:20px;">
                        <select name="country_id[]" class="select2 custom-select form-control-border" id="Country">
                            <!-- <option value="">RemoveIt</option> -->
                            @foreach ($countries as $country)
                            <option value="{{$country->id}}" {{$country->id == $phone->country->id ? 'selected' : ''}}>
                                {{$country->name}} +{{$country->phonecode}}
                            </option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-6">
                    <input type="text" class="form-control m-input" value="{{$phone->phone}}" placeholder="Phone Number" name="mobile_number[]" minlength="4" id="phone" oninvalid="this.setCustomValidity('Minimum length is 4 char')" style="margin-top:20px;">
                </div>
            </div>
            @endforeach
            <div id="newRow"></div>
        </div>
    </div>
</div>
<!-- /.col -->
</div>

</form>
</div>
<!-- /.form-box -->
</div><!-- /.card -->

<script src="{{asset('asset/plugins/jquery/jquery.min.js')}}"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
    // add row
    $("#addRow").click(function() {
        var html = '';
        html += `
    <div id="inputFormRow">
        <div class="row" >
            <div class="col-3">
                <div class="form-group" style="margin-top:20px;">
                <select name="country_id[]" class="select2 custom-select form-control-border" id="Country">
                    @foreach ($countries as $country)
                    <option value="{{$country->id}}">{{$country->name}} +{{$country->phonecode}}</option>
                    @endforeach
                </select>
                </div>
            </div>
            <div class="col-6" style="margin-top:20px;">
                <input type="text" class="form-control m-input" value="{{old('phone_number')}}"
                    placeholder="Phone Number" minlength="4" id="phone" oninvalid="this.setCustomValidity('Minimum length is 4 char')" name="mobile_number[]">
            </div>
                    
            <div class="col-2" style="padding-top:35px;margin-top:-15px">
                <button id="removeRow" type="button" class="btn btn-danger">
                <i class="fas fa-trash-alt"></i>
                </button>
            </div>
        </div>
    </div>`;

        $('#newRow').append(html);
    });

    // remove row
    $(document).on('click', '#removeRow', function() {
        $(this).closest('#inputFormRow').remove();
    });
    $(document).on('change', '#campaigns', function() {
        // console.log(this.value);
        var data = this.value;

        $.ajax({
            data: {
                'campaign_id': data
            },
            method: "POST",
            url: "{{route('campaignSources')}}",

            success: function(dataResult) {
                var dataResult = JSON.parse(dataResult);
                console.log(dataResult.sources);
                let sources = "";


                Array.from(dataResult.sources).forEach(myFunction2);

                function myFunction2(item, index) {
                    sources += `<option value="` + item.id + `">` + item.name + `</option>`;
                }
                document.getElementById("sources").innerHTML = sources;
            }
        });
    });
</script>
@endsection