@extends('layouts.app')

@section('appjs')
<script type="application/javascript" src="{{ asset('js/app.js') }}"></script>
@endsection

@section('content')

@section('page_title') Create Client Account @endsection
<div class="container">
    <div class="row">
        <div class="col-10 offset-md-1">
            <div class="card">
                <div class="card-header">
                    <h4>Create Client Account
                        <a class="btn  btn-sm pull-right btn-dark" href="{{url('getleadReport')}}">Client Panel</a>
                    </h4>
                </div>
                <div class="card-body">
                    <form method="post" action="{{route('addLeadAccount')}}" enctype="" autocomplete="off">
                        {{ csrf_field() }}
                        <div class="form-group row">
                            <label for="client_name" class="col-sm-3 col-form-label">Client Name</label>
                            <div class="col-sm-6">
                                <input name="client_name" type="text" class="form-control" id="client_name" value="{{old('client_name')}}" placeholder="Please Enter Client Name" oninput="this.value = this.value.replace(/[^a-zA-Z. ]/g, '').replace(/(\..*?)\..*/g, '$1');" title="Only Alphabets,Dot,Space & 2 to 75 Characters Allowed" onKeyPress="if(this.value.length==75) return false;" required>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="city" class="col-sm-3 col-form-label">City</label>
                            <div class="col-sm-6">
                                <input name="city" type="text" class="form-control" id="city" value="{{old('city')}}" placeholder="Please Enter City" required>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="state" class="col-sm-3 col-form-label">State</label>
                            <div class="col-sm-6">
                                <input name="state" type="text" class="form-control" id="state" value="{{old('state')}}" placeholder="Please Enter state" required>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="state" class="col-sm-3 col-form-label">Pincode</label>
                            <div class="col-sm-6">
                                <input name="pincode" id="pincode" value="{{ old('pincode') }}" class="form-control" placeholder="Enter Pincode">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="contact_person" class="col-sm-3 col-form-label">Contact Person</label>
                            <div class="col-sm-6">
                                <input name="contact_person" type="text" class="form-control" id="contact_person" value="{{old('contact_person')}}" placeholder="Please Enter contact_person" required>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="mobile_number" class="col-sm-3 col-form-label">Mobile Number</label>
                            <div class="col-sm-6">
                                <input name="mobile_number" type="text" class="form-control" id="mobile_number" value="{{old('mobile_number')}}" placeholder="Please Enter mobile_number" oninput="this.value = this.value.replace(/[^0-9+]/g, '').replace(/(\..*?)\..*/g, '$1');" onKeyPress="if(this.value.length==15) return false;" required>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="contact_person" class="col-sm-3 col-form-label">Alternate Contact Person</label>
                            <div class="col-sm-6">
                                <input name="alternate_contact_person" type="text" class="form-control" id="alternate_contact_person" value="{{old('alternate_contact_person')}}" placeholder="Please Enter Alternate Contact Person" required>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="mobile_number" class="col-sm-3 col-form-label">Alternate Mobile Number</label>
                            <div class="col-sm-6">
                                <input name="alternate_mobile_number" type="text" class="form-control" id="alternate_mobile_number" value="{{old('alternate_mobile_number')}}" placeholder="Please Enter Alternate Mobile Number" oninput="this.value = this.value.replace(/[^0-9+]/g, '').replace(/(\..*?)\..*/g, '$1');" onKeyPress="if(this.value.length==15) return false;" required>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="email" class="col-sm-3 col-form-label">Email</label>
                            <div class="col-sm-6">
                                <input name="email" type="text" class="form-control" id="email" value="{{old('email')}}" placeholder="Please Enter email" title="Please Enter Letters (a-z), Numbers (0-9)." oninput="this.value = this.value.replace(/[^0-9a-zA-Z@. ]/g, '').replace(/(\*?)\*/g, '$1'); "required>
                                <span class="error-emailid span-error redIcon"></span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="website" class="col-sm-3 col-form-label">Website</label>
                            <div class="col-sm-6">
                                <input name="website" type="text" class="form-control" id="website" value="{{old('website')}}" placeholder="Please Enter website" required>
                            </div>
                        </div>
                        <div class="row product_pitch_div">
                                <div class="form-group col-md-2 offset-sm-3">
                                    <label for="product_pitch_type">Product Pitched</label>
                                    <select name="product_pitch_type[]" id="product_pitch_type" data-row-id='0' class="form-control" required>
                                        <option value="">Select Option</option>
                                        <option value="0">SMS</option>
                                        <option value="1">RichMedia</option>
                                        <option value="2">WhatsApp</option>
                                        <option value="3">My Data API</option> 
                                    </select>
                                </div>
                                <button type='button' id='add_urls' class='add_urls fa fa-plus-square greenIcon  mt-3'></button>
                                <!-- <div class="form-group mt-2  col-md-6 d-flex justify-content-between ">
                                    <div class="form-check form-check-inline mt-3 trans_div">
                                        <input type="radio" id="promotional" name="promotrans" value="1">
                                        <label for="promotional" class="ml-2 mt-2">Promotional</label><br>
                                    </div>
                                    <div class="form-check form-check-inline mt-3 ml-4  trans_div">
                                        <input type="radio" id="transactional" name="promotrans" value="2">
                                        <label for="transactional" class="ml-2 mt-2">Transactional</label><br>   
                                    </div>
                                </div> -->
                            
                        </div>
                        <div class="form-group row">
                            <div class="offset-sm-5 col-sm-3 mt-3">
                                    <button type="submit" id="addLeadaccount" class="btn btn-primary" >Submit</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    // // Adding Product Pitched 
    // var max_fields      = 2; //maximum input boxes allowed
    // var wrapper         = $(".product_pitch_div"); //Fields wrapper
    // var add_button      = $(".add_urls"); //Add button ID
    // var x = 0; //initlal text box count
    // $(add_button).click(function(e){ //on add input button click
    //     e.preventDefault();
    //     x = (e.isTrigger && (wrapper.html()=='')) ? 0 : x;
    //     if(x < max_fields){ //max input box allowed
    //         x++; //text box increment
    //         $(wrapper).append(` <div class="row" id="tag_div${x}">
    //                             <div class="form-group col-md-3">
    //                                 <label for="product_pitch_type">Product Pitched</label>
    //                                 <select name="product_pitch_type[]" data-row-id="${x}" id="product_pitch" class="form-control">
    //                                     <option value="">Select Option</option>
    //                                     <option value="0">SMS</option>
    //                                     <option value="1">RichMedia</option>
    //                                     <option value="2">WhatsApp</option>
    //                                 </select>
    //                             </div>
    //                             <div class="form-group mt-2  col-md-6 d-flex justify-content-between">
    //                                 <div class="form-check form-check-inline mt-3 transactional_div">
    //                                     <input class="form-check-input" type="radio" name="transpromo[${x}]" id="transpromo_promotional[${x}]" value="1">
    //                                     <label class="ml-2 mt-2" for="transpromo_promotional[${x}]">Promotional</label>
    //                                 </div>
    //                                 <div class="form-check form-check-inline mt-3 ml-4 transactional_div">
    //                                     <input class="form-check-input" type="radio" name="transpromo[${x}]" id="transpromo_transactional[${x}]" value="2">
    //                                     <label class="ml-2 mt-2" for="transpromo_transactional[${x}]">Transactional</label>
    //                                 </div>
    //                                 <button class="remove_urls fa fa-minus-square redIcon ml-4 mt-3" data-tag="tag_div${x}"></button>
    //                             </div>
    //                             </div>`); 
    //     }
    //     $(wrapper).on("change load", `#tag_div${x} #product_pitch`, function (e) {
    //         var dataRowId = $(this).data("row-id");
    //         // Define an array of data-row-id values to check
    //         var dataRowIdsToCheck = [1, 2];
    //         // Iterate over each data-row-id value
    //         for (var i = 0; i < dataRowIdsToCheck.length; i++) {
    //             var currentDataRowId = dataRowIdsToCheck[i];
    //             if (dataRowId == currentDataRowId) {
    //                 if ($(this).val() == '1') {
    //                     $(`#tag_div${currentDataRowId} .transactional_div`).hide();
    //                 } else {
    //                     $(`#tag_div${currentDataRowId} .transactional_div`).show();
    //                 }
    //             }
    //         }
    //     });
    //     $(wrapper).on("change load", `#tag_div${x} #product_pitch`, function (e) {
    //         var dataRowId = $(this).data("row-id");
    //         var transactionalDiv = $(`#tag_div${dataRowId} .transactional_div`);
    //         var promotionalRadio = $(`#transpromo_promotional\\[${dataRowId}\\]`);

    //         if ($(this).val() == '1') {
    //             transactionalDiv.hide();
    //             promotionalRadio.prop('checked', true); // Select the "Promotional" radio button
    //         } else {
    //             transactionalDiv.show();
    //         }
    //     });

    //     if(x==max_fields){
    //         add_button.attr("disabled",true);
    //     }else{
    //         add_button.blur();
    //         add_button.removeAttr("disabled",false);
    //     }
    // });
       
    // $(wrapper).on("click",".remove_urls", function(e){
    //     var url_section_id = $(this).attr('id');
    //     var tag_div = $(this).attr("data-tag");
    //     e.preventDefault();
    //     $('#'+url_section_id).remove(); x--;
    //     $('#'+tag_div).remove();
    //     add_button.removeAttr("disabled",false);
    // })

    // $('#product_pitch_type').change(function () {
    //     var selectedValue = $(this).val();
    //     var transDiv = $('.trans_div');
    //     var promotionalRadio = $('#promotional');
    //     var transactionalRadio = $('#transactional');

    //     if (selectedValue == '1') {  // Assuming '1' corresponds to "RichMedia"
    //         transDiv.hide();
    //         promotionalRadio.prop('checked', true);
    //     } else {
    //         transDiv.show();
    //     }
    // });


  // Adding Product Pitched 
var max_fields = 3; // maximum input boxes allowed
var wrapper = $(".product_pitch_div"); // Fields wrapper
var add_button = $(".add_urls"); // Add button ID
var x = 0; // initial text box count

$(add_button).click(function (e) { // on add input button click
    e.preventDefault();
    x = (e.isTrigger && (wrapper.html() == '')) ? 0 : x;
    if (x < max_fields) { // max input box allowed
        x++; // text box increment
        $(wrapper).append(` <div class="form-group col-md-2" id="tag_div${x}">
                                    <label for="product_pitch_type">Product Pitched</label>
                                    <select name="product_pitch_type[]" data-row-id="${x}" id="product_pitch" class="form-control">
                                        <option value="">Select Option</option>
                                        <option value="0">SMS</option>
                                        <option value="1">RichMedia</option>
                                        <option value="2">WhatsApp</option>
                                        <option value="3">My Data API</option> 
                                    </select>
                                    </div>
                                    <button class="remove_urls fa fa-minus-square redIcon  mt-3" data-tag="tag_div${x}"></button>
                                    `);
    }

    $(wrapper).on("click", ".remove_urls", function (e) {
        var tag_div = $(this).attr("data-tag");
        e.preventDefault();
        
        // Remove both the div and the button
        $('#' + tag_div).add(this).remove();
        
        x--;
        add_button.removeAttr("disabled", false);
    });

});

$("#email").on("change", function(e){
    let emailid = $(this).val().trim();
    var sub_button = $("#addLeadaccount");
    var emailregex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
     if(emailregex.test(emailid)==true){
        $.ajax({
            type: 'post',
            url: 'checkExistEmail',
            headers: {
             'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: {
                "emailid":emailid,
                "dataType": 'json'
            },
            success: function(data){
              if(data==1){
                $('.error-emailid').html('Email ID already Exist!!');
                $("#addLeadaccount").attr("disabled", true);

              }else{
                $('.error-emailid').html('');
                $('#addLeadaccount').attr('disabled', false);
              }
            }
        });
     }else{
        $('.error-emailid').html('Please Enter Valid Email!!');
        $('#addLeadaccount').attr('disabled', true);  
     }
});

    </script>
@endsection