{{-- mainLayouts extends --}}
@extends('layouts.contentLayoutMaster')

{{-- Page title --}}
@section('title', 'Car Knowledge Create')

@section('vendor-style')
<link rel="stylesheet" type="text/css" href="{{asset('vendors/select2/select2.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/select2/select2-materialize.css')}}">
@endsection

{{-- page style --}}
@section('page-style')
<link rel="stylesheet" type="text/css" href="{{asset('css/pages/form-select2.css')}}">
@endsection

@section('content')
    <div class="card">
        <div class="card-content">
            <span class="card-title"><b>Add Car Knowledge</b></span>
            <form action="{{route('admin.car-knowledges.store')}}" method="POST">
                @csrf
                <div class="row">
                    <div class="col s4 right-align padr30px">
                        <h6 class="pt-6">Choose Product *</h6>
                    </div>
                    <div class="input-field col s8">
                        <select class="select2 browser-default validate" name="product_id" id="product_id">
                            <option value="" >Choose Product</option>
                            @foreach ($products as $product)
                                <option value="{{ $product->id }}">{{ $product->model }}</option>
                            @endforeach
                        </select>
                        <small class="errorTxt1">
                            @if ($errors->has('product_id'))
                                <div id="product_id-error" class="error">{{ $errors->first('product_id') }}</div>
                            @endif
                        </small>
                    </div>
                </div>
                <div id="car-info">
                    <div class="row">
                        <div class="col s4 right-align padr30px">
                            <h6 class="pt-6">Choose Company *</h6>
                        </div>
                        <div class="input-field col s8">
                            <select class="select2 browser-default" name="company_id" id="company_id">
                                <option value="" >Choose Company *</option>
                                @foreach ($companies as $company)
                                    <option value="{{ $company->id }}">{{ $company->name }}</option>
                                @endforeach
                            </select>
                            <small class="errorTxt1">
                                @if ($errors->has('company_id'))
                                    <div id="company_id-error" class="error">{{ $errors->first('company_id') }}</div>
                                @endif
                            </small>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col s4 right-align padr30px">
                            <h6 class="pt-6">Choose Model *</h6>
                        </div>
                        <div class="input-field col s8">
                            {{-- <option value="" disabled>Choose Model *</option> --}}
                            <select class="select2 browser-default validate" name="models[]" id="models" multiple>
                            </select>
                            <small class="errorTxt1">
                                @if ($errors->has('models'))
                                    <div id="models-error" class="error">{{ $errors->first('models') }}</div>
                                @endif
                            </small>
                        </div>
                    </div>
                    <hr>
                </div>
                <div id="other-car-info" class="row"></div>
                <div class="row mt-2">
                    <div class="col">
                        <button class="btn waves-effect waves-light white black-text" type="button" id="add-car-info">Add New Car
                            <i class="material-icons left black-text">add_circle_outline</i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="col s12">
            <div class="row right">
                <a href="{{ route('admin.car-knowledges.index') }}" class="waves-effect waves-light padr30px black-text">Cancel</a>
                <button class="btn waves-effect waves-light red border-radius-10" type="submit" name="action">Create</button>
            </div>
        </div>
    </form>
@endsection

{{-- vendor script --}}
@section('vendor-script')
<script type="text/javascript">
    $('#company_id').change(function(){
        var company_id = $(this).val();
        if(company_id){
            $.ajax({
                type: "GET",
                url: "{{ route('admin.companyModelLists') }}?company_id="+company_id,
                success: function(res) {
                    if (res) {
                        $("#models").empty();
                        // $("#models").append('<option>Select Township</option>');
                        $.each(res,function(key,value){
                            console.log(value);
                            $("#models").append('<option value="'+ key +'">'+ value +'</option>');
                        });
                        $('#models').formSelect();

                    } else {
                        $("#models").empty();
                    }
                }
            });
            $('#models').formSelect();
        }
    });

    function getCarModel(cid) {
        var company_id = $("#comapny-" + cid).val();
        if(company_id){
            $.ajax({
                type: "GET",
                url: "{{ route('admin.companyModelLists') }}?company_id="+company_id,
                success: function(res) {
                    if (res) {
                        $("#model-" + cid).empty();
                        // $("#models").append('<option>Select Township</option>');
                        $.each(res,function(key,value){
                            console.log(value);
                            $("#model-" + cid).append('<option value="'+ key +'">'+ value +'</option>');
                        });
                        $("#model-" + cid).formSelect();
                    } else {
                        $("#model-" + cid).empty();
                    }
                }
            });
            $("#model-" + cid).formSelect();
        }
    }

    $('#add-car-info').on('click', function() {
        var cid = Math.floor((Math.random() * 1000000) + 1);
        $('#other-car-info').append('<div id="closeaddnew-'+ cid +'"><i class="material-icons right red circle white-text" onClick="closeBtn('+ cid +')">close</i><div class="row"><div class="col s4 right-align padr30px"><h6 class="pt-9">Choose Company *</h6></div><div class="input-field col s8"><select class="validate" name="company_id" id="comapny-'+ cid +'" onChange="getCarModel(' + cid + ')"><option value="" >Choose Company</option>@foreach ($companies as $company)<option value="{{ $company->id }}">{{ $company->name }}</option>@endforeach</select><small class="errorTxt1">@if ($errors->has("company_id"))<div id="company_id-error" class="error">{{ $errors->first("company_id") }}</div>@endif</small></div></div><div class="row"><div class="col s4 right-align padr30px"><h6 class="pt-6">Choose Model *</h6></div><div class="input-field col s8"><select class="validate" name="models[]" id="model-'+ cid +'" multiple><option value="" disabled>Choose Model</option></select><small class="errorTxt1">@if ($errors->has("models[]"))<div id="models-error" class="error">{{ $errors->first("models[]") }}</div>@endif</small></div></div><hr></div>');

        $("#comapny-" + cid).formSelect();
        $("#model-" + cid).formSelect();
    });
   function closeBtn(cid){
       $("#closeaddnew-"+ cid).hide();
    //    alert()
   }

</script>
<script src="{{asset('vendors/select2/select2.full.min.js')}}"></script>
<script src="{{asset('vendors/jquery-validation/jquery.validate.min.js')}}"></script>
<script src="{{asset('vendors/dropify/js/dropify.min.js')}}"></script>
@endsection

{{-- page script --}}
@section('page-script')
<script>
     $('#close2'+ cid).on('click', function () {

    });
</script>
<script src="{{asset('js/scripts/form-select2.js')}}"></script>
<script src="{{asset('js/scripts/form-validation.js')}}"></script>
@endsection