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

    @php
        $request_type = request('q') == 'Add' ? 'Add' : 'Edit';
    @endphp

    <style type="text/css">
        ul .quick-section {
            position: inherit !important;
        }

        body {
            overflow-y: scroll !important;
        }

        .dt-rowReorder-moving {
            transition: none !important;
        }
    </style>

    <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 c-page-title">
                    <span>شخصيات</span>
                </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

                    <div class="row">
                        <div class="col-md-12 m-b-60">
                            <ul class="wizard-steps worthy narrow">
                                <li data-target="#step5" class="">
                                    <a href="#tab5" class='tab5 last' data-toggle="tab">
                                        <span class="step">6</span>
                                        <span class="title">ملخص الخبر</span>
                                    </a>
                                </li>
                                <li data-target="#step4" class="">
                                    <a href="#tab4" class='tab4' data-toggle="tab">
                                        <span class="step">5</span>
                                        <span class="title">المراجع</span>
                                    </a>
                                </li>
                                <li data-target="#step3" class="">
                                    <a href="#tab3" class='tab3' data-toggle="tab">
                                        <span class="step">4</span>
                                        <span class="title">إعداد</span>
                                    </a>
                                </li>
                                <li data-target="#step2" class="active">
                                    <a href="#tab2" class='tab2' data-toggle="tab">
                                        <span class="step">3</span>
                                        <span class="title">الصور الإضافية</span>
                                    </a>
                                </li>
                                <li data-target="#step2" class="complete">
                                    <a href="#tab2" class='tab2' data-toggle="tab">
                                        <span class="step"><i class="fa fa-check"></i></span>
                                        <span class="title">مضمون الخبر</span>
                                    </a>
                                </li>
                                <li class="complete" data-target="#step1">
                                    <a href="#tab1" class='tab1' data-toggle="tab">
                                        <span class="step"><i class="fa fa-check"></i></span>
                                        <span class="title">المعلومات الأساسية</span>
                                    </a>
                                </li>
                            </ul>
                            <div class="clearfix"></div>
                        </div>
                    </div>

                    <div class="form-actions"
                        style="margin-left: -13px !important; margin-right: -13px !important; padding-bottom: 13px !important; background: none;">
                        <div class="pull-left">
                            @if ($request_type == 'Edit')
                                <a href="{{ route('worthy.index', ['save_now' => 'true']) }}"
                                    class="btn btn-primary btn-cons" id="save_news">حفظ</a>
                            @endif
                        </div>
                        <div class="pull-right">
                            <a href="{{ route('admin.worthy.addrelated', ['worthy' => $worthy->id, 'q' => $request_type]) }}"
                                class="btn btn-info btn-cons pull-right">التالى</a>
                            <a href="{{ route('admin.worthy.editContent', ['id' => $worthy->id, 'q' => $request_type]) }}"
                                class="btn btn-info btn-cons pull-right">الى الخلف</a>
                        </div>
                    </div>
                    <br><br>

                    {{-- Main Form --}}
                    <form method="POST"
                        action="{{ $worthy ? route('admin.worthy.summary', ['worthy' => $worthy->id, 'type' => request('type'), 'q' => $request_type]) : route('admin.news.summary') }}"
                        id="form_news" enctype="multipart/form-data">
                        @csrf
                        @if ($worthy)
                            @method('PATCH')
                        @endif

                        <input type="hidden" name="save_now" id="save_now" value="false" />
                        <input type="hidden" name="request_type" id="request_type" value="{{ $request_type }}" />
                    </form>

                    <div class="box">
                        <div class="form-group row">
                            <div class="col-md-10 col-md-offset-1">
                                <div class="padding-20">
                                    <h3 class="text-center semi-bold">الصور الإضافية</h3>
                                </div>
                                <div class="pull-right markaction">
                                    <a id="del2" href="javascript:void(0)" class="btn btn-danger"
                                        data-url="{{ url('admin/worthy/bulkimagedelete') }}">حذف</a>
                                </div>
                                <div class="pull-left markaction">
                                    <a href="#" data-toggle="modal" data-target="#formModal"
                                        class="btn btn-primary" id="add_picture_btn">إضافة الصور</a>
                                </div>
                            </div>
                        </div>

                        <div class="form-group row">
                            <div class="col-md-10 col-md-offset-1">
                                <table class="table image-table table-hover table-bordered" id="datatable-example2">
                                    <thead>
                                        <tr>
                                            <th width="5%" class="disabled"><i class="fa fa-arrows"></i></th>
                                            <th width="5%"><input type="checkbox" class="group-checkable"
                                                    data-set="#datatable-example2 .checkboxes" /></th>
                                            <th width="1%">Id</th>
                                            <th width="20%">الصورة</th>
                                            <th width="30%">النص المرافق</th>
                                            <th width="10%">الحجم</th>
                                            <th width="15%"></th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div class="form-actions"
                        style="margin-left: -13px !important; margin-right: -13px !important; padding-bottom: 13px !important">
                        @if (request('q') == 'Add')
                            <a href="javascript:void(0)" id="cancel_btn" class="btn btn-info btn-cons">إلغاء</a>
                        @else
                            <a href="{{ url('/admin/worthy/' . request('type')) }}"
                                class="btn btn-info btn-cons">إلغاء</a>
                        @endif

                        <div class="pull-right">
                            <a href="{{ route('admin.worthy.addrelated', ['worthy' => $worthy->id, 'q' => $request_type]) }}"
                                class="btn btn-info btn-cons pull-right">التالى</a>
                        </div>
                        <a href="{{ route('admin.worthy.editContent', ['id' => $worthy->id, 'q' => $request_type]) }}"
                            class="btn btn-info btn-cons pull-right">الى الخلف</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Add Images Modal --}}
    <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 method="POST" action="{{ route('admin.worthy.uploadimage', ['source' => 'create']) }}"
                    id="addnewsimages_form" novalidate="novalidate" enctype="multipart/form-data">
                    @csrf

                    <input type="hidden" name="imageable_id" value="{{ $worthy ? $worthy->id : 0 }}">
                    <input type="hidden" name="worthy_id" value="{{ $worthy->id }}">

                    <div class="modal-body">
                        <div class="form-group row">
                            <div class="input-with-icon left col-md-10 col-sm-12">
                                <span class="btn btn-file">
                                    <span>إبحث</span>
                                    <input type="file" name="images[]" class="upload-multiple-images"
                                        multiple="multiple" accept="image/*">
                                </span>

                                <a href="javascript:void(0);" data-toggle="modal"
                                    data-target="#showMultipleUploadImagesModal">
                                    <span class="selectedImagesCount badge badge-info" style="font-size: small;"></span>
                                </a>

                                <br><br>
                                <code>الحجم الأقصى المسموح به:</code> 1MB<br><br>
                                <span class="help-right" style="margin-right: 1px;">سيتم تقليص أبعاد الصور بنسبة
                                    ٥٠٪</span>
                            </div>
                            <div class="col-md-2 col-sm-12 text-left">
                                <label class="control-label">صورة</label>
                            </div>
                        </div>

                        <div class="form-group row">
                            <div class="input-with-icon left col-md-10 col-sm-12">
                                <textarea name="caption" class="form-control" id="caption_input"></textarea>
                                <span class="help">
                                    <span id="char_caption">200</span> الحروف المتبقية
                                </span><br>
                                <span class="help">النص المرافق يظهر تحت الصورة (الصور) داخل التطبيق</span>
                            </div>
                            <div class="col-md-2 col-sm-12 text-left">
                                <label class="control-label">النص المرافق</label>
                            </div>
                        </div>

                        <div class="form-group row">
                            <div class="input-with-icon left col-md-4 col-md-offset-6 col-sm-12">
                                <span style="display: none;">
                                    <select name="compress" class="form-control selectbox" id="compress_input"
                                        style="width: 100%">
                                        <option value="75">75%</option>
                                        <option value="50" selected>50%</option>
                                        <option value="25">25%</option>
                                        <option value="0">0%</option>
                                    </select>
                                </span>
                            </div>
                            <div class="col-md-2 col-sm-12 text-left">
                                {{-- <label class="form-label">ضغط</label> --}}
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">إلغاء</button>
                        <button type="submit" class="btn btn-primary btn-cons" id="btn-submit">حفظ</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Bulk Action Form --}}
    <form method="POST" class="inline" id="bulkaction">
        @csrf
        <input type="hidden" value="" name="ids" id="ids" />
    </form>

    {{-- Edit Caption Modal --}}
    <div class="modal fade" id="editCaptionModal" tabindex="-1" role="dialog"
        aria-labelledby="editCaptionModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form method="POST" action="{{ route('admin.worthy.editcaption') }}" id="form_editcaption">
                    @csrf

                    <div class="modal-header">
                        <h4 class="modal-title" id="editCaptionModalLabel">النص المرافق</h4>
                    </div>

                    <div class="modal-body">
                        <input type="hidden" name="news_image_id" id="edit_image_id" value="">
                        <div class="form-group row">
                            <div class="input-with-icon left col-md-10 col-sm-12">
                                <textarea name="caption" id="edit_caption_input" class="form-control"></textarea>
                                <span class="help">
                                    <span id="char_edit_caption">200</span> الحروف المتبقية
                                </span>
                            </div>
                            <div class="col-md-2 col-sm-12 text-left">
                                <label class="control-label">شرح</label>
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" onclick='closeModal("#editCaptionModal")'
                            aria-label="Close">
                            <span aria-hidden="true">إلغاء</span>
                        </button>
                        <button type="submit" class="btn btn-primary">حفظ</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Show Multiple Upload Images Modal --}}
    <div id="showMultipleUploadImagesModal" class="modal" aria-labelledby="showMultipleUploadImagesModal"
        style="z-index: 10000">
        <div class="modal-dialog">
            <div class="modal-content" role="document">
                <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>

                <div class="modal-body">
                    <div id="upload-multiple-images-preview"></div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">إلغاء</button>
                </div>
            </div>
        </div>
    </div>

    {{-- Cancel Form --}}
    <form method="POST" action="{{ route('worthy.destroy', ['worthy' => $worthy->id]) }}" class="inline"
        id="cancel_form">
        @csrf
        @method('DELETE')
        <input type="hidden" name="message" value="true" />
        <input type="hidden" name="type" value="{{ request('type') }}" />
    </form>

@endsection

{{-- Scripts section --}}
@section('page_script')
    <script type="text/javascript" language="javascript" class="init">
        $('.selectbox').select2({
            dir: "rtl"
        });

        jQuery('#form_news').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;
        });

        $(document).ready(function() {
            // on saving redirect to index
            $('#save_news').click(function(e) {
                $('#progressbar').show();
            });

            $('#cancel_btn').click(function(e) {
                $('#progressbar').show();
                $('#cancel_form').trigger('submit');
            });

            // --------------------------------------------
            $('body').append($('#formModal'));
            $('body').append($('#fileSizeMessage'));

            jQuery('#addnewsimages_form').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;
            });

            var table = $('#datatable-example2').DataTable({
                stateSave: false,
                processing: true,
                serverSide: false,
                language: {
                    search: "",
                    searchPlaceholder: "بحث",
                    "zeroRecords": "لا يوجد محتوى",
                    processing: "<img src='{{ url('/') }}/assets/img/Webp.net-resizeimage.gif' />"
                },
                ajax: {
                    "url": "{{ url('admin/worthy/imagesdatatable?imageable_id=' . ($worthy ? $worthy->id : 0)) }}",
                    "type": "POST"
                },
                rowReorder: {
                    dataSrc: 'sequence',
                    selector: 'td.reorder', // make sure only the drag handle works
                    snapX: true, // optional: keep row aligned horizontally
                },
                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, 5, 6],
                        "searchable": false
                    },
                    {
                        orderable: true,
                        className: 'reorder',
                        targets: 0
                    },
                    {
                        orderable: false,
                        targets: '_all'
                    }
                ]
            });


            table.on('row-reorder', function(e, diff, edit) {
                if (!diff || diff.length === 0) return;

                // rebuild row order
                var ids = [];
                $('#datatable-example tbody tr').each(function() {
                    var rcheckbox = $(this).find(':checkbox');
                    if (rcheckbox.length > 0) ids.push(rcheckbox.val());
                });

                // send updated order to server
                var data = {};
                diff.forEach(function(d) {
                    var rowData = table.row(d.node).data();
                    data[rowData.id] = {
                        old: d.oldData,
                        new: d.newData
                    };
                });

                if (!$.isEmptyObject(data)) {
                    $.post('{{ route('admin.worthy.reorder') }}', {
                        ids: ids.join(','),
                        orders: data
                    }, function(response) {

                        // ✅ Correct way to re-render / refresh listing from server
                        table.ajax.reload(null, false);

                    });
                }

            });
            $('#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');
            });
            $(".select2-wrapper").select2({
                minimumResultsForSearch: -1
            });

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

            updateFeatureCharLimitNum('edit_caption_input', 'char_edit_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('');
            });
        });

        $(document).on('click', '#startCrop2', function(e) {
            var image = $('#image2 .cropbox');
            AspectRatio = '220:138';
            maxWidth = MaxHeight = 10000;

            var originalWidth = image[0].naturalWidth;
            var originalHeight = image[0].naturalHeight;
            $('#image2 .cropbox').imgAreaSelect({
                handles: true,
                fadeSpeed: 200,
                onSelectChange: updateCoords2,
                imageHeight: originalHeight,
                imageWidth: originalWidth,
                aspectRatio: AspectRatio,
                maxHeight: MaxHeight,
                maxWidth: maxWidth,
            });
            $("#image2-dim").html('width: 0, height: 0');
            $("#image2-dim").show();
        });

        function updateCoords2(img, selection) {
            if (!selection.width || !selection.height)
                return;
            $('#x2').val(selection.x1);
            $('#y2').val(selection.y1);
            $('#w2').val(selection.width);
            $('#h2').val(selection.height);
            $("#image2-dim").html('width: ' + selection.width + ', height: ' + selection.height);
        }

        $(document).on('click', '.edit-album-image', function() {
            var id = $(this).data('id');
            var caption = $(this).data('caption');
            var maxChars = 200;

            $('#edit_image_id').val(id);
            $('#char_edit_caption').text(maxChars - caption.length);
            $('#edit_caption_input').val(caption); // preserves newlines
            $('#editCaptionModal').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