@extends('layouts.master')
@section('content')
<div class="row">

    <div class="col-md-12 p-3">
        <div class="card card-outline card-primary">
            <div class="card-header">
                Registered Members
            </div>

            <div class="card-body">
                <table class="table w-100" id="members_table">
                    <thead class="bg-gradient-light">
                        <th>S/N</th>
                        <th>Name</th>
                        <th>TPHA #</th>
                        <th>Joined</th>
                        <th>Phone</th>
                        <th>Status</th>
                        <th>Action</th>
                    </thead>

                    <tbody>
                        @foreach ($members as $item)
                        <tr>
                            <td>{{$loop->index+1}}</td>
                            <td>{{$item->title}} {{$item->first_name}} {{$item->middle_name}} {{$item->last_name}}</td>
                            @if($item->membership_number == "")
                            <td>--</td>
                            @else
                            <td>{{$item->membership_number}}</td>
                            @endif
                            @if($item->joined == "")
                            <td>--</td>
                            @else
                            <td>{{$item->joined}}</td>
                            @endif
                            <td>{{$item->phone}}</td>
                            @if($item->status == "unchecked")
                            <td><i class="fas fa-fw fa-circle text-warning text-sm"></i></td>
                            @else
                            <td><i class="fas fa-fw fa-circle text-primary text-sm"></i></td>
                            @endif
                            
                            <td>
                                <button class="edit btn btn-sm bg-gradient-primary ml-1" id="{{$item->id}}"><i
                                        class="fas fa-fw fa-edit"></i></button>
                                <button class="view btn btn-sm bg-gradient-light shadow ml-1" id="{{$item->id}}"><i
                                        class="fas fa-fw fa-eye"></i></button>
                                @if($item->status == "unchecked")
                                <button class="approve btn btn-sm bg-gradient-warning ml-1" id="{{$item->id}}"><i
                                        class="fas fa-fw fa-check-circle"></i></button>
                                @else
                                <button class="disabled btn btn-sm bg-gradient-warning ml-1" id="{{$item->id}}"><i
                                    class="fas fa-fw fa-check-circle"></i></button>
                                @endif
                                <button class="delete btn btn-sm bg-gradient-danger ml-1" id="{{$item->id}}"><i
                                        class="fas fa-fw fa-trash"></i></button>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>


<!-- Modal -->
<div class="modal fade" id="membersModal" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header bg-gradient-primary text-white">
                <h5 class="modal-title">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true"><i class="fas fa-fw fa-times-circle text-white"></i></span>
                    </button>
            </div>
            <div class="modal-body">
                
                <form id="membersForm" action="">
                    @csrf

                    <div class="form-group">
                        <div class="row">
                            <div class="col-md-3">
                                <label for="">Title: *</label>
                                <select name="title" class="form-control" id="title" required>
                                    <option value="">Select Title</option>
                                    <option value="Prof.">Prof.</option>
                                    <option value="Dr.">Dr.</option>
                                    <option value="Mr.">Mr.</option>
                                    <option value="Mrs.">Mrs.</option>
                                    <option value="Ms.">Ms.</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label for="">First Name: *</label>
                                <input type="text" class="form-control" name="first_name" id="first_name">
                            </div>
                            <div class="col-md-3">
                                <label for="">Middle Name:</label>
                                <input type="text" class="form-control" name="middle_name" id="middle_name">
                            </div>
                            <div class="col-md-3">
                                <label for="">Last Name: *</label>
                                <input type="text" class="form-control" name="last_name" id="last_name">
                            </div>
                        </div>
                    </div>

                        <div class="form-group">
                            <div class="row">
                                <div class="col-md-3">
                                    <label for="">Gender: *</label>
                                    <select name="gender" id="gender" class="form-control" required>
                                        <option value="">Select Gender</option>
                                        <option value="male">Male</option>
                                        <option value="female">Female</option>
                                    </select>
                                </div>

                                <div class="col-md-3">
                                    <label for="">Phone: *</label>
                                    <input type="text" name="telephone" id="telephone" class="form-control" required>
                                </div>

                                <div class="col-md-3">
                                    <label for="">Fax Number:</label>
                                    <input type="text" name="fax" id="fax" class="form-control">
                                </div>

                                <div class="col-md-3">
                                    <label for="">Email: *</label>
                                    <input type="text" name="email" id="email" class="form-control" required>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="row">
                                <div class="col-md-4">
                                    <label for="">Town: *</label>
                                    <input type="text" class="form-control" name="town" id="town" required>
                                </div>

                                <div class="col-md-4">
                                    <label for="">Qualification: *</label>
                                    <input type="text" class="form-control" name="qualification" id="qualification" required>
                                </div>

                                <div class="col-md-4">
                                    <label for="">Occupation/Profession:</label>
                                    <input type="text" class="form-control" name="occupation" id="occupation">
                                </div>

                            </div>
                        </div>

                        <div class="form-group">
                            <div class="row">
                                <div class="col-md-4">
                                    <label for="">TPHA #: *</label>
                                    <input type="text" class="form-control" name="membership_number" id="membership_number">
                                </div>

                                <div class="col-md-4">
                                    <label for="">Joined Date: *</label>
                                    <input type="text" class="form-control" name="joined" id="joined" required>
                                </div>
                                <div class="col-md-4">
                                    <label for="">Status:</label>
                                    <input type="text" class="form-control" name="status" id="status">
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="row">
                                <div class="col-md-4">
                                    <label for="">Permanent Address: *</label>
                                    <textarea name="address" id="address" class="form-control" rows="1" required></textarea>
                                </div>
                                <div class="col-md-4">
                                    <label for="">Working Experience:</label>
                                    <textarea name="experience" id="experience" class="form-control" rows="1"></textarea>
                                </div>
                                <div class="col-md-4">
                                    <label for="">Current Research/Work:</label>
                                    <textarea name="research" id="research" class="form-control" rows="1"></textarea>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="row">
                                <div class="col-md-6">
                                    <label for="">Public Health Interest:</label>
                                    <textarea name="interest" id="interest" class="form-control" rows="1"></textarea>
                                </div>

                                <div class="col-md-6">
                                    <label for="">Other Membership:</label>
                                    <textarea name="membership" id="membership" class="form-control" rows="1"></textarea>
                                </div>
                            </div>
                        </div>

                        <div class="loader text-center mb-2" style='display: none;'>
                            <img src="{{asset('images/loader.gif')}}" width="100px" height="15px">
                        </div>
                        
                        <div class="modal-footer">
                            <button type="button" class="btn bg-gradient-warning" data-dismiss="modal">Close &nbsp;<i class="fas fa-fw fa-times-circle"></i></button>
                            <input type="hidden" name="hidden_data" id="hidden_data" value="">
                            <button type="submit" class="btn bg-gradient-primary">Update Details &nbsp;<i class="fas fa-fw fa-save"></i></button>
                        </div>
                </form>
            </div>
            
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="membersViewModal" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header bg-gradient-primary text-white">
                <h5 class="modal-title">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true"><i class="fas fa-fw fa-times-circle text-white"></i></span>
                    </button>
            </div>
            <div class="modal-body">
                
                <form id="membersForm" action="">
                    <div class="form-group">
                        <div class="row">
                            <div class="col-md-3">
                                <label for="">Title: *</label>
                                <input type="text" id="title_i" name="title" readonly class="form-control">
                            </div>
                            <div class="col-md-3">
                                <label for="">First Name: *</label>
                                <input type="text" class="form-control" readonly name="first_name" id="first_name_i">
                            </div>
                            <div class="col-md-3">
                                <label for="">Middle Name:</label>
                                <input type="text" class="form-control" readonly name="middle_name" id="middle_name_i">
                            </div>
                            <div class="col-md-3">
                                <label for="">Last Name: *</label>
                                <input type="text" class="form-control" readonly name="last_name" id="last_name_i">
                            </div>
                        </div>
                    </div>

                        <div class="form-group">
                            <div class="row">
                                <div class="col-md-3">
                                    <label for="">Gender: *</label>
                                    <input type="text" readonly class="form-control" id="gender_i">
                                </div>

                                <div class="col-md-3">
                                    <label for="">Phone: *</label>
                                    <input type="text" name="telephone" readonly id="telephone_i" class="form-control" required>
                                </div>

                                <div class="col-md-3">
                                    <label for="">Fax Number:</label>
                                    <input type="text" name="fax" id="fax_i" readonly class="form-control">
                                </div>

                                <div class="col-md-3">
                                    <label for="">Email: *</label>
                                    <input type="text" name="email" id="email_i" readonly class="form-control" required>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="row">
                                <div class="col-md-3">
                                    <label for="">Town: *</label>
                                    <input type="text" class="form-control" readonly name="town" id="town_i" required>
                                </div>

                                <div class="col-md-3">
                                    <label for="">Qualification: *</label>
                                    <input type="text" class="form-control" readonly name="qualification" id="qualification_i" required>
                                </div>

                                <div class="col-md-3">
                                    <label for="">Occupation/Profession:</label>
                                    <input type="text" class="form-control" readonly name="occupation" id="occupation_i">
                                </div>

                                <div class="col-md-3">
                                    <label for="">TPHA #: *</label>
                                    <input type="text" class="form-control" readonly name="membership_number" id="membership_number_i">
                                </div>

                            </div>
                        </div>

                        <div class="form-group">
                            <div class="row">
                                <div class="col-md-4">
                                    <label for="">Permanent Address: *</label>
                                    <textarea name="address" id="address_i" readonly class="form-control" rows="1" required></textarea>
                                </div>
                                <div class="col-md-4">
                                    <label for="">Working Experience:</label>
                                    <textarea name="experience" id="experience_i" readonly class="form-control" rows="1"></textarea>
                                </div>
                                <div class="col-md-4">
                                    <label for="">Current Research/Work:</label>
                                    <textarea name="research" id="research_i" readonly class="form-control" rows="1"></textarea>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="row">
                                <div class="col-md-6">
                                    <label for="">Public Health Interest:</label>
                                    <textarea name="interest" id="interest_i" readonly class="form-control" rows="1"></textarea>
                                </div>

                                <div class="col-md-6">
                                    <label for="">Other Membership:</label>
                                    <textarea name="membership" id="membership_i" readonly class="form-control" rows="1"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn bg-gradient-warning" data-dismiss="modal">Close &nbsp;<i class="fas fa-fw fa-times-circle"></i></button>
                        </div>
                </form>
            </div>
            
        </div>
    </div>
</div>


<!-- Modal -->
<div class="modal fade" id="approveModal" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header bg-gradient-primary">
                <h5 class="modal-title">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true"><i class="fas fa-fw fa-times-circle text-white"></i></span>
                    </button>
            </div>
            <div class="modal-body">
                <form action="" id="approveForm">
                    @csrf

                    <div class="form-group">
                        <label for="">Membership Number:</label>
                        <input type="text" class="form-control" name="membership_number" placeholder="Enter TPHA Membeship Number" id="member_number" required>
                    </div>

                    <div class="form-group">
                        <label for="">Joined Year:</label>
                        <input type="number" min=1980 class="form-control" name="joined" placeholder="Enter Member Joined Year" id="member_number" required>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn bg-gradient-warning" data-dismiss="modal">Close <i class="fas fa-fw fa-times-circle"></i></button>
                        <input type="hidden" name="approve_data" id="approve_data">
                        <button type="submit" class="btn bg-gradient-primary">Approve Now<i class="fas fa-fw fa-check-circle"></i></button>
                    </div>
                </form>
            </div>
            
        </div>
    </div>
</div>

<script>
    $("document").ready(function () {

        //datatable
        $('#members_table').DataTable({
            responsive: true,
            processing: true,
            serverSide: false,
            stateSave: true,
        })

        //displaying modal for editing 
        $(document).on('click','.edit',function(event){
            event.preventDefault();

            var id = $(this).attr('id');

            $.ajax({
                url: "/member_registration/" + id + "/edit",
                success:function(data){
                    $('#title').val(data.result.title);
                    $('.modal-title').text('Edit Member Details');
                    $('#first_name').val(data.result.first_name);
                    $('#middle_name').val(data.result.middle_name);
                    $('#last_name').val(data.result.last_name);
                    $('#gender').val(data.result.gender);
                    $('#email').val(data.result.email);
                    $('#telephone').val(data.result.phone);
                    $('#fax').val(data.result.fax);
                    $('#town').val(data.result.town);
                    $('#occupation').val(data.result.occupation);
                    $('#qualification').val(data.result.qualification);
                    $('#address').val(data.result.address);
                    $('#experience').val(data.result.experience);
                    $('#research').val(data.result.research);
                    $('#membership').val(data.result.membership);
                    $('#membership_number').val(data.result.membership_number);
                    $('#interest').val(data.result.interest);
                    $('#hidden_data').val(id);
                    $('.loader').hide();
                    $('#joined').val(data.result.joined);
                    $('#status').val(data.result.status);
                    $('#membersModal').modal('show');
                }
            })
        })

        //approving
        $(document).on('click','.approve', function(event){
            var approve_id = $(this).attr('id');
            $('.modal-title').text('Approve Member Registration');
            $('#approveForm')[0].reset();
            $('#approveModal').modal('show');
            $('#approve_data').val(approve_id);
        });

        $(document).on('click','.view',function(event){
            event.preventDefault();

            var id = $(this).attr('id');

            $.ajax({
                url: "/member_registration/" + id + "/edit",
                success:function(data){
                    $('#title_i').val(data.result.title);
                    $('.modal-title').text(data.result.membership_number +' Details');
                    $('#first_name_i').val(data.result.first_name);
                    $('#middle_name_i').val(data.result.middle_name);
                    $('#last_name_i').val(data.result.last_name);
                    $('#gender_i').val(data.result.gender);
                    $('#email_i').val(data.result.email);
                    $('#telephone_i').val(data.result.phone);
                    $('#fax_i').val(data.result.fax);
                    $('#town_i').val(data.result.town);
                    $('#occupation_i').val(data.result.occupation);
                    $('#qualification_i').val(data.result.qualification);
                    $('#address_i').val(data.result.address);
                    $('#experience_i').val(data.result.experience);
                    $('#research_i').val(data.result.research);
                    $('#membership_i').val(data.result.membership);
                    $('#membership_number_i').val(data.result.membership_number);
                    $('#interest_i').val(data.result.interest);
                    $('.loader').hide();
                    $('#membersViewModal').modal('show');
                }
            })
        })

        //submitting data
        $('#membersForm').on('submit',function(event){
            event.preventDefault();

            var data_url = "{{route('member_registration.update')}}";

            $.ajax({
                url: data_url,
                method: "POST",
                dataType: "JSON",
                data: $(this).serialize(),

                beforeSend: function(){
                    // Show image container
                    $(".loader").show();
                    },

                success:function(data){
                    //success
                    if(data.success){
                        $('#membersModal').modal('hide');
                        var result = data.success;
                        
                        Swal.fire({
                            text: result,
                            icon: "success",
                            title: "Notification",
                            timer: 3000,
                            showConfirmButton: false,
                            showCancelButton: false,
                        })

                         //refreshing page
                         setTimeout(function () {
                            window.location = "{{url('member_registration')}}";
                        }, 1000);
                    }

                    //errors
                    if(data.errors){

                        var result = data.errors;

                        Swal.fire({
                            text: result,
                            title: "Notification",
                            icon: "warning",
                            timer: 3000,
                            showConfirmButton: false,
                            showCancelButton: false,
                        })

                    }
                }
            })
        })


          //approving membership 
          $('#approveForm').on('submit',function(event){
            event.preventDefault();

            var data_url = "{{route('member_registration.approve')}}";

            $.ajax({
                url: data_url,
                method: "POST",
                dataType: "JSON",
                data: $(this).serialize(),
                success:function(data){
                    //success
                    if(data.success){
                        $('#approveModal').modal('hide');
                        var result = data.success;
                        
                        Swal.fire({
                            text: result,
                            icon: "success",
                            title: "Notification",
                            timer: 3000,
                            showConfirmButton: false,
                            showCancelButton: false,
                        })

                         //refreshing page
                         setTimeout(function () {
                            window.location = "{{url('member_registration')}}";
                        }, 1000);
                    }

                    //errors
                    if(data.errors){

                        var result = data.errors;

                        Swal.fire({
                            text: result,
                            title: "Notification",
                            icon: "warning",
                            timer: 3000,
                            showConfirmButton: false,
                            showCancelButton: false,
                        })

                    }
                }
            })
        })

        //approve
        // $(document).on('click', '.approve', function (event) {
        //         event.preventDefault();
        //         var approve_id = $(this).attr('id');

        //         Swal.fire({
        //             title: "Are you sure?",
        //             text: "Member Registration Will be Approved!",
        //             icon: 'warning',
        //             type: 'warning',
        //             showCancelButton: true,
        //             confirmButtonText: 'Yes, approve!',
        //             cancelButtonText: "No, Don't"

        //         }).then((approve) => {
        //             if (approve.value) {

        //                 $.ajax({
        //                     url: "/member_registration/approve/" + approve_id,
        //                     success: function (data) {

        //                         //alerting
        //                         if(data.success){
        //                                 var result = data.success;
        //                                 Swal.fire({
        //                                 title: 'Approved!',
        //                                 text: result,
        //                                 icon: 'success',
        //                                 showCancelButton: false,
        //                                 showConfirmButton: false,
        //                                 timer: 2000,
        //                             });

        //                              //refreshing page
        //                             setTimeout(function () {
        //                                 window.location = "{{url('member_registration')}}";
        //                             }, 1000);
        //                         }

        //                         if(data.errors){
        //                             var result = data.success;
        //                                 Swal.fire({
        //                                 title: 'Info!',
        //                                 text: result,
        //                                 icon: 'warning',
        //                                 showCancelButton: false,
        //                                 showConfirmButton: false,
        //                                 timer: 2000,
        //                             }); 
        //                         }
    
        //                     }

        //                 });

        //             } else if (result.dismiss === Swal.DismissReason.cancel) {
        //                 Swal.fire({
        //                     title: 'Information!',
        //                     text: 'Member Registration not Approved.',
        //                     type: 'info',
        //                     icon: 'info',
        //                     timer: 2000,
        //                     showCancelButton: false,
        //                     showConfirmButton: false,
        //                 })
        //             }
        //         })

        //     });

    //deletion
    $(document).on('click', '.delete', function (event) {
                event.preventDefault();
                var delete_id = $(this).attr('id');

                Swal.fire({
                    title: "Are you sure?",
                    text: "Member will be Deleted",
                    icon: 'warning',
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, delete!',
                    cancelButtonText: 'No, keep it'

                }).then((result) => {
                    if (result.value) {

                        $.ajax({
                            url: "/member_registration/destroy/" + delete_id,
                            success: function (data) {

                                if(data.success){
                                     //alerting
                                     var result =data.success;
                                    Swal.fire({
                                        title: 'Deleted!',
                                        text: result,
                                        icon: 'success',
                                        showCancelButton: false,
                                        showConfirmButton: false,
                                        timer: 2000,
                                    });

                                     //refreshing page
                                    setTimeout(function () {
                                        window.location = "{{url('member_registration')}}";
                                    }, 500);
                                }

                                if(data.errors){

                                    var result = data.errors;
                                    Swal.fire({
                                        title: 'Notification!',
                                        text: result,
                                        icon: 'warning',
                                        showCancelButton: false,
                                        showConfirmButton: false,
                                        timer: 2000,
                                    });
                                }
                            }

                        });

                    } else if (result.dismiss === Swal.DismissReason.cancel) {
                        Swal.fire({
                            title: 'Information!',
                            text: 'Record is Safe.',
                            icon: 'info',
                            timer: 2000,
                            showCancelButton: false,
                            showConfirmButton: false,
                        })
                    }
                })

            });
    })
</script>

@endsection