@extends('layouts.main_without_top_button')
@section('contact_persons')
    active
@stop
@section('title')
    {{ $vendor->name }} Profile
@stop
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a> <span class="divider">/</span></li>
        <li><a href="{{route('vendors.index')}}">Vendors</a> <span class="divider">/</span></li>
        <li><a href="{{route('vendors.show')}}">{{ $vendor->name }} Profile</a> <span class="divider">/</span></li>
        <li class="active">Contact Persons</li>
    </ul>
@stop
@section('contentinner')
    <style>
        table tbody td .number {
            text-align: right;
        }

        table tbody td .number {
            text-align: right;
        }

        td.details-control {
            background: url('{{ URL::asset('img/details_open.png') }}') no-repeat center center;
            cursor: pointer;
        }

        tr.details td.details-control {
            background: url('{{ URL::asset('img/details_close.png') }}') no-repeat center center;
        }
    </style>
    <div class="tabbable">
        @include('vendors.includes.vendor_profile')
        <div class="tab-content">
            <div class="tab-pane active">
                <div class="msghead">
                    <ul class="msghead_menu">
                        <li class="right btn-group">
                            <div class="btn-group">
                                <button class="btn" onclick="create('{{ route('contact-persons.create', ['type'=>'Vendor', 'id'=>$vendor->id]) }}')">
                                    NEW CONTACT PERSONS
                                </button>
                            </div><!--btn-group-->
                        </li>
                    </ul>
                    <span class="clearall"></span>
                </div><!--msghead-->
                <br>
                <table class="table table-bordered table-condensed" id="contact_persons_dt">
                    <thead>
                        <tr>
                            <th class="head0" style="width: 4%">S/N</th>
                            <!-- <th class="head0" style="width: 4%">MORE</th> -->
                            <th class="head0" style="width: 22%">Name</th>
                            <th class="head1" style="width: 22%">Title</th>
                            <th class="head0" style="width: 22%">Email</th>
                            <th class="head0" style="width: 22%">Phone</th>
                            <th class="head0" style="width: 4%">Action</th>
                        </tr>
                    </thead>
                </table>
            </div><!--tab-pane-->
        </div><!--tabcontent-->
    </div><!--tabbable-->

    <script>
        var mainDataTable = jQuery('#contact_persons_dt').DataTable({
            "oLanguage": {
                "sLoadingRecords": "Please wait - searching data...",
                "sZeroRecords": "No data found.",
                "sInfoEmpty": "No entries to display."
            },
            ajax: {
                url: '{{ route("vendors.contact_persons.dt", $vendor->id) }}',
                data: function (d) {
                    // d.route_id = jQuery('#name').val();
                },
                error: function (xhr, textStatus, error) {
                    onAjaxError(xhr, textStatus, error);
                }
            },
            scrollCollapse: true,
            "sPaginationType": "full_numbers",
            processing: true,
            serverSide: true,
            "columns": [
                {"orderable": false, data: 'checkbox'},
                // {
                //     "class": "details-control",
                //     "orderable": false,
                //     "data": null,
                //     "defaultContent": ""
                // },
                {"class": "link", data: 'name'},
                {"class": "link", data: 'position'},
                {"class": "link", data: 'email'},
                {"class": "link number", data: 'phone'},
                {"orderable": false, data: 'action'}
            ],
            "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
                var index = iDisplayIndex +1;
                $('td:eq(0)',nRow).html(index);
                return nRow;
            },
            "bStateSave": true,
        });
        
        function incrementRow(elem) {
            var data = $('#data').clone();
            data.find('select').removeClass('searchable_select').addClass('searchable_select');
            var table = elem.parents('table');
            var tbody = table.find('tbody');
            tbody.append(data);
            onModalShown();
            $('.no-data-found').fadeOut();
        }
        function decrementRow(elem) {
            var tr = elem.parents('tr');
            tr.fadeOut(function() {
                tr.remove();
            });
        }
    </script>
@stop