@extends('workshops.jobcards.includes.jobcard_tabs')
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a> <span class="divider">/</span></li>
        <li><a href="">Workshops</a> <span class="divider">/</span></li>
        <li><a href="{{route('workshops.jobs_cards.index')}}">Job-cards</a> <span class="divider">/</span></li>
        <li><a  href="{{route('workshops.jobs_cards.show',['id'=>$job_card->id])}}">{{$job_card_number}}</a> <span class="divider">/</span></li>
        <li class="active">Fine Copy</li>
    </ul>
@stop
@section('jobcards')

    <div class="msghead" style="margin-bottom: 4px;margin-top: -20px;">
        <ul class="msghead_menu">
            <li class="right btn-group">
                <button onclick="create('{!! route('workshops.jobs_cards.damage_detentions.create',['id'=>$job_card->id]) !!}')" class="btn pull-right">
                    <span class="iconsweets-create"></span> New Fine
                </button>
            </li>
        </ul>
        <span class="clearall"></span>
    </div><!--msghead-->

    <table class="table table-bordered table-condensed logistics_table" id="job_card_damage_detentions_list">
        <thead>
        <tr>
            <th class=" nosort" style="width: 05%"><input type="checkbox" class="checkall"/></th>
            <th style="width: 5%">ID</th>
            <th style="width: 15%">Created By</th>
            <th style="width: 20%">To be Paid By</th>
            <th style="width: 10%">Amount</th>
            <th style="width: 40%">Description</th>
            <th style="width: 05%"></th>
        </tr>
        </thead>
    </table>

    <script>

        var oTable = jQuery('#job_card_damage_detentions_list').on('error.dt', function (e, settings, techNote, message) {
            console.log('An error has been reported by DataTables: ', message);
            $.jGrowl("ERROR LOADING DATA!", {header: 'Important'});
            stopSpinner();
        })
            .DataTable({
                "oLanguage": {
                    "sLoadingRecords": startSpinner(),
                    "sZeroRecords": "No any defect records to display.",
                    "sProcessing": "Please wait - loading records...",
                    "sInfoEmpty": "No entries to display."
                },
                "initComplete": function (settings, json) {
                    stopSpinner();
                },
                ajax: {
                    url: '{{route('workshops.jobs_cards.damage_detentions.datatable',['id'=>$job_card->id])}}',
                    data: function (d) {}
                },
                scrollCollapse: true,
                "sPaginationType": "full_numbers",
                processing: true,
                serverSide: true,
                "order":[[1,'asc']],
                "columns": [
                    {data: 'checkbox'},
                    {data: 'id'},
                    {"class": "link", data: 'creator'},
                    {"class": "link", data: 'payer'},
                    {"class": "link", data: 'amount'},
                    {"class": "link", data: 'descriptions'},
                    {"class": "link", data: 'action'}
                ],
                "bStateSave": true
            });



    </script>
@stop