@extends('layouts.app')
@section('title', 'Repair Info (RMI)')
@section('content')
<section class="content-header"><h1>Repair &amp; Maintenance Information <small>ISO 18541 · provider: {{ $provider }}</small></h1></section>
<section class="content">
    <div class="row">
        <div class="col-md-6">
            @component('components.widget', ['class' => 'box-primary', 'title' => 'VIN decode'])
                <div class="form-group">
                    <label>VIN</label>
                    <input type="text" id="rmi_vin" class="form-control" placeholder="e.g. WBA3A5C50DF000000">
                </div>
                <button id="rmi_decode_btn" class="btn btn-primary"><i class="fa fa-search"></i> Decode</button>
                <pre id="rmi_vin_result" class="hide" style="margin-top:12px;"></pre>
            @endcomponent
        </div>
        <div class="col-md-6">
            @component('components.widget', ['class' => 'box-info', 'title' => 'Repair / maintenance lookup'])
                <div class="row">
                    <div class="col-sm-4"><div class="form-group"><label>Use case</label>
                        <select id="rmi_usecase" class="form-control">
                            @foreach(['maintenance'=>'Maintenance','repair'=>'Repair','diagnostics'=>'Diagnostics','wiring'=>'Wiring','tsb'=>'TSB','recall'=>'Recall'] as $k=>$v)
                                <option value="{{ $k }}">{{ $v }}</option>
                            @endforeach
                        </select></div></div>
                    <div class="col-sm-4"><div class="form-group"><label>Make</label><input id="rmi_make" class="form-control"></div></div>
                    <div class="col-sm-4"><div class="form-group"><label>Model</label><input id="rmi_model" class="form-control"></div></div>
                </div>
                <div class="form-group"><label>Query</label><input id="rmi_query" class="form-control" placeholder="symptom / part / DTC"></div>
                <button id="rmi_lookup_btn" class="btn btn-info"><i class="fa fa-book"></i> Look up</button>
                <div id="rmi_lookup_result" class="hide" style="margin-top:12px;"></div>
            @endcomponent
        </div>
    </div>

    @component('components.widget', ['class' => 'box-default', 'title' => 'Recent lookups'])
        <table class="table table-striped">
            <thead><tr><th>When</th><th>Use case</th><th>VIN / query</th><th>Status</th></tr></thead>
            <tbody>
                @forelse($recent as $r)
                    <tr><td>{{ optional($r->created_at)->format('d M Y H:i') }}</td><td>{{ $r->use_case }}</td>
                        <td>{{ $r->vin ?: $r->query }}</td><td><span class="label label-{{ $r->status=='ok'?'success':'warning' }}">{{ $r->status }}</span></td></tr>
                @empty
                    <tr><td colspan="4" class="text-muted">No lookups yet.</td></tr>
                @endforelse
            </tbody>
        </table>
    @endcomponent
</section>
@endsection
@section('javascript')
<script>
$(function () {
    var t = $('meta[name=csrf-token]').attr('content');
    $('#rmi_decode_btn').on('click', function () {
        $.post('{{ route('vrc.rmi.decode') }}', { _token: t, vin: $('#rmi_vin').val() }, function (r) {
            $('#rmi_vin_result').removeClass('hide').text(JSON.stringify(r.result, null, 2));
        }).fail(function(){ toastr.error('Decode failed'); });
    });
    $('#rmi_lookup_btn').on('click', function () {
        $.post('{{ route('vrc.rmi.lookup') }}', {
            _token: t, use_case: $('#rmi_usecase').val(), make: $('#rmi_make').val(),
            model: $('#rmi_model').val(), query: $('#rmi_query').val()
        }, function (r) {
            var html = '<div class="callout callout-info"><h4>' + (r.result.title || '') + '</h4><ul>';
            (r.result.sections || []).forEach(function (s) { html += '<li>' + s + '</li>'; });
            html += '</ul><small class="text-muted">' + (r.result.note || '') + '</small></div>';
            $('#rmi_lookup_result').removeClass('hide').html(html);
        }).fail(function(){ toastr.error('Lookup failed'); });
    });
});
</script>
@endsection
