@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">
                Members Payments
            </div>

            <div class="card-body">
                <table class="table w-100 text-sm table-sm table-striped" id="payment_table">
                    <thead class="bg-gradient-light">
                        <th>S/N</th>
                        <th>Image</th>
                        <th>Name</th>
                        <th>TPHA #</th>
                        <th>Phone</th>
                        <th>Method</th>
                        <th>Reference</th>
                        <th>Pay.Date</th>
                        <th>Status</th>
                        <th>Action</th>
                    </thead>

                    <tbody>
                        @foreach ($payments as $item)
                        <tr>
                            <td>{{$loop->index+1}}</td>
                            
                            @if($item->image_attachment == "")
                            <td>--</td>
                            @else
                            <td><a href="{{url('/uploads/payments/'.$item->image_attachment)}}" target="_blank"><img src="{{url('/uploads/payments/'.$item->image_attachment)}}" class="img-fluid" width="40px"></a></td>
                            @endif
                           
                            @if(($item->first_name || $item->last_name) == "")
                            <td>--</td>
                            @else
                            <td>{{$item->title}} {{$item->first_name}} {{$item->middle_name}} {{$item->last_name}}</td>
                            @endif

                            @if($item->membership_number == "")
                            <td>--</td>
                            @else
                            <td>{{$item->membership_number}}</td>
                            @endif

                            @if($item->phone == "")
                            <td>--</td>
                            @else
                            <td>{{$item->phone}}</td>
                            @endif

                            <td>{{$item->payment_method}}</td>
                            <td>{{$item->reference}}</td>
                            <td>{{Carbon\Carbon::parse($item->payment_date)->format('d-m-Y')}}</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-xs bg-gradient-primary" id="{{$item->id}}"><i
                                        class="fas fa-fw fa-edit"></i></button>&nbsp;&nbsp;
                                <button class="view btn btn-xs bg-gradient-light shadow" id="{{$item->id}}"><i
                                        class="fas fa-fw fa-eye"></i></button>&nbsp;&nbsp;
                                @if($item->status == "unchecked")
                                <button class="approve btn btn-xs bg-gradient-warning text-sm" id="{{$item->id}}"><i
                                        class="fas fa-fw fa-check-circle text-sm"></i></button>&nbsp;&nbsp;
                                @else
                                <button class="disabled btn btn-xs bg-gradient-warning" id="{{$item->id}}"><i
                                    class="fas fa-fw fa-check-circle"></i></button>&nbsp;&nbsp;
                                @endif
                                <button class="delete btn btn-xs bg-gradient-danger" 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="paymentModal" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" 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="paymentForm" action="">
                    @csrf

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

                    <div class="form-group">
                        <div class="row">
                            <div class="col-md-6">
                                <label for="">Payment Method: *</label>
                                <select name="payment_method" id="payment_method" class="form-control" required>
                                    <option value="mobile">Mobile</option>
                                    <option value="bank">Bank</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label for="">Payment Date: *</label>
                                <input type="text" class="form-control" name="payment_date" id="payment_date" required>
                            </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="paymentViewModal" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" 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 action="">
                 
                    <div class="form-group">
                        <div class="row">
                            <div class="col-md-6">
                                <label for="">Reference #: *</label>
                                <input type="text" class="form-control" name="reference" readonly id="reference_i" required>
                            </div>
                            <div class="col-md-6">
                                <label for="">TPHA #: *</label>
                                <input type="text" class="form-control" name="membership_number" readonly id="membership_number_i">
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="row">
                            <div class="col-md-6">
                                <label for="">Payment Method: *</label>
                                <input type="text" name="payment_method" id="payment_method_i" class="form-control" readonly>
                            </div>
                            <div class="col-md-6">
                                <label for="">Payment Date: *</label>
                                <input type="text" class="form-control" name="payment_date" readonly id="payment_date_i" required>
                            </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>

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

        //datatable
        $('#payment_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_payment/" + id + "/edit",
                success:function(data){
                    $('#title').val(data.result.title);
                    $('.modal-title').text('Edit Member Payments');
                    $('#telephone').val(data.result.phone);
                    $('#payment_method').val(data.result.payment_method);
                    $('#payment_date').val(data.result.payment_date);
                    $('#membership_number').val(data.result.membership_number);
                    $('#hidden_data').val(id);
                    $('.loader').hide();
                    $('#reference').val(data.result.reference);
                    $('#paymentModal').modal('show');
                }
            })
        })

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

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

            $.ajax({
                url: "/member_payment/" + id + "/edit",
                success:function(data){
                    $('.modal-title').text(data.result.membership_number +' Payment Details');
                    $('#membership_number_i').val(data.result.membership_number);
                    $('#payment_date_i').val(data.result.payment_date);
                    $('#reference_i').val(data.result.reference);
                    $('#payment_method_i').val(data.result.payment_method);
                    $('#paymentViewModal').modal('show');
                }
            })
        })

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

            var data_url = "{{route('member_payment.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){
                        $('#paymentModal').modal('hide');
                        $('.loader').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_payment')}}";
                        }, 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 Payment Will be Approved!",
                    icon: 'warning',
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, approve!',
                    cancelButtonText: "No, Don't"

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

                        $.ajax({
                            url: "/member_payment/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_payment')}}";
                                    }, 2000);
                                }

                                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 Payment 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 Payment will be Deleted",
                    icon: 'warning',
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, delete!',
                    cancelButtonText: 'No, keep it'

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

                        $.ajax({
                            url: "/member_payment/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_payment')}}";
                                    }, 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