@extends('admin.layouts.master')

@section('title')
    اضافة محتوى المواصفة
@endsection

@section('styles')
    <link href="{{ URL::asset('admin/libs/select2/select2.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ URL::asset('admin/libs/bootstrap-select/bootstrap-select.min.css') }}" rel="stylesheet" type="text/css" />
@endsection
@section('page_header')
    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="{{ route('admin.home') }}">@lang('messages.dashboard')</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('admin.attributes.index') }}">المحتوى المواصفة</a></li>
                        <li class="breadcrumb-item active">اضافة محتوى المواصفة</li>
                    </ol>
                </div>
                <h4 class="page-title">اضافة محتوى المواصفة</h4>
            </div>
        </div>
    </div>
    <!-- end page title -->
@endsection

@section('content')


    <div class="row">
        <div class="col-9">
            {!! Form::model($attribute, [ 'url' => route('admin.specifications.store', $attribute->id),'class' => 'form-horizontal form-row-seperated parsley-examples', 'files'=> 'true']) !!}
            <div class="card-box">
                <h4 class="header-title mb-4">معلومات المحتوى المواصفة</h4>
                <div class="actions btn-set btn-position" >
                    <button class="btn btn-success" type="submit"  >
                         @lang('messages.save')
                    </button>
                </div>

                @if($attribute->attribute_type == "color" )
                <ul class="nav nav-tabs nav-bordered">
                    <li class="nav-item">
                        <a href="#general" data-toggle="tab" aria-expanded="false" class="nav-link active">
                            @lang('messages.general')
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#another" data-toggle="tab" aria-expanded="true" class="nav-link">
                            @lang('messages.another')
                        </a>
                    </li>
                </ul>
                @endif
                <div class="card-box">
                    <div class="tab-content">
                        @include('admin.specifications._form')


                    </div>
                </div>
            </div> <!-- end card-box-->
            {!! Form::close() !!}
        </div> <!-- end col -->


    </div>
    <!-- end row -->


@endsection

@section('scripts')
    <script src="{{ URL::asset('admin/libs/parsleyjs/parsley.min.js') }}"></script>
    <script src="{{ URL::asset('admin/js/pages/form-validation.init.js') }}"></script>
    <script src="{{ URL::asset('admin/libs/select2/select2.min.js') }}"></script>
    <script src="{{ URL::asset('admin/libs/bootstrap-select/bootstrap-select.min.js') }}"></script>
    <script type="text/javascript" src="//code.jquery.com/ui/1.12.1/jquery-ui.js" ></script>

    <script type="text/javascript" src="//cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.js"></script>
    <script>
        $(function () {
            $("#table").DataTable();

            $( "#tablecontents" ).sortable({
                items: "tr",
                cursor: 'move',
                opacity: 0.6,
                update: function() {
                    sendOrderToServer();
                }
            });

            function sendOrderToServer() {

                var order = [];
                $('tr.row1').each(function(index,element) {
                    order.push({
                        id: $(this).attr('data-id'),
                        position: index+1
                    });
                });

                {{--$.ajax({--}}
                {{--    type: "POST",--}}
                {{--    dataType: "json",--}}
                {{--    url: "{{ url('demos/sortabledatatable') }}",--}}
                {{--    data: {--}}
                {{--        order:order,--}}
                {{--        _token: '{{csrf_token()}}'--}}
                {{--    },--}}
                {{--    success: function(response) {--}}
                {{--        if (response.status == "success") {--}}
                {{--            console.log(response);--}}
                {{--        } else {--}}
                {{--            console.log(response);--}}
                {{--        }--}}
                {{--    }--}}
                {{--});--}}

            }
        });
        $(document).ready(function () {



                $('select[name="attribute_type"]').on('change', function() {
                    var id = $(this).val();
                    if(id == "color"){
                        $('#color-table').show();
                        $('#text-table').hide();
                        $('#price-table').hide();
                        $('#add-color').show();
                        $('#add-text').hide();
                        $('#add-price').hide();
                    }
                    else if(id == "text"){
                        $('#color-table').hide();
                        $('#text-table').show();
                        $('#price-table').hide();
                        $('#add-color').hide();
                        $('#add-text').show();
                        $('#add-price').hide();

                    }
                    else if(id == "price"){
                        $('#color-table').hide();
                        $('#text-table').hide();
                        $('#price-table').show();
                        $('#add-color').hide();
                        $('#add-text').hide();
                        $('#add-price').show();

                    }



                });



            $("#addrow-color").on("click", function () {
                var newRow = $("<tr>");
                var cols = "";

                cols += '<td><input type="text" class="form-control mb-3" name="title[ar][]"  parsley-trigger="change" required placeholder="عربي"/> <input type="text" class="form-control mb-3" name="title[en][]"  parsley-trigger="change" required placeholder="English"/> </td>';
                cols += '<td><textarea type="text" class="form-control mb-3" name="sub_title[ar][]" parsley-trigger="change" required placeholder="عربي" ></textarea><textarea type="text" class="form-control mb-3" name="sub_title[en][]"  parsley-trigger="change" required placeholder="English" ></textarea></td>';
                cols += '<td><input type="text" class="form-control" name="number[]" data-parsley-type="number" required/></td>';
                cols += '<td><input type="text" class="form-control" name="cost[]" data-parsley-type="number" required/></td>';

                cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger "  value="{{trans('messages.delete')}}"></td>';
                newRow.append(cols);
                $("table.order-list-color").append(newRow);

            });
            $("#addrow-text").on("click", function () {
                var newRow = $("<tr>");
                var cols = "";

                cols += '<td><input type="text" class="form-control mb-3" name="title[ar][]"  parsley-trigger="change" required placeholder="عربي"/> <input type="text" class="form-control mb-3" name="title[en][]"  parsley-trigger="change" required placeholder="English"/> </td>';
                cols += '<td><textarea type="text" class="form-control mb-3" name="sub_title[ar][]" parsley-trigger="change" required placeholder="عربي" ></textarea><textarea type="text" class="form-control mb-3" name="sub_title[en][]"  parsley-trigger="change" required placeholder="English" ></textarea></td>';
                cols += '<td><input type="text" class="form-control" name="number[]" data-parsley-type="number" required/></td>';
                cols += '<td><input type="text" class="form-control" name="cost[]" data-parsley-type="number" required/></td>';

                cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger "  value="{{trans('messages.delete')}}"></td>';
                newRow.append(cols);
                $("table.order-list-text").append(newRow);

            });
            $("#addrow-price").on("click", function () {
                var newRow = $("<tr>");
                var cols = "";

                cols += '<td><input type="text" class="form-control mb-3" name="title[ar][]"  parsley-trigger="change" required placeholder="عربي"/> <input type="text" class="form-control mb-3" name="title[en][]"  parsley-trigger="change" required placeholder="English"/> </td>';
                cols += '<td><textarea type="text" class="form-control mb-3" name="sub_title[ar][]" parsley-trigger="change" required placeholder="عربي" ></textarea><textarea type="text" class="form-control mb-3" name="sub_title[en][]"  parsley-trigger="change" required placeholder="English" ></textarea></td>';
                cols += '<td><input type="text" class="form-control" name="number[]" data-parsley-type="number" required/></td>';
                cols += '<td><input type="text" class="form-control" name="cost[]" data-parsley-type="number" required/></td>';

                cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger "  value="{{trans('messages.delete')}}"></td>';
                newRow.append(cols);
                $("table.order-list-price").append(newRow);

            });



            $("table.order-list").on("click", ".ibtnDel", function (event) {
                $(this).closest("tr").remove();
            });


        });




    </script>
@endsection