@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") }}">
    <style type="text/css">
        .box {
            border: 1px solid #dcdcdc; padding: 5px;
        }
        .help-block label{
            display: inline;
        }
    </style>
    @if(Session::has('flash_message'))
        <div class="alert {{ (Session::has('flash_message_status'))?'alert-error':'alert-success'}}">
            <button class="close" data-dismiss="alert"></button>
            {!! Session::get('flash_message') !!}
        </div>
    @endif

    @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

    <div class="row">
        <div class="col-md-12">
            <div class="grid simple">
                <div class="grid-body">
                    <div class="c-page-title">
                           <span> الأوقاف </span>
                    </div>
                    <br>
                    <div class="box">
                        {!! Form::model($awkaf, ['method' => 'PATCH','route' => ['awkaf.update', $awkaf->id],'id'=>'form_awkaf', "enctype"=>"multipart/form-data"]) !!}
                            <br>

                            <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','id'=>'title','required'=>true]) !!}
                                    <span class="help"><span id="char_count_title">60</span> الحروف المتبقية</span><br>
                                </div>
                                <div class="col-md-3  col-sm-12 text-left">
                                    <label style="font-weight: bold;">عنوان الخبر <span style="color:red"></span></label>
                                </div>
                            </div>

                            @include('admin.awkaf._cover_image')

                            <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']) !!}
                                    <span class="help"><span id="char_count_description">5000</span> الحروف المتبقية</span><br>
                                </div>
                                <div class="col-md-3  col-sm-12 text-left">
                                    <label style="font-weight: bold;">النص <span style="color:red"></span></label>
                                </div>
                            </div>

                            <div class="form-group row">
                                <div class="col-md-6 col-md-offset-3  col-sm-12">
                                    {!! Form::submit('حفظ', ['class' => 'btn btn-primary pull-right']) !!}    
                                </div>
                            </div>
                            <br>

                        {!! Form::close() !!}

                        @include('admin.awkaf._contacts')
                        @include('admin.awkaf._additional_images')

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

    <!-- delete modal popup -->
    <div id="cropInfoModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body info-modal">
                    <p class="message-content"></p>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-default" data-dismiss="modal">موافق</button>
               </div>
            </div>
        </div>
    </div>
    <!-- end crop info modal -->

@endsection

@section('page_script')
    <script type="text/javascript" language="javascript" class="init">

        $( "#form_awkaf" ).submit(function (event) {

            var cropPass = checkCropOk("3:2","w,h",$('#image1 .cropbox'));
            if(cropPass == true) {
                form = this;
                event.preventDefault();
                setTimeout(function () {
                    form.submit();
                }, 500);
                jQuery('#progressbar').show();
                return true;
            }else{
                $('.info-modal .message-content').text('مقاس صورة الغلاف يجب أن تتكون من أضعاف 3:2');
                $('#cropInfoModal').modal('show');
                return false;
            }
            return false;
        });

        // additional images form submission
        $("#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-ai').attr('disabled', 'disabled');
            event.preventDefault();
            setTimeout(function () {
                form.submit();
            }, 500);
            jQuery('#progressbar').show();

            return true;
        });

        // awkaf contacts form submission
        $("#form-awkaf-contacts, #form_edit_contacts, #form_editcaption").submit(function (event) {
            var pass = true;
            //some validations
            if (pass == false) {
                return false;
            }
            form = this;
            jQuery('.btn-submit-contact').attr('disabled', 'disabled');
            event.preventDefault();
            setTimeout(function () {
                form.submit();
            }, 500);
            jQuery('#progressbar').show();

            return true;
        });

        $(document).on('click', '#startCrop', function (e) {

            var image = $('#image1 .cropbox');
            AspectRatio = '3:2';
            maxWidth = MaxHeight = 4000;
            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);
        }

        jQuery(document).ready(function ($) {

            $('body').append($('#formModal'));
            $('body').append($('#fileSizeMessage'));
            $('body').append($('#formModalContact'));    

            updateFeatureCharLimitNum('title','char_count_title',60);
            $("#title").keyup(function (event) {
                updateFeatureCharLimitNum('title','char_count_title',60);
            });
            updateFeatureCharLimitNum('description','char_count_description',5000);
            $("#description").keyup(function (event) {
                updateFeatureCharLimitNum('description','char_count_description',5000);
            });

            $("#contact_title_input").keyup(function (event) {
                updateFeatureCharLimitNum('contact_title_input', 'char_contact_title', 100);
            });
            $("#contact_reference_name_input").keyup(function (event) {
                updateFeatureCharLimitNum('contact_reference_name_input', 'char_contact_reference_name', 40);
            });
            $("#contact_bank_name_input").keyup(function (event) {
                updateFeatureCharLimitNum('contact_bank_name_input', 'char_contact_bank_name', 40);
            });
            $("#contact_iban_input").keyup(function (event) {
                updateFeatureCharLimitNum('contact_iban_input', 'char_contact_iban', 29);
            });
            $("#contact_name_input").keyup(function (event) {
                updateFeatureCharLimitNum('contact_name_input', 'char_contact_name', 40);
            });
            $("#contact_phone_input").keyup(function (event) {
                updateFeatureCharLimitNum('contact_phone_input', 'char_contact_phone', 15);
            });

            updateFeatureCharLimitNum('contact_title_input', 'char_contact_title', 100);
            updateFeatureCharLimitNum('contact_reference_name_input', 'char_contact_reference_name', 40);
            updateFeatureCharLimitNum('contact_bank_name_input', 'char_contact_bank_name', 40);
            updateFeatureCharLimitNum('contact_iban_input', 'char_contact_iban', 29);
            updateFeatureCharLimitNum('contact_name_input', 'char_contact_name', 40);
            updateFeatureCharLimitNum('contact_phone_input', 'char_contact_phone', 15);

            $("#edit_contact_title_input").keyup(function (event) {
                updateFeatureCharLimitNum('edit_contact_title_input', 'char_edit_contact_title', 100);
            });
            $("#edit_contact_reference_name_input").keyup(function (event) {
                updateFeatureCharLimitNum('edit_contact_reference_name_input', 'char_edit_contact_reference_name', 40);
            });
            $("#edit_contact_bank_name_input").keyup(function (event) {
                updateFeatureCharLimitNum('edit_contact_bank_name_input', 'char_edit_contact_bank_name', 40);
            });
            $("#edit_contact_iban_input").keyup(function (event) {
                updateFeatureCharLimitNum('edit_contact_iban_input', 'char_edit_contact_iban', 29);
            });
            $("#edit_contact_name_input").keyup(function (event) {
                updateFeatureCharLimitNum('edit_contact_name_input', 'char_edit_contact_name', 40);
            });
            $("#edit_contact_phone_input").keyup(function (event) {
                updateFeatureCharLimitNum('edit_contact_phone_input', 'char_edit_contact_phone', 15);
            });

            // data tables configurations
            var table = $('#datatable-example2').DataTable({
            stateSave: true,
            processing: true,
            serverSide: true,
            language: { search: "",
                             searchPlaceholder: "بحث",
                             "zeroRecords": "لا يوجد محتوى",
                             processing: "<img src='{{url('/')}}/assets/img/Webp.net-resizeimage.gif' />" },
                ajax: {
                    "url": "{{ URL::to('admin/awkaf-additional-image/datatable') }}",
                    "type": "POST"
                },
                rowReorder: {
                  update: false
                },
                columns: [
                    {data: 'sequence', name: 'sequence'},
                    {data: 'check', name: 'check'},
                    {data: 'id', name: 'id'},
                    {data: 'image', name: 'image'},
                    {data: 'caption', name: 'caption'},
                    {data: 'size', name: 'size'},
                    {data: 'actions', name: 'actions'}
                ],
                "iDisplayLength": 50,
                "columnDefs": [
                    {
                        "targets": [2],
                        "visible": false,
                        "searchable": false
                    },
                    {
                        "targets": [0,1,2,4,5],
                        "searchable": false
                    },
                    { orderable: true, className: 'reorder', targets: 0 },
                    { orderable: false, targets: '_all' }
                   
                ]
            });

            table.on( 'row-reorder', function ( e, diff, edit ) {
                $('#datatable-example2.table tbody tr:odd').removeClass('alt-row');
                $('#datatable-example2.table tbody tr:even').removeClass().addClass('alt-row');
                var ids = [($('#datatable-example2.table tbody tr').size() - 1)];
                var idsIndex = 0;
                $('#datatable-example2.table tbody tr').each(function (i) {
                    rcheckbox = $(this).find(':checkbox');
                    if (rcheckbox.length > 0) {
                        ids[idsIndex] = rcheckbox.val();
                        idsIndex++;
                    }
                });
                rids = ids.join(',');
                var data = {};
                for ( var i=0, ien=diff.length ; i<ien ; i++ ) {
                    var rowData = table.row( diff[i].node ).data();
                    data[rowData.id] = {new: diff[i].newData, old: diff[i].oldData};
                }
                if(!$.isEmptyObject(data)){
                  $.post('{{URL::route("admin.worthy.reorder")}}',{ids: rids}, function(response){
                    table.ajax.reload();
                  });
                }
            });

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

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

            // data tables configurations (contacts)
            var table_contacts = $('#datatable-example').DataTable({
            stateSave: true,
            processing: true,
            serverSide: false,
            language: { search: "",
                             searchPlaceholder: "بحث",
                             "zeroRecords": "لا يوجد محتوى",
                             processing: "<img src='{{url('/')}}/assets/img/Webp.net-resizeimage.gif' />" },
                ajax: {
                    "url": "{{ URL::to('admin/awkaf-contacts/datatable?awkaf_id='.($awkaf ? $awkaf->id : 0)) }}",
                    "type": "POST"
                },
                rowReorder: {
                  update: false
                },
                columns: [
                    {data: 'sequence', name: 'sequence'},
                    {data: 'check', name: 'check'},
                    {data: 'id', name: 'id'},
                    {data: 'info', name: 'info'},
                    {data: 'actions', name: 'actions'}
                ],
                "iDisplayLength": 50,
                "columnDefs": [
                    {
                        "targets": [2],
                        "visible": false,
                        "searchable": false
                    },
                    {
                        "targets": [0,1,2,4],
                        "searchable": false
                    },
                    { orderable: true, className: 'reorder', targets: 0 },
                    { orderable: false, targets: '_all' }
                   
                ]
            });

            table_contacts.on( 'row-reorder', function ( e, diff, edit ) {
                $('#datatable-example.table tbody tr:odd').removeClass('alt-row');
                $('#datatable-example.table tbody tr:even').removeClass().addClass('alt-row');
                var ids = [($('#datatable-example.table tbody tr').size() - 1)];
                var idsIndex = 0;
                $('#datatable-example.table tbody tr').each(function (i) {
                    rcheckbox = $(this).find(':checkbox');
                    if (rcheckbox.length > 0) {
                        ids[idsIndex] = rcheckbox.val();
                        idsIndex++;
                    }
                });
                rids = ids.join(',');
                var data = {};
                for ( var i=0, ien=diff.length ; i<ien ; i++ ) {
                    var rowData = table.row( diff[i].node ).data();
                    data[rowData.id] = {new: diff[i].newData, old: diff[i].oldData};
                }
                if(!$.isEmptyObject(data)){
                  $.post('{{URL::route("admin.awkaf-contacts.reorder")}}',{ids: rids}, function(response){
                    table_contacts.ajax.reload();
                  });
                }
            });

            $('#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});

            // additional images related
            updateFeatureCharLimitNum('caption_input','char_caption',200);
            $("#caption_input").keyup(function (event) {
                updateFeatureCharLimitNum('caption_input','char_caption',200);
            });

            $("#edit_caption_input").keyup(function (event) {
                updateFeatureCharLimitNum('edit_caption_input','char_edit_caption',200);
            });

             // Clear selected images tag
            $('#add_picture_btn').click(function(e){
              $('.upload-multiple-images').val('');
              $('.selectedImagesCount').text('');
            });
        });
    
        function editImage(id, caption){
            $('#edit_caption_input').val(caption);
            $('#edit_image_id').val(id);
            updateFeatureCharLimitNum('edit_caption_input','char_edit_caption',200);
            $('#editCaptionModal').modal('show');
        }

        function editContact(id, title, reference_name, bank_name, iban, contact_name, contact_phone){
            $('#edit_contact_id').val(id);
            $('#edit_contact_title_input').val(title);
            $('#edit_contact_reference_name_input').val(reference_name);
            $('#edit_contact_bank_name_input').val(bank_name);
            $('#edit_contact_iban_input').val(iban);
            $('#edit_contact_name_input').val(contact_name);
            $('#edit_contact_phone_input').val(contact_phone);

            updateFeatureCharLimitNum('edit_contact_title_input', 'char_edit_contact_title', 100);
            updateFeatureCharLimitNum('edit_contact_reference_name_input', 'char_edit_contact_reference_name', 40);
            updateFeatureCharLimitNum('edit_contact_bank_name_input', 'char_edit_contact_bank_name', 40);
            updateFeatureCharLimitNum('edit_contact_iban_input', 'char_edit_contact_iban', 29);
            updateFeatureCharLimitNum('edit_contact_name_input', 'char_edit_contact_name', 40);
            updateFeatureCharLimitNum('edit_contact_phone_input', 'char_edit_contact_phone', 15);

            $('#editContactModal').modal('show');
        }

        function closeModal(id) {
            $(id).modal('hide');
        }
    </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