@extends('layouts.master')

@section('title', 'Clients')

@section('content')
        
    <div class="col-xs-12 main page-dashboard">

        <div class="row">
            <ol class="breadcrumb">
                <li><a href="{{ route('dashboard') }}"><svg class="glyph stroked home"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#stroked-home"></use></svg></a></li>
                <li class="active">Clients</li>
            </ol>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <h3 class="page-header">Clients</h3>
            </div>
        </div>
        
        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <div class="row">
                            <div class="col-sm-6">
                                <svg class="glyph stroked clipboard with paper"><use xlink:href="#stroked-clipboard-with-paper"/></svg> List all clients
                            </div>
                            <div class="col-sm-6 text-right">
                                <a class="btn btn-primary js-addnewclient"><svg class="glyph stroked plus sign"><use xlink:href="#stroked-plus-sign"/></svg> Add new client</a>
                            </div>
                        </div>
                    </div>
                    <div class="panel-body">
                        @if (Session::has('message'))
                            <div class="alert bg-{{ Session::get('class') }}">{{ Session::get('message') }}</div>
                        @endif
                        <div class="js-status"></div>
                        <table class="js-table-clients" data-toggle="table" data-url="{{ route('apiClients')}}"  data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-pagination="true">
                            <thead>
                            <tr>
                                <th data-formatter="runningFormatter">#</th>
                                <th data-field="name" data-sortable="true">Company Name</th>
                                <th data-field="pic" data-sortable="true">PIC</th>
                                <th data-field="email">Email</th>
                                <th data-field="contact">Contact</th>
                                <th data-align="center" data-field="operate" data-events="operateEvents">Actions</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>

    </div>

@stop



@section('script')
<script>
    // Add table operation
    function runningFormatter(value, row, index) {
        return 1+index;
    }

    window.operateEvents = {
        'click .edit': function (e, value, row, index) {
            $.ajax({
                url: '{{ URL::to("/") }}/clients/' + row.id + '/edit',
                dataType: 'html',
                type: 'GET',
            }).success(function(response) {
                bootbox
                    .dialog({
                        title: '...',
                        message: response,
                        onEscape: true,
                        backdrop: true
                    }).on('shown.bs.modal', function() {
                        var title = $('.js-form-title').data('title');
                        var firstfield = $('input[name=name]');
                        $('.modal-title').html(title);
                        firstfield.focus();
                    });
            });
        }
    };

    //Click add new user button
    $('.js-addnewclient').on('click', function() {
        $.ajax({
            url: "{{ action('ClientController@create') }}",
            dataType: 'html',
            type: 'GET',
        }).success(function(response) {
            bootbox
                .dialog({
                    title: '...',
                    message: response,
                        onEscape: true,
                        backdrop: true
                }).on('shown.bs.modal', function() {
                    var title = $('.js-form-title').data('title');
                    var firstfield = $('input[name=name]');
                    $('.modal-title').html(title);
                    firstfield.focus();
                });
        });

        return false;
    });
</script>
@stop