@extends('templates.structure')
@section('custom_css')

<link rel="stylesheet" href="{{asset('AdminLTE-3.0.0-alpha.2/plugins/select2/select2.min.css')}}">
@endsection
@section('content')

<div class="row">
    <div class="col-md-8">        
        <div class="card">
            <div class="card-header">
                {{-- <h3 class="card-title">Form User</h3> --}}
            </div>            
            <form role="form" id="form">
                <div class="card-body">                    
                    <div class="row">                    
                        <div class="col-md-6">                                
                            <div class="form-group">
                                <label>Location</label>
                                <select name="location_id" class="form-control">
                                    <option value=""></option>
                                    @foreach ($unity_locations_list as $item)
                                    <option value="{{$item->id}}">{{$item->location_name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">                                
                            <div class="form-group">
                                <label>Product</label>
                                <select name="product_id" class="form-control">
                                    <option value=""></option>
                                    @foreach ($unity_products_list as $item)
                                    <option value="{{$item->id}}">{{$item->product_name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>                                                                                                            
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Interaction Details</label>
                                <textarea name="interaction_details" rows="5" class="form-control"></textarea>
                            </div>                                
                        </div>                                            
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Comments</label>
                                <textarea name="comments" rows="5" class="form-control"></textarea>
                            </div>                                
                        </div>                    
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Status</label>
                                <br>
                                @foreach ($unity_clients_status as $item)
                                <div class="input-group">
                                    <div class="radio">
                                        <span>
                                            <input type="radio" name="status" id="optionsRadios{{$item->id}}" value="{{$item->id}}" >
                                            {{$item->name}}
                                        </span>
                                    </div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;                                        
                                </div>
                                @endforeach
                            </div>                                
                        </div>                                                                                    
                    </div>                                                                                    
                </div>
                <div class="card-footer">
                    <button type="submit" class="btn btn-info float-right">Save</button>
                    {{-- <button class="btn btn-default float-right">Cancel</button> --}}
                </div>
            </form>
        </div>        
    </div>
</div>
@endsection

@section('custom_js')
<script src="{{asset('AdminLTE-3.0.0-alpha.2/plugins/select2/select2.full.min.js')}}"></script>
{{-- <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script> --}}
<script>
    $(function () {
        //Initialize Select2 Elements
        $('[name="product_id"]').select2({
            placeholder: 'Choose product ...',
            width: '100%',
            allowClear: true,
            ajax: {            
                url: '{{route("products.datatable")}}',
                dataType: 'json',
                data: function(params) {                
                    return {                    
                        start: params.page == NaN ? 0 : (params.page-1) * 25,
                        length: 25,
                        columns: {
                            0:{
                            name: 'op.product_name',
                            orderable: true,
                            searchable: true
                            }
                        },
                        search: {value: params.term},
                        order: {0:{dir:'asc'}}
                    }
                },
                processResults: function (data, params) {
                    params.page = params.page || 1;                
                    var newData = []
                    $.each(data.data, function(key, val){
                        newData[key] = {'id' : val.id, 'text' : val.product_name};                    
                    })

                    data.results = newData;
                
                    return {
                        results: data.results,
                        pagination: {
                            more: (params.page * 25) < data.recordsFiltered
                        }
                    }

                },
                cache: true
            },
            minimumInputLength: 3,
        })
        $('[name="location_id"]').select2({
            placeholder: 'Choose location ...',
            width: '100%',
            allowClear: true,
            ajax: {            
                url: '{{route("locations.datatable")}}',
                dataType: 'json',
                data: function(params) {                
                    return {                    
                        start: params.page == NaN ? 0 : (params.page-1) * 25,
                        length: 25,
                        columns: {
                            0:{
                            name: 'op.location_name',
                            orderable: true,
                            searchable: true
                            }
                        },
                        search: {value: params.term},
                        order: {0:{dir:'asc'}}
                    }
                },
                processResults: function (data, params) {
                    params.page = params.page || 1;                
                    var newData = []
                    $.each(data.data, function(key, val){
                        newData[key] = {'id' : val.id, 'text' : val.location_name};                    
                    })

                    data.results = newData;
                
                    return {
                        results: data.results,
                        pagination: {
                            more: (params.page * 25) < data.recordsFiltered
                        }
                    }

                },
                cache: true
            },
            minimumInputLength: 3,
        });

        $( "#form" ).submit(function( e ) {
            e.preventDefault()
            // axios.post('{{route("clients.store")}}', $(this).serialize(), config) .then(function (response) {
            //             console.log(response);
            //             window.location = response.data.additional.redirect;

            //         })
            //         .catch(function (error) { console.log(error);
            //             $('.newerror').remove()
            //             var msgs = error.response.data.data.message
            //             $.each(msgs, function (index, value) {
            //                     $('[name="'+index+'"]').closest( ".form-group" ).after('<label id="'+index+'-error" class="newerror" for="'+index+'">'+value[0]+'</label>')
            //                     // console.log(value[0])
            //                 });
            //         });
        })
    })
</script>
@endsection