@extends('layouts.app')

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

@section('content')

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

<section class="content">
    <div class="row">
        @foreach (['submitted','assigned','in_progress','resolved'] as $s)
            <div class="col-md-3 col-sm-6">
                <div class="info-box">
                    <span class="info-box-icon {{ ['submitted'=>'bg-aqua','assigned'=>'bg-blue','in_progress'=>'bg-yellow','resolved'=>'bg-green'][$s] }}">
                        <i class="fa fas fa-wrench"></i>
                    </span>
                    <div class="info-box-content">
                        <span class="info-box-text">@lang('bms::lang.mst_'.$s)</span>
                        <span class="info-box-number">{{ $counts[$s] ?? 0 }}</span>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    @component('components.widget', ['class' => 'box-primary', 'title' => __('bms::lang.maintenance_requests')])
        @can('bms.maintenance.manage')
            @slot('tool')
                <div class="box-tools">
                    <button type="button" class="tw-dw-btn tw-dw-btn-primary tw-text-white bms-modal-btn"
                        data-href="{{ route('bms.maintenance.create') }}" data-container=".bms_modal">
                        <i class="fa fa-plus"></i> @lang('bms::lang.new_request')
                    </button>
                </div>
            @endslot
        @endcan

        <div class="form-group" style="max-width:260px;">
            <label>@lang('messages.status')</label>
            <select id="mnt_status_filter" class="form-control">
                <option value="">@lang('bms::lang.all_statuses')</option>
                @foreach ($statuses as $k => $label)<option value="{{ $k }}">{{ $label }}</option>@endforeach
            </select>
        </div>

        <div class="table-responsive">
            <table class="table table-bordered table-striped" id="bms_mnt_table">
                <thead>
                    <tr>
                        <th>@lang('bms::lang.code')</th>
                        <th>@lang('bms::lang.title')</th>
                        <th>@lang('bms::lang.target')</th>
                        <th>@lang('bms::lang.category')</th>
                        <th>@lang('bms::lang.priority')</th>
                        <th>@lang('messages.status')</th>
                        <th>@lang('bms::lang.assignee')</th>
                        <th>@lang('bms::lang.age')</th>
                        <th>@lang('messages.action')</th>
                    </tr>
                </thead>
            </table>
        </div>
    @endcomponent

    <div class="modal fade bms_modal" tabindex="-1" role="dialog"></div>
</section>

@endsection

@section('javascript')
<script>
$(function () {
    var table = $('#bms_mnt_table').DataTable({
        processing: true, serverSide: true, order: [[0, 'desc']],
        ajax: { url: '{{ route('bms.maintenance.index') }}', data: function (d) { d.status = $('#mnt_status_filter').val(); } },
        columns: [
            { data: 'code', name: 'code' },
            { data: 'title', name: 'title' },
            { data: 'target', name: 'target', orderable: false, searchable: false },
            { data: 'category', name: 'category' },
            { data: 'priority', name: 'priority' },
            { data: 'status', name: 'status' },
            { data: 'assignee', name: 'assignee', orderable: false, searchable: false },
            { data: 'age', name: 'created_at' },
            { data: 'action', name: 'action', orderable: false, searchable: false },
        ],
    });
    $('#mnt_status_filter').on('change', function () { table.ajax.reload(); });
    window.__bmsTables = window.__bmsTables || [];
    window.__bmsTables.push(table);
});
</script>
@include('bms::partials.crud_scripts')
@endsection
