@extends('layouts.app')

@section('title', __('bms::lang.contracts'))

@section('content')
<section class="content-header"><h1>@lang('bms::lang.contracts') <small>@lang('bms::lang.contracts_help')</small></h1></section>

<section class="content">
    @component('components.widget', ['class' => 'box-primary', 'title' => __('bms::lang.contracts')])
        <div class="table-responsive">
            <table class="table table-bordered table-striped" id="bms_contracts_table">
                <thead><tr>
                    <th>@lang('bms::lang.booking_no')</th>
                    <th>@lang('bms::lang.client')</th>
                    <th>@lang('bms::lang.event_date')</th>
                    <th>@lang('bms::lang.cstage_label')</th>
                    <th>@lang('bms::lang.total')</th>
                    <th>@lang('messages.action')</th>
                </tr></thead>
            </table>
        </div>
    @endcomponent
</section>
@endsection

@section('javascript')
<script>
$(function () {
    var table = $('#bms_contracts_table').DataTable({
        processing: true, serverSide: true, order: [[2, 'desc']],
        ajax: { url: '{{ route('bms.contracts.index') }}' },
        columns: [
            { data: 'booking_no', name: 'booking_no' },
            { data: 'contact_name', name: 'contacts.name' },
            { data: 'event_date', name: 'event_date' },
            { data: 'stage', name: 'status', orderable: false },
            { data: 'total_amount', name: 'total_amount' },
            { data: 'action', name: 'action', orderable: false, searchable: false },
        ],
    });
    window.__bmsTables = window.__bmsTables || []; window.__bmsTables.push(table);
});
</script>
@endsection
