@extends('layouts.app')

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

@section('content')

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

<section class="content">
    {!! Form::open(['route' => 'bms.qc-checklist.update', 'method' => 'PUT']) !!}
    @component('components.widget', ['class' => 'box-primary'])
        <div class="row">
            <div class="col-sm-5">
                <div class="form-group">
                    <label>@lang('bms::lang.title') (EN)</label>
                    <input type="text" name="name" class="form-control" value="{{ $checklist->name }}">
                </div>
            </div>
            <div class="col-sm-5">
                <div class="form-group">
                    <label>@lang('bms::lang.title') (AR)</label>
                    <input type="text" name="name_ar" class="form-control" value="{{ $checklist->name_ar }}" dir="rtl">
                </div>
            </div>
            <div class="col-sm-2">
                <div class="checkbox" style="margin-top:28px;">
                    <label><input type="checkbox" name="is_active" value="1" {{ $checklist->is_active ? 'checked' : '' }}> @lang('bms::lang.active')</label>
                </div>
            </div>
        </div>

        <table class="table table-bordered" id="qc-table" style="max-width:820px">
            <thead><tr>
                <th>@lang('bms::lang.title') (EN)</th><th>@lang('bms::lang.title') (AR)</th><th style="width:40px"></th>
            </tr></thead>
            <tbody>
                @php $items = $checklist->items ?? []; @endphp
                @forelse($items as $it)
                    <tr>
                        <td><input type="text" name="item_label[]" class="form-control" value="{{ $it['label'] ?? '' }}"></td>
                        <td><input type="text" name="item_label_ar[]" class="form-control" value="{{ $it['label_ar'] ?? '' }}" dir="rtl"></td>
                        <td><button type="button" class="btn btn-xs btn-danger row-del">&times;</button></td>
                    </tr>
                @empty
                    <tr>
                        <td><input type="text" name="item_label[]" class="form-control"></td>
                        <td><input type="text" name="item_label_ar[]" class="form-control" dir="rtl"></td>
                        <td><button type="button" class="btn btn-xs btn-danger row-del">&times;</button></td>
                    </tr>
                @endforelse
            </tbody>
        </table>
        <button type="button" class="btn btn-default btn-sm" id="add-qc"><i class="fa fa-plus"></i> @lang('bms::lang.add_row')</button>
        <hr>
        <button type="submit" class="tw-dw-btn tw-dw-btn-primary tw-text-white">
            <i class="fa fa-save"></i> @lang('messages.update')
        </button>
    @endcomponent
    {!! Form::close() !!}
</section>

@push('scripts')
<script>
$(function () {
    $('#add-qc').on('click', function () {
        var $tr = $('#qc-table tbody tr:first').clone();
        $tr.find('input').val('');
        $('#qc-table tbody').append($tr);
    });
    $(document).on('click', '.row-del', function () {
        var $tb = $(this).closest('tbody');
        if ($tb.find('tr').length > 1) { $(this).closest('tr').remove(); }
        else { $(this).closest('tr').find('input').val(''); }
    });
});
</script>
@endpush

@endsection
