@extends('layout.master')
@section('content')

<section class="content pb-5">
    <div class="container-fluid">
        <div class="row pt-4">
            <div class="col-md-4 col-4">
                <div class="title-section">
                    <p>Support</p>
                </div>
            </div>
            <div class="col-md-8 col-8">
                <div class="float-right">
                    @foreach($user_action_permission as $key => $value)
                        @if(Auth::user()->type == $user_type && $value['menu_id'] == 29 && $value['permission_id'] == 1)
						<button type="button" class="btn btn-danger mr-2" data-toggle="modal" data-target="#addmodal">add</button>
                        @endif
                        @if(Auth::user()->type == $user_type && $value['menu_id'] == 29 && $value['permission_id'] == 3)
                        <button type="button" class="btn btn-danger mr-2" data-toggle="modal" data-target="#addmodal">edit</button>
						 @endif
                     @endforeach
                    
                </div>
            </div>
        </div>
        <div class="row py-3 pt-sm-4">
            <div class="col-md-4">
                <div class="title-section">
                    <p>Centralised Customer Service </p>
                </div>
            </div>
            <div class="col-md-8">
                <div class="float-right telephone">
                    <h6><img src="images/telephone.svg" height="25px" class="mr-2" alt=""> Toll Free Number: 1800 233 9874</h6>
                </div>
            </div>
        </div>
        
        <div class="row">
            @foreach($supports as $support)
            <div class="col-md-4">
                <div class="zone-box support-box">
                    {{-- <h6>{{ $support->city }}</h6> --}}
                    <p>{{ $support->address }} </p>
                    <div class="row align-items-center">
                        <div class="col-md-6 col-6">
                            <div class="row">
                                <div class="col-md-3 col-3">
                                    <img src="images/postaddress.svg" alt="">
                                </div>
                                <div class="col-md-9 col-9">
                                    {{-- <h6>{{ $support->city }}</h6> --}}
                                    <span>Location</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-6">
                            <div class="row">
                                <div class="col-md-3 col-3">
                                    <img src="images/location.svg" class="ml-2" alt="">
                                </div>
                                <div class="col-md-9 col-9">
                                    <h6>{{ $support->pincode }}</h6>
                                    <span>Pin code</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 mt-3">
                            <div class="row align-items-center">
                                <div class="col-md-3 col-2">
                                    <img src="images/email.svg" alt="">
                                </div>
                                <div class="col-md-9 col-10">
                                    <h6>{{ $support->email }}</h6>
                                    <span>Email</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        
        <!-- first row end  -->

        <div class="row py-0 pt-sm-4">
            <div class="col-md-6">
                <div class="title-section">
                    <p>Write To Us</p>
                </div>
                <div class="zone-box">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group custom-form-group">
                                <label class="form-label" for="first name">First Name</label>
                                <input class="form-control" placeholder="" type="text" id="customer_first_name" value="">
                                <span id="customer_first_name_error" style="display: none; color: red;"> </span>  
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group custom-form-group">
                                <label class="form-label" for="mobile">Mobile No</label>
                                <input class="form-control" placeholder="" type="text"  id="customer_phone_no" value="">
                                <span id="customer_phone_no_error" style="display: none; color: red;"> </span>  
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group custom-form-group">
                                <label class="form-label" for="email">Email</label>
                                <input class="form-control" placeholder="" type="email" id="customer_email" value="">
                                <span id="customer_email_error" style="display: none; color: red;"> </span>  
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group custom-form-group">
                                <label class="form-label" for="query">Query</label>
                                <select class="form-control" id="customer_query" >
                                    <option value="">Select Queries</option>
                                    @foreach($queries as $query)
                                    <option value="{{$query->id}}">
                                        {{$query->name}} 
                                    </option>
                                    @endforeach
                                </select>
                                <span id="customer_query_error" style="display: none; color: red;"> </span>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group custom-form-group">
                                <label class="form-label" for="query">Description</label>
                                <textarea class="form-control" id="customer_description" rows="3" value=""></textarea>
                                <span id="customer_description_error" style="display: none; color: red;"> </span>
                            </div>
                        </div>
                    </div>
                    <button type="button" class="btn btn-danger" onclick="submitForm()"  data-request="ajax-submit" data-target="[role=post-data]">Send</button>
                </div>
            </div>
        </div>
    </div>

        <!-- MODAL -->

        <div class="modal fade" id="addmodal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-md">
               <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title " id="exampleModalLongTitle"> 
                    <div class="title-section"><p> Add Customer Details</p></div></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true"><img src="images/close.png" height="30px" alt=""></span>
                    </button>
                    </div>
                 <div class="modal-body">
                    <div class="row">
                      <div class="col-md-6">
                        <div class="form-group custom-form-group">
                          <label class="form-label" for="city">Address</label>
                            <input class="form-control" id="customer_address" placeholder="" type="text" value="@foreach($supports as $support) {{ $support->address }}  @endforeach   ">
                            <span id="customer_address_error" style="display: none; color: red;"> </span> 
                        </div>
                      </div>
                      <div class="col-md-6">
                        <div class="form-group custom-form-group">
                          <label class="form-label" for="city">State</label>
                          <select class="form-control"  name="state_id"  id="customer_state_id" value="{{ old('state_id') }}">
                            <option value="">Select State</option>
                                @foreach($states as $state)
                                    <option value="{{$state->id}}">
                                        {{$state->name}}
                                    </option>
                                @endforeach
                          </select>
                          <span id="customer_state_id_error" style="display: none; color: red;"> </span> 
                        </div>
                      </div>
                      <div class="col-md-6">
                        <div class="form-group custom-form-group">
                          <label class="form-label" for="state">City</label>
                          <select class="form-control" name="city_id" id="customer_city_id"  onchange="getCities(this)" value="{{ old('city_id') }}">
                            <option value="">Select City</option>
                                @foreach($cities as $city)
                                    <option value="{{$city->id}}">
                                        {{$city->name}}
                                    </option>
                                @endforeach
                          </select>
                          <span id="customer_city_id_error" style="display: none; color: red;"> </span>
                        </div>
                      </div>

                      <div class="col-md-6">
                        <div class="form-group custom-form-group">
                          <label class="form-label" for="state">Pincode</label>
                          <input class="form-control" placeholder="" type="text"  id="customer_pincode" value="@foreach($supports as $support) {{ $support->pincode }}  @endforeach">
                          <span id="customer_pincode_error" style="display: none; color: red;"> </span>
                        </div>
                      </div>

                      <div class="col-md-12">
                        <div class="form-group custom-form-group">
                          <label class="form-label" for="state">E-mail</label>
                          <input class="form-control" placeholder="" type="text"  id="customer_email1"  value="@foreach($supports as $support) {{ $support->email }}  @endforeach">
                          <span id="customer_email1_error" style="display: none; color: red;"> </span>
                        </div>
                      </div>

                      <div class="col-md-12">
                        <button type="button" class="btn btn-danger" onclick="submitData()" id="submitButton" data-request="ajax-submit" data-target="[role=post-data]">Submit</button>
                      </div>
                      </div>
                     </div>
                </div>
              </div>
        </div>

    </div>
</section>
<script>

 function submitData(){
     //console.log("hello"); return false;
     let address = $('#customer_address').val();
     let state = $('#customer_state_id').val();
     let city = $('#customer_city_id').val(); 
     let pincode = $('#customer_pincode').val();
     let email = $('#customer_email1').val();
     let query_id = $('#customer_query').val();
     let data = {
          address: address, 
           state_id: state,
           city_id: city,
           pincode:pincode,
           email:email,
           '_token': '{{{csrf_token()}}}'
        }
    $.ajax({
         type: 'POST',
         url: "{{ route('add-support-form-data') }}", 
         data: data,
         dataType: 'json',
         success:function(data){
            //console.log(data);
            if(data.success == true) {
                
                swal({
        			icon: 'success',
        			title: "Alert",
        			text: 'Data saved successfully.',
        			type: "success",

        			closeOnConfirm: true,
        			showLoaderOnConfirm: true,
        		});

        		return;
            }
        },
            error: function(data){
        				var errors = $.parseJSON(data.responseText);
        				$.each(errors, function(index, value) {
        					console.log(index, value);
        					if (value.address) {
        					    $("#customer_address_error").show();
        					    $("#customer_address_error").html(value.address['0']);
        					}else {
        					    $("#customer_address_error").hide();
        					}

                            if(value.state_id) {

                                $("#customer_state_id_error").show();
        					    $("#customer_state_id_error").html(value.state_id['0']);

                            } else {
                                $("#customer_state_id_error").hide();
                            }

                            if(value.city_id) {

                                $("#customer_city_id_error").show();
        					    $("#customer_city_id_error").html(value.city_id['0']);

                            } else {
                                $("#customer_city_id_error").hide();
                            }

                            if(value.pincode) {

                                $("#customer_pincode_error").show();
        					    $("#customer_pincode_error").html(value.pincode['0']);

                            } else {
                                $("#customer_pincode_error").hide();
                            }

                            if(value.email) {

                                $("#customer_email1_error").show();
        					    $("#customer_email1_error").html(value.email['0']);

                            } else {
                                $("#customer_email1_error").hide();
                            }
        				});

        			}


        
        });
        
        // $(document).ajaxStop(function(){
        //     location.reload();
        // });
    

 }


 function submitForm(){

     let first_name = $('#customer_first_name').val();
     let query = $('#customer_query').val();
     let email = $('#customer_email').val(); 
     let phone_no = $('#customer_phone_no').val();
     let description = $('#customer_description').val();

     let data = {
         first_name: first_name, 
         query_id: query,
         email:email,
         phone_no:phone_no,
         description:description,
         '_token': '{{{csrf_token()}}}'
         };

    $.ajax({
        type: 'POST',
        url: "{{ route('add-feedback-form-data') }}", 
        data: data, 
        dataType: 'json',
        success:function(data){
            //console.log(data);
            if(data.success == true) {

                swal({
        			icon: 'success',
        			title: "Alert",
        			text: 'Feedback saved successfully.',
        			type: "success",

        			closeOnConfirm: true,
        			showLoaderOnConfirm: true,
        		});

        		return;
            }
        },
        			error: function(data){
        				var errors = $.parseJSON(data.responseText);

        				$.each(errors, function(index, value) {

        					console.log(index, value);

        					if (value.first_name) {

                                //console.log('first_name',value.first_name['0']);

        					    $("#customer_first_name_error").show();
        					    $("#customer_first_name_error").html(value.first_name['0']);

        					}else {

        					    $("#customer_first_name_error").hide();

        					}

                            if(value.email) {

                                $("#customer_email_error").show();
        					    $("#customer_email_error").html(value.email['0']);

                            } else {
                                $("#customer_email_error").hide();
                            }

                            if(value.phone_no) {

                                $("#customer_phone_no_error").show();
        					    $("#customer_phone_no_error").html(value.phone_no['0']);

                            } else {
                                $("#customer_phone_no_error").hide();
                            }

                            if(value.description) {

                                $("#customer_description_error").show();
        					    $("#customer_description_error").html(value.description['0']);

                            } else {
                                $("#customer_description_error").hide();
                            }

                            if(value.query_id) {

                                $("#customer_query_error").show();
        					    $("#customer_query_error").html(value.query_id['0']);

                            } else {
                                $("#customer_query_error").hide();
                            }
        				});

        			}
        });

        // $(document).ajaxStop(function(){
        //    location.reload();
        // });
}

jQuery('select[name="state_id"]').on('change',function(){
    		$('#custum-loader').removeClass('hidden');
             var state_id = jQuery(this).val();
                 if(state_id)
                 {
                  jQuery.ajax({
                   url : "{{route('cities-list')}}",
                   type : "POST",
                   data: {  _token: "{{csrf_token()}}",state_id:state_id },
                     //dataType : "json",
                     success:function(data)
                     {
                        jQuery('select[name="city_id"]').empty();
                        localStorage.setItem("city_id", JSON.stringify(data));
                         $('select[name="city_id"]').append('<option value="'+ '' +'">'+ 'Select City' +'</option>');
                        jQuery.each(data.cities, function(key,value){

                         $('select[name="city_id"]').append('<option value="'+ value.id +'">'+ value.name +'</option>');
                     });

                        $('#custum-loader').addClass('hidden');
                    }
                });
            }
      }); 

</script>
@endsection