@extends('Common::admin.layout.page')
@section('page')
<style>
    .temp_trans {
        width: 0px;
        height: 0px;
        overflow: hidden;
        display: block;
    }

    .add_trans {
        display: table;
        margin: 20px auto;
        cursor: pointer;
    }

</style>
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">الترجمات</h3>
            </div>
            <!-- /.card-header -->
            <div class="card-body">
                <form action="" method="post" enctype="multipart/form-data" class="action_form" novalidate>
                    @csrf
                    <table class="table table-bordered table-striped">
                        <tr>
                            <th>الصورة</th>
                            <th>العربى</th>
                            <th>الانجليزي</th>
                            <th>حذف</th>
                        </tr>
                        @foreach($trans as $row)
                        <tr>
                            <th>
                                <div class="input-group">
                                    <div class="mycustom-file">
                                        <input name="images[]" type="file" class="mycustom-file-input">
                                        <label title="@lang('Choose image')" class="mycustom-file-label">
                                            <div class="image">
                                                <i class="fas fa-image"></i>
                                                <span>@lang('Choose image')</span>
                                                <img onerror="this.style.display='none'" src="{{ $row->image }}">
                                            </div>
                                        </label>
                                    </div>
                                </div>
                            </th>
                            <td>
                                <textarea name="ar[]" class="form-control" rows="6">{{ $row->ar }}</textarea>
                            </td>
                            <td>
                                <textarea name="en[]" class="form-control" rows="6">{{ $row->en }}</textarea>
                                <input type="hidden" name="id[]" value="{{ $row->id }}">
                            </td>
                            <td>
                                <button class="btn btn-danger remove_trans" data-id="{{ $row->id }}">
                                    <i class="fa fa-trash"></i>
                                </button>
                            </td>
                        </tr>
                        @endforeach
                        <tr>
                            <th>
                                <div class="input-group">
                                    <div class="mycustom-file">
                                        <input name="images[]" type="file" class="mycustom-file-input">
                                        <label title="@lang('Choose image')" class="mycustom-file-label">
                                            <div class="image">
                                                <i class="fas fa-image"></i>
                                                <span>@lang('Choose image')</span>
                                                <img onerror="this.style.display='none'" src="">
                                            </div>
                                        </label>
                                    </div>
                                </div>
                            </th>
                            <td>
                                <textarea name="ar[]" class="form-control" rows="6"></textarea>
                            </td>
                            <td>
                                <textarea name="en[]" class="form-control" rows="6"></textarea>
                                <input type="hidden" name="id[]" value="0">
                            </td>
                            <td>
                                <button class="btn btn-danger remove_trans" data-id="0">
                                    <i class="fa fa-trash"></i>
                                </button>
                            </td>
                        </tr>
                    </table>
                    <a class="add_trans">
                        <i class="fa fa-plus"></i>
                        <span> اضافة صورة اخرى</span>
                    </a>
                    <div class="card-footer">
                        <button type="submit" class="btn btn-primary"> <span>{{ __("Save") }}</span> <i
                                class="fas fa-save"></i></button>
                    </div>
                </form>
            </div>
            <!-- /.card-body -->
        </div>
        <!-- /.card -->
    </div>
    <!-- /.col -->
</div>


<table class="temp_trans">
    <tr>
        <th>
            <div class="input-group">
                <div class="mycustom-file">
                    <input name="images[]" type="file" class="mycustom-file-input">
                    <label title="@lang('Choose image')" class="mycustom-file-label">
                        <div class="image">
                            <i class="fas fa-image"></i>
                            <span>@lang('Choose image')</span>
                            <img onerror="this.style.display='none'" src="">
                        </div>
                    </label>
                </div>
            </div>
        </th>
        <td>
            <textarea name="ar[]" class="form-control" rows="6"></textarea>
        </td>
        <td>
            <textarea name="en[]" class="form-control" rows="6"></textarea>
            <input type="hidden" name="id[]" value="0">
        </td>
        <td>
            <button class="btn btn-danger remove_trans" data-id="0">
                <i class="fa fa-trash"></i>
            </button>
        </td>
    </tr>
</table>

<script>
    $('.add_trans').click(function () {
        $('.table').append($('.temp_trans').html());
    });
    $('body').on('click', '.remove_trans', function () {
        $(this).closest('tr').remove();
    });

</script>
@stop