@extends('layouts.main', ['title' => 'LOGISTICS | Claims'])
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a> <span class="divider">/</span></li>
        <li class="active">Claims</li>
        </li>
    </ul>
@stop
@section('title', 'Claims')
@section('msghead_menu')
    <li class="right btn-group">
        {{--<div class="btn-group">--}}
            {{--<button class="btn" onclick="create('{{ route('hse.claims.create') }}')">--}}
                {{--<i class="icon-th"></i> &nbsp;NEw Claim--}}
            {{--</button>--}}
        {{--</div><!--btn-group-->--}}
    </li>
@endsection
@section('contentinner')
    <style>
        #logistics_modal {
            width: 95%;
            margin-left: -32%;
        }
        .form-filter {
            border-top: 1px solid #dddddd;
            border-bottom: 1px solid #dddddd;
            color: #0e4722;
            font-weight: normal;
            text-align: center;
            padding-bottom: 4px;
        }

    </style>


    <!-- Main Table -->
    <div class="row-fluid">
        <div class="span12">

            <table class="table table-bordered table-condensed" id="claims_table">
                <thead>
                <tr>
                    <th class="head1" style="width: 10%">Claim No:</th>
                    <th class="head1" style="width: 17%">Date Reported</th>
                    <th class="head1" style="width: 15%">Insured Name</th>
                    <th class="head1" style="width: 17%">Claimant Name</th>
                    <th class="head1" style="width: 15%">Insurer</th>
                    <th class="head1" style="width: 20%">Status</th>
                    <th class="head1" style="width: 06%">Action</th>
                </tr>
                </thead>
            </table>
        </div><!--span12-->
    </div><!--row-fluid-->

    <script>
        jQuery('.searchable_select').select2();

        var oTable = jQuery('#claims_table').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 claim records to display.",
                    "sProcessing": "Please wait - loading records...",
                    "sInfoEmpty": "No entries to display."
                },
                "initComplete": function (settings, json) {
                    stopSpinner();
                },
                ajax: {
                    url: '{{ route("hse.claims.datatable") }}',
                    data: function (d) {}
                },
                scrollCollapse: true,
                "sPaginationType": "full_numbers",
                processing: true,
                serverSide: true,
                "order":[[0,'asc']],
                "columns": [
                    {"class": "link", data: 'claim_no'},
                    {"class": "link", data: 'date'},
                    {"class": "link", data: 'insured_name'},
                    {"class": "link", data: 'claimant'},
                    {"class": "link", data: 'insurer'},
                    {"class": "link", data: 'status'},
                    {"class": "link", data: 'action'}
                ],
                "bStateSave": true
            });

    </script>
    <style>
        .bootstrap-datetimepicker-widget {
            z-index: 99999 !important;
        }

        .dropdown-menu {
            top: 43%;
        }

        .customer-field {
            margin-bottom: 6px;
        }

        .pull-top {
            margin-top: -28px
        }

        .divider15 {
            border-top: 1px #0b4073 dashed;
        }

        label {
            text-align: left;
        }

        .has-error {
            /*outline: #FF0000 solid thin;*/
            /*border-bottom-color: red;*/
        }
    </style>


@stop