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

<!-- Select2 -->
<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">
        <!-- general form elements disabled -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Form User</h3>
            </div>
            <!-- /.card-header -->
            <form role="form" id="form">
                <div class="card-body">
                    <!-- text input -->
                    <div class="form-group">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>First name</label>
                                    <input type="text" name="first_name" class="form-control">
                                </div>
                                <!-- /input-group -->
                            </div>
                            <!-- /.col-md-6 -->
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Last name</label>
                                    <input type="text" name="last_name" class="form-control">
                                </div>
                                <!-- /input-group -->
                            </div>
                            <!-- /.col-md-6 -->
                        </div>
                    </div>
                    <!-- text input -->
                    <div class="form-group">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Username</label>
                                    <input type="text" name="username" class="form-control">
                                </div>
                                <!-- /input-group -->
                            </div>
                            <!-- /.col-md-6 -->
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Email</label>
                                    <input type="text" name="email" class="form-control">
                                </div>
                                <!-- /input-group -->
                            </div>
                            <!-- /.col-md-6 -->
                        </div>
                    </div>
                    <!-- text input -->
                    {{-- <div class="form-group">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Password</label>
                                    <input type="text" name="password" class="form-control" placeholder="">
                                </div>
                                <!-- /input-group -->
                            </div>
                            <!-- /.col-md-6 -->
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Confirm password</label>
                                    <input type="text" name="password_again" class="form-control" placeholder="">
                                </div>
                                <!-- /input-group -->
                            </div>
                            <!-- /.col-md-6 -->
                        </div>
                    </div> --}}

                    <!-- checkbox -->
                    <div class="form-group">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>User group</label>
                                    <select class="form-control" name="user_group">
                                        @foreach ($unity_operators_group as $item)
                                            <option value="{{$item->id}}">{{$item->name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <!-- /input-group -->
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Location</label>
                                    <select class="form-control" name="location">
                                        <option value=""></option>
                                    </select>
                                </div>
                                <!-- /input-group -->
                            </div>
                            <!-- /.col-md-6 -->
                            <div class="col-md-6" style="">
                                <div class="form-group">
                                    <label>Phone</label>
                                    <input type="text" name="phone" class="form-control" placeholder="">
                                </div>
                                <!-- /input-group -->
                            </div>
                            <!-- /.col-md-6 -->
                        </div>
                    </div>


                </div>
                <!-- /.card-body -->
                <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>
        <!-- /.card -->
    </div>
</div>
<!-- /.row -->
@endsection

@section('custom_js')
<!-- Select2 -->
<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>
    var location_user = $('[name="location"]');

    location_user.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.id+' - '+val.location_name};                    
                })

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

            },
            cache: true
        }
    });

    location_user.on('select2:select', function (e) {
        var locationid = e.params.data.id;
        facility_name.select2('val', '');
        facility_name.find('option').remove();

        facility_name.select2({        
            placeholder: 'Choose facility ...',
            width: '100%',
            allowClear: true,
            ajax: {            
                url: '{{route("facilities.datatable")}}',
                dataType: 'json',
                data: function(params) {                
                    return {                    
                        start: params.page == NaN ? 0 : (params.page-1) * 25,
                        length: 25,
                        columns: {
                            0:{
                            name: 'op.name',
                            // data: 'name',
                            orderable: true,
                            searchable: true,
                            search:{
                                value:params.term
                                }
                            },                        
                            1:{
                            name: 'op.location_id',
                            // data: 'location_id',
                            // orderable: true,
                            searchable: true,
                            search:{
                                value:locationid
                                }
                            },                        
                            2:{
                            name: 'op.status',                            
                            search:{
                                value:'1'
                                }
                            }
                        },
                        // 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.name};                    
                    })

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

                },
                cache: true
            }
            // minimumInputLength: 3,

        });
    });

    location_user.on("select2:unselect", function (e) { 
        facility_name.select2('val', '');
    })

    $(function () {
        //Initialize Select2 Elements
        $('[name="user_group"]').select2()

        $( "#form" ).submit(function( e ) {
            e.preventDefault()
            axios.post('{{route("users.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+'"]').after('<label id="'+index+'-error" class="newerror" for="'+index+'">'+value[0]+'</label>')
                                // console.log(value[0])
                            });
                    });
        })
    })

</script>
@endsection