@extends('app')
@section('content')
    @php
        $request_type = request()->get('q') == 'Add' ? 'Add' : 'Edit';
    @endphp

    <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>
        .timepicker,
        .bootstrap-datetimepicker-widget {
            margin-left: -15px !important;
        }

        .bootstrap-datetimepicker-widget .btn {
            padding: 0;
        }

        .help-block label {
            display: inline;
        }

        .box p {
            font-size: 15px;
        }

        .summary-label {
            font-weight: bold;
        }
    </style>
    <style>
        body {
            overflow-y: scroll !important;
        }
    </style>

    <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="active"> <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="complete"> <a href="#tab4" class='tab4'
                                        data-toggle="tab"> <span class="step"><i class="fa fa-check"></i></span> <span
                                            class="title">المراجع </span> </a> </li>
                                <li data-target="#step3" class="complete"> <a href="#tab3" class='tab3'
                                        data-toggle="tab"> <span class="step"><i class="fa fa-check"></i></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 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>
                    <br>

                    <div class="box">
                        <div class="grid-title " style="margin-top: 13px;">
                            <h4><span class="bold" style="font-size: 20px;">المعلومات الأساسية</span></h4>
                        </div>
                        <div class="grid-body"> <br>
                            @if ($worthy->worthyPerson)
                                <div class="form-group row">
                                    <div class="col-md-9 col-md-offset-1 col-sm-12">
                                        <p>{!! $worthy->worthyPerson->full_name_w_i() !!}</p>
                                    </div>
                                    <div>
                                        <label class="col-md-1 col-xs-12 text-left summary-label">زو إسم الشخصية </label>
                                    </div>
                                </div>
                            @endif

                            <div class="form-group row">
                                <div class="input-with-icon  right col-md-10 col-sm-12">
                                    @php $return = $worthy ? $worthy->cover_image : false @endphp
                                    <div class="fileupload {{ $return != '' ? 'fileupload-exists' : 'fileupload-new' }}"
                                        data-provides="fileupload">
                                        @if ($return != '')
                                            <div class="fileupload-preview fileupload-exists thumbnail" id="image1"
                                                style="max-width: 220px; max-height: 220px; line-height: 20px;">
                                                <a data-gallery="" class="gallery-item"
                                                    href="{{ asset('uploads/worthy/' . $worthy->cover_image) }}"><img
                                                        src="{{ asset('uploads/worthy/' . $worthy->cover_image) }}"
                                                        style="max-height:220px; height: -webkit-fill-available;" /></a>
                                            </div>
                                        @else
                                            <div style="max-width: 220px; max-height: 220px;"
                                                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: 220px; max-height: 220px; line-height: 20px;">
                                            </div>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-md-2 col-sm-12 text-left">
                                    <label class="summary-label">صورة الغلاف</label>
                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="box">
                        <div class="grid-title " style="margin-top: 13px;">
                            <h4><span class="bold" style="font-size: 20px;">مضمون الخبر</span></h4>
                        </div>
                        <div class="grid-body"> <br>
                            @if ($worthy->contents->count() > 0)
                                @if (
                                    $worthy->contents->count() == 1 &&
                                        $worthy->contents[0]->description == '' &&
                                        $worthy->contents[0]->image1 == '' &&
                                        $worthy->contents[0]->image2 == '' &&
                                        $worthy->contents[0]->image3 == '')
                                    <div class="form-group row">
                                        <div class="input-with-icon  right col-md-10 col-sm-12">
                                            <p>..........</p>
                                        </div>
                                        <div class="col-md-2 col-sm-12 text-left">
                                            <label class="summary-label">Related Content</label>
                                        </div>
                                    </div>
                                @else
                                    @foreach ($worthy->contents as $key => $content)
                                        @if ($content->description != '' || $content->image1 != '' || $content->image2 != '' || $content->image3 != '')
                                            <div class="{{ count($worthy->contents) > 1 ? 'grid-body' : '' }}"
                                                style="margin-bottom: 10px">
                                                <div class="form-group row">
                                                    <div class="input-with-icon  right col-md-10 col-sm-12">
                                                        @if ($content->description == '')
                                                            <p>..........</p>
                                                        @else
                                                            <p>{!! str_replace(PHP_EOL, '<br>', $content->description) !!}</p>
                                                        @endif
                                                    </div>
                                                    <div class="col-md-2 col-sm-12 text-left">
                                                        <label class="summary-label">النص</label>
                                                    </div>
                                                </div>

                                                <div class="form-group row">
                                                    <div class="col-md-10 col-md-12 text-right">
                                                        @if ($content->image1 != '' || $content->image2 != '' || $content->image3 != '')
                                                            <a href="javascript:void(0);"
                                                                onclick="showImagesModal({{ $content }})">إطلاع
                                                                ({{ $content->getContentImagesCount() }})</a>
                                                        @else
                                                            <p>..........</p>
                                                        @endif
                                                    </div>
                                                    <div class="col-md-2 col-sm-12 text-left">
                                                        <label class="summary-label">الصور</label>
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                    @endforeach
                                @endif
                            @else
                                <div class="form-group row">
                                    <div class="input-with-icon  right col-md-10 col-sm-12">
                                        <p>..........</p>
                                    </div>
                                    <div class="col-md-2 col-sm-12 text-left">
                                        <label class="summary-label">Related Content</label>
                                    </div>
                                </div>

                            @endif

                        </div>
                    </div>

                    <div class="box">
                        <div class="grid-title " style="margin-top: 13px;">
                            <h4><span class="bold" style="font-size: 20px;">الصور الإضافية</span></h4>
                        </div>
                        <div class="grid-body"> <br>
                            <div class="form-group row">
                                <div class="input-with-icon  right col-md-10 col-sm-12">
                                    @if ($worthy->addtionalimages && $worthy->addtionalimages->count() > 0)
                                        <a href="javascript:void(0);" data-target="#imagesModal"
                                            data-toggle="modal">معاينة ({{ $worthy->addtionalimages->count() }})</a>
                                    @else
                                        <p>..........</p>
                                    @endif
                                </div>
                                <div class="col-md-2 col-sm-12 text-left">
                                    <label class="summary-label">الصور</label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="box">
                        <div class="grid-title " style="margin-top: 13px;">
                            <h4><span class="bold" style="font-size: 20px;">إعداد</span></h4>
                        </div>
                        <div class="grid-body"> <br>
                            <div class="form-group row">
                                <div class="input-with-icon  right col-md-10 col-sm-12">
                                    @if ($worthy->persons->count() > 0)
                                        @foreach ($worthy->persons()->orderBy('sequence', 'desc')->get() as $person)
                                            <p>{!! $person->person_obj->full_name_w_i() !!}</p>
                                        @endforeach
                                    @else
                                        <p>..........</p>
                                    @endif
                                </div>
                                <!--  <div class="col-md-2 col-sm-12 text-left">
                                         <label>الأشخاص</label>
                                     </div> -->
                            </div>

                        </div>
                    </div>

                    <div class="box">
                        <div class="grid-title " style="margin-top: 13px;">
                            <h4><span class="bold" style="font-size: 20px;">المراجع</span></h4>
                        </div>
                        <div class="grid-body"> <br>
                            <div class="form-group row">
                                <div class="input-with-icon  right col-md-10 col-sm-12">
                                    @if ($worthy->references->count() > 0)
                                        @foreach ($worthy->references()->orderBy('sequence', 'desc')->get() as $link)
                                            <p><label class="pull-left">{{ $link->reference }}</label></p></br>
                                        @endforeach
                                    @else
                                        <p>..........</p>
                                    @endif
                                </div>
                                <!-- <div class="col-md-2 col-sm-12 text-left">
                                        <label>مرجع</label>
                                    </div> -->
                            </div>
                        </div>
                    </div>

                    <div class="form-actions"
                        style="margin-left: -13px !important; margin-right: -13px !important; padding-bottom: 13px !important">

                        @if (request()->get('q') == 'Add')
                            <a href="javascript:void(0)" id="cancel_btn" class="btn btn-info btn-cons">إلغاء</a>
                        @else
                            <a href="{{ url('/admin/worthy/' . request()->get('type')) }}"
                                class="btn btn-info btn-cons">إلغاء</a>
                        @endif

                        <a href="{{ route('admin.worthy.summary', ['worthy' => $worthy->id, 'q' => $request_type, 'status' => 'publish']) }}"
                            class="btn btn-primary btn-cons pull-right publish_now_bnt">نشر الآن</a>
                        <a href="{{ route('admin.worthy.summary', ['worthy' => $worthy->id, 'q' => $request_type, 'status' => 'draft']) }}"
                            class="btn btn-primary btn-cons pull-right publish_now_bnt">إرسال إلى المسودة</a>
                        <a href="{{ route('admin.worthy.addreference', ['worthy' => $worthy->id, 'q' => $request_type]) }}"
                            class="btn btn-info btn-cons pull-right">الى الخلف</a>
                    </div>

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

    <!-- Images Modal -->
    <div id="imagesModal" class="modal fade" aria-labelledby="imagesModal">
        <div class="modal-dialog">
            <div class="modal-content" role="document">
                <div class="modal-header">
                    <label style="font-size: 16px;color: grey;"></label>
                </div>
                <div class="modal-body">
                    @foreach ($worthy->addtionalimages()->orderBy('sequence', 'desc')->get() as $image)
                        <a class="gallery-item " data-gallery="request_gallery_imagesModal"
                            href="{{ asset('uploads/worthy/' . $image->image) }}"><img
                                src="{{ asset('uploads/worthy/' . $image->image) }}"
                                class="listing-icon m-b-10 m-r-10" /></a>
                    @endforeach
                </div>

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

    <!-- Show Images Modal -->
    <div id="showImagesModal" class="modal fade" aria-labelledby="showImagesModal">
        <div class="modal-dialog">
            <div class="modal-content" role="document">
                <div class="modal-header">
                    <label style="font-size: 16px;color: grey;"></label>
                </div>
                <div class="modal-body">
                    <div id="content_images"></div>
                </div>

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

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

    <!-- 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()->get('type') }}" />
    </form>

@endsection

@section('page_script')
    <script type="text/javascript" language="javascript" class="init">
        function showImagesModal(data) {
            var image1 = data.image1 == '' ? '' : "{{ asset('uploads/worthy/') }}/" + data.image1;
            var image2 = data.image2 == '' ? '' : "{{ asset('uploads/worthy/') }}/" + data.image2;
            var image3 = data.image3 == '' ? '' : "{{ asset('uploads/worthy/') }}/" + data.image3;
            var image1_data_gallery = image1 == '' ? '' : 'request_gallery_' + data.id;
            var image2_data_gallery = image2 == '' ? '' : 'request_gallery_' + data.id;
            var image3_data_gallery = image3 == '' ? '' : 'request_gallery_' + data.id;

            $("#showImagesModal").modal();
            $("#content_images").html(`
    <a  class="gallery-item " data-gallery="` + image1_data_gallery + `" href="` + image1 + `"><img src="` + image1 + `" class="listing-icon m-b-10 m-r-10" /></a>
            <a  class="gallery-item " data-gallery="` + image2_data_gallery + `" href="` + image2 + `"><img src="` +
                image2 + `" class="listing-icon m-b-10 m-r-10" /></a>
            <a  class="gallery-item " data-gallery="` + image3_data_gallery + `" href="` + image3 + `"><img src="` +
                image3 + `" class="listing-icon m-b-10 m-r-10" /></a>`
            );
        }

        function addRelatedPerson(family_tree_id, alive) {
            if (alive == 'No') {
                var ret = confirm('Are you sure you want to add a dead person?');
                if (!ret) {
                    return ret;
                }
            }
            $('#related_family_tree_id_field').val(family_tree_id);
            $('#progressbar').show();
            $('#add_related_form').trigger('submit');
        }

        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;
        });

        jQuery('#publish_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() {

            $('#save_news').click(function(e) {
                $('#save_now').val('true');
                $('#progressbar').show();
                $('#form_news').trigger('submit');
            });

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

            /*Open Modal Functionality*/
            $('.open-model-btn').click(function() {
                $('#progressbar').show();
                $('#selectNodeModal').modal('show');
                $('#progressbar').hide();
            });

            $("#filter").keyup(function() {
                // Retrieve the input field text and reset the count to zero
                var filter = $(this).val(),
                    count = 0;

                // Loop through the comment list
                $("nav ul li").each(function() {
                    // If the list item does not contain the text phrase fade it out
                    if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                        $(this).fadeOut();
                        // Show the list item if the phrase matches and increase the count by 1
                    } else {
                        $(this).show();
                        count++;
                    }
                });

                // Update the count
                var numberItems = count;
                $("#filter-count").text("Number of Records = " + count);
            });

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

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

            // --------------------------------------------
            $('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() {
                var ret = confirm("Are you sure you want to delete?");

                if (ret) {
                    $("#progressbar").show();
                    return true;
                }
                return false;
            });

            // ---------------------------- datatables (2) -----------------------
            $('#datatable-example2').DataTable({
                processing: true,
                serverSide: false,
                ordering: false,
                language: {
                    search: "",
                    searchPlaceholder: "بحث",
                    "zeroRecords": "لا يوجد محتوى",
                    processing: "<img src='{{ url('/') }}/assets/img/Webp.net-resizeimage.gif' />"
                },
                "order": [
                    [1, "desc"]
                ],
                ajax: {
                    "url": "{{ url('admin/news-related-person/' . $worthy->id . '/relatedpersonsdatatable') }}",
                    "type": "POST",
                    "headers": {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                },
                columns: [{
                        data: 'check',
                        name: 'check'
                    },
                    {
                        data: 'nodeID',
                        name: 'nodeID'
                    },
                    {
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'actions',
                        name: 'actions'
                    }
                ],
                "iDisplayLength": 50,
                "columnDefs": [{
                        "targets": [0, 3],
                        "searchable": false
                    },
                    {
                        "targets": [0, 3],
                        "searchable": false
                    },
                    {
                        "targets": [0, 1, 2, 3],
                        "orderable": false
                    }
                ]
            });

            $('#datatable-example2_wrapper .dataTables_filter input').addClass("input-medium ");
            $('#datatable-example2_wrapper .dataTables_length select').addClass("select2-wrapper span12");
            $('#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
            });

            $('#add_contents').click(function(e) {
                jQuery('#progressbar').show();
                $.get('{{ url('admin/news/getContentsForm') }}', function(response) {
                    $('#add_content_fields').append(response);
                    jQuery('#progressbar').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