@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 action="{{ route('awkaf.update', $awkaf->id) }}" method="POST" id="form_awkaf"
                            enctype="multipart/form-data">

                            @csrf
                            @method('PATCH')

                            <br>

                            <div class="form-group row">
                                <div class="input-with-icon right col-md-6 col-md-offset-3 col-sm-12">
                                    <input type="text" name="title" id="title" class="form-control" required
                                        value="{{ old('title', $awkaf->title) }}">
                                    <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">
                                    <textarea name="description" id="description" class="form-control">{{ old('description', $awkaf->description) }}</textarea>

                                    <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">
                                    <button type="submit" class="btn btn-primary pull-right">حفظ</button>
                                </div>
                            </div>

                            <br>
                        </form>

                        @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