@extends('layouts.master')
@section('title') Donors @endsection
@section('css')
<link rel="stylesheet" type="text/css" href="{{ URL::asset('assets/libs/datatables/datatables.min.css')}}">
<link rel="stylesheet" href="{{ URL::asset('assets/libs/sweetalert2/sweetalert2.min.css')}}">
@endsection
@section('content')
@component('common-components.breadcrumb')
@slot('title') @endslot

@can('Donors Create')
@slot('add_btn') <h4 class="card-title">
    <a style="margin-left: -28%;background:#314667;border:1px solid #314667;color:white;" href="{{ route('donors.create') }}"
        class="btn btn-primary waves-effect btn-label waves-light" ><i class="bx bx-plus label-icon"></i>Add Donor User</a>
    </h4> @endslot
    @endcan
@endcomponent
<style>
.form-control{
    color: #314667 !important;
}
.success-msg,.error-msg {
                    margin: 10px 0;
                    padding: 10px;
                    border-radius: 3px 3px 3px 3px;
                  }
                  .error-msg {
                    color: #D8000C;
                    background-color: #FFBABA;
                  }
                  .success-msg {
                    color: #270;
                    background-color: #DFF2BF;
                  }
</style>
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">

       @if (Session::get('error'))
            <div class="error-msg alert">
                <button type="button" class="close" data-dismiss="alert">×</button>
                <i class="fa fa-times-circle"></i>
                {{ Session::get('error') }}
            </div>
            @endif

            <!-- For Success Messages -->
            @if (Session::get('success'))
            <div class="success-msg alert">
            <button type="button" class="close" data-dismiss="alert">×</button>
            <i class="fa fa-check"></i>
            {{ Session::get('success') }}
            </div>
            @endif


                <div class="table-responsive">

                    <table id="UsersList1" class="table">
                        <thead class="thead-light">
                            <tr>
                                <th>#</th>
                                <th></th>
                                <th>Donor Name</th>

                                <th>Donor Email</th>
                                <th>Contact no</th>
                                @can('Donors Edit')
                                <th>Status</th>
                                @endcan
                                <th>Registered Date</th>
                                @canany(['Donors Edit','Donors View','Donors Delete'])
                                <th>Action</th>
                                @endcan
                            </tr>
                        </thead>
                        <tbody>
                            @php $i = 1;
                            
                            @endphp
                            @foreach($donors as $row)
                            <tr>
                                <td>{{$i}}</td>
                                <td>
                                       @if (!$row->profile_pic)
                                                    <img src="{{ asset('/assets/images/users/avatar-6.jpg') }}" alt="" class="avatar-sm rounded-circle">
                                                    @else
                                                    
                                                    <img src="{{ asset('/upload/donors/') }}/{{ $row->profile_pic }}" alt="" class="avatar-sm rounded-circle">
                                                    @endif
                                   </td>    
                                <td>{{$row->name}}</td>
                                <td>{{$row->email}}</td>
                                <td>{{$row->phone_no}}</td>
                                    @can('Donors Edit')
                                @if($row->status == "1")
                                <td id="{{$row->id}}" ><span class="btn btn-block btn-success btn-sm status" data-id = "{{$row->id}}" data-status = "{{$row->status}}">Active</span></td>
                                @else
                                <td id="{{$row->id}}" ><span class="btn btn-block btn-danger btn-sm status" data-id = "{{$row->id}}" data-status = "{{$row->status}}">Inactive</span></td>
                                @endif
                                @endif
                                <td>{{date('m-d-Y', strtotime($row->created_at))}}</td>
                                @canany(['Donors Edit','Donors View','Donors Delete'])
                                <td>
                                <div class="dropdown">
                                    <a href="#" class="dropdown-toggle card-drop" data-toggle="dropdown" aria-expanded="false">
                                        <i class="mdi mdi-dots-horizontal font-size-18"></i>
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-right">

                                        @can('Donors Edit')
                                            <a class="dropdown-item" href="{{route('donors.edit', $row->id)}}"><i class="fas fa-pencil-alt text-success me-1"></i>&nbsp;Edit</a>
                                            @endcan
                                            @can('Donors View')
                                             <a class="dropdown-item" href="{{route('donors.show', $row->id)}}"><i class="fas fa-eye text-primary me-1"></i>&nbsp;View</a>
                                             @endcan
                                             @can('Donors Delete')
                                            <a class="dropdown-item" href="javascript:void(0);" data-id="{{$row->id}}" id="delete"><i class="fas fa-trash text-danger me-1"></i>&nbsp; Delete</a>
                                            @endcan
                                    </div>
                                </div>
                                </td>
                                @endcan
                            </tr>
                            @php $i++ @endphp
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div> <!-- end col -->
</div> <!-- end row -->
@endsection
@section('script')
<!-- Plugins js -->
<script src="{{ URL::asset('assets/libs/datatables/datatables.min.js')}}"></script>
<script src="{{ URL::asset('assets/libs/jszip/jszip.min.js')}}"></script>
<script src="{{ URL::asset('assets/libs/pdfmake/pdfmake.min.js')}}"></script>
<!-- Init js-->
<script src="{{ URL::asset('assets/js/pages/datatables.init.js')}}"></script>

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
            $('#UsersList1').DataTable();
            $(document).on("click",".status",function(){
                var id = $(this).attr('data-id');
                var status = $(this).attr('data-status');
                console.log(id,status);
                    swal({
                         title: "Are you sure?",
                         text: "you want to change status of this Donor",
                         icon: "warning",
                         buttons: true,
                         dangerMode: true,
                        }).then((willDelete) => {
                                if (willDelete) {

                                       $.ajax({
                                            type: "POST",
                                            url: '{{route("donors.changestatus")}}',
                                            data: {'id': id,'status':status,"_token": "{{ csrf_token() }}"},
                                            success: function(data){
                                                console.log(data);
                                                $(".wrapper").css('pointer-events','auto');
                                                $(".wrapper").css('opacity',1);
                                            if(data.statusType == 1){


                                                 var html = '<span class="btn btn-block btn-success btn-sm status" data-id ="'+id+'" data-status = "'+data.statusType+'">Active</span>';
                                                $("#"+id).empty();
                                                $("#"+id).append(html);

                                                 swal("Donor status changed successfully", {
                                                         icon: "success",
                                                 })
                                            }else if(data.statusType == 0){

                                                 var html = '<span class="btn btn-block btn-danger btn-sm status" data-id ="'+id+'" data-status = "'+data.statusType+'">InActive</span>';
                                                $("#"+id).empty();
                                                $("#"+id).append(html);

                                                swal("Donor status changed successfully", {
                                                        icon: "success",
                                                 });

                                            }else{

                                                // var html = '<span class="btn btn-block btn-danger btn-sm status" data-id ="'+id+'" data-status = "'+status+'">Active</span>';
                                                // $("#"+id).empty();
                                                // $("#"+id).append(html);

                                                  swal("Donor status not changed successfully! something went wrong", {
                                                        icon: "error",
                                                 }).then(function(){
                                                    location.reload();
                                                 });
                                             }
                                    }
                                        });



                        } else {

                         }
                     });




            });
            $(document).on('click','#delete',function(){
                  var id = $(this).attr('data-id');
                  swal({
                         title: "Are you sure?",
                         text: "Once deleted, you will not be able to recover this Donor!",
                         icon: "warning",
                         buttons: true,
                         dangerMode: true,
                        })
                        .then((willDelete) => {
                                if (willDelete) {

                                       $.ajax({
                                type: "POST",
                                url: '{{route("donors.delete")}}',
                                data: {'id': id, "_token": "{{ csrf_token() }}"},
                                success: function(data){

                                    if(data.status == 1){

                                        $(".wrapper").css('pointer-events','auto');
                                        $(".wrapper").css('opacity',1);
                                         swal("Donor has been deleted!", {
                                                 icon: "success",
                                             }).then(function(){
                                        location.reload();
                                     });
                                    }else{

                                        $(".wrapper").css('pointer-events','auto');
                                        $(".wrapper").css('opacity',1);
                                            swal("Donor has not been deleted! something went wrong", {
                                                icon: "error",
                                     }).then(function(){
                                        location.reload();
                                     });
                                    }
                                    }
                                        });



                        } else {

                         }
                     });
            });



        } );
</script>


@endsection