@extends('template.app')

@section('meta')
@endsection

@section('title')
    Team Master Create
@endsection

@section('styles')
<style>
     .col-sm-3{
        font-size: 15px;
    }
    .form-control{
        height: 32px;
    }
</style>
@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">Team 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('team_master') }}" class="text-muted">Team Master</a></li>
                        <li class="breadcrumb-item text-muted active" aria-current="page">Create</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('team_master.insert') }}" name="form" id="form" method="post" enctype="multipart/form-data">
                        @csrf
                        @method('POST')
                        <div class="column-layout">
                            <div class="form-group col-sm-3">
                                <label for="team_name">Team Name</label>
                                <input type="text" name="team_name" id="team_name" class="form-control" placeholder="Enter Team name" required="required">
                                <span class="kt-form__help error team_name"></span>
                            </div>    
                            <div class="form-group col-sm-3">
                                <label for="branch_name">Branch Name <span class="required" style="color: red;">*</span></label>
                                <select name="branch_name" id="branch_name" class="form-control" required="required"> 
                                    <option value="">Select Branch Name</option>
                                    @if(isset($data) && $data->isNotEmpty())
                                        @foreach($data AS $row)
                                            <option value="{{ $row->id }}">{{ ucfirst(str_replace('_', ' ', $row->name)) }}</option>
                                        @endforeach
                                    @endif
                                </select>
                                <span class="kt-form__help error branch_name"></span>
                            </div>
                            
                            <div class="form-group col-sm-3">
                                <label for="department">Department</label>

                                <select class="form-control" name="department" id="department" 
                                 required="required">
                                </select>
                                
                                <span class="kt-form__help error department"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn waves-effect waves-light btn-sm btn-rounded btn-outline-primary">Submit</button>
                            <a href="{{ route('team_master') }}" class="btn waves-effect waves-light btn-sm btn-rounded btn-outline-secondary">Back</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    $("#percentage").keyup(function(e){
        $('.percentage').html('');
        if ($(this).val() > 99){
            $('.percentage').html('');
            $('.percentage').html('Enter Value Between 0 to 100!');
            $(this).val();
            $(this).val(100);
        }else if($(this).val() <= 99){
            $('.percentage').html('');
        }
    });

</script>

<script>

    $(document).ready(function() {
        

        var form = $('#form');
        $('.kt-form__help').html('');
        form.submit(function(e) {
            $('.help-block').html('');
            $('.m-form__help').html('');
            $.ajax({
                url: form.attr('action'),
                type: form.attr('method'),
                data: new FormData($(this)[0]),
                dataType: 'json',
                async: false,
                processData: false,
                contentType: false,
                success: function(json) {
                    return true;
                },
                error: function(json) {
                    if (json.status === 422) {
                        e.preventDefault();
                        var errors_ = json.responseJSON;
                        $('.kt-form__help').html('');
                        $.each(errors_.errors, function(key, value) {
                            $('.' + key).html(value);
                        });
                    }
                }
            });
        });
    });

       function car_mveriant(e){
          var id = e.value;
             $.ajax({
                url : "{{ url('team_master/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_name_new(id,option_check){
              $.ajax({
                  url : "{{ url('team_master/car_drop_down_get/') }}",
                  data : {'id' : id,'option_check': option_check},
                  type : 'get',
                  dataType : 'json',

                  success : function(resp){  
                      var e_row = resp.data.Carvarient_arr;
                       // console.log(e_row);
                      

                      var html = '';
                      html +='<option value="">Select Department</option>';
                      jQuery.each(e_row, function(key, val){
                         

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

                      jQuery("#department").empty();
                      jQuery("#department").html(html);
                       // console.log('=========');
                  }
              });
        }

          


          jQuery(document).on('change', '#branch_name', function(e){
              var id = $('#branch_name').val();
              var option_check = 'department';
              // alert('1');
             car_name_new(id,option_check);
          });

</script>
@endsection