@extends('layouts.master')
@section('title','Users list')
@section('content')
<div class="container mt-4">
    <h4>User List</h4>

    <!-- Search -->
    <form method="GET" action="{{ route('users.index') }}" class="row g-3 mb-4">
        <div class="col-md-4">
            <input type="text" name="search" value="{{ request('search') }}" class="form-control" placeholder="Search name or email">
        </div>
        <div class="col-md-2">
            <button type="submit" class="btn btn-primary">Search</button>
        </div>
    </form>

    <!-- User Table -->
    <div class="card card-xy mb-3">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>
                            <!-- <a href="{{ route('users.index', array_merge(request()->all(), ['sortField' => 'name', 'sortDirection' => $sortDirection === 'asc' ? 'desc' : 'asc'])) }}">
                                    Name
                                </a>-->
                                Name
                            </th>
                            <th>
                            <!-- <a href="{{ route('users.index', array_merge(request()->all(), ['sortField' => 'email', 'sortDirection' => $sortDirection === 'asc' ? 'desc' : 'asc'])) }}">
                                    Email
                                </a>-->
                                Email
                            </th>
                            <th>

                                Created at

                            </th>
                            <th>

                                Action

                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($users as $user)
                        <tr>
                            <td>{{ $user->name }}</td>
                            <td>{{ $user->email }}</td>
                            <td>{{ date('d M Y h:i:s a',strtotime($user->created_at))  }}</td>
                            <td class="py-0">
                                <table>
                                    <tr>
                                        <td><a href="{{ route('users.show', \Crypt::encrypt($user->id)) }}" class="btn btn-info" target="_blank">View Details</a></td>

                                        <td> <button class="btn btn-danger deactivate-user" data-bs-toggle="modal" data-bs-target="#deactivateModal" data-user-id="{{ \Crypt::encrypt($user->id) }}" type="button">Deactivate</button>


                                            @if($user->ban_status)

                                        <td><span>User has been banned</span></td>

                                            @else
                                        <td><button class="btn btn-danger ban-user" data-user-id="{{ \Crypt::encrypt($user->id) }}">

                                                Ban User </button>

                                            @endif
                                    </tr>

                                </table>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="4">No users found.</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Pagination -->
    {{ $users->appends(request()->except('page'))->links('pagination::bootstrap-4') }}

</div>

<div class="modal fade" id="banModal">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-header">

                <h3>Ban User</h3>

            </div>

            <form method="POST" id="banUser">

                <div class="modal-body">



                    <div class="form-group">

                        <input type="hidden" name="user_id" id="ban_user_id">

                        <select class="form-control" name="duration_type">

                            <option value="">Choose duration type</option>
                            <option value="days">Days</option>
                            <option value="weeks">Weeks</option>
                            <option value="months">Months</option>
                            <option value="years">Years</option>

                        </select>
                        <br>
                        <br>
                    </div>

                    <div class="form-group">

                        <select class="form-control" name="duration">
                            <option value="">Choose duration</option>

                            @for($i=1;$i<=100;$i++)

                                <option value="{{ $i }}">{{ $i }} </option>
                                @endfor
                        </select>

                        <br>
                        <br>
                    </div>

                    <div class="form-group">
                        <label>Remarks</label>

                        <textarea class="form-control" name="remarks" placeholder="Remarks" rows="10" cols="35"></textarea>
                    </div>

                </div>

                <div class="modal-footer">

                    <button class="btn btn-primary" type="submit">Submit</button>

                    <button class="btn btn-default" type="button">Cancel</button>


                </div>

            </form>


        </div>




    </div>
</div>

<div class="modal fade" id="deactivateModal">

      <div class="modal-dialog">

           <div class="modal-content">


                <div class="modal-header">

                        <h3>Deactivate User</h3>
                </div>

                <div class="modal-body">


                        <form id="deactivateForm">

                             <input type="hidden" name="deactivate_user_id" id="deactivate_user_id">

                             <div class="form-group">


                                <label class="form-label">Report <span style="color:red">*</span></label>

                                <select class="form-select" name="report" id="report">

                                     <option value="">Choose Report</option>


                                </select>

                                <br>
                                <br>


                            </div>


                           
                                <div class="form-group">


                                   <label class="form-label">Reason for deactivation<span style="color:red">*</span></label>

                                   <textarea class="form-control"  name="reason" rows="10" cols="20"></textarea>

                                   <br>
                                   <br>


                                </div>

                                <div class="form-group">

                                    <button type="submit" class="btn btn-success">Deactivate</button>
                                    <button type="button" class="btn btn-default" data-bs-dismiss="modal">Cancel</button>

                                </div>

                               


                        </form>


                </div>

                <div class="modal-footer">


                </div>

           </div>




      </div>


</div>

</div>
</div>


</div>

@endsection

@push('script')

<script>
    $(document).ready(function() {
        $(document).on("click", ".ban-user", function() {

            var user_id = $(this).data('user-id');

            $("#ban_user_id").val(user_id);

            $("#banModal").modal("show");


        });

        $(document).on("submit", "#banUser", function(e) {

            e.preventDefault();

            var form_data = new FormData($(this)[0]);

            $.LoadingOverlay('show');

            /*$.ajax({

                  headers:{'X-CSRF-TOKEN':"{{ csrf_token() }}"},
                  type:"POST",
                  url:"{{ route('submitUserBan') }}",
                  data:form_data,
                  dataType:"JSON",
                  success:function(response)
                  {
                      if(response.status=="success")
                      {
                          swal.fire({

                              title:"User banned",
                              text:"User has been banned",
                          }).then((result)=>{

                              window.location.reload();
                          });
                      }

                      else{

                          swal.fire({
                              title:response.status,
                              text:response.message,
                              icon:"error",
                          });
                      }
                  },
                  error:function()
                  {
                      swal.fire({
                          title:"error",
                          text:"Something went wrong",
                      });
                  }

              });*/

            fetch("{{ route('submitUserBan') }}", {

                method: "POST",
                headers: {
                    'X-CSRF-TOKEN': "{{ csrf_token() }}"
                },
                body: form_data
            })
            
            .then(response=>response.json())
            
            .then((result) => {

                $.LoadingOverlay('hide');


                if (result.status=="success") {
                    swal.fire({

                        title: result.status,
                        text: result.message,
                        icon:"success"
                    }).then((res)=>window.location.reload());

                   //indow.location.reload();
                } else {

                    swal.fire({

                        title: result.status,
                        text: result.message,
                        icon:"error"
                    });


                }
            });

        });
    });
</script>

<script>

    $(document).ready(function()
    {

        $(document).on("click",".deactivate-user",function()
        {

            var user_id=$(this).data('user-id');


            $("#deactivate_user_id").val(user_id);

            var data={user_id:user_id};

            fetch("{{ route('loadReports') }}",{

                method:"POST",
                body:JSON.stringify(data),
                headers:{'X-CSRF-TOKEN':"{{ csrf_token() }}",'Content-Type':'application/json'}


            }).then((result)=>result.json())
            .then((response)=>{

                if(response.status=="success")
                {
                    response.data.forEach((item)=>{

                        $("#report").html("<option value=''>Choose Report Details</option>");

                        $("#report").append("<option value='"+item.id+"'>"+"Reported By-"+item.reported_by.name+",Type-"+item.report_type.name+"</option>");
                    });
                }
            });
            
        });


        
    });


</script>

<script>

    $(document).ready(function()
    {

        $(document).on("submit","#deactivateForm",function(e)
        {

            var form_data=new FormData($(this)[0]);

            e.preventDefault();

            $.LoadingOverlay('show');

            fetch("{{ route('deactivateUser') }}",{

                method:"POST",
                body:form_data,
                headers:{'X-CSRF-TOKEN':"{{ csrf_token() }}"}



            })
            .then((result)=>result.json())
            .then((response)=>{

                $.LoadingOverlay('hide');

                if(response.status=="success")
                {

                    swal.fire({

                        title:"User deactivated",
                        text:response.message,
                        icon:"success"
                        })
                        .then((result)=>{

                        window.location.reload();
                    });
                    
                }

                else{

                    swal.fire({

                        title:"Failed",
                        text:response.message,
                        icon:"error"
                        });

                }

       
               
            })
            .catch(()=>{

                swal.fire({

                    title:"Error",
                    text:'Something went wrong',
                    icon:"error"
                });


            });

 
            
        });
        
    });





</script>



@endpush