@extends('admin/layout')
@section('page_title','Manage District Code')
@section('manage_marketing_select','active')
@section('container')
@if($id>0)
   @php
      $image_required="";
   @endphp
   @else
   @php
      $image_required="required";
   @endphp
@endif


    <h1 class="mb10">Manage District Code</h1>
    <a href="{{url('admin/marketing_b2b')}}">
        <button type="button" class="btn btn-success">
            Back
        </button>
    </a>
    <div class="row m-t-30">
        <div class="col-md-12">
            <form action="{{route('marketing_b2b.manage_marketing_b2b_process')}}"  name="autocomplete-textbox" id="autocomplete-textbox" method="post">
        <div class="row">
<div class="col-lg-12">
<div class="card">
    <div class="card-body">

    @csrf

    <div class="form-group">
        <div class="row">
            <div class="col-md-4">
        <label for="country_id" class="control-label mb-1">Country</label>
       <select id="country_id" name="country_id" type="text" class="form-control" aria-required="true" aria-invalid="false" required>
           <option value="">Select Country</option>
           @foreach($countries as $country)
           @if($country_id==$country->id)
            <option selected value="{{$country->id}}">
                @else
                <option value="{{$country->id}}" selected >
                @endif
                {{$country->name}}</option>
            @endforeach
       </select>
   </div>

    <div class="col-md-4">
      <label for="state_id" class="control-label mb-1"> State</label>
      <select id="state_id" name="state_id" class="form-control" required>
         @foreach($states as $state)
           @if($state_id==$state->id)
            <option selected value="{{$state->id}}">{{$state->name}}</option>
            @endif
            @endforeach         
      </select>
   </div>

    <div class="col-md-4">
        <label for="model" class="control-label mb-1"> District Name</label>
        <input id="district_name" name="district_name" type="text" class="form-control" value=" " required> 
   </div>
    <div id="vendor_list"></div>
       </div>
    </div>

<div class="form-group">
    <div class="row">
        <div class="col-md-4">
            <label for="district_code" class="control-label mb-1">District Code</label>
            <input id="district_code" name="district_code" type="text" class="form-control numbersOnly" aria-required="true" aria-invalid="false" value="{{$district_code}}"> 
            <span id="distCode_error"></span>
        </div>
</div>
</div>

</div>
</div>
</div>
            </div>     

             <div class="position-relative form-check">
                <button id="districtCode" type="submit" class="mt-2 btn btn-primary pull-left">
                    Submit
                </button>
            </div>
<input type="hidden" name="id" value="{{$id}}">
</form>

        </div>
    </div>
                        
@endsection
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


<script>

    $(document).ready(function() {
        $('#country_id').on('change load', function() {
            var country_id = this.value;
           // alert(country_id);
            $("#state_id").html('');
            $.ajax({
                url:"{{url('admin/get-states-by-country')}}",
                type: "POST",
                data: {
                country_id: country_id,
                _token: '{{csrf_token()}}' 
                },
                dataType : 'json',
                success: function(result){
                    //console.log(result);
                    $('#state_id').html('<option value="">Select State</option>'); 
                        $.each(result.states,function(key,value){
                        $("#state_id").append('<option class="stateOption" value="'+value.id+'">'+value.name+'</option>');
                        if(result.lastSubId!='' && result.lastSubId==value.id){ 
                           console.log(result.lastSubId);
                          // console.log(value.id);
                          $('.stateOption').attr("selected", true);
                           }
                        });
                    $('#district_name').html('Select State First');
                    var sujId = {type:"load",name: result.lastSubId};
                        //alert(sujId+'--csid----');
                        $("#state_id").trigger(sujId); 
                }
            });
        }).triggerHandler('change');    



         $( "#district_name" ).autocomplete({
 
            source: function(request, response) {
                $.ajax({
                    url: "{{url('admin/search-from-db')}}",
                    data: {
                            term : request.term
                     },
                    dataType: "json",
                    success: function(data){
                        console.log(data);
                       $('#vendor_list').html(data);
                    }
                });
            },
        minLength: 2
     });

    });

   /* $('.list-group-item').on('click', function(){
            console.log("ghsgfghsgdfhsd");
            alert("clikkk");
    var item_select = $(this).text();
    $('#vendor_id').val(item_select);
    $('#vendor_list').html("");
 });*/


    $(function(){

    $(document).on("click", ".list-group li", function(event) {
      alert($(this).text()+" clicked");
      var item_select = $(this).text();
    $('#district_name').val(item_select);
    $('#vendor_list').html("");
    });
});
</script>