@extends('layouts.app')
@section('title', __('vrc::lang.repair_orders'))

@section('css')
<style>
    .vrc-board { display:flex; gap:12px; overflow-x:auto; padding-bottom:10px; }
    .vrc-col { min-width:230px; flex:0 0 230px; background:#f4f6f9; border-radius:6px; padding:8px; }
    .vrc-col h4 { font-size:13px; font-weight:700; margin:0 0 8px; text-transform:uppercase; color:#555; }
    .vrc-card { background:#fff; border:1px solid #e3e3e3; border-radius:5px; padding:8px; margin-bottom:8px; font-size:12px; cursor:pointer; }
    .vrc-card b { display:block; }
    .vrc-card .muted { color:#888; }
</style>
@endsection

@section('content')
<section class="content-header">
    <h1>@lang('vrc::lang.repair_orders')
        @can('vrc.repair_order.create')
            <a href="{{ route('vrc.repair-orders.create') }}" class="btn btn-primary btn-sm pull-right"><i class="fa fa-plus"></i> @lang('vrc::lang.check_in')</a>
        @endcan
    </h1>
</section>

<section class="content">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#vrc-board-tab" data-toggle="tab">@lang('vrc::lang.board')</a></li>
        <li><a href="#vrc-list-tab" data-toggle="tab">@lang('vrc::lang.list')</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="vrc-board-tab">
            <div class="vrc-board">
                @foreach ($board as $status => $orders)
                    <div class="vrc-col">
                        <h4>{{ __('vrc::lang.ro_status_' . $status) }} <span class="badge">{{ $orders->count() }}</span></h4>
                        @foreach ($orders as $ro)
                            <div class="vrc-card" onclick="window.location='{{ route('vrc.repair-orders.show', $ro->id) }}'">
                                <b>{{ $ro->number ?: ('#' . $ro->id) }}</b>
                                <span class="muted">{{ optional($ro->vehicle)->label ?? '' }}</span>
                                <span class="muted">{{ optional($ro->customer)->name ?? '' }}</span>
                            </div>
                        @endforeach
                    </div>
                @endforeach
            </div>
        </div>
        <div class="tab-pane" id="vrc-list-tab">
            @component('components.widget', ['class' => 'box-primary'])
                <table class="table table-bordered table-striped" id="vrc_ro_table">
                    <thead><tr>
                        <th>@lang('vrc::lang.repair_order')</th><th>@lang('vrc::lang.customer')</th><th>@lang('vrc::lang.vehicle')</th>
                        <th>@lang('vrc::lang.status')</th><th>@lang('vrc::lang.grand_total')</th><th>@lang('vrc::lang.promised')</th><th>@lang('messages.action')</th>
                    </tr></thead>
                </table>
            @endcomponent
        </div>
    </div>
</section>
@endsection

@section('javascript')
<script>
$(function () {
    var table;
    $('a[href="#vrc-list-tab"]').one('shown.bs.tab', function () {
        table = $('#vrc_ro_table').DataTable({
            processing: true, serverSide: true, ajax: '{{ route('vrc.repair-orders.index') }}',
            columns: [
                { data: 'number', name: 'vrc_repair_orders.number' },
                { data: 'customer_name', name: 'c.name' },
                { data: 'plate_number', name: 'v.plate_number' },
                { data: 'status', name: 'vrc_repair_orders.status' },
                { data: 'grand_total', name: 'vrc_repair_orders.grand_total' },
                { data: 'promised_at', name: 'vrc_repair_orders.promised_at' },
                { data: 'action', name: 'action', orderable: false, searchable: false },
            ],
        });
    });
});
</script>
@endsection
