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

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

@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">Edit Car Knowledge</span>
        <form action="{{route('admin.car-knowledges.update', $carKnowledge->id)}}" method="POST">
            @csrf
            @method('PUT')
            <input type="hidden" name="knowledge_id" value="{{ $carKnowledge->id }}" id="knowledge_id" />
            <div id="car-info">
                <div class="row">
                    <div class="col s4">
                        <h6>Choose Company *</h6>
                    </div>
                    <div class="input-field col s8">
                        <select class="validate" 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">
                        <h6>Choose Model *</h6>
                    </div>
                    <div class="input-field col s8">
                        <select class="validate" name="models[]" id="models" 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>
            <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 pb-9">
        <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>

{{-- <div class="card">
    <div class="card-content">
        <span class="card-title">Edit Car Knowledge</span>
        <form action="{{route('admin.car-knowledges.update', $carKnowledge->id)}}" method="POST">
            @csrf
            @method('PUT')
            <div class="row">
                <div class="input-field col s12">
                    <div>Product Name: {{ $carKnowledge->product->model }}</div>
                </div>
            </div>
            <input type="hidden" name="knowledge_id" value="{{ $carKnowledge->id }}" id="knowledge_id" />
            <div id="car-info">
                <div class="row">
                    <div class="input-field col s12">
                        <select class="validate" 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="input-field col s12">
                        <select class="validate" name="models[]" id="models" 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>
            </div>
            <div id="other-car-info"></div>
            <div class="row">
                <div class="col">
                    <button class="btn waves-effect waves-light" type="button" id="add-car-info">Add
                        <i class="material-icons right">add</i>
                    </button>
                </div>
            </div>
            <div class="row">
                <div class="right">
                    <a href="{{ route('admin.car-knowledges.index') }}" class="btn red waves-effect waves-light">Cancel</a>
                    <button class="btn waves-effect waves-light" type="submit" name="action">Edit</button>
                </div>
            </div>
        </form>
    </div>
</div> --}}
<div class="card mt-9">
    <div class="card-content">
        <span class="card-title">Delete Car Info</span>
        <div class="responsive-table">
            <table id="users-list-datatable" class="table responsive-table">
                <thead>
                    <tr>
                        <th></th>
                        <th>#</th>
                        <th>Car Company</th>
                        <th>Car Model</th>
                        <th>Delete</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($carKnowledge->carKnowledgeCompanies as $company)
                    <tr>
                        <td></td>
                        <td>{{ $company->id }}</td>
                        <td>{{ $company->company->name ?? null }}</td>
                        <td>
                            @foreach ($company->carKnowledgeModels as $model)
                            <div>
                                {{ $model->carModel->name }} <a href="{{ route('admin.delete.car.info.model', $model->id) }}">Delete</a>
                            </div>
                            @endforeach
                        </td>
                        <td>
                            <form action="{{ route('admin.delete.car.info', $company->id) }}" method="POST" onsubmit="return confirm('Are You Sure?');" style="display: inline-block;">
                                @csrf
                                <button class="btn waves-effect waves-light red darken-2" type="submit" style="padding: 0px 16px;">Delete</button>
                            </form>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="5">No Car Information Found!</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection

{{-- vendor script --}}
@section('vendor-script')
<script type="text/javascript">
    $('#company_id').change(function(){
        var company_id = $(this).val();
        var knowledge_id = $('#knowledge_id').val();

        if(company_id){
            $.ajax({
                type: "GET",
                url: "{{ route('admin.companyModelLists') }}?company_id="+company_id+"&knowledge_id="+knowledge_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+"&knowledge_id="+knowledge_id,
                success: function(res) {
                    if (res) {
                        // $("#models").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 {
                        // $("#township").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"><h6>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"><h6>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>');
        // $('#other-car-info').append('<div class="row"><div class="input-field col s12"><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="input-field col s12"><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>');

        $("#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 src="{{asset('js/scripts/form-select2.js')}}"></script>
<script src="{{asset('js/scripts/form-validation.js')}}"></script>
@endsection