@extends('admin.index')
@section('content')


    <div class="box">
        <div class="box-header">
            <h3 class="box-title">{{trans('categories.create')}}</h3>
        </div>
        <!-- /.box-header -->
        <div class="box-body">

            <form method="POST" class="form-horizontal" action="{{route('admin.advertising.categories.store')}}" accept-charset="UTF-8" enctype="multipart/form-data">
                {!! csrf_field() !!}
                <div class="panel-body">
                    <div class="form-group">
                        <label for="name" class="col-sm-1 control-label">{{trans('categories.name')}}</label>
                        <div class="col-sm-4">
                            <input type="text" name="name_ar"  id="name" class="form-control" required placeholder="{{trans('categories.name')}}">
                            <span id="error_name"></span>
                        </div>
                        <label for="name" class="col-sm-1 control-label">{{trans('categories.name_en')}}</label>
                        <div class="col-sm-4">
                            <input type="text" name="name_en"  id="name_en" class="form-control" required placeholder="{{trans('categories.name_en')}}">
                            <span id="error_name"></span>
                        </div>

                    </div>
                    <div class="form-group">
                        <label for="name" class="col-sm-1 control-label">{{trans('categories.body_ar')}}</label>
                        <div class="col-sm-10">
                           <textarea name="body_ar" class="form-control" required></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="name" class="col-sm-1 control-label">{{trans('categories.body_en')}}</label>
                        <div class="col-sm-10">
                            <textarea name="body_en" class="form-control" required></textarea>
                        </div>
                    </div>


                    <div class="form-group">


                        <label for="city" class="col-sm-1 control-label">{{trans('categories.countres')}}</label>
                        <div class="col-sm-4">
                            <select name="country_id[]" class="form-control select2 mainAreas" required multiple="multiple">
                                @foreach($countries as $country)
                                    <option value="{{$country->id}}">{{$country->name_ar}}</option>
                                @endforeach
                            </select>
                        </div>
                        <label for="city" class="col-sm-1 control-label">{{trans('categories.design')}}</label>
                        <div class="col-sm-4">
                            <select name="design_type" class="form-control select2">
                                <option value="1">تصميم صفحه الحرفيين</option>
                                <option value="2">تصميم صفحه الوظائف</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">

                    </div>

                    <div class="form-group">

                        <label for="phone" class="col-sm-1 control-label">{{trans('categories.image')}}</label>
                        <div class="col-sm-4">
                            <input type="file" name="image" class="form-control">
                        </div>

                    </div>

                    <div class="form-group">

                        <label for="status" class="col-sm-1 control-label">{{trans('global.status')}}</label>
                        <div class="col-sm-4">
                            <select name="status" class="form-control" required>
                                <option value="1">{{trans('global.enabled')}}</option>
                                <option value="0">{{trans('global.notenabled')}}</option>
                            </select>
                        </div>
                        <label for="status" class="col-sm-1 control-label">{{trans('admin.showhome')}}</label>
                        <div class="col-sm-4">
                            <select name="show_home" class="form-control" required>
                                <option value="1">{{trans('global.enabled')}}</option>
                                <option value="0">{{trans('global.notenabled')}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <table class="table table-bordered">
                            <thead>
                            <tr>
                                <th>اسم الفلتر</th>
                                <th>#</th>


                                <th>
                                    <button class="btn btn-default" style="background-color: yellowgreen;color: #fff;" id="AddProductSpecification" type="button"><i class="glyphicon glyphicon-plus"></i> </button>

                                </th>
                            </tr>
                            </thead>
                            <tbody id="InsertProductSpecification">

                            </tbody>
                        </table>
                    </div>




                    <div class="box-footer">
                        <div class="col-sm-1">
                            <button type="submit" class="btn btn-primary pull-right register" id="register">{{trans('admin.save')}}</button>
                        </div>
                        <div class="col-sm-1">
                            <button class="btn btn-danger" type="reset" onclick="window.location='{{route('admin.advertising.categories')}}';return false;">{{trans('admin.cancel')}}</button>
                        </div>
                        <div class="col-sm-2">
                            <button class="btn default" type="reset">{{trans('admin.reset')}}</button>
                        </div>

                    </div>

                </div>
            </form>
        </div>
        <!-- /.box-body -->
    </div>
    <!-- /.box -->


    <script>
        $(function () {
            var zxcx = 1;
            $("#AddProductSpecification").click(function () {

                $("#InsertProductSpecification").append(
                    // Add new row

                    ' <tr id="remove'+zxcx+' ">' +
                    '            <td>' +
                    '                <input type="text" name="title_array_ar[]" class="form-control" placeholder="{{trans('products.title_array_ar_ad')}}" required><br>' +
                    ' <input type="text" name="title_array_en[]" class="form-control" placeholder="{{trans('products.title_array_en_ad')}}" required>' +
                    '' +
                    '            </td>' +



                    '            <td>' +
                    '                <input type="button" id="remove2" class="btn btn-danger " value="X" />' +
                    '            </td>' +
                    ' </tr>'+

                    ''
                );
                $('.select2').select2();
                zxc++;
            });

            //remove selected Row
            $("#InsertProductSpecification").on("click", "#remove2", function () {
                $(this).closest("tr").remove();

            });

        });


    </script>
@endsection