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

    @if(session('flash_message'))
        <div class="alert {{ session('flash_message_status') ? 'alert-error' : 'alert-success' }}">
            <button class="close" data-dismiss="alert"></button>
            {!! session('flash_message') !!}
        </div>
    @endif

    <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>
                    <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="active">
                                    <a href="#tab3" class='tab3' data-toggle="tab">
                                        <span class="step">4</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>

                    {{-- Show save btn if request is in edit --}}
                    <div class="row form-actions" style="background: none;">
                        <div class="col-sm-12">
                            @if($request_type == 'Edit')
                                <a href="{{ route('worthy.index', ['save_now' => 'true']) }}" class="btn btn-primary btn-cons" id="save_news">حفظ</a>
                            @endif
                            <a href="{{ route('admin.worthy.addreference', ['worthy' => $worthy->id, 'q' => $request_type]) }}" class="btn btn-info btn-cons pull-right">التالى</a>
                            <a href="{{ route('admin.worthy.addimages', ['worthy' => $worthy->id, 'q' => $request_type]) }}" class="btn btn-info btn-cons pull-right">الى الخلف</a>
                        </div>
                    </div>

                    <div class="padding-20">
                        <h3 class="text-center">إعداد</h3>
                    </div>

                    <div class="form-group row">
                        <div class="col-md-10 col-md-offset-1">
                            <div class="controls">
                                <button type="button" class="btn btn-success btn-lg open-model-btn {{ $worthy->persons()->count() >= 20 ? 'disabled' : '' }}">
                                    <i class="fa fa-plus"></i> إضافة
                                </button>
                                <div class="pull-right markaction">
                                    <a id="del" href="javascript:void(0)" class="btn btn-danger" data-url="{{ url('admin/worthy/bulkdeleterelated') }}">حذف</a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="col-md-10 col-md-offset-1">
                            <table class="table table-hover table-bordered" id="datatable-example" data-reorderUrl="">
                                <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-example .checkboxes" /></th>
                                    <th width="5%">هوية شخصية</th>
                                    <th width="20%">الإسم</th>
                                    <th width="5%"></th>
                                </tr>
                                </thead>
                            </table>
                        </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

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

    {{-- Select related person modal --}}
    <div id="selectNodeModal" class="modal fade">
        <div class="modal-dialog" style="width: 400px !important;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="submit" class="close pull-right" data-dismiss="modal" onclick="$('#filter').val('');$('#filter').trigger('keyup');">x</button>
                    <img src="{{ asset('assets/img/icon/Daleelicon.png') }}" width="35" height="35" style="margin-right: 11px;">
                    <label style="font-size: 16px;color: grey;">الدليل</label>
                    <div class="input-group form-group">
                        <span class="input-group-addon" onclick="$('#filter').val('');$('#filter').trigger('keyup');"><i class="fa fa-times"></i></span>
                        <input type="text" class="text-input" id="filter" placeholder="بحث" style="direction: rtl;width: 100%;" />
                    </div>
                </div>
                <div class="modal-body" id="select_child_content" style="max-height: calc(80vh - 160px);overflow-y: auto;background-color: white;padding:0px;">
                    <table border="0" width="100%" style="direction: rtl;">
                        <tbody>
                        @php
                            $family_member_ids = $worthy->persons()->pluck('family_member_id')->toArray();
                        @endphp

                        <nav style="direction: rtl;">
                            <ul style="direction: rtl; padding-left: 8px; padding-right:10px;">
                                @foreach($family_people as $person)
                                    <li style="direction: rtl; list-style: none;">
                                        <div class="row" style="direction: rtl;border-bottom: 1px solid #ccc;padding-top: 5px; margin-left: 5px;margin-right:10px !important;">
                                            <div style="direction: rtl;float: right;width:19%;">
                                            <span onclick="showDaleelProfilePopup({{ $person->id }})">
                                                @if($person->profile_picture != "")
                                                    <span class="node-image-round-box square-box" style="background-size: cover; background-image: url({{ $person->profile_picture }})"/></span>
                                                @else
                                                    <span class="node-image-round-box square-box {{ $person->gender == '0' ? 'male' : 'female' }}"></span>
                                                    @endif
                                                    </span>
                                                    <label style="font-size: 12px;margin-right:7px;">
                                                        <span class="nodeid-text {{ $person->is_active() ? 'active-color' : '' }}" onclick="showDaleelProfilePopup('{{ $person->id }}')">{{ $person->nodeID }}</span>
                                                    </label>
                                            </div>
                                            <div style="width:70%;float: right;text-align: right;">
                                                <label class="name-label" style="margin-top: 20px;font-size:17px;">
                                                    {!! $person->full_name2() !!}
                                                </label>
                                            </div>
                                            <div style="float: left;">
                                                <a href="javascript:void(0)" onclick="addRelatedPerson({{ $person->id }},'{{ $person->alive }}')" class="btn btn-primary btn-small {{ in_array($person->id, $family_member_ids) ? 'disabled' : '' }}">
                                                    <i class="fa fa-plus"></i>
                                                </a>
                                            </div>
                                        </div>
                                    </li>
                                @endforeach
                            </ul>
                        </nav>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- Confirmation Modal --}}
    <div id="addRelatedModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body info-modal">
                    <p class="message-content">@lang('common.popups.dead_confirmation')</p>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-default" data-dismiss="modal">لا</button>
                    <button type="submit" class="btn btn-primary confirm-add-related" data-dismiss="modal">نعم</button>
                </div>
            </div>
        </div>
    </div>

    {{-- Add related form --}}
    <form method="POST" action="{{ route('admin.worthy.addrelated', ['worthy' => $worthy->id, 'q' => $request_type]) }}" enctype="multipart/form-data" id="add_related_form">
        @csrf
        @method('PUT')
        <input type="hidden" name="worthy_id" value="{{ $worthy->id }}">
        <input type="hidden" name="family_member_id[]" id="related_family_tree_id_field" value="">
    </form>

    {{-- Bulk delete 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('type') }}"/>
    </form>

@endsection

@section('page_script')
    <script type="text/javascript" language="javascript" class="init">
        function addRelatedPerson(family_member_id, alive) {
            $('.confirm-add-related').data('id', family_member_id);
            if (alive == '0') {
                $('#addRelatedModal').modal('show');
            } else {
                submitAddForm(family_member_id);
            }
        }

        function submitAddForm(family_member_id) {
            $('#related_family_tree_id_field').val(family_member_id);
            $('#selectNodeModal').modal('hide');
            $('#progressbar').show();
            $('#add_related_form').trigger('submit');
        }

        $(document).ready(function(){
            // on confirmation of dead person addition submit form
            $(document).on('click', '.confirm-add-related', function(e){
                var id = $(this).data('id');
                submitAddForm(id);
            });

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

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

            $('#filter').val('');
            $("#filter").keyup(function(){
                // Retrieve the input field text and reset the count to zero
                var filter = $(this).val().replace(/ +(?= )/g,'').trim().split(" ").reverse(), count = 0;
                var name = filter.pop();
                var fathers = filter.reverse().join(' ').trim();

                // Loop through the list for first name
                $("nav ul li").each(function(){
                    // If the list item does not contain the text phrase fade it out
                    if ($(this).find('label.name-label span:first').text().indexOf(name) === 0 || $(this).find('label .nodeid-text').text().indexOf(name) === 0) {
                        $(this).show();
                        $(this).addClass('filtered');
                        count++;
                        // Show the list item if the phrase matches and increase the count by 1
                    } else {
                        $(this).removeClass('filtered');
                        $(this).fadeOut();
                    }
                });

                if (fathers.length) {
                    count = 0;
                    $("nav ul li.filtered").each(function(){
                        if ($(this).find('label span.fathers:first').text().trim().indexOf(fathers) != 0) {
                            $(this).removeClass('filtered');
                            $(this).fadeOut();
                        } else {
                            $(this).show();
                            $(this).addClass('filtered');
                            count++;
                        }
                    });
                }

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

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

            // Columns and column defs to be used in both tables
            var columns = [
                {data: 'sequence', name: 'sequence'},
                {data: 'check', name: 'check'},
                {data: 'nodeID', name: 'nodeID'},
                {data: 'name', name: 'name'},
                {data: 'actions', name: 'actions'}
            ];

            var columnDefs = [
                {
                    "targets": [0,4],
                    "searchable": false
                },
                { orderable: true, className: 'reorder', targets: 0 },
                { orderable: false, targets: '_all' }
            ];

            var table = $('#datatable-example').DataTable({
                processing: true,
                serverSide: false,
                ordering: false,
                rowReorder: {
                    update: false
                },
                language: {
                    search: "",
                    searchPlaceholder: "بحث",
                    "zeroRecords": "لا يوجد محتوى",
                    processing: "<img src='{{ url('/') }}/assets/img/Webp.net-resizeimage.gif' />"
                },
                ajax: {
                    "url": "{{ url('admin/worthy/' . $worthy->id . '/relatedpersonsdatatable') }}",
                    "type": "POST"
                },
                columns: columns,
                "iDisplayLength": 50,
                "columnDefs": columnDefs
            });

            table.on('row-reorder', function (e, diff, edit) {
                $('table tbody tr:odd').removeClass('alt-row');
                $('table tbody tr:even').removeClass().addClass('alt-row');
                var ids = [($('table tbody tr').size() - 1)];
                var idsIndex = 0;
                $('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('{{ route("admin.worthy.reorder_related") }}', {ids: rids}, function(response){
                        table.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});
        });
    </script>
@endsection