@extends('app')

@section('content')
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/plugins/blueimp/blueimp-gallery.min.css') }}">
    <link href="{{ asset('assets/css/bootstrap-fileupload.css') }}" rel="stylesheet" />
    <link href="{{ asset('assets/css/imgareaselect-default.css') }}" rel="stylesheet" />
    <link href="{{ asset('assets/cpanel/css/image_upload.css')}}" rel="stylesheet" type="text/css" media="screen"/>
    <style>
        body {
            overflow-y: scroll !important;
        }
    </style>

    @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

    @if($errors->any())
        <div class="row">
            <div class="alert alert-error col-md-6 col-sm-12 col-md-offset-3">
                <button data-dismiss="alert" class="close"></button>
                @foreach($errors->all() as $error)
                    <p>{{ $error }}</p>
                @endforeach
            </div>
        </div>
    @endif

    <div class="row">
        <div class="col-md-12">
            <div class="grid simple">
                <div class="grid-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="">
                                    <a href="#tab3" class='tab3' data-toggle="tab">
                                        <span class="step">4</span>
                                        <span class="title">إعداد</span>
                                    </a>
                                </li>
                                <li data-target="#step2" class="">
                                    <a href="#tab2" class='tab2' data-toggle="tab">
                                        <span class="step">3</span>
                                        <span class="title">الصور الإضافية</span>
                                    </a>
                                </li>
                                <li data-target="#step2" class="">
                                    <a href="#tab2" class='tab2' data-toggle="tab">
                                        <span class="step">2</span>
                                        <span class="title">مضمون الخبر</span>
                                    </a>
                                </li>
                                <li class="active" data-target="#step1">
                                    <a href="#tab1" class='tab1' data-toggle="tab">
                                        <span class="step">1</span>
                                        <span class="title">المعلومات الأساسية</span>
                                    </a>
                                </li>
                            </ul>
                            <div class="clearfix"></div>
                        </div>
                    </div>

                    <form method="POST" action="{{ route('admin.worthy.addworthy', ['worthy' => $worthy->id, 'q' => $request_type]) }}" id="basicinfo_form" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')

                        <!-- Show save btn if request is in edit -->
                        <div class="row m-b-20" style="background: none;">
                            <div class="col-sm-12">
                                @if($request_type == 'Edit')
                                    <a href="javascript:void(0)" class="btn btn-primary btn-cons" id="save_news">حفظ</a>
                                @endif
                                <input type="submit" value="التالى" class="btn btn-info btn-cons pull-right" id="btn-submit">
                            </div>
                        </div>

                        <input type="hidden" name="save_now" id="save_now" value="false"/>

                        @if(isset($worthy->family_member_id) && $worthy->family_member_id != '' && $worthy->family_member_id != 0)
                            <input type="hidden" name="family_member_id" class="family_member_id" value="{{ $worthy->family_member_id }}">
                        @else
                            <input type="hidden" name="family_member_id" class="family_member_id" value="">
                        @endif

                        <div class="form-group row">
                            <div class="input-with-icon right col-md-6 col-md-offset-3 col-sm-12">
                                <div style="background-color:#e5e9ec;height:30px;width:487px;">
                                    <label class="node-name" style="padding:5px;text-align: right;">
                                        {!! $worthy->worthyPerson ? $worthy->worthyPerson->full_name_w_i() : '' !!}
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-2 col-sm-12 text-left">
                                <label class="form-label" style="font-weight: bold;">إسم الشخصية</label>
                            </div>
                        </div>

                        <div class="" id="family_node_box"></div>

                        <div class="form-group row">
                            <div class="input-with-icon right col-md-6 col-md-offset-3 col-sm-12">
                                <button type="button" class="btn btn-primary btn-lg open-model-btn btn-cons">إختيار الشخصية</button>
                                <button id="node-name-hide" type="button" class="btn btn-warning btn-lg btn-cons">مسح</button>
                            </div>
                            <div class="col-md-2"></div>
                        </div>

                        <!-- Cover Image -->
                        @php
                            $return = $worthy ? $worthy->cover_image : false;
                        @endphp

                        <div class="form-group row">
                            <div class="col-md-6 col-md-offset-3 col-sm-12 controls">
                                <div class="fileupload {{ $return != '' ? 'fileupload-exists' : 'fileupload-new' }}" data-provides="fileupload">

                                    @if($return != '')
                                        <div style="max-width: 400px; max-height: 400px;" 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;">
                                            <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: 400px; max-height: 400px;" 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: 250px; max-height: 250px; line-height: 20px;">
                                        </div>
                                    @endif

                                    <div>
                                    <span class="btn btn-file">
                                        <span class="fileupload-new">اختر صورة</span>
                                        <span class="fileupload-exists">تغيير الصورة</span>
                                        <input type="file" name="cover_image" class="cover-image upload_image_class">
                                    </span>
                                        <a class="btn hide" id="startCrop">قص الصورة</a>
                                        <a href="javascript:void(0)" class="btn remove_picture fileupload-exists" style="padding-left: 0.5vmax; padding-right: 0.5vmax" data-dismiss="fileupload">
                                            <i class="fa fa-trash-o" aria-hidden="true"></i>
                                        </a>

                                        <p id="image1-dim" class="label label-success" style="display:none;"></p>
                                        <p id="image1-size" class="label label-success" style="display:none;"></p>
                                    </div>
                                </div>
                                <code>الحجم الأقصى المسموح به:</code> 1MB<br>
                                <span>مقاس صورة الغلاف يجب أن تتكون من أضعاف 1:1</span>
                                <br>
                            </div>

                            <div class="img-container" class="input">
                                <input type="hidden" class="x" name="logo_x" id="x" />
                                <input type="hidden" class="y" name="logo_y" id="y"/>
                                <input type="hidden" class="w" name="logo_w" id="w"/>
                                <input type="hidden" class="h" name="logo_h" id="h"/>
                            </div>

                            <div class="col-md-3 col-sm-12 text-left">
                                <label style="font-weight: bold;">صورة الغلاف <span style="color:red"></span></label>
                            </div>
                        </div>

                        <div class="form-actions" style="margin-left: -13px !important; margin-right: -13px !important; padding-bottom: 13px !important">
                            @if($request_type == 'Add')
                                <a href="javascript:void(0)" id="cancel_btn" class="btn btn-info btn-cons">إلغاء</a>
                            @else
                                <a href="{{ route('worthy.index') }}" class="btn btn-info btn-cons">إلغاء</a>
                            @endif
                            <div class="pull-right">
                                <input type="submit" value="التالى" class="btn btn-info btn-cons" id="btn-submit">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Family Member Selection Modal -->
    <div id="myModal" 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');">×</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" 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->pluck('family_member_id')->toArray();
                        @endphp

                        <nav style="direction: rtl;">
                            <ul style="direction: rtl; padding-left: 8px; padding-right:10px;">
                                @foreach($family_peoples 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="getTreeId({{ $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>

    <!-- Crop Info Modal -->
    <div id="cropInfoModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body info-modal">
                    <p class="message-content"></p>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-default" data-dismiss="modal">موافق</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 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="false"/>
    </form>

@endsection

@section('page_script')
    <script>
        /*Code For Search in popup Start*/
        $(document).ready(function(){
            $('#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);
            });

            var family_member_id = '{{ request("family_member_id") }}';

            if (family_member_id && family_member_id != '') {
                getTreeId(family_member_id);
            }
        });

        $('#node-name-hide').click(function(){
            $('.node-name').text('');
            $('.family_member_id').val('');
            $('#node-name-hide').hide();
        });

        $('#myModal').hide();
        $('.open-model-btn').click(function(){
            $('#myModal').modal('show');
        });

        /*Getting selected node data*/
        function getTreeId(id, alive){
            if (alive == 'No') {
                var ret = confirm('Are you sure you want to add a dead person?');
                if (!ret) {
                    return ret;
                }
            }

            $('#progressbar').show();
            $('#myModal').modal('hide');

            if (id != 0) {
                $.get("/admin/worthy/" + id + "/selectAsWorthy", {}, function(result){
                    var result = JSON.parse(result);
                    console.log(result);
                    $('.node-name').html(result.name);
                    $('.family_member_id').val(result.id);
                    $('#progressbar').hide();
                    $('#filter').val('');
                    $('#filter').trigger('keyup');
                    $('#node-name-hide').show();
                });
            }
        }

        $(document).ready(function(){
            $('#myModal').hide();
            $('.open-model-btn').click(function(){
                $('#myModal').modal('show');
            });
        });

        function closeModal(id) {
            $(id).modal('hide');
            $('#filter').val('');
            $('#filter').trigger('keyup');
        }

        jQuery('#basicinfo_form').submit(function (event) {
            var cropPass = checkCropOk("1:1", "w,h", $('#image1 .cropbox'));
            if(cropPass == true) {
                form = this;
                event.preventDefault();
                setTimeout(function () {
                    form.submit();
                }, 500);
                jQuery('#progressbar').show();
                return true;
            } else {
                $('.info-modal .message-content').text(cropPass);
                $('#cropInfoModal').modal('show');
                return false;
            }
            return false;
        });

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

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

        //Crop
        $(document).on('click', '#startCrop', function (e) {
            var image = $('#image1 .cropbox');
            AspectRatio = '1:1';
            maxWidth = MaxHeight = 4000;
            var value = $("#beacon_target").val();

            var originalWidth = image[0].naturalWidth;
            var originalHeight = image[0].naturalHeight;

            $('#image1 .cropbox').imgAreaSelect({
                handles: true,
                fadeSpeed: 200,
                onSelectChange: updateCoords,
                imageHeight: originalHeight,
                imageWidth: originalWidth,
                aspectRatio: AspectRatio,
                maxHeight: MaxHeight,
                maxWidth: maxWidth,
            });

            $("#image1-dim").html('width: 0, height: 0');
            $("#image1-dim").show();
        });

        function updateCoords(img, selection) {
            if (!selection.width || !selection.height)
                return;

            $('#x').val(selection.x1);
            $('#y').val(selection.y1);
            $('#w').val(selection.width);
            $('#h').val(selection.height);
            $("#image1-dim").html('width: ' + selection.width + ', height: ' + selection.height);
        }

        $(document).on("click", ".image_crop", function(e){
            var crop_id = this.id;
            var image_id = 'image' + crop_id.replace(/\D/g,'');
            var simple_id = crop_id.replace(/\D/g,'');

            var image = $('#' + image_id + ' .cropbox');
            AspectRatio = '1:1';
            maxWidth = MaxHeight = 10000;

            var originalWidth = image[0].naturalWidth;
            var originalHeight = image[0].naturalHeight;

            $('#' + image_id + ' .cropbox').imgAreaSelect({
                handles: true,
                fadeSpeed: 200,
                onSelectChange: updateCoords,
                imageHeight: originalHeight,
                imageWidth: originalWidth,
                aspectRatio: AspectRatio,
                maxHeight: MaxHeight,
                maxWidth: maxWidth,
            });

            $("#" + image_id + "-dim").html('width: 0, height: 0');
            $("#" + image_id + "-dim").show();

            function updateCoords(img, selection) {
                console.log('#x2' + simple_id);
                if (!selection.width || !selection.height)
                    return;

                $('#x' + simple_id).val(selection.x1);
                $('#y' + simple_id).val(selection.y1);
                $('#w' + simple_id).val(selection.width);
                $('#h' + simple_id).val(selection.height);
                $("#" + image_id + "-dim").html('width: ' + selection.width + ', height: ' + selection.height);
            }
        });
    </script>

    <script src="{{ asset('assets/js/jquery.imgareaselect.pack.js') }}"></script>
    <script src="{{ asset('assets/plugins/blueimp/jquery.blueimp-gallery.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/bootstrap/js/bootstrap-fileupload.js') }}"></script>
    <script src="{{ asset('assets/cpanel/js/image_upload.js')}}" type="text/javascript"></script>

@endsection