@extends('layouts.dealer')

@section('content')
<div class="row" style="margin-top: 10px; margin-bottom: 10px">

        <div class="col-lg-12 col-xlg-12 col-md-12">
        <!-- Column -->
        <div class="card">
          <div class="card-body little-profile text-left bg-premium-dark">
            <h3 class="card-title">Update {{$type}} Deal</h3>
            <div class="x_content">
            <form class="form-horizontal form-label-left"  enctype="multipart/form-data"  action="{{ url('/dealer/editBillDo/'.$ev_model->id) }}" method="post">
                {{ csrf_field() }}
                <input type="hidden" name="EvUserActivation_id" value="{{$UserActivation->id}}">
                <h4 class="card-title">Select Customer And EV Model</h4>
                <div class="row">
                  <div class="col-md-6">
                    <div class="form-group">
                    <label for="username" class="control-label">Customer Username</label>                  
                          <p class="help-block">{{$user->username}}</p>

                      </div>
                  </div>
                  <div class="col-md-6">
                    <div class="form-group">
                    <label for="select_model" class="control-label">Customer Name</label>
                          <p class="help-block">{{$user->full_name}}</p>
                      </div>
                  </div>
                  <div class="col-md-3">
                      <div class="form-group">
                      <label for="select_model" class="control-label">{{($type=='EV')?"Select Model":"Select KW"}}</label>
                      <p class="help-block">{{$ev_model->title}}                  
                      
                    </div>
                  </div>
                  @if($ev_model->type=='EV' && isset($ev_model->color))
                  <div class="col-md-3">
                      <div class="form-group">
                      <label for="select_model" class="control-label">Color</label>
                      <select name="color" id="color-dropdown" class="form-control">
                          @foreach($colors as $color)
                          <option value="{{$color}}">{{$color}}</option>
                          @endforeach
                      </select>
                      @if($errors->has('color'))
                          <p class="help-block error">
                              {{ $errors->first('color') }}
                          </p>
                      @endif
                      </div>
                  </div>
                  <div class="col-md-3">
                      <div class="form-group">
                      <label for="select_model" class="control-label">HSN</label>
                      <p class="help-block" id="hsn-text">{{$ev_model->hsn}}</p>
                      </div>
                  </div>
                  <div class="col-md-3">
                      <div class="form-group">
                      <label for="select_model" class="control-label">Amount in INR</label>
                      <p class="help-block" id="amount-text">{{$ev_model->amount}}</p>
                      </div>
                  </div>
                  <div class="col-md-3">
                      <div class="form-group">
                          <label class="control-label" for="chassis_no">Chassis No.</label>
                          <input type="text" id="chassis_no" name="chassis_no" class="form-control" value="{{$UserActivation->chassis_no}}">
                      </div>
                  </div>
                  <div class="col-md-3">
                      <div class="form-group">
                          <label class="control-label" for="motor_no">Motor No.</label>
                          <input type="text" id="motor_no" name="motor_no" class="form-control" value="{{$UserActivation->motor_no}}">
                      </div>
                  </div>
                  <div class="col-md-3">
                      <div class="form-group">
                          <label class="control-label" for="battery_make">Battery Make</label>
                          <input type="text" id="battery_make" name="battery_make" class="form-control" value="{{$UserActivation->battery_make}}">
                      </div>
                  </div>
                  <div class="col-md-3">
                      <div class="form-group">
                          <label class="control-label" for="battery_no">Battery No.</label>
                          <input type="text" id="battery_no" name="battery_no" class="form-control" value="{{$UserActivation->battery_no}}">
                      </div>
                  </div>
                  <div class="col-md-3">
                      <div class="form-group">
                          <label class="control-label" for="battery_type">Battery Type</label>
                          <input type="text" id="battery_type" name="battery_type" class="form-control" value="{{$UserActivation->battery_type}}">
                      </div>
                  </div>
                  <div class="col-md-3">
                      <div class="form-group">
                          <label class="control-label" for="battery_warranty">Battery Warranty</label>
                          <input type="text" id="battery_warranty" name="battery_warranty" class="form-control" value="{{$UserActivation->battery_warranty}}">
                      </div>
                  </div>
                  @else
                    No Ev Model found
                  @endif
                </div>
                
                <div class="form-group">
                    <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
                      <button type="submit" class="btn btn-success">Submit</button>
                    </div>
                  </div>
                
              </form>
              </div>
          </div>
        </div>
    </div>
</div>


@stop

@section('javascript')

    <!-- Date picker plugins css -->
    <link href="{{ url('assets') }}/plugins/bootstrap-datepicker/bootstrap-datepicker.min.css" rel="stylesheet" type="text/css" />
    <!-- Daterange picker plugins css -->
    <link href="{{ url('assets') }}/plugins/timepicker/bootstrap-timepicker.min.css" rel="stylesheet">
    <link href="{{ url('assets') }}/plugins/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet">
    <!-- Date Picker Plugin JavaScript -->
    <script src="{{ url('assets') }}/plugins/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
    <!-- Date range Plugin JavaScript -->
    <script src="{{ url('assets') }}/plugins/timepicker/bootstrap-timepicker.min.js"></script>
    <script src="{{ url('assets') }}/plugins/bootstrap-daterangepicker/daterangepicker.js"></script>
    <script src="{{ url('assets') }}/js/jqBootstrapValidation.js"></script>

    <link href="{{ url('assets') }}/plugins/EasyAutocomplete/easy-autocomplete.min.css" rel="stylesheet">
    <script src="{{ url('assets') }}/plugins/EasyAutocomplete/jquery.easy-autocomplete.min.js"></script>
    <script src="{{ url('assets') }}/js/typeahead.bundle.js"></script>

    <script>
  $(document).ready(function() {
        

    $('#ev_model_sel').on('change', function() {
        var ev_id = this.value;
        $("#color-dropdown").html('');
        $.ajax({
            url:"{{url('/')}}/dealer/get-color-by-ev",
            type: "POST",
            data: {
            ev_id: ev_id,
            _token: '{{ csrf_token() }}' 
            },
            dataType : 'json',
            success: function(result){
            $('#color-dropdown').html('<option value="">Select Color</option>'); 
            $.each(result.colors,function(key,value){
            $("#color-dropdown").append('<option value="'+value+'">'+value+'</option>');
            });

            $("#hsn-text").html(result.hsn);
            $("#amount-text").html(result.amount);
            }
        });
    });

    var options = {

        url: function(phrase) {
          return "{{ url('/') }}/dealer/getSponsors/" + phrase;
        },

        getValue: function(element) {
          return element.username;
        },

        template: {
            type: "description",
            fields: {
                description: "full_name"
            }
        },
        list: {
              onChooseEvent: function() {
                var data = $("#sponsor-typeahead").getSelectedItemData().full_name;
                $("input#sponsor_name").val(data).trigger("change");
              }
        },
        theme: "plate-dark",
        ajaxSettings: {
          dataType: "json",
          method: "GET",
          data: {
            dataType: "json"
          }
        },
        preparePostData: function(data) {
          data.phrase = $("#sponsor-typeahead").val();
          return data;
        },

        requestDelay: 400
      };

      $("#sponsor-typeahead").easyAutocomplete(options);
  });

            

    </script>
@endsection
