@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($sandooq, ['method' => 'PATCH','route' => ['sandooq.update', $sandooq->id],'id'=>'form_sandooq', "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($sandooq->visible == "yes" || $sandooq->visible == "") 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($sandooq->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.sandooq._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($sandooq->email_visible == "yes" || $sandooq->email_visible == "") 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($sandooq->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::email('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($sandooq->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($sandooq->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($sandooq->calll_visible == "yes" || $sandooq->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($sandooq->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.sandooq._related_persons')
                                        @include('admin.sandooq._contacts')
                                        @include('admin.sandooq._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($sandooq_guest, ['method' => 'POST','route' => ['sandooq_guest.update', $sandooq_guest->id],'id'=>'form_sandooq_guest', "enctype"=>"multipart/form-data"]) !!}
                                        <input type="hidden" name = "guest_id" value="{{$sandooq_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($sandooq_guest->visible == "yes" || $sandooq_guest->visible == "") 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($sandooq_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.sandooq._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($sandooq_guest->email_visible == "yes" || $sandooq_guest->email_visible == "") 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($sandooq_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::email('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($sandooq_guest->calll_visible == "yes" || $sandooq_guest->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($sandooq_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.sandooq._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/sandooq_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/sandooq_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>

    <!-- 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_sandooq" ).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_sandooq_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;
        });

        // sandooq contacts form submission
        $("#form-sandooq-contacts, #form_edit_contacts, #form_editcaption, #form_guesteditcaption").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('calll','char_count_calll',15);
            $("#calll").keyup(function (event) {
                updateFeatureCharLimitNum('calll','char_count_calll',15);
            });

            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);
            });
            updateFeatureCharLimitNum('guest_calll','char_count_guest_calll',15);
            $("#guest_calll").keyup(function (event) {
                updateFeatureCharLimitNum('guest_calll','char_count_guest_calll',15);
            });
            // updateFeatureCharLimitNum('call_me','char_count_call_me',15);
            // $("#call_me").keyup(function (event) {
            //     updateFeatureCharLimitNum('call_me','char_count_call_me',15);
            // });

            $("#contact_title_input").keyup(function (event) {
                updateFeatureCharLimitNum('contact_title_input', 'char_contact_title', 100);
            });
            $("#contact_reference_name_input").keyup(function (event) {
                updateFeatureCharLimitNum('contact_reference_name_input', 'char_contact_reference_name', 40);
            });
            $("#contact_bank_name_input").keyup(function (event) {
                updateFeatureCharLimitNum('contact_bank_name_input', 'char_contact_bank_name', 40);
            });
            $("#contact_iban_input").keyup(function (event) {
                updateFeatureCharLimitNum('contact_iban_input', 'char_contact_iban', 29);
            });
            $("#contact_name_input").keyup(function (event) {
                updateFeatureCharLimitNum('contact_name_input', 'char_contact_name', 40);
            });
            $("#contact_phone_input").keyup(function (event) {
                updateFeatureCharLimitNum('contact_phone_input', 'char_contact_phone', 15);
            });

            updateFeatureCharLimitNum('contact_title_input', 'char_contact_title', 100);
            updateFeatureCharLimitNum('contact_reference_name_input', 'char_contact_reference_name', 40);
            updateFeatureCharLimitNum('contact_bank_name_input', 'char_contact_bank_name', 40);
            updateFeatureCharLimitNum('contact_iban_input', 'char_contact_iban', 29);
            updateFeatureCharLimitNum('contact_name_input', 'char_contact_name', 40);
            updateFeatureCharLimitNum('contact_phone_input', 'char_contact_phone', 15);

            $("#edit_contact_title_input").keyup(function (event) {
                updateFeatureCharLimitNum('edit_contact_title_input', 'char_edit_contact_title', 100);
            });
            $("#edit_contact_reference_name_input").keyup(function (event) {
                updateFeatureCharLimitNum('edit_contact_reference_name_input', 'char_edit_contact_reference_name', 40);
            });
            $("#edit_contact_bank_name_input").keyup(function (event) {
                updateFeatureCharLimitNum('edit_contact_bank_name_input', 'char_edit_contact_bank_name', 40);
            });
            $("#edit_contact_iban_input").keyup(function (event) {
                updateFeatureCharLimitNum('edit_contact_iban_input', 'char_edit_contact_iban', 29);
            });
            $("#edit_contact_name_input").keyup(function (event) {
                updateFeatureCharLimitNum('edit_contact_name_input', 'char_edit_contact_name', 40);
            });
            $("#edit_contact_phone_input").keyup(function (event) {
                updateFeatureCharLimitNum('edit_contact_phone_input', 'char_edit_contact_phone', 15);
            });

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

            // Sadooq Guest AI Imagesdata 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/sandooq-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-example7 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');
            });

            //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/sandooq-related-person/datatable?sandooq_id='.($sandooq ? $sandooq->id : 0)) }}",
                    "type": "POST"
                },
                // rowReorder: {
                // update: false
                // },
                columns: [
                    {data: 'seq', name: 'seq'},
                    {data: 'sandooq_table_id', name: 'sandooq_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": [1,2,3],
                        "className": 'dt-body-right'
                    },
                    // { orderable: true, className: 'reorder', targets: 0 },
                    { 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');
            });


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

                ]
            });

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

                        },'json');

                }
            }).disableSelection();

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

            $('#datatable-example8 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/sandooq/requests-datatable?sandooq_id='.($sandooq ? $sandooq->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});

            // 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/sandooq-requests/approved_requests-datatable?sandooq_id='.($sandooq ? $sandooq->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});


            // 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 editGuestImage(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