@extends('layouts.app')
@section('title', 'Workshop Board')
@section('content')
<section class="content-header"><h1>Workshop Board <small>multi-stage routing</small></h1></section>
<section class="content">
    <div class="row" style="display:flex; overflow-x:auto; flex-wrap:nowrap;">
        @php
            $columns = collect([(object)['id'=>0,'name'=>'Unassigned','color'=>'#888']])->merge($centers);
            $stageBadge = ['queued'=>'default','in_progress'=>'warning','done'=>'success','blocked'=>'danger'];
        @endphp
        @foreach($columns as $center)
            <div style="min-width:280px; max-width:300px; margin:6px;">
                <div class="box box-solid">
                    <div class="box-header" style="border-top:3px solid {{ $center->color ?? '#888' }}">
                        <h3 class="box-title">{{ $center->name }}</h3>
                        <span class="label label-default pull-right">{{ optional($grouped->get($center->id))->count() ?? 0 }}</span>
                    </div>
                    <div class="box-body" style="min-height:120px;">
                        @foreach(($grouped->get($center->id) ?? []) as $line)
                            <div class="panel panel-default" style="margin-bottom:8px;">
                                <div class="panel-body" style="padding:8px;">
                                    <strong>{{ $line->ro_number ?: ('RO #'.$line->repair_order_id) }}</strong>
                                    <span class="label label-{{ $stageBadge[$line->stage_status] ?? 'default' }} pull-right">{{ str_replace('_',' ',$line->stage_status) }}</span>
                                    <div class="text-muted" style="font-size:12px; margin:4px 0;">{{ \Illuminate\Support\Str::limit($line->description, 60) }}</div>
                                    @can('vrc.workflow.manage')
                                    <form class="vrc-route-form" data-href="{{ route('vrc.workflow.route-line', $line->id) }}">
                                        <div class="input-group input-group-sm">
                                            <select name="work_center_id" class="form-control input-sm">
                                                <option value="">— center —</option>
                                                @foreach($centers as $c)
                                                    <option value="{{ $c->id }}" {{ $line->work_center_id == $c->id ? 'selected' : '' }}>{{ $c->name }}</option>
                                                @endforeach
                                            </select>
                                            <select name="stage_status" class="form-control input-sm">
                                                @foreach(['queued','in_progress','done','blocked'] as $st)
                                                    <option value="{{ $st }}" {{ $line->stage_status == $st ? 'selected' : '' }}>{{ str_replace('_',' ',$st) }}</option>
                                                @endforeach
                                            </select>
                                            <span class="input-group-btn"><button class="btn btn-primary btn-sm" type="submit"><i class="fa fa-arrow-right"></i></button></span>
                                        </div>
                                    </form>
                                    @endcan
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        @endforeach
    </div>
</section>
@endsection
@section('javascript')
<script>
$(function () {
    $(document).on('submit', '.vrc-route-form', function (e) {
        e.preventDefault();
        var $f = $(this);
        $.ajax({
            url: $f.data('href'), method: 'POST',
            data: $f.serialize() + '&_token=' + $('meta[name=csrf-token]').attr('content'),
            success: function (r) {
                if (r.success) { toastr.success(r.msg); setTimeout(function(){ location.reload(); }, 500); }
                else { toastr.error(r.msg || 'Error'); }
            },
            error: function () { toastr.error('Error'); }
        });
    });
});
</script>
@endsection
