@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: false,
                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