@extends('app')

@section('content')
 
 <div class = "row">   
    
        <div class="col-md-5">
        
              <!-- <button id = "btn_client_process_tree" type = "button" class = "btn btn-warning btn-process-tree" data-process-tree = "client_process_tree"><span id = "status_icon" class="glyphicon glyphicon-circle-arrow-down" aria-hidden="true"></span> Acquisition Status</button> -->
              <span id = "client_process_description" class = "text-warning"></span>
                
              <!-- <div id="client_process_tree" class = "process-tree hidden" data-button="btn_client_process_tree" data-description="client_process_description"></div> -->
                
              <div id="client_toolbar">
                     <!-- bs-table styling to align buttons with search -->
                     <div class="fixed-table-toolbar">
                            <div class="bars">
                            
                            
                                @if ($archived)
                                    <a href = "{{ url('users') }}">
                                        <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-cog" aria-hidden="true"></span> Active</button>
                                    </a>
                                    <button type="button" class="btn btn-primary">Un-confirmed</button>
                                 @else
                                    <button type="button" class="btn btn-primary"> <span class="glyphicon glyphicon-cog" aria-hidden="true"></span> Active</button>
                                   
                                    <a href = "{{ url('users?archived=1') }}">
                                        <button type="button" class="btn btn-default">Un-confirmed</button>
                                    </a>
                                @endif
               
                                   
                                <a href = "{{ action('UsersController@create') }}">
                                    <button type = "button" class = "btn btn-success">
                                       <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Add new
                                    </button>
                                </a>
                            </div>
                     </div>
                
            </div>  <!-- End ClientToolbar -->
               
            <!-- Client Listing -->
            
            <table data-toggle="table"
                    data-maintain-selected=true
                    data-height="575"
                    data-search ="true"
                    data-advanced-search="true"
                    data-toolbar = "#client_toolbar"
                    id ="tbl_client" >
                <thead><tr>
                    <th data-visible=false data-field="id">ID</th>
                    <th data-visible=true data-field="code">Code</th>
                    <th data-visible=true data-field="name">Name</th>
                </tr></thead>
                <tbody>
                
                @foreach ($users as $user)
                    <tr id = "row_client_{{$user->id}}" name = "row_client_{{$user->id}}">
                        <td>{{ $user->id }}</td>
                        <td>{{ $user->code }}</td>
                        <td>{{ $user->name }}</td>
                    </tr>
                @endforeach
                </tbody>

            </table>
           
                
        </div> <!-- End col-md-5 -->
            
        <div class="col-md-7" id = "client-details">
        
            @include('staff.single')
            
        </div> <!-- End col-md-7 -->
            
    </div> <!-- End Row -->
    
@stop



@section('footer')

@stop

    
@section('scripts')
    
<script src = "{!! asset('js/hilbit-process-tree.js') !!}"></script> 
<script src = "{!! asset('js/hilbit-vue.js') !!}"></script>
<script src = "{!! asset('js/hilbit-client-vue.js') !!}"></script>

<script>
    
    var hilbitClient = hilbitClient || {};
    
    hilbitClient = function()
    {
        var setVueProps = function(props)
        {
            hilbit.utils.setVueProps(client_vue, props);
        };
        
        var edit = function(id)
        {
            var url = "{{ url('users')}}";
            
            window.location.href = url + '/' + id + '/edit';
        };
       
        var fetchHasMany = function(id)
        {
            var url =  "{{ url('api/users') }}";
            url = url + '/' + id + '/get-has-many';
            
            hilbit.ui.fetchHasMany(id, url);
        };
        
        var unArchive = function(id)
        {
            var url = "{{ url('users')}}";
            
            window.location.href = url + '/' + id + '/edit-archive?archived=0';    
        };

        var archive = function(id)
        {
            
            var url = "{{ url('users')}}";
            
            window.location.href = url + '/' + id + '/edit-archive?archived=1';    
        };
        
        var afterArchive = function()
        {
            var url = "{{ url('users')}}";
            
            window.location.href = url;  
        };
        
        return {setVueProps : setVueProps,
                edit : edit,
                fetchHasMany : fetchHasMany,
                unArchive : unArchive,
                archive : archive,
                afterArchive : afterArchive}
    }();
    
    
    $(function () {
    
       var $url = "{!! url('users') !!}";
    
       hilbit.ui.attachOnSearch('tbl_client', 'client');
       hilbit.ui.attachFormValidation('fm_client');
       hilbit.ui.attachDatePicker('client-details');
       hilbit.ui.attachNavPillsClick();
       
       @if (isset($active_record))
    
            @if ($errors->any())
                hilbit.ui.activateTab($('#client_main_tab'));
            @else
                hilbit.ui.activateTab($('#client_dashboard_tab'));  
            @endif
    
            $('#row_client_{{$active_record->id}}').addClass('success').siblings().removeClass('success');
            hilbitClient.fetchHasMany({{ $active_record->id }});
        @else
            hilbit.ui.activateTab($('#client_main_tab'));
        @endif
        
        
       @if (!$can_update) 
            hilbitClient.setVueProps({'disable_input': true});
        @endif
        

        
        $('#tbl_client').on('click-row.bs.table', function (e, row, $element)
        {  
            hilbitClient.edit(row.id);
        });
        
        $('.has-many-table').on('click', '.has-many-edit', function(event)
        {  
            var vm = client_vue;
            var table = $(event.delegateTarget);
            var has_many_id = $(this).data('id');
            var has_many_edit_url =  table.data('edit-url');
            var has_many_edit_title = table.data('edit-form-title');
            var has_many_table = table.attr('id');
    
            hilbitClient.setVueProps({ 'edit_has_many' : false });
            // Wait for vue to finish updating
            Vue.nextTick(function ()
            {
                hilbitClient.setVueProps({'has_many_id' : has_many_id,
                                        'has_many_edit_url' : has_many_edit_url,
                                        'has_many_edit_title': has_many_edit_title,
                                        'has_many_table' : has_many_table,
                                        'edit_has_many' : true});    
            });
        });
        
        
        $('.has-many-table').on('click', '.has-many-delete', function(event)
        {
            var vm = client_vue;
            var table = $(event.delegateTarget);
            
            var has_many_id = $(this).data('id');
            var has_many_delete_url =  table.data('delete-url');
            var has_many_delete_title = table.data('delete-form-title');
            var has_many_delete_message = $(this).data('message');
            var has_many_table = table.attr('id');
    
            hilbitClient.setVueProps({ 'delete_has_many' : false });
            
            // Wait for vue to finish updating
            Vue.nextTick(function ()
            {
                hilbitClient.setVueProps({'has_many_id' : has_many_id,
                                        'has_many_delete_url' : has_many_delete_url,
                                        'has_many_delete_title': has_many_delete_title,
                                        'has_many_delete_message': has_many_delete_message,
                                        'has_many_table' : has_many_table,
                                        'delete_has_many' : true});     
            });
        });
    });

    //document functions
    function submitDocument() {

        var form = $('#clientContactForm');

        if (!form.valid()) {
            return;
        }

        form.submit();
    }

    $( document ).ready(function() {
        
        var navigateDoc = "{!! session('navigate-document') !!}";
        
        if (navigateDoc == '1') {

            $("a[href='#documents']").click();
        }
        
        var userdata = '{!! $active_record !!}';

        if (userdata) {
            userdata = JSON.parse(userdata)
            $.each(userdata, function(key, value){

                $("input[name=" + key + "]").change(function(){
                    $(this).val(value);
                });
            });

            $("input[name=password]").change(function(){
                    $(this).val("      ");
            });

            $("input[name=password_confirmation]").change(function(){
                    $(this).val("      ");
            });

            setTimeout(function(){
                $.each(userdata, function(key, value){

                    $("input[name=" + key + "]").unbind('change');
                });

                $("input[name=password]").unbind('change');

                $("input[name=password_confirmation]").unbind('change');

            }, 1000);
        }
        else{
            setTimeout(function(){
                document.getElementById("fm_client").reset();
            }, 750);
        }
        
    });

    function deleteDocument(id) {

        $("input[name=deletedocumentid]").val(id);
        $("#delete-document-modal").modal('show');
    }
    
    </script>
    
@stop