@extends('template.app')

@section('meta')
@endsection

@section('title')
    Product Edit
@endsection

@section('content')
<div class="page-breadcrumb">
    <div class="row">
        <div class="col-7 align-self-center">
            <h4 class="page-title text-truncate text-dark font-weight-medium mb-1">Car Master</h4>
            <div class="d-flex align-items-center">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb m-0 p-0">
                        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}" class="text-muted">Dashboard</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('products') }}" class="text-muted">Car Master</a></li>
                        <li class="breadcrumb-item text-muted active" aria-current="page">Edit</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <form action="{{ route('products.update') }}" name="form" id="form" method="post" enctype="multipart/form-data">
                        @csrf
                        @method('PATCH')

                        <input type="hidden" name="id" value="{{ $data->id }}">
                        <div class="row">
                            
                            <div class="form-group col-sm-3">
                                <label for="name">Car Model</label>
                                <select class="form-control" name="car_model" id="car_model">
                                    <option value="">Select Car Model</option>
                                    @if(isset($Carmodel) && $Carmodel->isNotEmpty())
                                        @foreach($Carmodel as $car_model)
                                            <option value="{{ $car_model->id }}" @if($data->car_model == $car_model->id) selected @endif >{{ ucfirst(str_replace('_', ' ', $car_model->name)) }}</option>
                                        @endforeach
                                    @endif
                                </select>
                                <span class="kt-form__help error name"></span>
                            </div>
                            
                            <div class="form-group col-sm-3">
                                            <label for="fule_type">Fuel Type
                                            <span class="required" style="color: red;">*</span></label>
                                            <select class="form-control" name="fuel_type" id="fuel_type">
                                               
                                                  @if(isset($fuel_type) && $fuel_type->isNotEmpty())
                                                    @foreach($fuel_type AS $row)
                                                        <option value="{{ $row->id }}"       
                                                        @if($data->fuel_type == $row->id) selected @endif
                                                        >{{ $row->title ??'' }}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                            <span class="kt-form__help error fule_type"></span>
                                        </div> 
                                        
                            <div class="form-group col-sm-3">
                                <label for="veriant">Car Variant</label>
                                <select class="form-control" name="veriant" id="veriant" 
                                onchange="car_mveriant(this);" >
                                    @if(isset($Carvarient)) 
                                                @foreach($Carvarient as $model)
                                                     <option value="{{ $model->id }}" @if($data->veriant == $model->id) selected @endif> {{ $model->name }}</option>
                                                @endforeach
                                         @endif
                                </select>
                                
                                <span class="kt-form__help error veriant"></span>
                            </div>
                            <div class="form-group col-sm-3">
                                <label for="exterior_color">Exterior Color</label>
                                <select class="form-control" name="exterior_color" id="exterior_color" disabled="disabled">
                                </select>
                                <span class="kt-form__help error exterior_color"></span>
                            </div>
                           
                            <div class="form-group col-sm-3">
                                <label for="interior_color">Interior Color</label>
                                <select class="form-control" name="interior_color" id="interior_color"disabled="disabled">
                                </select>
                                <span class="kt-form__help error interior_color"></span>
                            </div>


                            <!-- <div class="form-group col-sm-3">
                                <label for="ex_showroom_price">Ex-Showroom Price</label>
                                <input type="number" name="ex_showroom_price" class="form-control" placeholder="Enter Ex-Showroom Price" value="{{ $data->ex_showroom_price ??'' }}">
                                <span class="kt-form__help error ex_showroom_price"></span>
                            </div> -->
                            
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn waves-effect waves-light btn-rounded btn-outline-primary">Submit</button>
                            <a href="{{ route('products') }}" class="btn waves-effect waves-light btn-rounded btn-outline-secondary">Cancle</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('scripts')


<script type="text/javascript">




      function car_mveriant(e){
          var id = e;
             $.ajax({
                url : "{{ url('products/carvarient/') }}",
                data : {'id' : id},
                type : 'get',
                dataType : 'json',

                success : function(resp){
                    
                    var html = ihtml = '';
                    var e_row = resp.data.Exterior_color;
                    var row = resp.data.Interior_color;

                    jQuery.each(e_row, function(key, val){ 
                        $('#exterior_color').removeAttr('disabled');
                        html += '<option value="'+val.e_id+'">'+val.e_name+'</option>';
                        
                    });

                    jQuery.each(row, function(key, val){ 
                        $('#interior_color').removeAttr('disabled');
                        ihtml += '<option value="'+val.id+'">'+val.name+'</option>';
                    });

                    jQuery("#exterior_color").empty();
                    jQuery("#exterior_color").html(html);
                    jQuery("#interior_color").empty();
                    jQuery("#interior_color").html(ihtml);
                }
            });
            
        }

        function car_mveriant_edit(value){
             var id = value;
                $.ajax({
                   url : "{{ url('products/carvarient/') }}",
                   data : {'id' : id},
                   type : 'get',
                   dataType : 'json',

                   success : function(resp){
                       
                       var html = ihtml = '';
                       var e_row = resp.data.Exterior_color;
                       var row = resp.data.Interior_color;

                        var interior_color_get = "";
                        var exterior_color_get = "";

                       jQuery.each(e_row, function(key, val){ 
                            $('#exterior_color').removeAttr('disabled');
                            var selected = '';
                            if(val.e_id == exterior_color_get){
                                selected = 'selected';
                            }
                           html += '<option value="'+val.e_id+'" '+selected+'>'+val.e_name+'</option>';
                       });

                       jQuery.each(row, function(key, val){ 
                            var selected = '';
                            if(val.id == interior_color_get){
                                selected = 'selected';
                            }
                            $('#interior_color').removeAttr('disabled');
                           ihtml += '<option value="'+val.id+'" '+selected+'>'+val.name+'</option>';
                       });

                       jQuery("#exterior_color").empty();
                       jQuery("#exterior_color").html(html);
                       jQuery("#interior_color").empty();
                       jQuery("#interior_color").html(ihtml);
                   }
               });
               
           }

        var data_veriant = "";
           
        if(data_veriant != ''){
           // car_mveriant_edit(data_veriant);
        }

        // function car_name_new(id,option_check,fuel,new_mcp){
        //       $.ajax({
        //           url : "{{ url('obf/car_drop_down_get/') }}",
        //           data : {'id' : id,'option_check': option_check,'new_mcp':new_mcp,'fuel':fuel},
        //           type : 'get',
        //           dataType : 'json',

        //           success : function(resp){  
        //               var e_row = resp.data.Carvarient_arr;
        //               // console.log(e_row);
                      
        //               var html = '';
        //               html +='<option value="">Select Veriant</option>';
        //               jQuery.each(e_row, function(key, val){
        //                   var data_veriant_get_new_id = "";
        //                   var selected = '';
        //                   if(data_veriant_get_new_id == val.id){
        //                       selected = 'selected';
        //                   }

        //                   html +='<option value="'+val.id+'" '+selected+'>'+val.name+'</option>';
        //               });
        //               /* console.log('=========');
        //               console.log(html);*/
        //               // jQuery("#veriant").empty();
        //               // jQuery("#veriant").html(html);

        //               jQuery("#veriant").empty();
        //               jQuery("#veriant").html(html);
        //               // console.log('=========');
        //           }
        //       });
        // }
        
        function car_name_new(id, option_check, fuel, new_mcp) {
        $.ajax({
            url: "{{ url('obf/car_drop_down_get/') }}",
            data: { 'id': id, 'option_check': option_check, 'new_mcp': new_mcp, 'fuel': fuel },
            type: 'get',
            dataType: 'json',
            success: function(resp) {
                var e_row = resp.data.Carvarient_arr;
                var html = '<option value="">Select Veriant</option>';
                
                jQuery.each(e_row, function(key, val) {
                    var data_veriant_get_new_id = "";
                    var selected = data_veriant_get_new_id == val.id ? 'selected' : '';
                    html += '<option value="' + val.id + '" ' + selected + '>' + val.name + '</option>';
                });
    
                let $veriant = jQuery("#veriant");
                let previousValue = $veriant.val(); // Save previous value to prevent loop
    
                $veriant.empty().html(html);
    
                if ($veriant.val() !== previousValue) {
                    $veriant.val(previousValue); // Restore previous value if it exists
                }
            }
        });
    }


        var data_car_model_id = "";

          // alert(data_car_model_id);

          if(data_car_model_id != ''){
            //  car_name_new(data_car_model_id,'Carvarient');
          }
       
          jQuery(document).on('change', '#fuel_type', function(e){
              var id = $('#car_model').val();
              var option_check = 'Carvarient';
              // alert('1');
              var fuel = $('#fuel_type').val();
              var new_mcp = 'Mcp';
             car_name_new(id,option_check,fuel,new_mcp);
          });



</script>
@endsection