@extends('app')
@section('content')
    <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 type="text/css">
        .box {
            border: 1px solid #dcdcdc;
            padding: 5px;
        }

        .help-block label {
            display: inline;
        }
        .btn-primary{
         background: #CF806B !important;
        }
    </style>
    @if(Session::has('flash_message'))
        <div class="alert {{ (Session::has('flash_message_status'))?'alert-error':'alert-success'}}">
            <button class="close" data-dismiss="alert"></button>
            {!! Session::get('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" id="reports-tabs">
        <div class="col-md-12">
            <ul id="tab-01" class="nav nav-tabs nav-tabs-rtl" style="background-color: transparent;">
                <li id="general_news"  class="active"><a href="#privateEvents"><span class="semi-bold">ظاهرة للمسجلين</span></a></li>
                <li id="guest"  class=""><a href="#guest_user"><span class="semi-bold"> ظاهرة للضيوف</span></a></li>
                <li id="requests" class=""><a  href="#Requests"><span class="semi-bold">استمارات التواصل <span class="badge badge-important">{{$received_count > 0 ? $received_count : 0 }}</span></span></a></li>
                <li id="archives"  class=""><a href="#Archives"><span class="semi-bold">الطلبات المكتملة</span></a></li>
            </ul>
            <div class="tab-content" style="padding: 0px !important;">

                {{--Private Events Data Table--}}
                <div id="privateEvents" class="tab-pane active">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="grid simple">
                                <div class="grid-body">
                                    <div class="c-page-title">
                                        <span> الفعاليات - ظاهرة للمسجلين </span>
                                    </div>
                                    <br>
                                    <div class="box">
                                        {!! Form::model($nadi, ['method' => 'PATCH','route' => ['nadi.update', $nadi->id],'id'=>'form_nadi', "enctype"=>"multipart/form-data"]) !!}
                                        <br>
                                        <div class="form-group row">
                                            <div class="input-with-icon  right col-md-6 col-md-offset-3  col-sm-12">
                                                <div class="form-group">
                                                    <label style="font-weight: bold;">مرئي : <span style="color:red"></span></label>
                                                    <div class="form-check-inline" style="display: inline-block; margin-left: 10px;">
                                                        <input class="form-check-input" type="radio" name="visible"
                                                            id="visible_yes" value="yes" @if($nadi->visible == "yes") checked
                                                            @endif style="vertical-align: text-bottom;">
                                                        <label class="form-check-label" for="visible_yes"
                                                            style="display: inline-block;">
                                                            نعم
                                                        </label>
                                                    </div>
                                                    <div class="form-check-inline" style="display: inline-block; margin-right: 10px;">
                                                        <input class="form-check-input" type="radio" name="visible"
                                                            id="visible_no" value="no" @if($nadi->visible == "no") checked
                                                            @endif  style="vertical-align: text-bottom;">
                                                        <label class="form-check-label" for="visible_no" style="display: inline-block;">
                                                            لا
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <div class="input-with-icon  right col-md-6 col-md-offset-3  col-sm-12">
                                                {!! Form::text('title', null, ['class' => 'form-control','id'=>'title','required'=>true]) !!}
                                                <span class="help"><span id="char_count_title">60</span> الحروف المتبقية</span><br>
                                            </div>
                                            <div class="col-md-3  col-sm-12 text-left">
                                                <label style="font-weight: bold;">العنوان <span style="color:red"></span></label>
                                            </div>
                                        </div>

                                        @include('admin.nadi._cover_image')

                                        <div class="form-group row">
                                            <div class="input-with-icon  right col-md-6 col-md-offset-3  col-sm-12">
                                                {!! Form::textarea('description', null, ['class' => 'form-control','id'=>'description']) !!}
                                                <span class="help"><span
                                                            id="char_count_description">5000</span> الحروف المتبقية</span><br>
                                            </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-group row">
                                            <div class=" right col-md-6 col-md-offset-3 col-sm-12">
                                                <div style="margin-top: -20px">
                                                    <div class="form-group">
                                                        <div class="input-with-icon  right col-md-9 col-md-offset-3  col-sm-12">
                                                            <div class="form-group">
                                                                <label style="font-weight: bold;">مرئي : <span style="color:red"></span></label>
                                                                <div class="form-check-inline"
                                                                    style="display: inline-block; margin-left: 10px;">
                                                                    <input class="form-check-input" type="radio" name="email_visible"
                                                                        id="email_visible_yes" value="yes"
                                                                        @if($nadi->email_visible == "yes") checked
                                                                        @endif style="vertical-align: text-bottom;">
                                                                    <label class="form-check-label" for="email_visible_yes"
                                                                        style="display: inline-block;">
                                                                        نعم
                                                                    </label>
                                                                </div>
                                                                <div class="form-check-inline"
                                                                    style="display: inline-block; margin-right: 10px;">
                                                                    <input class="form-check-input" type="radio" name="email_visible"
                                                                        id="email_visible_no" value="no"
                                                                        @if($nadi->email_visible == "no") checked
                                                                        @endif  style="vertical-align: text-bottom;">
                                                                    <label class="form-check-label" for="email_visible_no"
                                                                        style="display: inline-block;">
                                                                        لا
                                                                    </label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                {!! Form::text('email', null, ['class' => 'form-control', 'placeholder'=>'me@domain.com','id'=>'email']) !!}
                                                <span class="help"><span id="char_count_email">30</span> الحروف المتبقية</span><br>
                                            </div>
                                            <div class="col-md-3 col-sm-12 text-left">
                                                {!! Form::label('email', 'البريد الإلكتروني', ['class' => 'control-label label-b']) !!}
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <div class=" right col-md-6 col-md-offset-3  col-sm-12">
                                                <div>
                                                    <div class="">
                                                        <div class="input-with-icon  right col-md-9 col-md-offset-3  col-sm-12">
                                                            <div class="form-group">
                                                                <div class="form-check-inline" style="display: inline-block; margin-left: 10px;">
                                                                    <input class="form-check-input" type="radio" name="call_me"
                                                                        id="call_me_visible_yes" value="yes" @if($nadi->call_me == "yes") checked @endif style="vertical-align: text-bottom;">
                                                                    <label class="form-check-label" for="call_me_visible_yes" style="display: inline-block;">
                                                                    نعم
                                                                    </label>
                                                                </div>
                                                                <div class="form-check-inline" style="display: inline-block; margin-right: 10px;">
                                                                    <input class="form-check-input" type="radio" name="call_me"
                                                                        id="call_me_visible_no" value="no" @if($nadi->call_me == "no") checked @endif  style="vertical-align: text-bottom;">
                                                                    <label class="form-check-label" for="call_me_visible_no" style="display: inline-block;">
                                                                    لا
                                                                    </label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-3 col-sm-12 text-left">
                                                {!! Form::label('call_me', 'صفحة التواصل', ['class' => 'control-label label-b']) !!}
                                            </div>
                                        </div>

                                        <!-- <div class="form-group row">
                                            <div class=" right col-md-6 col-md-offset-3 col-sm-12">
                                                <div style="margin-top: -20px">
                                                    <div class="form-group">
                                                        <div class="input-with-icon  right col-md-9 col-md-offset-3  col-sm-12">
                                                            <div class="form-group">
                                                                <label style="font-weight: bold;">مرئي : <span style="color:red"></span></label>
                                                                <div class="form-check-inline"
                                                                    style="display: inline-block; margin-left: 10px;">
                                                                    <input class="form-check-input" type="radio" name="calll_visible"
                                                                        id="calll_visible_yes" value="yes"
                                                                        @if($nadi->calll_visible == "yes" || $nadi->calll_visible == "") checked
                                                                        @endif style="vertical-align: text-bottom;">
                                                                    <label class="form-check-label" for="calll_visible_yes"
                                                                        style="display: inline-block;">
                                                                        نعم
                                                                    </label>
                                                                </div>
                                                                <div class="form-check-inline"
                                                                    style="display: inline-block; margin-right: 10px;">
                                                                    <input class="form-check-input" type="radio" name="calll_visible"
                                                                        id="calll_visible_no" value="no"
                                                                        @if($nadi->calll_visible == "no") checked
                                                                        @endif  style="vertical-align: text-bottom;">
                                                                    <label class="form-check-label" for="calll_visible_no"
                                                                        style="display: inline-block;">
                                                                        لا
                                                                    </label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                {!! Form::text('calll', null, ['class' => 'form-control','placeholder'=>'9665XXXXXXXX','id' => 'calll','pattern'=>'[0-9]{1,}', 'title'=>'Mobile number can only contain numbers']) !!}
                                                <span class="help"><span id="char_count_calll">15</span> الحروف المتبقية</span><br>
                                            </div>
                                            <div class="col-md-3 col-sm-12 text-left">
                                                {!! Form::label('calll', 'إتصال ', ['class' => 'control-label label-b']) !!}
                                            </div>
                                        </div> -->

                                        <div class="form-group row">
                                            <div class="col-md-6 col-md-offset-3  col-sm-12">
                                                {!! Form::submit('حفظ', ['class' => 'btn btn-primary pull-right']) !!}
                                            </div>
                                        </div>
                                        <br>

                                        {!! Form::close() !!}
                                        @include('admin.nadi._related_persons')
                                        @include('admin.nadi._additional_images')

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {{--Guest User Data Table--}}
                <div id="guest_user" class="tab-pane">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="grid simple">
                                <div class="grid-body">
                                    <div class="c-page-title">
                                        <span> الفعاليات - ظاهرة للضيوف </span>
                                    </div>
                                    <br>
                                    <div class="box">
                                        {!! Form::model($nadi_guest, ['method' => 'POST','route' => ['nadi_guest.update', $nadi_guest->id],'id'=>'form_nadi_guest', "enctype"=>"multipart/form-data"]) !!}
                                        <input type="hidden" name = "guest_id" value="{{$nadi_guest->id}}">
                                        <br>
                                        <div class="form-group row">
                                            <div class="input-with-icon  right col-md-6 col-md-offset-3  col-sm-12">
                                                <div class="form-group">
                                                    <label style="font-weight: bold;">مرئي : <span style="color:red"></span></label>
                                                    <div class="form-check-inline" style="display: inline-block; margin-left: 10px;">
                                                        <input class="form-check-input" type="radio" name="visible"
                                                            id="visible_yes" value="yes" @if($nadi_guest->visible == "yes") checked
                                                            @endif style="vertical-align: text-bottom;">
                                                        <label class="form-check-label" for="visible_yes"
                                                            style="display: inline-block;">
                                                            نعم
                                                        </label>
                                                    </div>
                                                    <div class="form-check-inline" style="display: inline-block; margin-right: 10px;">
                                                        <input class="form-check-input" type="radio" name="visible"
                                                            id="visible_no" value="no" @if($nadi_guest->visible == "no") checked
                                                            @endif  style="vertical-align: text-bottom;">
                                                        <label class="form-check-label" for="visible_no" style="display: inline-block;">
                                                            لا
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <div class="input-with-icon  right col-md-6 col-md-offset-3  col-sm-12">
                                                {!! Form::text('title', null, ['class' => 'form-control','id'=>'guest_title','required'=>true]) !!}
                                                <span class="help"><span id="char_count_guest_title">60</span> الحروف المتبقية</span><br>
                                            </div>
                                            <div class="col-md-3  col-sm-12 text-left">
                                                <label style="font-weight: bold;">العنوان <span style="color:red"></span></label>
                                            </div>
                                        </div>

                                        @include('admin.nadi._guest_cover_image')

                                        <div class="form-group row">
                                            <div class="input-with-icon  right col-md-6 col-md-offset-3  col-sm-12">
                                                {!! Form::textarea('description', null, ['class' => 'form-control','id'=>'guest_description']) !!}
                                                <span class="help"><span
                                                            id="char_count_guest_description">5000</span> الحروف المتبقية</span><br>
                                            </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-group row">
                                            <div class=" right col-md-6 col-md-offset-3 col-sm-12">
                                                <div style="margin-top: -20px">
                                                    <div class="form-group">
                                                        <div class="input-with-icon  right col-md-9 col-md-offset-3  col-sm-12">
                                                            <div class="form-group">
                                                                <label style="font-weight: bold;">مرئي : <span style="color:red"></span></label>
                                                                <div class="form-check-inline"
                                                                    style="display: inline-block; margin-left: 10px;">
                                                                    <input class="form-check-input" type="radio" name="email_visible"
                                                                        id="email_visible_yes" value="yes"
                                                                        @if($nadi_guest->email_visible == "yes") checked
                                                                        @endif style="vertical-align: text-bottom;">
                                                                    <label class="form-check-label" for="email_visible_yes"
                                                                        style="display: inline-block;">
                                                                        نعم
                                                                    </label>
                                                                </div>
                                                                <div class="form-check-inline"
                                                                    style="display: inline-block; margin-right: 10px;">
                                                                    <input class="form-check-input" type="radio" name="email_visible"
                                                                        id="email_visible_no" value="no"
                                                                        @if($nadi_guest->email_visible == "no") checked
                                                                        @endif  style="vertical-align: text-bottom;">
                                                                    <label class="form-check-label" for="email_visible_no"
                                                                        style="display: inline-block;">
                                                                        لا
                                                                    </label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                {!! Form::text('email', null, ['class' => 'form-control', 'placeholder'=>'me@domain.com','id'=>'guest_email']) !!}
                                                <span class="help"><span id="char_count_guest_email">30</span> الحروف المتبقية</span><br>
                                            </div>
                                            <div class="col-md-3 col-sm-12 text-left">
                                                {!! Form::label('email', 'البريد الإلكتروني', ['class' => 'control-label label-b']) !!}
                                            </div>
                                        </div>

                                        <!-- <div class="form-group row">
                                            <div class=" right col-md-6 col-md-offset-3 col-sm-12">
                                                <div style="margin-top: -20px">
                                                    <div class="form-group">
                                                        <div class="input-with-icon  right col-md-9 col-md-offset-3  col-sm-12">
                                                            <div class="form-group">
                                                                <label style="font-weight: bold;">مرئي : <span style="color:red"></span></label>
                                                                <div class="form-check-inline"
                                                                    style="display: inline-block; margin-left: 10px;">
                                                                    <input class="form-check-input" type="radio" name="calll_visible"
                                                                        id="calll_visible_yes" value="yes"
                                                                        @if($nadi_guest->calll_visible == "yes" || $nadi->calll_visible == "") checked
                                                                        @endif style="vertical-align: text-bottom;">
                                                                    <label class="form-check-label" for="calll_visible_yes"
                                                                        style="display: inline-block;">
                                                                        نعم
                                                                    </label>
                                                                </div>
                                                                <div class="form-check-inline"
                                                                    style="display: inline-block; margin-right: 10px;">
                                                                    <input class="form-check-input" type="radio" name="calll_visible"
                                                                        id="calll_visible_no" value="no"
                                                                        @if($nadi_guest->calll_visible == "no") checked
                                                                        @endif  style="vertical-align: text-bottom;">
                                                                    <label class="form-check-label" for="calll_visible_no"
                                                                        style="display: inline-block;">
                                                                        لا
                                                                    </label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                {!! Form::text('calll', null, ['class' => 'form-control','placeholder'=>'9665XXXXXXXX','id' => 'guest_calll','pattern'=>'[0-9]{1,}', 'title'=>'Mobile number can only contain numbers']) !!}
                                                <span class="help"><span id="char_count_guest_calll">15</span> الحروف المتبقية</span><br>
                                            </div>
                                            <div class="col-md-3 col-sm-12 text-left">
                                                {!! Form::label('calll', 'إتصال ', ['class' => 'control-label label-b']) !!}
                                            </div>
                                        </div> -->

                                        <div class="form-group row">
                                            <div class="col-md-6 col-md-offset-3  col-sm-12">
                                                {!! Form::submit('حفظ', ['class' => 'btn btn-primary pull-right']) !!}
                                            </div>
                                        </div>
                                        <br>

                                        {!! Form::close() !!}

                                        @include('admin.nadi._guest_additional_images')

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {{--Requests Data Table--}}
                <div id="Requests" class="tab-pane">
                    <div class="grid simple vertical mobile-scroll">
                        <div class="grid-body no-border">

                            <div class='control' style="height: 45px;">
                                <div class="col-sm-3 col-xs-12">
                                    <div class="pull-right markaction">
                                        <a id="del6" href="javascript:void(0)" class="btn btn-danger" data-url="{{ URL::to('admin/nadi_pending_requests/bulkdelete') }}">حذف</a>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-xs-12 c-page-title">
                                    <span>الفعاليات - استمارات التواصل</span>
                                </div>
                                <div class="col-sm-3 col-xs-12"></div>
                            </div>

                            <table class="table table-bordered table-hover datatable" id="datatable-example6" style="width:100% !important">
                                <thead>
                                    <tr>
                                        <th><input type="checkbox" class="group-checkable" data-set="#datatable-example6 .checkboxes" /></th>
                                        <th>#</th>
                                        <th>الاستمارة</th>
                                        <th width="50%">المعلومات</th>
                                        <th width="20%">الحالة</th>
                                        <th></th>
                                    </tr>
                                </thead>

                            </table>

                        </div>
                    </div>
                </div>
                {{--Archives Data Table--}}
                <div id="Archives" class="tab-pane">
                    <div class="grid simple vertical mobile-scroll">
                            <div class="grid-body no-border">

                                <!-- <div class='control' style="height: 45px;">
                                    <div class="pull-right markaction">
                                        <a id="del5" href="javascript:void(0)" class="btn btn-danger" data-url="{{ URL::to('admin/nadi_pending_requests/bulkdelete') }}">حذف</a>
                                    </div>
                                </div> -->

                                <div class='control' style="height: 45px;">
                                    <div class="col-sm-3 col-xs-12"></div>
                                    <div class="col-sm-6 col-xs-12 c-page-title">
                                        <span>الفعاليات - الطلبات المكتملة</span>
                                    </div>
                                    <div class="col-sm-3 col-xs-12"></div>
                                </div>
                                <table class="table table-bordered table-hover datatable" id="datatable-example5" style="width:100% !important">
                                    <thead>
                                        <tr>
                                            <th><input type="checkbox" class="group-checkable" data-set="#datatable-example5 .checkboxes" /></th>
                                            <th>#</th>
                                            <th>الاستمارة</th>
                                            <th width="50%">المعلومات</th>
                                            <th width="20%">الحالة</th>
                                            <th></th>
                                        </tr>
                                    </thead>

                                </table>

                            </div>
                        </div>
                    </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>
               <!--  <p style="text-align: right;font-size: 16px;color: grey;">هذا النص هو وهميهذا النص هو وهمية. هذا النص هو وهمية.هذا النص هو وهمية.                    هذا النص هو وهمية.

                </p> -->
                <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>

                        <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="height: 76.2px !important; background-size: cover; background-image: url({{$person->profile_picture}})"/></span>
                                                @else
                                                    <span class="node-image-round-box square-box {{$person->gender=='0' ? 'male' : 'female'}}" style="height: 76.2px !important;"></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_ar}}</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,[]) ? 'disabled' : ''}}"><i class="fa fa-plus"></i></a>
                                        </div>
                                    </div>
                                </li>
                                @endforeach
                            </ul>
                        </nav>
                    </tbody>
                </table>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
    <!-- delete modal popup -->
    <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>
    <!-- end crop info 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" style="background: #CF806B !important;">نعم</button>
           </div>
        </div>
    </div>
</div>

@endsection

@section('page_script')
    <script type="text/javascript" language="javascript" class="init">
        $(document).ready(function(){
            $(document).on('click','.confirm-add-related', function(e){
                var id = $(this).data('id');
                submitAddForm(id);
            });
        });
        $("#form_nadi").submit(function (event) {

            var cropPass = checkCropOk("3:2", "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('مقاس صورة الغلاف يجب أن تتكون من أضعاف 3:2');
                $('#cropInfoModal').modal('show');
                return false;
            }
            return false;
        });

        $("#form_nadi_guest").submit(function (event) {

            var cropPass = checkCropOk("3:2", "w2,h2", $('#image2 .cropbox'));
            if (cropPass == true) {
                form = this;
                event.preventDefault();
                setTimeout(function () {
                    form.submit();
                }, 500);
                jQuery('#progressbar').show();
                return true;
            } else {
                $('.info-modal .message-content').text('مقاس صورة الغلاف يجب أن تتكون من أضعاف 3:2');
                $('#cropInfoModal').modal('show');
                return false;
            }
            return false;
        });


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

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

        // additional images form submission
        $("#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-ai').attr('disabled', 'disabled');
            event.preventDefault();
            setTimeout(function () {
                form.submit();
            }, 500);
            jQuery('#progressbar').show();

            return true;
        });

        // nadi contacts form submission
        $("#form-nadi-contacts, #form_edit_contacts, #form_editcaption").submit(function (event) {
            var pass = true;
            //some validations
            if (pass == false) {
                return false;
            }
            form = this;
            jQuery('.btn-submit-contact').attr('disabled', 'disabled');
            event.preventDefault();
            setTimeout(function () {
                form.submit();
            }, 500);
            jQuery('#progressbar').show();

            return true;
        });

        $(document).on('click', '#startCrop', function (e) {

            var image = $('#image1 .cropbox');
            AspectRatio = '3:2';
            maxWidth = MaxHeight = 4000;
            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,
                // parent: '#image1'
            });
            $("#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', '#startCrop2', function (e) {

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

            });

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

            $('#x2').val(selection.x1);
            $('#y2').val(selection.y1);
            $('#w2').val(selection.width);
            $('#h2').val(selection.height);
            $("#image2-dim").html('width: ' + selection.width + ', height: ' + selection.height);
            }

        jQuery(document).ready(function ($) {

            $('body').append($('#formModal'));
            $('body').append($('#fileSizeMessage'));
            $('body').append($('#formModalContact'));

            $(".upload_image_class").on('change', function () {
                $("#image1 .imgareaselect-selection").parent().remove();
                $("#image1 .imgareaselect-outer").remove();
                $("#image1-dim").html('');
                $('.cropbox').imgAreaSelect({remove:true});
            });

            $(".upload_image_class2").on('change', function () {
                $("#image2 .imgareaselect-selection").parent().remove();
                $("#image2 .imgareaselect-outer").remove();
                $("#image2-dim").html('');
                $('.cropbox').imgAreaSelect({remove:true});
            });

            updateFeatureCharLimitNum('title', 'char_count_title', 60);
            $("#title").keyup(function (event) {
                updateFeatureCharLimitNum('title', 'char_count_title', 60);
            });
            updateFeatureCharLimitNum('description', 'char_count_description', 5000);
            $("#description").keyup(function (event) {
                updateFeatureCharLimitNum('description', 'char_count_description', 5000);
            });
            updateFeatureCharLimitNum('email', 'char_count_email', 30);
            $("#email").keyup(function (event) {
                updateFeatureCharLimitNum('email', 'char_count_email', 30);
            });

            updateFeatureCharLimitNum('guest_title', 'char_count_guest_title', 60);
            $("#guest_title").keyup(function (event) {
                updateFeatureCharLimitNum('guest_title', 'char_count_guest_title', 60);
            });
            updateFeatureCharLimitNum('guest_description', 'char_count_guest_description', 5000);
            $("#guest_description").keyup(function (event) {
                updateFeatureCharLimitNum('guest_description', 'char_count_guest_description', 5000);
            });
            updateFeatureCharLimitNum('guest_email', 'char_count_guest_email', 30);
            $("#guest_email").keyup(function (event) {
                updateFeatureCharLimitNum('guest_email', 'char_count_guest_email', 30);
            });

            // data tables configurations
            var table = $('#datatable-example2').DataTable({
                stateSave: true,
                processing: true,
                serverSide: true,
                language: {
                    search: "",
                    searchPlaceholder: "بحث",
                    "zeroRecords": "لا يوجد محتوى",
                    processing: "<img src='{{url('/')}}/assets/img/Webp.net-resizeimage.gif' />"
                },
                ajax: {
                    "url": "{{ URL::to('admin/nadi-additional-image/datatable') }}",
                    "type": "POST"
                },
                // rowReorder: {
                //   update: false
                // },
                columns: [
                    {data: 'sequence', name: 'sequence'},
                    {data: 'id', name: 'id'},
                    {data: 'check', name: 'check'},
                    {data: 'image', name: 'image'},
                    {data: 'caption', name: 'caption'},
                    {data: 'size', name: 'size'},
                    {data: 'actions', name: 'actions'}
                ],
                "iDisplayLength": 50,
                "columnDefs": [
                    {
                        "targets": [1],
                        "visible": false,
                        "searchable": false
                    },
                    {
                        "targets": [0, 1, 2, 4],
                        "searchable": false
                    },
                    {
                        "targets": [2, 3, 4],
                        "className": 'dt-body-right'
                    },
                    // { orderable: true, className: 'reorder', targets: 0 },
                    {orderable: false, targets: '_all'}

                ]
            });


            //data tables Configurations (Related Person)

            var Related_table = $('#datatable-example3').DataTable({
            stateSave: true,
            processing: true,
            serverSide: true,
            language: { search: "",
                             searchPlaceholder: "بحث",
                             "zeroRecords": "لا يوجد محتوى",
                             processing: "<img src='{{url('/')}}/assets/img/Webp.net-resizeimage.gif' />" },
                ajax: {
                    "url": "{{ URL::to('admin/nadi-related-person/datatable?nadi_id='.($nadi ? $nadi->id : 0)) }}",
                    "type": "POST"
                },
                columns: [
                    {data: 'seq', name: 'seq'},
                    {data: 'nadi_table_id', name: 'nadi_table_id'},
                    {data: 'check', name: 'check'},
                    {data: 'nodeID', name: 'nodeID'},
                    {data: 'name', name: 'name'},
                    {data: 'actions', name: 'actions'}
                ],
                "iDisplayLength": 50,
                "columnDefs": [
                    {
                        "targets": [1],
                        "visible": false,
                        "searchable": false
                    },
                    {
                    "targets": [0,1,2],
                    "searchable": false
                    },
                    {
                        "targets": [2,3],
                        "className": 'dt-body-right'
                    },
                    { orderable: false, targets: '_all' }

                ]
            });

            $("#datatable-example3.sortable tbody").sortable({
                helper: function (e, tr) {
                    var $originals = tr.children();
                    var $helper = tr.clone();
                    $helper.children().each(function (index) {
                        $(this).width($originals.eq(index).width())
                    });
                    return $helper;
                },
                stop: function (e, ui) {

                    $('#datatable-example3 tbody tr:odd').removeClass('alt-row');
                    $('#datatable-example3 tbody tr:even').removeClass().addClass('alt-row');
                    var ids = [($('#datatable-example3 tbody tr').size() - 1)];
                    var idsIndex = 0;
                    $('#datatable-example3 tbody tr').each(function (i) {
                        rcheckbox = $(this).find(':checkbox');
                        if (rcheckbox.length > 0) {
                            ids[idsIndex] = rcheckbox.val();
                            idsIndex++;
                        }
                    });
                    rids = ids.join(',');
                    var reorderUrl = $('#datatable-example3.sortable').attr('data-reorderUrl');
                    $.post(
                        reorderUrl,
                        {
                            ids: rids
                        },
                        function (response) {

                        },'json');

                }
            }).disableSelection();

            $('#datatable-example3_wrapper .dataTables_filter input').addClass("input-medium "); // modify table search input
            $('#datatable-example3_wrapper .dataTables_length select').addClass("select2-wrapper span12"); // modify table per page dropdown
            $('#datatable-example3_wrapper .dataTables_length select').removeClass("form-control");

            $('#datatable-example3 input').click(function () {
                $(this).parent().parent().parent().toggleClass('row_selected');
            });


            $("#datatable-example2.sortable tbody").sortable({
                helper: function (e, tr) {
                    var $originals = tr.children();
                    var $helper = tr.clone();
                    $helper.children().each(function (index) {
                        $(this).width($originals.eq(index).width())
                    });
                    return $helper;
                },
                stop: function (e, ui) {

                    $('#datatable-example2 tbody tr:odd').removeClass('alt-row');
                    $('#datatable-example2 tbody tr:even').removeClass().addClass('alt-row');
                    var ids = [($('#datatable-example4 tbody tr').size() - 1)];
                    var idsIndex = 0;
                    $('#datatable-example2 tbody tr').each(function (i) {
                        rcheckbox = $(this).find(':checkbox');
                        if (rcheckbox.length > 0) {
                            ids[idsIndex] = rcheckbox.val();
                            idsIndex++;
                        }
                    });
                    rids = ids.join(',');
                    var reorderUrl = $('#datatable-example2.sortable').attr('data-reorderUrl');
                    $.post(
                        reorderUrl,
                        {
                            ids: rids
                        },
                        function (response) {

                        }, 'json');

                }
            }).disableSelection();

            $('#datatable-example2_wrapper .dataTables_filter input').addClass("input-medium "); // modify table search input
            $('#datatable-example2_wrapper .dataTables_length select').addClass("select2-wrapper span12"); // modify table per page dropdown
            $('#datatable-example2_wrapper .dataTables_length select').removeClass("form-control");

            $('#datatable-example2 input').click(function () {
                $(this).parent().parent().parent().toggleClass('row_selected');
            });

            // data tables configurations (Approved Requests)
            var table_contacts = $('#datatable-example5').DataTable({
            stateSave: true,
            processing: true,
            serverSide: false,
            "order": [[ 1, "desc" ]],
            language: { search: "",
                            searchPlaceholder: "بحث",
                            "zeroRecords": "لا يوجد محتوى",
                            processing: "<img src='{{url('/')}}/assets/img/Webp.net-resizeimage.gif' />" },
                ajax: {
                    "url": "{{ URL::to('admin/nadi-requests/approved_requests-datatable?nadi_id='.($nadi ? $nadi->id : 0)) }}",
                    "type": "POST"
                },
                columns: [
                    {data: 'check', name: 'check'},
                    {data: 'id', name: 'id'},
                    {data: 'request_id', name: 'request_id'},
                    {data: 'information', name: 'information'},
                    {data: 'status', name: 'status'},
                    {data: 'actions', name: 'actions'},

                ],
                "iDisplayLength": 50,
                "columnDefs": [
                    {
                    "targets": [0,1,4],
                    "visible": false
                    },
                    {
                        "targets": [0,1,4],
                        "searchable": false
                    },
                    {
                        "targets": "_all",
                        "orderable": false
                    },
                    {
                        "targets": [1,2,3,4],
                        "className": 'dt-body-right'
                    }

                ]
            });

            $('#datatable-example5_wrapper .dataTables_filter input').addClass("input-medium "); // modify table search input
            $('#datatable-example5_wrapper .dataTables_length select').addClass("select2-wrapper span12"); // modify table per page dropdown
            $('#datatable-example5_wrapper .dataTables_length select').removeClass("form-control");

            $('#datatable-example input').click(function () {
                $(this).parent().parent().parent().toggleClass('row_selected');
            });
            $(".select2-wrapper").select2({minimumResultsForSearch: -1});

            // data tables configurations (Request)
            var table_contacts = $('#datatable-example6').DataTable({
            stateSave: true,
            processing: true,
            serverSide: false,
            "order": [[ 1, "desc" ]],
            language: { search: "",
                            searchPlaceholder: "بحث",
                            "zeroRecords": "لا يوجد محتوى",
                            processing: "<img src='{{url('/')}}/assets/img/Webp.net-resizeimage.gif' />" },
                ajax: {
                    "url": "{{ URL::to('admin/nadi/requests-datatable?nadi_id='.($nadi ? $nadi->id : 0)) }}",
                    "type": "POST"
                },
                columns: [
                    {data: 'check', name: 'check'},
                    {data: 'id', name: 'id'},
                    {data: 'request_id', name: 'request_id'},
                    {data: 'information', name: 'information'},
                    {data: 'status', name: 'status'},
                    {data: 'actions', name: 'actions'},
                ],
                "iDisplayLength": 50,
                "columnDefs": [
                    {
                        "targets": [1],
                        "visible": false,
                        "searchable": false
                    },
                    {
                        "targets": [0,1,5],
                        "searchable": false
                    },
                    {
                        "targets": "_all",
                        "orderable": false
                    },
                    {
                        "targets": [1,2,3,4,5],
                        "className": 'dt-body-right'
                    }

                ]
            });

            $('#datatable-example6_wrapper .dataTables_filter input').addClass("input-medium "); // modify table search input
            $('#datatable-example6_wrapper .dataTables_length select').addClass("select2-wrapper span12"); // modify table per page dropdown
            $('#datatable-example6_wrapper .dataTables_length select').removeClass("form-control");

            $('#datatable-example input').click(function () {
                $(this).parent().parent().parent().toggleClass('row_selected');
            });
            $(".select2-wrapper").select2({minimumResultsForSearch: -1});

            // Nadi Guest AI data tables configurations
            var table = $('#datatable-example7').DataTable({
                stateSave: true,
                processing: true,
                serverSide: true,
                language: {
                    search: "",
                    searchPlaceholder: "بحث",
                    "zeroRecords": "لا يوجد محتوى",
                    processing: "<img src='{{url('/')}}/assets/img/Webp.net-resizeimage.gif' />"
                },
                ajax: {
                    "url": "{{ URL::to('admin/nadi-guest-additional-image/datatable') }}",
                    "type": "POST"
                },
                // rowReorder: {
                //   update: false
                // },
                columns: [
                    {data: 'sequence', name: 'sequence'},
                    {data: 'id', name: 'id'},
                    {data: 'check', name: 'check'},
                    {data: 'image', name: 'image'},
                    {data: 'caption', name: 'caption'},
                    {data: 'size', name: 'size'},
                    {data: 'actions', name: 'actions'}
                ],
                "iDisplayLength": 50,
                "columnDefs": [
                    {
                        "targets": [1],
                        "visible": false,
                        "searchable": false
                    },
                    {
                        "targets": [0, 1, 2, 4],
                        "searchable": false
                    },
                    {
                        "targets": [2, 3, 4],
                        "className": 'dt-body-right'
                    },
                    // { orderable: true, className: 'reorder', targets: 0 },
                    {orderable: false, targets: '_all'}

                ]
            });

            $("#datatable-example7.sortable tbody").sortable({
                helper: function (e, tr) {
                    var $originals = tr.children();
                    var $helper = tr.clone();
                    $helper.children().each(function (index) {
                        $(this).width($originals.eq(index).width())
                    });
                    return $helper;
                },
                stop: function (e, ui) {

                    $('#datatable-example7 tbody tr:odd').removeClass('alt-row');
                    $('#datatable-example7 tbody tr:even').removeClass().addClass('alt-row');
                    var ids = [($('#datatable-example4 tbody tr').size() - 1)];
                    var idsIndex = 0;
                    $('#datatable-example7 tbody tr').each(function (i) {
                        rcheckbox = $(this).find(':checkbox');
                        if (rcheckbox.length > 0) {
                            ids[idsIndex] = rcheckbox.val();
                            idsIndex++;
                        }
                    });
                    rids = ids.join(',');
                    var reorderUrl = $('#datatable-example7.sortable').attr('data-reorderUrl');
                    $.post(
                        reorderUrl,
                        {
                            ids: rids
                        },
                        function (response) {

                        }, 'json');

                }
            }).disableSelection();

            $('#datatable-example7_wrapper .dataTables_filter input').addClass("input-medium "); // modify table search input
            $('#datatable-example7_wrapper .dataTables_length select').addClass("select2-wrapper span12"); // modify table per page dropdown
            $('#datatable-example7_wrapper .dataTables_length select').removeClass("form-control");

            $('#datatable-example7 input').click(function () {
                $(this).parent().parent().parent().toggleClass('row_selected');
            });

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

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

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

            // Clear selected images tag
            $('#add_picture_btn').click(function (e) {
                $('.upload-multiple-images').val('');
                $('#caption_input').val('');
                updateFeatureCharLimitNum('caption_input', 'char_caption', 200);
                $('.selectedImagesCount').text('');
            });
        });

        function editImage(id, caption) {
            $('#edit_caption_input').val(caption);
            $('#edit_image_id').val(id);
            updateFeatureCharLimitNum('edit_caption_input', 'char_edit_caption', 200);
            $('#editCaptionModal').modal('show');
        }

        function guestEditImage(id, caption) {
            $('#guest_edit_caption_input').val(caption);
            $('#guest_edit_image_id').val(id);
            updateFeatureCharLimitNum('guest_edit_caption_input', 'guest_char_edit_caption', 200);
            $('#guestEditCaptionModal').modal('show');
        }

        function editContact(id, title, reference_name, bank_name, iban, contact_name, contact_phone) {
            $('#edit_contact_id').val(id);
            $('#edit_contact_title_input').val(title);
            $('#edit_contact_reference_name_input').val(reference_name);
            $('#edit_contact_bank_name_input').val(bank_name);
            $('#edit_contact_iban_input').val(iban);
            $('#edit_contact_name_input').val(contact_name);
            $('#edit_contact_phone_input').val(contact_phone);

            updateFeatureCharLimitNum('edit_contact_title_input', 'char_edit_contact_title', 100);
            updateFeatureCharLimitNum('edit_contact_reference_name_input', 'char_edit_contact_reference_name', 40);
            updateFeatureCharLimitNum('edit_contact_bank_name_input', 'char_edit_contact_bank_name', 40);
            updateFeatureCharLimitNum('edit_contact_iban_input', 'char_edit_contact_iban', 29);
            updateFeatureCharLimitNum('edit_contact_name_input', 'char_edit_contact_name', 40);
            updateFeatureCharLimitNum('edit_contact_phone_input', 'char_edit_contact_phone', 15);

            $('#editContactModal').modal('show');
        }

        function closeModal(id) {
            $(id).modal('hide');
        }
    </script>
    <script src="{{ asset('assets/cpanel/js/image_upload.js')}}" type="text/javascript"></script>
    <script src="{{ asset("assets/plugins/blueimp/jquery.blueimp-gallery.min.js") }}"></script>
@endsection