@extends('template.app')



@section('meta')

@endsection



@section('title')

    Car Variant Create

@endsection



@section('styles')

<style>

     .col-sm-3{

        font-size: 15px;

    }

    .form-control {

        height: 35px !important;

        width: 260px !important;

        font-size: 14px;

    }

    .custom-height{

        height: 124px !important;

        width: 255 !important;

    }

    .custom-form-spacing {

      margin-bottom: -5px !important;

    }

</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">Car Variant 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('car_varient') }}" class="text-muted">Car Variant 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('car_varient.insert') }}" name="form" id="form" method="post" enctype="multipart/form-data">

                        @csrf

                        @method('POST')

                        <div class="container">

                            <!-- First Row: 4 Columns -->

                            <div class="row">

                                <div class="form-group col-md-3">

                                    <label for="name">Name</label>

                                    <input type="text" name="name" id="name" class="form-control" placeholder="Enter Name">

                                    <span class="kt-form__help error name"></span>

                                </div>    

                        

                                <div class="form-group col-md-3">

                                    <label for="car_model">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 }}">{{ ucfirst(str_replace('_', ' ', $car_model->name)) }}</option>

                                            @endforeach

                                        @endif

                                    </select>

                                    <span class="kt-form__help error car_model"></span>

                                </div> 

                        

                                <div class="form-group col-md-3">

                                    <label for="fule_type">Fuel Type</label>

                                    <select class="form-control" name="fule_type" id="fule_type">

                                        <option value="">Select Fuel Type</option>

                                        @if(isset($Fuletype) && $Fuletype->isNotEmpty())

                                            @foreach($Fuletype as $fule_type)

                                                <option value="{{ $fule_type->id }}">{{ ucfirst(str_replace('_', ' ', $fule_type->title)) }}</option>

                                            @endforeach

                                        @endif

                                    </select>

                                    <span class="kt-form__help error fule_type"></span>

                                </div> 

                        

                                <div class="form-group col-md-3">

                                    <label for="transmission">Transmission</label>

                                    <select class="form-control" name="transmission" id="transmission">

                                        <option value="">Select Transmission</option>

                                        @if(isset($Transmission) && $Transmission->isNotEmpty())

                                            @foreach($Transmission as $transmission)

                                                <option value="{{ $transmission->id }}">{{ ucfirst(str_replace('_', ' ', $transmission->name)) }}</option>

                                            @endforeach

                                        @endif

                                    </select>

                                    <span class="kt-form__help error transmission"></span>

                                </div> 

                            </div>

                        

                            <!-- Second Row: 4 Columns -->

                            <div class="row">

                                <!-- exterior_color -->

                                <div class="form-group col-md-3">

                                    <label for="exterior_color">Exterior Color<span class="required" style="color: red;">*</span></label>

                                    <select class="form-control custom-height" name="exterior_color[]" id="exterior_color" multiple>

                                        @if(isset($Exteriorcolor) && $Exteriorcolor->isNotEmpty())

                                            @foreach($Exteriorcolor AS $row)

                                                <option value="{{ $row->id }}"> {{ $row->name }} </option>

                                            @endforeach

                                        @endif

                                    </select>

                                    <span class="kt-form__help error exterior_color"></span>

                                </div>

                        

                                <!-- Interior_color -->

                                <div class="form-group col-md-3">

                                    <label for="Interior_color">Interior Color</label>

                                    <select class="form-control custom-height" name="Interior_color[]" id="Interior_color" multiple>

                                        @if(isset($Interiorcolor) && $Interiorcolor->isNotEmpty())

                                            @foreach($Interiorcolor AS $row)

                                                <option value="{{ $row->id }}"> {{ $row->name }} </option>

                                            @endforeach

                                        @endif

                                    </select>

                                    <span class="kt-form__help error Interior_color"></span>

                                </div>

                        

                                <!-- color_tone -->

                                <div class="form-group col-md-3">

                                    <label for="color_tone">Color Tone</label>

                                    <select class="form-control" name="color_tone[]" id="color_tone" multiple>

                                        @if(isset($Colortone) && $Colortone->isNotEmpty())

                                            @foreach($Colortone AS $row)

                                                <option value="{{ $row->id }}"> {{ $row->name }} </option>

                                            @endforeach

                                        @endif

                                    </select>

                                    <span class="kt-form__help error color_tone"></span>

                                </div>

                        

                                <div class="form-group col-md-3">

                                    <label for="hsn_code">HSN Code</label>

                                    <input type="text" name="hsn_code" id="hsn_code" class="form-control" placeholder="Enter HSN Code">

                                    <span class="kt-form__help error hsn_code"></span>

                                </div>  

                            </div>

                        

                            <!-- Third Row: 1 Column -->

                            <div class="row">

                                <div class="form-group col-md-3">

                                    <label for="tex_master_id">Tax</label>

                                    <select class="form-control" name="tex_master_id" id="tex_master_id">

                                        <option value="">Select Tax</option>

                                        @if(isset($Texmaster) && $Texmaster->isNotEmpty())

                                            @foreach($Texmaster as $value)

                                                <option value="{{ $value->id }}">GST - {{$value->gst}} | Compensation Cess - {{$value->compensation_cess}}</option>

                                            @endforeach

                                        @endif

                                    </select>

                                    <span class="kt-form__help error tex_master_id"></span>

                                </div> 

                            </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('car_varient') }}" 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);

                        });

                    }

                }

            });

        });

    });

</script>

@endsection