@extends('layouts.app')

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

@section('content')

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

<section class="content">
    @if (session('status'))
        <div class="alert alert-success">{{ session('status') }}</div>
    @endif

    {!! Form::open(['route' => 'bms.catalog-options.update', 'method' => 'put']) !!}
    <div class="row">
        @foreach ([['fnb', __('bms::lang.fnb_levels'), $fnb], ['features', __('bms::lang.features'), $features]] as [$name, $title, $rows])
            <div class="col-md-6">
                @component('components.widget', ['class' => 'box-primary', 'title' => $title])
                    <table class="table table-condensed" data-list="{{ $name }}">
                        <thead><tr>
                            <th style="width:28%">@lang('bms::lang.opt_key')</th>
                            <th>EN</th><th>AR</th><th style="width:40px"></th>
                        </tr></thead>
                        <tbody>
                            @foreach ($rows as $i => $r)
                                <tr>
                                    <td><input class="form-control input-sm" name="{{ $name }}[{{ $i }}][key]" value="{{ $r['key'] ?? '' }}"></td>
                                    <td><input class="form-control input-sm" name="{{ $name }}[{{ $i }}][en]" value="{{ $r['en'] ?? '' }}"></td>
                                    <td><input class="form-control input-sm" dir="rtl" name="{{ $name }}[{{ $i }}][ar]" value="{{ $r['ar'] ?? '' }}"></td>
                                    <td><button type="button" class="btn btn-xs btn-danger rm-row">&times;</button></td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                    <button type="button" class="btn btn-sm btn-default add-row" data-list="{{ $name }}">
                        <i class="fa fa-plus"></i> @lang('bms::lang.opt_add')
                    </button>
                @endcomponent
            </div>
        @endforeach
    </div>

    <button type="submit" class="btn btn-primary">@lang('messages.save')</button>
    <p class="help-block" style="margin-top:10px;">@lang('bms::lang.catalog_options_note')</p>
    {!! Form::close() !!}
</section>

@endsection

@section('javascript')
<script>
$(function () {
    function nextIndex($tbody) {
        var max = -1;
        $tbody.find('input[name^="' + $tbody.closest('table').data('list') + '["]').each(function () {
            var m = this.name.match(/\[(\d+)\]/); if (m) max = Math.max(max, parseInt(m[1], 10));
        });
        return max + 1;
    }
    $('.add-row').on('click', function () {
        var list = $(this).data('list');
        var $tbody = $('table[data-list="' + list + '"] tbody');
        var i = nextIndex($tbody);
        $tbody.append(
            '<tr>' +
            '<td><input class="form-control input-sm" name="' + list + '[' + i + '][key]"></td>' +
            '<td><input class="form-control input-sm" name="' + list + '[' + i + '][en]"></td>' +
            '<td><input class="form-control input-sm" dir="rtl" name="' + list + '[' + i + '][ar]"></td>' +
            '<td><button type="button" class="btn btn-xs btn-danger rm-row">&times;</button></td>' +
            '</tr>'
        );
    });
    $(document).on('click', '.rm-row', function () { $(this).closest('tr').remove(); });
});
</script>
@endsection
