@extends('app')
<style type="text/css">
     
	  #searchbar7{
                display: none;
            }
</style>
@section('content')
    
<div class="row">
        <div class="col-sm-6 col-sm-offset-3 text-center">
                            <script type="text/javascript">
                    
                </script>
                <div class="alert alert-danger custom-error-msg" style="display: none;">
                    <span>Name is required</span>
                </div>
            
        </div>
    </div>

<div class="row">
	<div class="col-sm-12">
		<div class="grid simple vertical">
			<div class="grid-title no-border" style="margin-top: 13px;">
                <h4> <span class="" style="font-size: 15px;">تسجيل جديد</span></h4>
                <h4><span class="bold" style="font-size: 20px;">الأطفال</span></h4>
                
            </div>
			<div class="grid-body no-border overflow-auto children-grid">
             
                <div class='control' style="margin-bottom: 10px;  width: 100%;  background-color: #fff;">
        
                    
                    <div class="pull-right markaction child-name-btn">
                        @if(Auth::user()->can('children-edit'))
                        <a href="javascript:void(0)" class="btn btn-default source" id="name">اسم</a>
                        @endif
                    </div>
                </div>
				<table class="table table-hover table-condensed display nowrap" id="datatable-example" cellspacing="0" width="100%">
					<thead>
						<tr style="background-color: ">
							<th></th>
							<th></th>
							<th></th>
							<th></th>
							<th></th>
							<th></th>
							<th></th>
							<th></th>
						</tr>
					</thead>
					<tfoot>
						<tr style="color: white;">
							<th><input type="checkbox" class="group-checkable" data-set="#datatable-example .checkboxes" /></th>
							<th>Id</th>
							<th>معرف الوالد</th>
							<th>اسم</th>
							<th>جنس</th>
							<th>الأب 1</th>
							<th>الأب 2</th>
							<th></th>
						</tr>
					</tfoot>
				</table>
			</div>
		</div>
	</div>
</div>
{!! Form::open(['method' => 'POST', 'class' => 'inline', 'id' => 'bulkaction']) !!}
<input type="hidden" value="" name="ids" id="ids"/>
{!! Form::close() !!}

<!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content" style="margin-top: 70px ">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title"></h4>
        </div>
        {!! Form::open(['id'=>'form_edit','method' => 'POST', 'route' => 'admin.children.bulkedit']) !!}
      <div class="modal-body">
         <div class="row margin-bottom">
            <div class="col-md-12 col-xs-12">
                <div class="form-group row">
                   
                    <div class="col-md-6 col-md-offset-3 col-xs-12">
                        {!! Form::text('data_field', null, ['class' => 'form-control','required'=>'true']) !!}
                        {!! Form::hidden('ids_array', null, ['class' => 'form-control', 'id' => 'ids_array']) !!}
                        {!! Form::hidden('source_name', null, ['class' => 'form-control', 'id' => 'source_name']) !!}
                    </div>
                     <label class="col-md-1 col-xs-12 control-label text-right source_label"> </label>
                </div>
            </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">أغلق</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal" id="submit_edit_form">عرض</button>
     
        </div>
        {!! Form::close() !!} 
      </div>
    </div>
  </div>

   <!-- Edit Row Modal -->
  <div class="modal fade" id="RowEditModal" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content" style="margin-top: 70px ">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">تحرير السجل</h4>
        </div>
    
        {!! Form::open(['id'=>'form_row_edit']) !!}

    <div class="modal-body">

      <input type="hidden" name="report_message" id="id_field" name="id" class="form-control" placeholder="Enter Message">

        <div class="row margin-bottom">
            <div class="col-md-12 col-xs-12">
                <div class="form-group row">
	               
	                    
	                    <div class="col-sm-6 col-sm-offset-2 col-xs-12">
	                        <select id="genderdropdown" name="gender" style="width: 100%;" class="form-control selectbox">
	                            <option value="">اضغط</option>
	                            <option value="0">ذكر</option>
	                            <option value="1">انثى</option>
	                        </select>
	                    </div>
	                    <div class="col-sm-3 col-xs-12 control-label text-left" ><label>جنس</label></div>
	               
	            </div>
            </div>
        </div>

        <div class="row margin-bottom">
            <div class="col-md-12 col-xs-12">
                <div class="form-group row">
                    <div class="col-md-6 col-md-offset-2 col-xs-12">
                        <input type="text" name="report_message" id="name_field" required name="name" class="form-control" placeholder="Enter Name">
                    </div>
                    <label class="col-md-3 col-xs-12 control-label text-left">اسم</label>
                </div>
            </div>
        </div>

        <div class="row margin-bottom">
            <div class="col-md-12 col-xs-12">
                <div class="form-group row">
                    <div class="col-md-6 col-md-offset-2 col-xs-12">
                        <input type="text" name="report_message" id="father1_field" name="father_name" class="form-control" placeholder="Enter Father 1 Name">
                    </div>
                    <label class="col-md-3 col-xs-12 control-label text-left">الأب 1</label>
                </div>
            </div>
        </div>

        <div class="row margin-bottom">
            <div class="col-md-12 col-xs-12">
                <div class="form-group row">
                    <div class="col-md-6 col-md-offset-2 col-xs-12">
                        <input type="text" name="report_message" id="father2_field" name="grand_father_name" class="form-control" placeholder="Enter Father 2 Name">
                    </div>
                    <label class="col-md-3 col-xs-12 control-label text-left">الأب 2</label>
                </div>
            </div>
        </div>


    </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">أغلق</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal" id="submit_row_edit_form">عرض</button>
     
        </div>
        {!! Form::close() !!} 
      </div>
    </div>
  </div>
@endsection
@section('page_script')
<script type="text/javascript" language="javascript" class="init">
	jQuery(document).ready(function($){
         $('.selectbox').select2({dir: "rtl"});
           $(document).on("click","#request",function(e){
            var request = $(this).data('request');

          
            var name = request.name;
            var gender = request.gender;
            var father1 = request.father_name;
            var father2 = request.grand_father_name;
            var request_id = request.id;

            $("#name_field").val(name);
            $('#genderdropdown').select2('val',gender);
            $('#father1_field').val(father1);
            $('#father2_field').val(father2);
            $('#id_field').val(request_id);
            
        });

		//Modal Form
	$( "#submit_edit_form" ).click(function() {
            $('#progressbar').show()
            $.post($('#form_edit').attr('action'), $('#form_edit').serialize() )
            .fail(function(response) {
               $('.custom-error-msg').show();
               $('#progressbar').hide();
               console.log(response);
            })
            .done(function( result ) {
            location.reload();
            $( window ).load(function() {
              $('#progressbar').hide();
            });
          });     
        });

        $('body').append($('.modal'));
        $( ".source" ).click(function() {
            var ids = $('#datatable-example tbody :checkbox:checked').map(function () {
                    return this.value;
            }).get();

            if (ids.length > 0) {
                $('#myModal').modal('show');
                var source_name = this.id;
                $(".modal-title").text($(this).text()+' تحديث');
                $(".source_label").text($(this).text());
                
                $("#ids_array").val(ids);
                $("#source_name").val(source_name);
            } else {
                showErrorMessage('Nothing Selected');
            }
            
        });

        
        $('#submit_row_edit_form').click(function(){
           
        	var gender = $('#genderdropdown') .val();
            var name = $("#name_field").val();
            var father_name = $('#father1_field').val();
            var grand_father_name = $('#father2_field').val();
            var request_id = $('#id_field').val();
            

	        $.ajax({beforeSend: function(){ 
	            $('#progressbar').show();
	                },
	                method: "GET",
	                url: "{{ URL::to('admin/children/editrow') }}",
	                data: {
	                    name:name, 
	                    gender:gender,
	                    father_name:father_name,
	                    grand_father_name:grand_father_name,
	                    request_id:request_id
	                   
	                },
                    error: function(jqXHR, textStatus, errorThrown){
                        $('.custom-error-msg').show();
                        
                         
                         console.log(jqXHR);
                         console.log(textStatus);
                         console.log(errorThrown);
                         $('#progressbar').hide();
                    }
	            })
               
             
	          .done(function( result ) {
	            location.reload();
	            $( window ).load(function() {
	              $('#progressbar').hide();
	            });
	          });
        });



        //Datatable
		 var  x = 0;
         $('#datatable-example thead th').each( function () {

       var title = $('#datatable-example thead th').eq( $(this).index() ).text();
       if(x==4)
       {
        $(this).html('<select id="GenderDropdown" name="Gender" class="form-control"><option value="">اضغط</option><option value="0">ذكر</option><option value="1">انثى</option></select>');
       }else{
        $(this).html( '<input class="searchbars" id="searchbar'+x+'" type="text"/>' );
       }
        
        x++;
         });

        var table = $('#datatable-example').DataTable({
            processing: true,
            serverSide: true,
            scrollX: true,
            "iDisplayLength": 50,
            "dom": '<"top"fpil<"clear">>rt<"bottom"pi<"clear">>',
            language: { search: "",
                         searchPlaceholder: "بحث",
                         "zeroRecords": "لا يوجد محتوى",
                         processing: "<img src='{{url('/')}}/assets/img/Webp.net-resizeimage.gif' />" },
            resizableColumns: true,
            "order": [[1, "desc"]],
            ajax: {
                "url": "{{ URL::to('admin/children/datatable') }}",
                "type": "POST"
            },
            columns: [
                {data: 'check', name: 'check'},
                {data: 'id', name: 'id'},
                {data: 'member_request_id', name: 'member_request_childrens.member_request_id'},
                {data: 'name', name: 'name'},
                {data: 'gender', name: 'gender'},
                {data: 'father_name', name: 'father_name'},
                {data: 'grand_father_name', name: 'grand_father_name'},
                {data: 'actions', name: 'actions'}

            ],
           
            "columnDefs": [
                {
                    "targets": [1],
                    "visible": false,
                    "searchable": false
                },
                
                {
                    "targets": [0, 1, 2, 3, 4, 5,6,7],
                    "orderable": false
                },
                {
                    "width": "2%", "targets": "*"
                }

            ]

        });

       $('.dataTables_scrollFoot').prependTo('.dataTables_scrollHeadInner');
         
        $('#datatable-example tfoot tr').prependTo('#datatable-example thead');
         
            // Apply the search
         table.columns().eq( 0 ).each( function ( colIdx ) {
			        $( 'input', table.column( colIdx ).header() ).on( 'keyup change', function () {
			            table
			                .column( colIdx )
			                .search( this.value )
			                .draw();
			              });
			        });
         table.columns().eq( 0 ).each( function ( colIdx ) {
            $( 'select', table.column( colIdx ).header()).on('keyup change', function () {
              table
                .column( colIdx )
                .search( this.value )
                .draw();
                } );
            });
         $('div.dataTables_length select').select2();
	});
</script>
@endsection