@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