@extends('app')
@section('content')


<link href="{{ asset('assets/cpanel/css/image_upload.css')}}" rel="stylesheet" type="text/css" media="screen"/>
<link rel="stylesheet" type="text/css" href="{{ asset("assets/plugins/blueimp/blueimp-gallery.min.css") }}">

<div class="row">
    <div class="col-md-12">
        <div class="grid simple">
            <div class="grid-title">
                <h4>{{$twasul ? 'تصحيح' : 'إضافة'}} <span style="font-weight: bold;" >{{$twasul->twasul_type->title}}</span> تواصل</h4>
               <!--  <div class="tools"> 
                    <a class="collapse" href="javascript:;"></a> 
                    <a class="reload" href="javascript:;"></a> 
                </div> -->
            </div>
            <div class="grid-body"> <br>
                @if($errors->any())
                <div class="row">
                    <div class="alert alert-error col-md-6 col-sm-12 col-md-offset-3">
                        <button data-dismiss="alert" class="close"></button>
                        @foreach($errors->all() as $error)
                        <p>{{ $error }}</p>
                        @endforeach
                    </div>
                </div>
                @endif
                {!! Form::model($twasul, ['method' => $twasul ? 'PATCH' : 'POST','route' => $twasul ? ['admin.twasul.update', $twasul->id] : 'admin.twasul.store','id'=>'form_twasul', "enctype"=>"multipart/form-data"]) !!} 
                <div class="form-group row">
                    <div class="input-with-icon  right col-md-6 col-md-offset-3  col-sm-12">    
                        {!! Form::select('twasul_type_id',[''=>'Select Type']+$types->toArray(),$twasul ? $twasul->twasul_type_id : null, ['class' => 'form-control selectbox','required'=>true,'style'=>'width: 100%;', 'id' => 'twasul_type_id', 'disabled'=>'disabled']) !!}
                    </div>
                    <div class="col-md-3  col-sm-12 text-left">
                        <label>اكتب <span style="color:red">*</span></label>
                    </div>
                </div>

                <div class="form-group row">
                    <div class="input-with-icon  right col-md-6 col-md-offset-3  col-sm-12">    
                        {!! Form::text('title', null, ['class' => 'form-control','required'=>true,'id'=>'title_text']) !!}
                        <span class="help-block"><span id="char_desc_title">100</span> @lang('common.char_count')</span>
                    </div>
                    <div class="col-md-3  col-sm-12 text-left">
                        <label>عنوان <span style="color:red">*</span></label>
                    </div>
                </div>

                <div class="form-group row">
                    <div class="input-with-icon  right col-md-6 col-md-offset-3  col-sm-12">    
                        {!! Form::textarea('description', null, ['class' => 'form-control','id'=>'description_text','rows'=>3,'required'=>true,]) !!}
                        <span class="help-block"><span id="char_desc">1000</span> @lang('common.char_count')</span>
                    </div>
                    <div class="col-md-3  col-sm-12 text-left">
                        <label>وصف <span style="color:red">*</span></label>
                    </div>
                </div>

                <div class="form-group row">
                    <div class="input-with-icon  right col-md-6 col-md-offset-3  col-sm-12">    
                        <div class="radio">
                            <input type="radio" {{$twasul ?  ($twasul->status==1 ? 'checked' : ''):'checked' }} value="1" name="status" id="yes">
                            <label for="yes">نعم فعلا</label>
                            <input type="radio" value="0" {{$twasul ?  ($twasul->status==0 ? 'checked' : ''):'' }}  name="status" id="no">
                            <label for="no">لا</label>
                        </div>
                    </div>
                    <div class="col-md-3  col-sm-12 text-left">
                        <label> مرئي <span style="color:red"></span></label>
                    </div>
                </div>   

                <div class="">
                <div class="grid-title no-border">
                    <div class="pull-right markaction">
                       <!--  <a href="#" data-toggle="modal" data-target="#formModal" class="btn btn-primary" id="add_picture_btn">إضافة صورة</a> -->

                        <a id="del" href="javascript:void(0)" class="btn btn-danger" data-url="{{ URL::to('admin/twasul-additional-image/bulkdelete') }}">حذف</a>
                    </div>
                </div>
                <div class="grid-body no-border">
                    <table class="table table-hover " id="datatable-example" >
                        <thead>
                            <tr>
                                <th><input type="checkbox" class="group-checkable" data-set="#datatable-example .checkboxes" /></th>
                                <th>Id</th>
                                <th>صورة</th>
                                <th></th>
                            </tr>
                        </thead>
                    </table>
                </div>
                </div> 

                <div class="form-actions" style="margin-left: -13px !important; margin-right: -13px !important; padding-bottom: 13px !important">  
                    <div class="pull-right">
                        <a class="btn btn-default btn-cons" href="{{url('/admin/twasul')}}" >Cancel</a>
                        {!! Form::submit($twasul ? 'تحديث':'حفظ', ['class' => 'btn btn-primary btn-cons','id' => 'btn-submit']) !!}
                    </div>
                </div>
                {!! Form::close() !!}

            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="formModal" tabindex="-1" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content" style="margin-top: 70px ">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">إضافة صورة</h4>
          </div>
          {!! Form::open(['method' => 'POST','route' => ['admin.twasul-additional-image.store', 'source'=>'create'],'id'=>'form_news-attachments', 'novalidate'=>"novalidate","enctype"=>"multipart/form-data"]) !!}
          <input type='hidden' name="twasul_id" value="{{$twasul ? $twasul->id : 0}}">
          <input type='hidden' name="sender_id" value="{{$twasul ? $twasul->sender_id : ''}}">
          <div class="modal-body">
            {{--*/ $return = false /*--}}
            <div class="form-group row " >
              <label class="col-md-3 col-xs-12 form-label text-right">صورة </label>
              <div class="col-md-6 col-xs-12 controls">
                  <div class="fileupload fileupload-new" data-provides="fileupload">

                                            <div style="max-width: 400px; max-height: 400px;" class="fileupload-new thumbnail">
                            <img alt="" src="{{asset("assets/img/no-image.png")}}">
                        </div>
                        <div class="fileupload-preview fileupload-exists thumbnail" id="image1" style="max-width: 400px; max-height: 400px; line-height: 20px;">
                        </div>
                                        <div>
                      <span class="btn btn-file">
                          <span class="fileupload-new">اختر صورة</span>
                          <span class="fileupload-exists">يتغيرون</span>
                          {!! Form::file('image', ['class' => '']) !!}
                      </span>
                      <a class="btn hide" id="startCrop">قتصاص</a>

                      <a href="javascript:void(0)" class="btn remove_picture fileupload-exists" data-dismiss="fileupload" >إزالة</a>
                      <p id="image1-dim" class="label label-success" style="display:none;">

                      </p>
                      <p id="image1-size" class="label label-success" style="display:none;">

                      </p>
                    </div>
                  </div>
              </div>
              <div class="img-container" class="input">
                  <input type="hidden" class="x" name="logo_x" id="x" />
                  <input type="hidden" class="y" name="logo_y" id="y"/>
                  <input type="hidden" class="w" name="logo_w" id="w"/>
                  <input type="hidden" class="h" name="logo_h" id="h"/>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">قريب</button>
            {!! Form::submit('احفظ الصورة', ['class' => 'btn btn-primary btn-cons','id' => 'btn-submit']) !!}
          </div>
          {!! Form::close() !!}

        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
</div>
{!! Form::open([
'method' => 'POST',
'class' => 'inline',
'id'=> 'bulkaction'
]) !!}
<input type="hidden" value="" name="ids" id="ids" />
{!! Form::close() !!} 
@endsection

@section('page_script')
<script>
  $(document).ready(function() {

    $('.selectbox').select2({dir: "rtl"});

    $("#description_text").keyup(function (event) {
        updateFeatureCharLimitNum('description_text','char_desc',1000);
    });
    $("#title_text").keyup(function (event) {
        updateFeatureCharLimitNum('title_text','char_desc_title',100);
    });

    updateFeatureCharLimitNum('description_text','char_desc',1000);
    updateFeatureCharLimitNum('title_text','char_desc_title',100);

    function updateFeatureCharLimitNum(textarea,limitElement,limitNum){
        var field = document.getElementById(textarea);
        
        if (field.value.length > limitNum) {
            field.value = field.value.substring(0, limitNum);
        } else {
            $('#'+limitElement).html(limitNum - field.value.length);
        }
    }

    $( "#add_picture_btn" ).click(function() {
        $.post($('#form_twasul').attr('action'), $('#form_twasul').serialize() );
    });

    //--------------------------------------------
    jQuery('#form_twasul').submit(function (event) {
        var pass = true;
        //some validations

        if (pass == false) {
            return false;
        }
        form = this;
        jQuery('#btn-submit').attr('disabled', 'disabled');
        event.preventDefault();
        setTimeout(function () {
            form.submit();
        }, 500);
        jQuery('#progressbar').show();

        return true;
    });

    // --------------------------------------------
        $('body').append($('#formModal'));    
        jQuery('#form_news-attachments').submit(function (event) {
            var pass = true;
            //some validations
            if ($('input[name=image]').val()=='') {
              pass = false;
              alert('No Image Selected');
            };
            if (pass == false) {
                return false;
            }
            form = this;
            jQuery('#btn-submit').attr('disabled', 'disabled');
            event.preventDefault();
            setTimeout(function () {
                form.submit();
            }, 500);
            jQuery('#progressbar').show();

            return true;
        });
        $(document).on('submit', '.deleteaction', function () {
            // e.preventDefault();
            var ret = confirm("Are you sure you want to delete?");

            if (ret) {
                $("#progressbar").show();
                return true;
            }
            return false;
        });
        $('#datatable-example').DataTable({
            stateSave: true,
            processing: true,
            serverSide: true,
            "bFilter": false,
            "order": [[1, "desc"]],
            ajax: {
                "url": "{{ URL::to('admin/twasul-additional-image/datatable?twasul_id='.($twasul ? $twasul->id : 0)) }}",
                "type": "POST"
            },
            columns: [
                {data: 'check', name: 'check'},
                {data: 'id', name: 'id'},
                {data: 'image', name: 'image'},
                {data: 'actions', name: 'actions'}
            ],
            "columnDefs": [
                {
                    "targets": [1],
                    "visible": false,
                    "searchable": false
                },
                {
                    "targets": [0,3],
                    "searchable": false
                },
                {
                    "targets": [0, 1, 2, 3],
                    "orderable": false
                },
               
            ]
        });

        $('#datatable-example_wrapper .dataTables_filter input').addClass("input-medium "); // modify table search input
        $('#datatable-example_wrapper .dataTables_length select').addClass("select2-wrapper span12"); // modify table per page dropdown
        $('#datatable-example_wrapper .dataTables_length select').removeClass("form-control");



        $('#datatable-example input').click(function () {
            $(this).parent().parent().parent().toggleClass('row_selected');
        });


        $(".select2-wrapper").select2({minimumResultsForSearch: -1});
        // --------------------------------------------
  });
  $(document).on('click', '#startCrop', function (e) {

        var image = $('#image1 .cropbox');
        AspectRatio = '1:1';
        maxWidth = MaxHeight = 10000;
        var value = $("#sales_target").val();
        // console.log(image[0]);
        var originalWidth = image[0].naturalWidth;
        var originalHeight = image[0].naturalHeight;
        $('#image1 .cropbox').imgAreaSelect({
            handles: true,
            fadeSpeed: 200,
            onSelectChange: updateCoords,
            imageHeight: originalHeight,
            imageWidth: originalWidth,
            aspectRatio: AspectRatio,
            maxHeight: MaxHeight,
            maxWidth: maxWidth,
            // parent: '#image1'
        });
        $("#image1-dim").html('width: 0, height: 0');
        $("#image1-dim").show();

    });
    function updateCoords(img, selection)
    {
        if (!selection.width || !selection.height)
            return;
        $('#x').val(selection.x1);
        $('#y').val(selection.y1);
        $('#w').val(selection.width);
        $('#h').val(selection.height);
        $("#image1-dim").html('width: ' + selection.width + ', height: ' + selection.height);
    }
</script>
<script src="{{ asset('assets/cpanel/js/image_upload.js')}}" type="text/javascript"></script>
<script src="{{ asset("assets/plugins/blueimp/jquery.blueimp-gallery.min.js") }}"></script>
@endsection