@extends('web.layouts.main')
@section('content')
@push('title') {{__('web.form')}} @endpush
     
    <div class="inner_header">
        <div class="container">
            <ul class="page_links">
                <li>
                    <a href="{{url(getCurrentLocale().'/')}}">{{__('web.home')}}</a>
                </li>
                <li>
                    <a href="{{url(getCurrentLocale().'/form')}}">@if($status == 'disabilities')
                        {{__('web.illness')}}
                        @elseif($status == 'abilities')
                        {{__('web.normals')}} {{__('web.normals2')}}
                        @else
                        {{__('web.not_win')}}
                        @endif</a>
                </li>
            </ul>
            <h3 class="text-center text-light mt-5"> @if($status == 'disabilities')
                        {{__('web.illness')}}
                        @elseif($status == 'abilities')
                        {{__('web.normals')}} {{__('web.normals2')}}
                        @else
                        {{__('web.not_win')}}
                        @endif</h3>
        </div>
        <img src="{{url('')}}/assets/web/images/about_shap.png" alt="" class="l_shap">
        <img src="{{url('')}}/assets/web/images/part_shap.png" alt="" class="r_shap">
    </div>

    <!--Contents-->
    <main>
        <div class="loader_page" style="display:none">
        <div class="progress">
            <div class="progress-done" data-done="0">
                0%
            </div>
        </div>
    </div>
        <div class="loader">
        <div class="gooey">
            <span class="dot"></span>
            <div class="dots">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </div>
        <!-- -------------- register ----------------- -->
        <section class="register section_padding">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-5">
                        <div class="section_head text-center mb-4">
                           @if($status == 'disabilities')
                       <h2>{!! pagedescriptions(11,'title') !!}</h2>
                            <p>{!! pagedescriptions(11,'description') !!}</p>
                        @elseif($status == 'abilities')
                       <h2>{!! pagedescriptions(12,'title') !!}</h2>
                            <p>{!! pagedescriptions(12,'description') !!}</p>
                        @else
                       <h2>{!! pagedescriptions(13,'title') !!}</h2>
                            <p>{!! pagedescriptions(13,'description') !!}</p>
                        @endif
                            
                        </div>
                    </div>
                </div>
               <div class="alert alert-warning alert-form bg-light mb-5" role="alert">
                    <i class="fas fa-exclamation-triangle ml-1"></i>
                       {{__('web.hint_req')}}
                </div>
                <form onsubmit="savedata(this)" action="{{url(getCurrentLocale().'/winforming')}}" id="form" enctype="multipart/form-data" method="post" class="form">
                    @CSRF
                    <div class="content">
                        <input type ="hidden" name="user_type" value="2">
                        
                        <div class="tab-content">
                            <div class="content_2" id="content_2">
                                <div class="row">
                                    <div class="col-lg-6">
                                       <div class="form-group select-group">
                                            <label for="">{{__('web.item')}}  *</label>
                                            <select name="item_id" id="item_id" class="form-control">
                                                <option selected disabled>{{__('web.select')}}</option>
                                                @foreach($items as $row)
                                                <option value="{{$row->id}}">{{itemname($row->id)}}</option>
                                                @endforeach
                                            </select>
                                            <span class="icon"><i class="fas fa-chevron-down"></i></span>
                                        </div>
                                   
                                    </div>   
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label for="">{{__('web.side_name')}} *</label>
                                            <input type="text" name="name" id="name"  class="form-control"  placeholder="{{__('web.side_name')}}">
                                        </div>
                                    </div>   
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label for="">{{__('web.email')}} *</label>
                                            <input type="email" name="email" id="email"  class="form-control"  placeholder="{{__('web.email')}}">
                                        </div>
                                    </div>   
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label for="">{{__('web.side_id')}}   *</label>
                                            <input type="text" name="id_num"  id="id_num" class="form-control"  placeholder="{{__('web.side_id')}}">
                                        </div>
                                    </div> 
                                    <div class="col-lg-6">
                                        <div class="form-group date-group select-group">
                                            <label for="">{{__('web.side_date')}}*</label>
                                            <!--<input type="date" name="date" id="date" class="form-control" placeholder="(DD/MM/YYYY)">-->
                                            <input type="text" name="date" id="date" class="form-control datepicker" placeholder="(DD/MM/YYYY)">
                                            <span class="icon"><i class="far fa-calendar-alt"></i></span>
                                        </div>
                                    </div> 
                                    <div class="col-lg-6">
                                        <div class="form-group select-group">
                                            <label for=""> {{__('web.nation')}}     *</label>
                                            <select name="country_id" onchange="changecountry(this)" id="country_id" class="form-control">
                                                <option selected disabled>  {{__('web.nation')}} </option>
                                                @foreach($countries as $row)
                                                <option value="{{$row->id}}">{{countryname($row->id)}}</option>
                                                @endforeach
                                            </select>
                                            <span class="icon"><i class="fas fa-chevron-down"></i></span>
                                        </div>
                                    </div> 
                                    <div class="col-lg-6">
                                           <div class="form-group select-group">
                                            <label for="">{{__('web.hear')}}*</label>
                                            <select name="hear_id" id="hear_id" class="form-control">
                                                <option selected disabled>{{__('web.select')}}</option>
                                                @foreach($hears as $row)
                                                <option value="{{$row->id}}">{{hearname($row->id)}}</option>
                                                @endforeach
                                            </select>
                                            <span class="icon"><i class="fas fa-chevron-down"></i></span>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group select-group">
                                            <label for=""> {{__('web.side_service')}}   *</label>
                                            <select name="area" id="area" onchange="areaSelect(this)" class="form-control">
                                                <option value="all"> {{__('web.side_all')}} </option>
                                                <option value="some">{{__('web.some')}}</option>
                                            </select>
                                            <span class="icon"><i class="fas fa-chevron-down"></i></span>
                                        </div>
                                    </div>  
                                    
                                    <div class="col-lg-12">
                                        <div class="row" id="areas" style="display:none">
                                            
                                            
                                        </div>
                                    </div>
                                    <div class="col-lg-12" id="addarea" style="display:none">
                                        <a style="cursor: pointer;"  data-id="0" onclick="addarea(this)" class="btn_1 gray "><i class="fa fa-fw fa-plus-circle"></i>{{__("web.add_area")}}</a>
        
                                    </div>
                                    
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label for="">{{__('web.username')}}   *</label>
                                            <input type="text" class="form-control" name="username" id="username"   placeholder=" {{__('web.username')}}  ">
                                        </div>
                                    </div> 
                                    <!--<div class="col-lg-6">-->
                                    <!--    <div class="form-group">-->
                                    <!--        <label for="">{{__('web.nickname')}} *</label>-->
                                    <!--        <input type="text" class="form-control" name="nickname" id="nickname" placeholder=" {{__('web.nickname')}}  ">-->
                                    <!--    </div>-->
                                    <!--</div> -->
                                   <div class="col-lg-6">
                                        <div class="form-group">
                                            <label for="">{{__('web.job')}} *</label>
                                            <input type="text" class="form-control"  name="job" id="job"   placeholder=" {{__('web.job')}}  ">
                                        </div>
                                    </div>
                                    
                                    <div class="col-lg-6">
                                        <div class="form-group select-group">
                                            <label for="">{{__('web.phone')}}  *</label>
                                            <div class="row">
                                                <div class="col-md-9 col-8">
                                                    <input type="text" class="form-control"  maxlength="9" name="phone" id="phone" placeholder="5xxxxxxxx">
                                                </div>
                                                <div class="col-md-3 col-4">
                                                   <span class="icon key" id="key1"></span>
                                                    <select name="keyphone_id" id="keyphone_id" class="form-control keyphone_id">
                                                        <option selected disabled>{{__('web.select')}}</option>
                                                        @foreach($countries as $row)
                                                        <option value="{{$row->id}}">{{$row->key}}</option>
                                                        @endforeach
                                                    </select> 
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group select-group">
                                            <label for="">{{__('web.secondphone')}}</label>
                                            <div class="row">
                                                <div class="col-md-9 col-8">
                                                    <input type="text" class="form-control"  maxlength="9" name="secondphone" id="secondphone" placeholder="5xxxxxxxx">
                                                </div>
                                                <div class="col-md-3 col-4">
                                                   <span class="icon key" id="key1"></span>
                                                    <select name="secondkey_id" class="form-control secondkey_id">
                                                        <option selected disabled>{{__('web.select')}}</option>
                                                        @foreach($countries as $row)
                                                        <option value="{{$row->id}}">{{$row->key}}</option>
                                                        @endforeach
                                                    </select> 
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label for="" id="descriptions"> {{__('web.description')}} *</label>
                                            
                                            <textarea name="description" id="description" rows="14" onkeyup="descChange(this)" maxlength="500" class="form-control" placeholder="{{__('web.description')}}"></textarea>
                                        <span id="lengthdesc">0/500</span>
                                        </div>
                                    </div>
                               
                                    <div class="col-lg-6">
                                        <div class="wrap">
                                            
                                            <div class="form-group up_group">
                                                 <label for="">إرفاق الملفات</label>
                                                <input type="file" name="image_1" id="allfiles" class="file">
                                                <div class="input-group">
                                                    <span class="input-group-append">{{__('web.image_1')}}*</span>
                                                    <input type="text"  class="input_ques image_1" id="image_1"  disabled  aria-label="Upload File" aria-describedby="basic-addon1">
                                                    <div style="position: absolute;left: 0;top: 0;display: flex;align-items: center;bottom: 6px;">
                                                         <a  class="btn" style="margin-top:8px;">
                                                               <i class="fas fa-times-circle" onclick="deletediv1(this)"  style="color: #dc3545;"></i>
                                                           </a>
                                                    </div>
                                                </div>
                                                <p style="color:#9e0404">{{__('web.required_3')}}</p>
                                               <!-- <p style="color:#9e0404">{{__('web.required_4')}}</p>-->
                                            </div>
                                            
                                            <div class="form-group up_group">
                                                <input type="file" name="image_2"  id="allfiles" class="file">
                                                <div class="input-group">
                                                    <span class="input-group-append">{{__('web.image_2')}} </span>
                                                    <input type="text"  class="input_ques image_2" id="image_2"   disabled  aria-label="Upload File" aria-describedby="basic-addon1">
                                                    <div style="position: absolute;left: 0;top: 0;display: flex;align-items: center;bottom: 6px;">
                                                         <a  class="btn" style="margin-top:8px;">
                                                               <i class="fas fa-times-circle" onclick="deletediv2(this)"  style="color: #dc3545;"></i>
                                                           </a>
                                                    </div>
                                                </div>
                                                <p style="color:#9e0404">{{__('web.required_3')}}</p>
                                               <!-- <p style="color:#9e0404">{{__('web.required_4')}}</p>-->
                                            </div>
                                            
                                             <div class="form-group up_group">
                                                <input type="file" name="image_3"  id="allfiles" class="file">
                                                <div class="input-group">
                                                    <span class="input-group-append">{{__('web.image_3')}} * </span>
                                                    <input type="text"  class="input_ques image_3" id="image_3"  disabled  aria-label="Upload File" aria-describedby="basic-addon1">
                                                    <div style="position: absolute;left: 0;top: 0;display: flex;align-items: center;bottom: 6px;">
                                                         <a  class="btn" style="margin-top:8px;">
                                                               <i class="fas fa-times-circle" onclick="deletediv3(this)"  style="color: #dc3545;"></i>
                                                          </a>
                                                    </div>
                                                </div>
                                                <p style="color:#9e0404">{{__('web.req_desc')}}</p>
                                          </div>
                                          
                                           <div class="form-group up_group">
                                                <input type="file" name="image_4"  id="allfiles" class="file">
                                                <div class="input-group">
                                                    <span class="input-group-append">{{__('web.image_4')}}  *</span>
                                                    <input type="text"  class="input_ques image_4" id="image_4"  disabled aria-label="Upload File" aria-describedby="basic-addon1">
                                                    <div style="position: absolute;left: 0;top: 0;display: flex;align-items: center;bottom: 6px;">
                                                         <a  class="btn" style="margin-top:8px;">
                                                               <i class="fas fa-times-circle" onclick="deletediv4(this)"  style="color: #dc3545;"></i>
                                                          </a>
                                                    </div>
                                                </div>
                                              <p style="color:#9e0404"> {{__('web.req_desc_1')}}</p>
                                            </div>
                                            
                                            <!--<div class="form-group up_group">-->
                                            <!--    <input type="file" name="image_5"  id="allfiles" class="file">-->
                                            <!--    <div class="input-group">-->
                                            <!--        <span class="input-group-append">  {{__('web.image_5')}}   </span>-->
                                            <!--        <input type="text"  class="input_ques image_5"  id="image_5"  disabled  aria-label="Upload File" aria-describedby="basic-addon1">-->
                                            <!--        <div style="position: absolute;left: 0;top: 0;display: flex;align-items: center;bottom: 6px;">-->
                                            <!--             <a  class="btn" style="margin-top:8px;">-->
                                            <!--                   <i class="fas fa-times-circle" onclick="deletediv5(this)"  style="color: #dc3545;"></i>-->
                                            <!--               </a>-->
                                            <!--        </div>-->
                                            <!--    </div>-->
                                            <!--    <p style="color:#9e0404">{{__('web.required_3')}}</p>-->
                                               <!-- <p style="color:#9e0404">{{__('web.required_4')}}</p>-->
                                            <!--</div>-->
                                            
                                            <!--<div class="form-group up_group">-->
                                            <!--    <input type="file" name="image_6"  id="allfiles" class="file">-->
                                            <!--    <div class="input-group">-->
                                            <!--        <span class="input-group-append">{{__('web.image_6')}}  </span>-->
                                            <!--        <input type="text"  class="input_ques image_6"  id="files" disabled aria-label="Upload File" aria-describedby="basic-addon1">-->
                                            <!--        <div style="position: absolute;left: 0;top: 0;display: flex;align-items: center;bottom: 6px;">-->
                                            <!--             <a  class="btn" style="margin-top:8px;">-->
                                            <!--                   <i class="fas fa-times-circle" onclick="deletediv6(this)"  style="color: #dc3545;"></i>-->
                                            <!--               </a>-->
                                            <!--        </div>-->
                                            <!--    </div>-->
                                            <!--    <p style="color:#9e0404">{{__('web.required_3')}}</p>-->
                                               <!-- <p style="color:#9e0404">{{__('web.required_4')}}</p>-->
                                            <!--</div>-->
                                        </div>
                                    </div>

                                    <div class="col-lg-6">
                                         <div class="form-group">
                                            <label>{{__('web.social_acc')}} </label>
                                            <div class="d-flex w-100 align-items-center">
                                                <div class="form-check socialmedia_check ml-5">
                                                  <input class="form-check-input" type="radio" name="social" onclick="socialType(this)" id="hasSocial1" value="yes" >
                                                  <label class="form-check-label" for="hasSocial1">
                                                    {{__('web.yes')}}
                                                  </label>
                                                </div>
                                                <div class="form-check socialmedia_check">
                                                  <input class="form-check-input" type="radio" name="social" onclick="socialType(this)"  id="hasSocial2" value="no" checked>
                                                  <label class="form-check-label" for="hasSocial2">
                                                    {{__('web.no')}}
                                                  </label>
                                                </div>
                                            </div>
                                           
                                        </div>
                                        
                                        
                                    </div>
                                    <div class="col-lg-12 " id="social" >
                                        <div class="row" >
                                           
                                            <div class="col-lg-12">
                                                <div class="form-group select-group">
                                                    <label for=""> {{__('web.social')}} </label>
                                                      @foreach($socials as $key=>$row)
                                                    <div class="custom-control custom-checkbox">
                                                      <input type="checkbox" name="socials[{{$key}}][social_id]" onclick="socialClick(this)" data-id="{{$row->id}}" value="{{$row->id}}" class="custom-control-input" id="moreFiles{{$row->id}}">
                                                      <label class="custom-control-label text-dark" for="moreFiles{{$row->id}}"> {{socialname($row->id)}}  </label>
                                                    </div>
                                                    
                                         @endforeach
                                                  
                                                </div>
                                            </div>
                                            
                                         <div class="col-lg-12" >
                                             @foreach($socials as $key=>$row)
                                                <div class="form-group" style="display:none" id="social{{$row->id}}">
                                                    <label for="">  {{__('web.link')}} {{socialname($row->id)}}</label>
                                                    <input type="text" class="form-control" name="socials[{{$key}}][link]" placeholder="{{__('web.link')}} {{socialname($row->id)}}">
                                                </div>
                                                @endforeach
                                               
                                            </div>
                                        </div>
                                    </div> 
                                    
                                    <div class="col-lg-12">
                                        <div class="row">
                                            <div class="col-lg-12">
                                                    <label>{{__('web.points')}}  </label>
                                                    </div>
                                            @foreach($points as $key=>$row)
                                            <div class="col-lg-6">
                                                <div class="form-group">
                                                    
                                                    <div class="custom-control custom-checkbox">
                                                      <input type="checkbox" name="points[{{$key}}][point_id]" onclick="pointClick(this)" data-id="{{$row->id}}" value="{{$row->id}}" class="custom-control-input" id="morepoinFiles{{$row->id}}">
                                                      <label class="custom-control-label text-dark" for="morepoinFiles{{$row->id}}"> {{pointname($row->id)}}  </label>
                                                    </div>
                                                   
                                                </div>
                                            </div>
                                             <div class="col-lg-6">
                                           
                                                <div class="form-group up_group" style="display:none" id="point{{$row->id}}">
                                                    <input type="file" name="points[{{$key}}][file]" class="file">
                                                    <div class="input-group">
                                                        <span class="input-group-append">{{pointname($row->id)}}  </span>
                                                        <input type="text"  class="input_ques point_{{$row->id}}"  id="files" disabled  aria-label="Upload File" aria-describedby="basic-addon1">
                                                        <div style="position: absolute;left: 0;top: 0;display: flex;align-items: center;bottom: 6px;">
                                                             <a  class="btn" style="margin-top:8px;">
                                                                   <i class="fas fa-times-circle" onclick="deletepoint(this)" data-id="{{$row->id}}"  style="color: #dc3545;"></i>
                                                               </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                             @endforeach
                                            
                                        </div>
                                    </div>
                                    

               
                                    <div class="col-12">
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input" id="customCheck1" name="condition" id="condition">
                                            <label class="custom-control-label" for="customCheck1">{{__('web.accept')}} </label>
                                            <a href="#0" class="main-color mr-1" data-toggle="modal" data-target="#modal_privacy">{{__('web.conditions')}}</a>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="custom-control custom-checkbox mt-2">
                                            <input type="checkbox" class="custom-control-input" id="customCheck2" name="conditions" id="condition">
                                            <label class="custom-control-label" for="customCheck2">{{__('web.conditions_social')}} </label>
                                        </div>
                                    </div>
                                    <div class="col-12 text-center mt-5">
                                        <button class="butn color"> <span> {{__('web.regist')}} </span> </button>
                                        
                                    </div>
                                </div> 
                            </div>
                    </div>
                </form>
            </div>
        </section>
        <!-- -------------- subscribe ----------------- -->
        <!--   <section class="subscribe section_padding bg-light">-->
        <!--    <div class="container">-->
        <!--        <div class="row justify-content-center">-->
        <!--            <div class="col-lg-5">-->
        <!--                <div class="section_head text-center mb-5">-->
        <!--                    <h2>{{__('web.subscribe_us')}}</h2>-->
        <!--                    <p>{{__('web.subscribe_desc')}}</p>-->
        <!--                </div>-->
        <!--            </div>-->
        <!--        </div>-->
        <!--        <div class="row justify-content-center">-->
        <!--            <div class="col-lg-6">-->
        <!--                <form onsubmit="subscribedata(this)" method="post" action="{{url(getCurrentLocale().'/subscribe')}}" class="form">-->
        <!--                    @CSRF-->
        <!--                    <div class="form-group">-->
        <!--                        <input type="email" name="email" class="form-control" placeholder="{{__('web.email')}}">-->
        <!--                        <button type="submit" class="butn color"><span>{{__('web.subscribe')}}</span></button>-->
        <!--                    </div>-->
        <!--                </form>-->
        <!--            </div>-->
        <!--        </div>-->
        <!--    </div>-->
        <!--    <img src="{{url('')}}/assets/web/images/sub_shap.png" alt="" class="sub_shap">-->
        <!--</section>-->
  <div class="modal fade modal_login" id="mailerrors" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-body text-center">
                        <div class="icon">
                            <img src="{{url('')}}/assets/web/images/icons/alert.svg" alt="">
                        </div>
                        <h4 class="text-danger">{{__('web.emailrequired')}} </h4>
                        <a  class="butn sub_butn" data-dismiss="modal"><span>{{__('web.fillunputs')}}  </span></a>
                    </div>
                </div>
            </div>
        </div>

        <!--  modal_success -->
        <div class="modal fade modal_login" id="mailsuccess" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-body text-center">
                        <div class="icon">
                            <img src="{{url('')}}/assets/web/images/icons/checked.svg" alt="">
                        </div>
                        <h4>{{__('web.success')}} </h4>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal login -->
        <div class="modal fade modal_login errors_modal" id="modal_fail" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-body text-center">
                        <div class="icon">
                            <img src="{{url('')}}/assets/web/images/icons/alert.svg" alt="">
                        </div>
                        <h4 class="text-danger" id="message">{{__('web.fillinputs')}} </h4>
                        <a  class="butn sub_butn" data-dismiss="modal"><span>{{__('web.fillunputs')}}   </span></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade modal_login " id="limitexp" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-body text-center">
                        <div class="icon">
                            <img src="{{url('')}}/assets/web/images/icons/alert.svg" alt="">
                        </div>
                        <h4 class="text-danger" id="limiterror">{{__('web.limited')}} </h4>
                        <div id="messagelimit" class="text-danger">
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--  modal_success -->
        <div class="modal fade modal_login" id="modal_success" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-body text-center">
                        <div class="icon">
                            <img src="{{url('')}}/assets/web/images/icons/checked.svg" alt="">
                        </div>
                        <h4>{{__('web.success')}} </h4>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Modal privacy -->
        <div class="modal fade modal_login" id="modal_privacy" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-body">
                        <!-- <div class="row justify-content-center">
                            <div class="col-lg-8">
                                <div class="section_head text-center mb-4">
                                    <h2>الشروط والأحكام </h2>
                                    <p>الشروط والأحكام يجب الالتزام بها </p>
                                </div>
                            </div>
                        </div> -->
                        <h3 class="main-color mb-4">{{aboutname($about->id)}} :</h3>
                        {!! aboutdescription($about->id) !!}
                    </div>
                </div>
            </div>
        </div>
        

    </main>
@push('js')
<script>
        // ------------- progress ------------
        const progress = document.querySelector('.progress-done');

        setTimeout(() => {
            progress.style.opacity = 1;
            progress.style.width = progress.getAttribute('data-done') + '%';
        }, 500)
    </script>
<script>


  // Load the plugin

let i =0 

$('#addForm').click(function(){
     i++
    $(this).after('<div style="position:relative;margin-top: 52px;"><div class="wrap"> <div class="title"> <h6>{{__('web.upload')}}</h6> <label class="file__input--label" for="customFile_'+i+'" data-text-btn="رفع">الملفات:</label> </div><p style="color:#9e0404" >{{__('web.required_3')}}*</p><div class="file"> <div class="file__input" id="file__input"> <input class="file__input--file" id="customFile_'+i+'" type="file" name="filing['+i+']"/> </div></div> </div>  <button type="button" id="removeForm" class="butn color"  style="background-color: #dc3545;left: -23px;top: -23px;z-index: 111;position: absolute;"><span>حذف</span></button></div>')
})


$( "body" ).delegate( "#removeForm", "click", function() {
  $( this ).parent().detach();
});

function deletepoint(elem){
    let data = $(elem).attr('data-id');
    $('.point_'+data).val('');
    
}
function deletediv1(elem){
    
    $('.image_1').val('');
    
}
function deletediv2(elem){
    
    $('.image_2').val('');
    
}
function deletediv3(elem){
    
    $('.image_3').val('');
    
}
function deletediv4(elem){
    
    $('.image_4').val('');
    
}
function deletediv5(elem){
    
    $('.image_5').val('');
    
}
function deletediv6(elem){
    
    $('.image_6').val('');
    
}

// function deletediv2(elem){
//     $('#stay_2').remove();
//     $('#stay_2_con').html('<div class="wrap"  id="stay_2"><div class="form-group up_group"> <input type="file"  name="stay_2" style="min-height:110px" id="allfiles" class="file"> <div class="input-group"> <span class="input-group-append" style="bottom:9px">'+{!! json_encode(__('web.image_stay')) !!}+' </span>    <input type="text"  class="input_ques"  id="files" disabled placeholder="'+{!! json_encode(__('web.image_stay')) !!}+'" aria-label="Upload File" aria-describedby="basic-addon1">  <div style="position: absolute;left: 0;top: 0;display: flex;align-items: center;bottom: 6px;"> <a  class="btn" style="">   <i class="fas fa-times-circle" onclick="deletediv2(this)"  style="color: #dc3545;"></i>  </a>  </div>   </div> <p style="color:#9e0404">'+{!! json_encode(__('web.required_3')) !!}+' </p></div></div>');
// }
function tohijri(elem){
    let data = $(elem).val();
    var array = data.split('-');
    let year = array[0];
    let month = array[1];
    let day = array[2];
    //alert({!! json_encode(url(getCurrentLocale().'/tohijri/')) !!}+'/'+day+','+month+','+year);
    $.ajax({
          url : {!! json_encode(url(getCurrentLocale().'/tohijri/')) !!}+'/'+day+','+month+','+year,
          type: 'GET',              
          data: 'dataform',     
          dataType: 'json',
          success:function(data)
          {
            
            document.getElementById('day').value = data.day;
            document.getElementById('month').value = data.month;
            $("#year").val(data.year);
             
               }
   
        })
}
function selectFile(elem){
       let urls = {!! json_encode(url(getCurrentLocale().'/checkfiles')) !!};
       let dataform = new FormData( $('#form')[0]);
       
      $.ajax({
          url : urls,
          type: 'POST',              
          data: dataform,   
          dataType: 'json',
          contentType: false, 
          processData: false, 
          success:function(data)
          {
              $('#limiterror').html({!! json_encode(__('web.limited')) !!});
            if(data == 'limited'){
              $('#messagelimit').html();
            $("#limitexp").modal('show');
            }
               }
               
          ,error: function (data) {
              $('#limiterror').html({!! json_encode(__('web.please_check')) !!});
              $('#messagelimit').html();
   $.each(data.responseJSON.errors, function(key,value) {
       $('#messagelimit').append('<p>'+value+'</p>');
      
     
 }); 
 
             
              $('#limitexp').modal('show');
 
}
        })
}

function tomeladi(elem){
    let day = $('#day').val();
    let month = $('#month').val();
    let year = $('#year').val();
    
     $.ajax({
          url : {!! json_encode(url(getCurrentLocale().'/tomeladi/')) !!}+'/'+day+','+month+','+year,
          type: 'GET',              
          data: 'dataform',     
          dataType: 'json',
          success:function(data)
          {
            
            $("#date").val(data);
            
             
               }
   
        })
}








function setInputFilter(textbox, inputFilter) {
  ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
    textbox.addEventListener(event, function() {
      if (inputFilter(this.value)) {
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      } else if (this.hasOwnProperty("oldValue")) {
        this.value = this.oldValue;
        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      } else {
        this.value = "";
      }
    });
  });
}


       setInputFilter(document.getElementById("id_num"), function(value) {
  return /^-?\d*$/.test(value); });
       setInputFilter(document.getElementById("phone"), function(value) {
  return /^-?\d*$/.test(value); });
       setInputFilter(document.getElementById("secondphone"), function(value) {
  return /^-?\d*$/.test(value); });
  
  
  
  
  function changename(elem){
      let myString= $(elem).val();
      if(myString.split(' ').length < 3){
           $('#modal_fail').modal('show');

              $('#message').html({!! json_encode(__('web.min_3')) !!});
      }
  }
function alphaOnly(e) {
  var unicode=e.charCode? e.charCode : e.keyCode
  if (unicode!=8){ //if the key isn't the backspace key (which we should allow)
      if (( unicode<48 || unicode>57) && (unicode < 0x0600 || unicode > 0x06FF)) //if not a number or arabic
        return true //disable key press
  }
}


  function savedata(elem){
          event.preventDefault();
           //let fileUpload = $('input[name="filing[]"]');
      
        // if (parseInt(fileUpload.get(0).files.length)>3){
         
        //  $('#modal_fail').modal('show');

        //       $('#message').html({!! json_encode(__('web.max_3')) !!});
        // }
        
        
//   $(".loader").fadeIn();
$(".loader_page").css('display','block');
        var bar = $('.progress-done');
        var percent = $('.progress-done');
         let action = $(elem).attr('action');
       
       let urls = action;
       
       let dataform = new FormData( $(elem)[0]);
        
    //  $('#form').ajaxForm({
      $.ajax({
          
          xhr: function() {
              //alert('hi');
        var xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener("progress", function(evt) {
            if (evt.lengthComputable) {
                var percentComplete = (evt.loaded / evt.total) * 100;
                var percentVal = parseInt(percentComplete) + '%';
                bar.html(percentVal)
                percent.attr('data-done',parseInt(percentComplete));
                percent.css('width',percentVal);
                // Place upload progress bar visibility code here
            }
        }, false);
        return xhr;
    },
          
          
          url : urls,
          type: 'POST',              
          data: dataform,
          contentType: false, 
          processData: false, 
        //   progress: function(event, position, total, percentComplete) {
        //       alert('hi');
        //         var percentVal = percentComplete + '%';
        //         bar.html(percentVal)
        //         percent.attr('data-done',percentComplete);
        //         percent.css('width',percentVal);
        //     },
          success:function(data)
          {
            // $(".loader").fadeOut();
$(".loader_page").fadeOut();
            $("#modal_success").modal('show');
            // window.setTimeout(function(){location.reload()},1000)
            window.location.href = {!! json_encode(url(getCurrentLocale().'/')) !!};
               }
          ,error: function (data) {
            //   $(".loader").fadeOut();
$(".loader_page").fadeOut();
              //alert(countProperties(data.responseJSON.errors) == '1');
             if(countProperties(data.responseJSON.errors)  == '1'){
                 $.each(data.responseJSON.errors, function(key,value) {
     
    if(key == 'phone_uni'){
        $('#message').html({!! json_encode(__('web.phone_req')) !!});
    }
    else if(key == 'email_uni'){
       $('#message').html({!! json_encode(__('web.email_req')) !!});
    }
    else if(key == 'id_num_uni'){
       $('#message').html({!! json_encode(__('web.id_num_req')) !!});
    }
    else if(key == 'condition'){
       $('#message').html({!! json_encode(__('web.condition_req')) !!});
    }
    else if(key == 'same'){
       $('#message').html({!! json_encode(__('web.same_req')) !!});
    }
    else{
         $('#message').html({!! json_encode(__('web.fillinputs')) !!});
    }
    



     
 }); 
                 
                 $('#modal_fail').modal('show');
             }
             else{
              $('#modal_fail').modal('show');
              $('.is-invalid').css('border-color','#9992');
              $('.is-invalid').removeClass('is-invalid');
              $('#message').html({!! json_encode(__('web.fillinputs')) !!});
   $.each(data.responseJSON.errors, function(key,value) {
       $('#message').append('<p>'+value+'</p>');
     if(key == 'files.0'){
         $('#filing').addClass('is-invalid');
     }
     $('#'+key).addClass('is-invalid');
      $('.is-invalid').css('border-color','#dc3545');
      
     
 }); 
 
             }
 
}
        })



    }
    
    function descChange(elem){
        let data = $(elem).val().length;
        $('#lengthdesc').html(data+'/500');
    }
    function countProperties(obj) {
    var count = 0;
    for(var prop in obj) {
        if(obj.hasOwnProperty(prop))
            ++count;
    }
    return count;
}
     function subscribedata(elem) {
    event.preventDefault();
   
         let action = $(elem).attr('action');
       
       let urls = action;
       
       let dataform = new FormData( $(elem)[0]);
        
     
      $.ajax({
          url : urls,
          type: 'POST',              
          data: dataform,
          contentType: false, 
          processData: false, 
          success:function(data)
          {
            
            $("#mailsuccess").modal('show');
             window.setTimeout(function(){location.reload()},1000)
               }
          ,error: function (data) {
              
 
  $("#mailerrors").modal('show');
 
}
        })


}
    function typingselect(elem){
        let id = $(elem).val();
        if(id == '0'){
            $('#descriptions').html({!! json_encode(__('web.description')) !!});
            $('#yourselfs').html({!! json_encode(__('web.yourself')) !!}+'*');
            $('#types').css('display','block'); 
            $('#health').css('display','block');
            let types = $('#type_id').val();
            let fields = $('#field_id').val();
            if(fields == '14'){
            $('#fieldesc').css('display','block');
            
            }
            else{
                $('#fieldesc').css('display','none');
                
            }
            if(types == '7'){
            $('#abitiy').css('display','block');
            
            }
            else{
                $('#abitiy').css('display','none');
                
            }
             $.ajax({
          url : {!! json_encode(url(getCurrentLocale().'/fields/')) !!},
          type: 'GET',              
          data: 'dataform',
          success:function(data)
          {
            
            $("#fields").html(data);
             
               }
   
        })
        }
        else{
            
            $('#descriptions').html({!! json_encode(__('web.description')) !!}+'*');
            $('#yourselfs').html({!! json_encode(__('web.yourself')) !!});
            $('#types').css('display','none');
            $('#fieldesc').css('display','none');
            
             $('#health').css('display','none');
             
            $('#abitiy').css('display','none');
             $.ajax({
          url : {!! json_encode(url(getCurrentLocale().'/shares/')) !!},
          type: 'GET',              
          data: 'dataform',
          success:function(data)
          {
            
            $("#fields").html(data);
             
               }
   
        })
        }
       
    }
    function selectfield(elem){
         let data = $(elem).val();
        
        if(data == 13){
            $('#fieldesc').css('display','block');
        }
        else{
            
            $('#fieldesc').css('display','none');
        }
    }
    function selecttype(elem){
        
        let data = $(elem).val();
        
        if(data == 7){
            $('#abitiy').css('display','block');
        }
        else{
            
            $('#abitiy').css('display','none');
        }
    }
    function changecountry(elem){
        let id = $(elem).val();
       
        $(".keyphone_id option[value='"+id+"']").prop('selected', true);
        $(".secondkey_id option[value='"+id+"']").prop('selected', true);
       
       
     
    //   $.ajax({
    //       url : {!! json_encode(url(getCurrentLocale().'/cities/')) !!}+'/'+id,
    //       type: 'GET',              
    //       data: 'dataform',   
         
    //       success:function(data)
    //       {
              
    //           $('#city_id').html(data);
    //         //$('#time_date').html(data.date_time+', <span >'+data.time+' <small><b>'+data.type+'</b></small></span>');
            
    //           }
          
    //     })
        
       


    }
    
    function addarea(elem){
        var num = $(elem).attr('data-id');
        
        var newrow = parseInt(num)+1; 
        $(elem).attr('data-id', newrow);
        
         $.ajax({
          url : {!! json_encode(url(getCurrentLocale().'/areas')) !!}+'/'+num,
          type : 'GET',
          data : 'nothing',
         
          success:function(data)
          {
            $('#areas').append(data);
          }
        })
    }
</script>
    
  
@endpush


<!-------------- new --------------->

@push('js')
    <script>
        $(function() {
            $("#sortableImgThumbnailPreview").sortable({
                connectWith: ".RearangeBox",


                start: function(event, ui) {
                    $(ui.item).addClass("dragElemThumbnail");
                    ui.placeholder.height(ui.item.height());

                },
                stop: function(event, ui) {
                    $(ui.item).removeClass("dragElemThumbnail");
                }
            });
            $("#sortableImgThumbnailPreview").disableSelection();
        });




       document.getElementById('files').addEventListener('change', handleFileSelect, false);

        function handleFileSelect(evt) {

            var files = evt.target.files;
            var output = document.getElementById("sortableImgThumbnailPreview");

            // Loop through the FileList and render image files as thumbnails.
            for (var i = 0, f; f = files[i]; i++) {

                // Only process image files.
                if (!f.type.match('image.*')) {
                    continue;
                }

                var reader = new FileReader();

                // Closure to capture the file information.
                reader.onload = (function(theFile) {
                    return function(e) {
                        // Render thumbnail.
                        var imgThumbnailElem = "<div class='RearangeBox imgThumbContainer'> <i class='fas fa-times-circle imgRemoveBtn' imgRemoveBtn' onclick='removeThumbnailIMG(this)'></i><div class='IMGthumbnail' ><img  src='" + e.target.result + "'" + "title='" + theFile.name + "'/></div><div class='imgName'>" + theFile.name + "</div></div>";

                        output.innerHTML = output.innerHTML + imgThumbnailElem;

                    };
                })(f);

                // Read in the image file as a data URL.
                reader.readAsDataURL(f);
            }
        }

        function removeThumbnailIMG(elm) {
            elm.parentNode.outerHTML = '';
        }
        $('#social').css('display','none');
        function socialClick(elem){
            let data = $(elem).attr('data-id');
            if($(elem).is(':checked')){
                $('#social'+data).css('display','block');
            }
            else{
                $('#social'+data).css('display','none');
            }
        }
        function pointClick(elem){
            let data = $(elem).attr('data-id');
            if($(elem).is(':checked')){
                $('#point'+data).css('display','block');
            }
            else{
                $('#point'+data).css('display','none');
            }
        }
        
        function socialType(elem){
            let data = $(elem).val();
            if(data == 'yes'){
                $('#social').css('display','block');
            }
            else{
                $('#social').css('display','none');
            }
        }
        function areaSelect(elem){
            let data = $(elem).val();
            if(data == 'some'){
                $('#areas').css('display','flex');
                $('#addarea').css('display','block');
            }
            else{
                $('#areas').css('display','none');
                $('#addarea').css('display','none');
            }
        }
        function deleteArea(elem){
            $(elem).closest('.datarow').remove();
        }
</script>
@endpush

@push('js')
<script>
    $('#files').blur(function()
    {
        if( !$(this).val() ) {
            $(this).siblings(".input-group-append").fadeOut();
        }
    });
</script>

    <script>
      $( function() {
        $( ".datepicker" ).datepicker();
      } );
  </script>
@endpush
@stop