@extends('admin.layouts.app')

@section('title', 'Model')

@section('content')
    <div class="row">
        <div class="col-lg-12">
            <div class="card card-outline-info">
                <div class="card-header">
                    <h4 class="card-title">{{ __('Variant') }}</h4>
                   
                </div>
                <div class="card-body p-4">
               
                            <div class="row">
                                @can('variant-create')
                            <div class="col-lg-6">
                                <div class="card">
                                    <div class="card-header">
                                        <h4 class="card-title">Create Variant</h4>
                                    </div>
                                    <div class="card-body">
                                    <form method="POST"  enctype="multipart/form-data" action="{{ route('variant.store') }}">
                                    @csrf
                                    @method('POST')
                                            <div class="mb-3">
                                                <label class="form-label" for="formrow-firstname-input">Vehicle Category</label>
                                                <select type="model_category_id" id="model_category_id" name="model_category_id" class="form-control @error('model_category_id') is-invalid @enderror"  required>
                                                <option value="">{{ __('Select Vehicle Category') }}</option>
                                                @foreach($model_categories as $model_cat)
                                                <option value="{{ $model_cat->id }}">{{  $model_cat->name }}</option>
                                                @endforeach
                                                </select>
                                                @include('admin.partials.form-errors', array('field' => 'model_category_id'))
                                            </div>
                                            
                                            <div class="mb-3">
                                                <label class="form-label" for="formrow-firstname-input">Brand</label>
                                                <select type="brand_id" id="brand_id" name="brand_id" class="form-control @error('brand_id') is-invalid @enderror"onchange="getModel(this.value)"  required>
                                                <option value="">{{ __('Select Brand') }}</option>
                                                @foreach($brands as $brand)
                                                <option value="{{ $brand->id }}">{{  $brand->name }}</option>
                                                @endforeach
                                                </select>
                                                @include('admin.partials.form-errors', array('field' => 'brand_id'))
                                            </div>

                                            <div class="mb-3">
                                                <label class="form-label" for="formrow-firstname-input">Model</label>
                                                <select type="model_id" id="model_id" name="model_id" class="form-control @error('model_id') is-invalid @enderror"  required>
                                                <option value="">{{ __('Select Model') }}</option>
                                               
                                                </select>
                                                @include('admin.partials.form-errors', array('field' => 'model_id'))
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label" for="formrow-firstname-input">Variant</label>
                                                <input type="text" class="form-control @error('name') is-invalid @enderror" id="name" name="name" required>
                                                @include('admin.partials.form-errors', array('field' => 'name'))
                                            </div>

                                           
                                             <div class="mb-3">
                                                <label class="form-label" for="formrow-firstname-input">Variant Cover</label>
                                                <input type="file" class="form-control @error('cover') is-invalid @enderror" id="cover" name="cover" required>
                                                @include('admin.partials.form-errors', array('field' => 'cover'))
                                            </div>
            
                                            <div class="mt-4">
                                                <button type="submit" class="btn btn-primary w-md">Submit</button>
                                            </div>
                                    </form>
                                    </div>
                                </div>
                            </div>
                            @endcan
                            <!-- end col -->
                            <div class="col-lg-6">
                                <div class="card">
                                    <div class="card-header">
                                        <h4 class="card-title">Models</h4>
                                        
                                    </div>
                                    <div class="card-body">
                                        

                                    <table id="datatable" class="table table-bordered dt-responsive  nowrap w-100">        <thead>
                                            <tr>
                                                <th>Vehicle Category</th>
                                                <th>Brand</th>
                                                <th>Model</th>                                                              
                                                <th>Name</th>
                                                <th>Actions</th>
                                                
                                               
                                                
                                            </tr>
                                            </thead>
        
        
                                            <tbody>
                                            @foreach($variants as $c)
                                            <tr>
                                                <td>{{$c->model_category->name}}</td>
                                                <td>{{$c->brand->name}}</td>
                                                
                                                <td>{{$c->model->name}}</td>
                                                <td>{{$c->name}}</td>
                                                <td>
                                                @can('variant-edit')
                <a class="edit btn btn-success btn-sm" href="{{ route('variant.edit', $c->id) }}">Edit</a>
            @endcan
            @can('variant-delete')
                {!! Form::open(['method' => 'DELETE','route' => ['variant.destroy', $c->id],'style'=>'display:inline', 'onsubmit' => 'return confirm("Are you sure you want to delete this Record?")']) !!}
                    {!! Form::submit('Delete', ['class' => 'btn btn-danger btn-sm']) !!}
                {!! Form::close() !!}
            @endcan
                                                </td>
                                            </tr>
                                            @endforeach
                                            
                                            </tbody>
                                        </table>

                                        

                                    </div>
                                </div>
                            </div>
                            <!-- end col -->
                        </div>
                </div>
            </div>
        </div>
    </div>

<!-- JAVASCRIPT -->
        <script src="{{url('/')}}/assets/libs/jquery/jquery.min.js"></script>
        <script src="{{url('/')}}/assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
        <script src="{{url('/')}}/assets/libs/metismenu/metisMenu.min.js"></script>
        <script src="{{url('/')}}/assets/libs/simplebar/simplebar.min.js"></script>
        <script src="{{url('/')}}/assets/libs/node-waves/waves.min.js"></script>
        <script src="{{url('/')}}/assets/libs/feather-icons/feather.min.js"></script>
        <!-- pace js -->
        <script src="{{url('/')}}/assets/libs/pace-js/pace.min.js"></script>

        <!-- apexcharts -->
        <script src="{{url('/')}}/assets/libs/apexcharts/apexcharts.min.js"></script>

        <!-- Plugins js-->
        <script src="{{url('/')}}/assets/libs/admin-resources/jquery.vectormap/jquery-jvectormap-1.2.2.min.js"></script>
        <script src="{{url('/')}}/assets/libs/admin-resources/jquery.vectormap/maps/jquery-jvectormap-world-mill-en.js"></script>
        <!-- dashboard init -->
        <script src="{{url('/')}}/assets/js/pages/dashboard.init.js"></script>

        <script src="{{url('/')}}/assets/js/app.js"></script>
<script type="text/javascript">
       function getModel()
        {
            var model_category_id=document.getElementById('model_category_id').value;
             var brand_id=document.getElementById('brand_id').value;
           
            var url = '{{ route("model.getByModelCategory",[':model_category_id',':brand_id']) }}';
            url = url.replace(':model_category_id',model_category_id).replace(':brand_id',brand_id);;
             
            if(model_category_id) {
                $.ajax({
                    url: url,
                    type: "GET",
                    dataType: "json",

                    success:function(data) {
                        $('select[name="model_id"]').empty();
                        $('select[name="model_id"]').prepend('<option value="">--Select Model--</option>');
                        $.each(data, function(key, value) {
                            $('select[name="model_id"]').append('<option value="'+ key +'">'+ value +'</option>');
                        });
                    }
                });
            } else{
                $('select[name="model_id"]').empty();
            }


        }

        
        
        
    </script>
    @endsection