@extends('layouts.master')

@section('page-content')
    <div class="title-bar">
        <h1 class="title-bar-title">
            <span class="d-ib">All Region</span>
        </h1>
    </div>
    <div class="row gutter-xs">
        @if (session()->has('success'))
            <div class="alert alert-success alert-dismissible">
                <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                <strong>Success!</strong> {{ Session::get('success') }}
            </div>
        @endif
        @if (session()->has('Failed'))
            <div class="alert alert-danger alert-dismissible">
                <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                <strong>Failed!</strong> Region not Updated!
            </div>
        @endif
        <div class="col-xs-12">
            <div class="card">
                <div class="card-header bg-primary">
                    <div class="card-actions">
                        <button type="button" class="card-action card-toggler" title="Collapse"></button>
                    </div>
                    <strong>Regions List</strong>
                     <strong><a href="{{url('region/create')}}" class="btn btn-md btn-primary pull-right"><i class="icon icon-plus"></i> Add Region</a></strong>
                </div>
                <div class="card-body">
                    <table class="table table-bordered" id="category_table">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Name</th>
                                <th>No of Members</th>
                                <th>Admin Name</th>
                                <th>Phone</th>
                                <th>Email</th>
                                <th>Establishment Date</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
</div>
@endsection


@push('modals')
    <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">List of Members</h4>
                </div>
                <div class="modal-body">

                        {{-- <select id="member" class="form-control select">

                        </select>
                        <br>
                        <div class="col-sm-offset-3 col-sm-9 ">
                            <button class="btn btn-outline-primary pull-right" id="add_member">
                                <i class="icon icon-paper-plane"></i> Add member
                            </button>
                        </div>

                    <hr> --}}

                    <table id="member_list" class="table  table-condensed table-nowrap adataTable" cellspacing="0" width="100%">
                        <thead>
                            <tr>
                                <th style="width:40%">Members</th>
                                <th style="width:20%">Pincode</th>
                                <th style="width:20%">Contact</th>
                                <th style="width:20%">Lm Code</th>
                                {{-- <th>Action</th> --}}
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>


                    </div>

                </div>

            </div>
        </div>
    @endpush

@push('page-script')
<script type="text/javascript" src="https://cdn.jsdelivr.net/g/mark.js(jquery.mark.min.js)"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.13/features/mark.js/datatables.mark.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-sweetalert/1.0.1/sweetalert.min.js"></script>



    <script>
    let table;
    $('#category_table').DataTable().clear().draw();
    table = $('#category_table').DataTable({
        "destroy": true,
        'language':{
            "loadingRecords": "&nbsp;",
            "processing": "Loading Regions...",
            "zeroRecords": " "
        },
        'mark':true,
        "ajax": {
            "url" : "{{route('get_regions_all')}}",
            "type" : "POST",
            "data" : function(d){
            },
        },
        "processing": true,
        "columnDefs": [{
            "searchable": false,
            "orderable": false,
            "targets": [0]
        }],
         dom: 'Bfrtip',
       // buttons: [
       //     'copyHtml5','excelHtml5','csvHtml5','pdfHtml5','print'
       // ],

        buttons: [
                {
                    extend: 'csvHtml5',
                    title : 'All Region',
                    exportOptions: {
                        columns: [ 0,1,2,3,4],
                    }
                },
               
            ],
    });
    table.on( 'order.dt search.dt', function () {
        table.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
            cell.innerHTML = i+1;
        });
    }).draw();

    var id = "";

    $(document).on('click', '.members', function(){

        var region_id = $(this).attr('data');

        $('#member_list').DataTable().clear().draw();
        $.ajax({
                 url:  '/get_member_by_region/'+ region_id,
                 type:'get',
                 data:{region_id:region_id,_token:'{{ csrf_token() }}'},
                 cache: false,
                 success: function(oResults){
                    // var data = JSON.parse(data);
                    // var newData = JSON.stringify(data);

                    // alert(newData);
                 
                 var aDemoItems  = oResults.lDemographicItems; //
    var jsonString = JSON.stringify(aDemoItems  ) //for testing
      oTblReport= $('#member_list').DataTable().clear().draw();
   //Load  datatable
 
    oTblReport.DataTable ({
        "data" : jsonString,
        "columns" : [
            { "data" : "no" },
            { "data" : "fullname" },
            { "data" : "contact" },
            { "data" : "membercode" }
          
        ]
    });

                // var member_id = $.map(data.members, function(el) { return el; });
                // console.log(member_id);
                    // alert("member added successfully");
                     // for(var i=0; i<data.members_array.length;i++ ){
                     //    $('#member_list').DataTable().row.add([
                     //            data.members_array[i],
                     //            data.members_pincode[i],
                     //            data.contact[i],
                     //            data.lm_code[i]
                     //            // data.pincode
                     //        ]).draw();
                     //  }


                }
       });
        // $.each(data.members_array, function (key, value) {
        //
        //     $('#member_list').DataTable().row.add([
        //         value
        //         // data.pincode
        //     ]).draw();
        //
        // });


        $('#myModal').modal('show');

    });

    $(document).on('click', '.remove_members', function(){
        var member_id = $(this).attr('data-id');

        swal({
            title: "Are you sure?",
            text: "Do you want to remove this member",
            icon: "warning",
            buttons: true,
            dangerMode: true,
        })
        .then((willDelete) => {
            if (willDelete) {

                $.ajax({
                                 url: "{{ route('remove_member_from_region') }}",
                                 method: "POST",
                                 data: {
                                     'member_id' : member_id,
                                     'region_id' : id
                                   },
                                 cache: false,
                                 success: function(html){

                                    alert("member removed successfully");

                                    location.reload();

                                }
                       });
            } else {
                swal("Your imaginary file is safe!");
            }
        });

    });

    $(document).on('click', '#add_member', function(){

        $.ajax({
                         url: "{{ route('add_member_to_region') }}",
                         method: "POST",
                         data: {
                             'member_id' : $('#member').val(),
                             'region_id' : id
                           },
                         cache: false,
                         success: function(html){

                            alert("member added successfully");

                            location.reload();

                        }
               });

    });

    $(document).on('click', '.delete', function(){
        let id = $(this).attr('data-id');
        swal({
            title: "Are you sure?",
            text: "Once deleted, you will not be able to recover this imaginary file!",
            icon: "warning",
            buttons: true,
            dangerMode: true,
        })
        .then((willDelete) => {
            if (willDelete) {
                $.ajax({
                    url:'/region/'+ id,
                    type:'post',
                    data:{_method:'delete',_token:'{{ csrf_token() }}'},
                    success : function(response) {
                        swal("Poof! Your imaginary file has been deleted!", {
                            icon: "success",
                        });
                        $( ".dataTable" ).load( "/region .dataTable" );
                    }
                })
            } else {
                swal("Your imaginary file is safe!");
            }
        });
    });


</script>
@endpush