@extends('app')
@section('content')
<link href="{{ asset('assets/plugins/jquery-notifications/css/messenger.css')}}" rel="stylesheet" type="text/css" media="screen"/>
<link href="{{ asset('assets/plugins/jquery-notifications/css/messenger-theme-flat.css')}}" rel="stylesheet" type="text/css" media="screen"/>
@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="alert alert-error">
    <button data-dismiss="alert" class="close"></button>
    @foreach($errors->all() as $error)
    <p>{{ $error }}</p>
    @endforeach
</div>
@endif

<br>
<div class="grid simple">
    <div class="grid-body no-border"><br>
        <div class='row control' style="margin-bottom: 10px; margin-top: 10px;  background-color: #fff;">
                <div class="col-sm-5 col-xs-12">
                   <div class="pull-right markaction">
                        @if(Auth::user()->can('volunteers-destroy'))
                            <a id="del" href="javascript:void(0)" class="btn btn-danger pull-right" data-url="{{ URL::to('admin/volunteers/bulkdelete') }}">حذف</a>
                        @endif
                   </div>
               </div>
               <div class="col-sm-2 col-xs-12 c-page-title">
                   <span>فريق عمل التطبيق</span>
                </div>

               <div class="col-sm-5 col-xs-12">
                    @if(Auth::user()->can('volunteers-create'))
                    <a href="javascript:void(0);" class="btn btn-primary add_volunteer_btn pull-left">إضافة عضو</a>
                    @endif
               </div>

        </div>                    
            
        <table class="table table-hover" id="datatable-example" >
            <thead>
                <tr>
                    <th><input type="checkbox" class="group-checkable" data-set="#datatable-example .checkboxes" /></th>
                    <th>الرقم الشخصي</th>
                    <th>البريد الإلكتروني</th>
                    <th>المهمات</th>
                    <th></th>
                </tr>
            </thead>
        </table>
    </div>
</div>
    
{!! Form::open([
'method' => 'POST',
'class' => 'inline',
'id'=> 'bulkaction'
]) !!}
<input type="hidden" value="" name="ids" id="ids" />
{!! Form::close() !!} 

<!-- Volunteer Popup -->
<div id="volunteerModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            
           
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
@endsection
@section('page_script')
<script type="text/javascript" language="javascript" class="init">

    jQuery(document).ready(function ($) {
        // Get settings form
        $(document).on('click','.add_volunteer_btn',function(e){
           getSettingsForm(-1);
        });
        $(document).on('click','.edit_volunteer_btn',function(e){
            var id = $(this).data('id');
            getSettingsForm(id);
        });

        // Datatables
        $('#datatable-example').DataTable({
            processing: true,
            serverSide: true,
            "iDisplayLength": 50,
            "order": [[1, "desc"]],
            language: { search: "",
                         searchPlaceholder: "بحث",
                         "zeroRecords": "لا يوجد محتوى",
                         processing: "<img src='{{url('/')}}/assets/img/Webp.net-resizeimage.gif' />" },
            ajax: {
                "url": "{{ URL::to('admin/volunteers/datatable') }}",
                "type": "POST"
            },
            columns: [
                {data: 'check', name: 'check'},
                {data: 'id', name: 'id'},
                {data: 'email', name: 'email'},
                {data: 'settings', name: 'settings'},
                
                {data: 'actions', name: 'actions'}
            ],
            "columnDefs": [
                {
                    "targets": [1],
                    "visible": false,
                    "searchable": false
                },
                {
                    "targets": [0,1,4],
                    "searchable": false
                },
                {
                    "targets": [0, 1, 2, 3,4],
                    "orderable": false
                }
            ]
        });

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



        $('#datatable-example input').click(function () {
            $(this).parent().parent().parent().toggleClass('row_selected');
        });


        $(".select2-wrapper").select2({minimumResultsForSearch: -1});

    });

    function getSettingsForm(id){
        $('#progressbar').show();
        $.get('/admin/volunteers/'+id,{},function(response){
            $('#volunteerModal .modal-content').html(response);
            $('#volunteerModal').modal('show');
            $('#progressbar').hide();
        });
    }
</script>
@endsection