@extends('app')
<style type="text/css">
      #sibling_searchbar4{
                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 sibling-grid">
                <div class="control">
                    <div class="pull-right markaction sibling-name-btn">
                        @if(Auth::user()->can('sibling-edit'))
                        <a href="javascript:void(0)" class="btn btn-default source" id="name" style="margin-bottom: 2px;">اسم</a>
                        @endif
                        
                    </div>
                </div>
				<table class="table sibling-table table-hover table-condensed display nowrap" id="datatable-example" cellspacing="0" width="100%">
					<thead>
						<tr>
							<th width="1%"></th>
							<th></th>
							<th width="5%"></th>
							<th width="5%"></th>
							<th width="5%"></th>
						</tr>
					</thead>
					<tfoot>
						<tr style="color: white;">
							<th width="10%"><input type="checkbox" class="group-checkable" data-set="#datatable-example .checkboxes" /></th>
							<th>Id</th>
							<th width="10%">معرف الوالد</th>
							<th width="30%">اسم</th>
							<th width="10%"></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.sibling.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-sm-offset-3 col-xs-12">
                        {!! Form::text('data_field', null, ['class' => 'form-control','required' => '']) !!}
                        {!! 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_deit']) !!}

    <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-md-6 col-md-offset-2 col-xs-12">
                        <input type="text" name="report_message" id="name_field" 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>
      <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();
           $(document).on("click","#request",function(e){
            var request = $(this).data('request');

          
            var name = request.name;
            var request_id = request.id;

            $("#name_field").val(name);
            $('#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").on("click",function(){
        	
            var name = $("#name_field").val();
            var request_id = $('#id_field').val();
            

	        $.ajax({beforeSend: function(){ 
	            $('#progressbar').show();
	                },
	                method: "GET",
	                url: "{{ URL::to('admin/sibling/editrow') }}",
	                data: {
	                    name: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();
        $(this).html( '<input class="searchbars" id="sibling_searchbar'+x+'" type="text"/>' );
        x++;
         });

        var table = $('#datatable-example').DataTable({
            processing: true,
            serverSide: true,
            resizableColumns: 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' />" },
            "order": [[1, "desc"]],
            ajax: {
                "url": "{{ URL::to('admin/sibling/datatable') }}",
                "type": "POST"
            },
            columns: [
                {data: 'check', name: 'check'},
                {data: 'id', name: 'member_request_siblings.id'},
                {data: 'member_request_id', name: 'member_request_siblings.member_request_id'},
                {data: 'name', name: 'name'},
                {data: 'actions', name: 'actions'}

            ],
           
            "columnDefs": [
                {
                    "targets": [1],
                    "visible": false,
                    "searchable": false
                },
                
                {
                    "targets": [0, 1, 2, 3, 4],
                    "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