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


@section ('content')
<style>
    #phone:invalid:focus {
        border-color: red;
    }
</style>
<div class="card">
    <div class="card-body register-card-body mt-5 ml-4">

        <form id="myForm" action="{{ route('leads.store') }}" method="POST">
            @csrf
            <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')}}" 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')}}" 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')}}" 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 value=""></option>    
                            @foreach ($campaigns as $campaign)
                                <option value="{{$campaign->id}}">{{$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>
                        <div class="form-group col-5">
                            <label>Source</label>
                            <input type="text" class="form-control" value="{{old('came_from')}}" name="came_from">
                        </div>
                    </div>
                    <input type="hidden" name="status" value="New">

                    <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>
                                @forelse ($users as $user)
                                <option {{old('user_id') == $user->id? 'selected' : ''}} value="{{$user->id}}">
                                    {{$user->name}}
                                </option>
                                @empty
                                @endforelse
                            </select>
                        </div>
                        <div class="form-group col-5">
                            <label for="comment">Note</label>
                            <textarea style="margin-left:2px; margin-bottom: 50px;" type="text" placeholder="Add New Comment" class="form-control" rows="2" cols="10" name="comment"></textarea>
                        </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>Country</label>
                                <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 class="col-6">
                                <label>Mobile Number</label>
                                <input type="text" class="form-control m-input" value="{{old('phone_number')}}" placeholder="Phone Number" name="mobile_number[]" id="phone" required>
                            </div>

                            <button id="addRow" type="button" class="btn btn-info" style="margin-top:33px">
                                <i class="fas fa-plus"></i>
                            </button>
                        </div>
                        <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-4">
                <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" id="phone" 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() {
        var data = this.value;
        $.ajax({
            data: {
                'campaign_id': data
            },
            method: "POST",
            url: "{{ route('campaignSources') }}",

            success: function(dataResult) {
                var dataResult = JSON.parse(dataResult);
                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