@extends('app')

@section('content')
<link rel="stylesheet" type="text/css" href="{{asset('assets/plugins/jstree/dist/themes/default/style.min.css')}}">
@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
<div class="grid simple vertical familytree-view">
    <div class="grid-body no-border overflow-auto" style="min-height: 200px;">
            
        <div id="filters_container" style="padding: 15px 10px 5px;">
            <form id="tree_filters">
              <div class="row tree_view_filters">
                
                <div class="input-fields m-r-15">
                  <input class="" type="search" placeholder="الرقم" id="search_id" name="id" />
                
                  <input class="" type="search" placeholder="الهوية" id="search_nodeID" name="nodeID" />
                
                
                  <input class="" type="search" placeholder="الاسم" id="search_name" name="name" />
                  <input class="" type="search" placeholder="الاب" id="search_father_name" name="father_name" />
                
                
                  <input class="" type="search" placeholder="الجد ١" id="search_grand_father_name" name="grand_father_name" />
                
                  <input class="" type="search" placeholder="الجد ٢" id="search_g_grand_father_name" name="g_grand_father_name" />
                  <input class="" type="search" placeholder="الجد ٣" id="search_next_g_grand_father_one" name="next_g_grand_father_one" />
                </div>
                <div class="text-right col-mdx " style="display: inline-block; ">
                  <button type="submit" class="btn btn-primary">بحث</button>
                  <a href="javascript:void(0);" class="btn btn-default" id="clear_tree_search">مسح</a>

                  <a href="{{ route('admin.familytree.csvdownload') }}" onclick="$('#progressbar').show();setTimeout(function() {$('#progressbar').hide();}, 20000);" class="btn btn-info">تنزيل ملف CSV</a>

                  <a href="{{ route('admin.familytree.exceldownload') }}" onclick="$('#progressbar').show();setTimeout(function() {$('#progressbar').hide();}, 20000);" class="btn btn-info">تنزيل ملف Excel</a>
                  
                </div>
              </div>
            </form>
            <div id="search_results_container" class="m-t-10">
                <div class="row">
                  <div class="col-md-6">
                    <a href="javascript:void(0)" id="next_search">التالي</a> | 
                    <a href="javascript:void(0)" id="prev_search" class="disabled-link">سابق</a>
                  </div>
                  <div class="col-md-6">
                    <!-- <span id="search_results">0</span> العقد مطابقة يتم العثور على - -->
                    <span id="search_results"></span>
                    <span class="selected_node_name"></span> 
                  </div>
                </div>
            </div>

            <hr class="m-0 m-t-10" />
        </div>
        <div style="position: fixed; left: 40px;display: none;" class="tree-legend"><img src="{{asset('assets/cpanel/images/tree-legend.png')}}" style="width: 150px;" /></div>
        <div id="family_tree_element_top"></div>
        <div id="family_tree_element"></div>
    </div>
</div>
@include('admin.familytree.shared.tree_actions')
@endsection

@include('admin.familytree.shared.tree_script')