@extends('layouts.master')
@section('title','Avatar List')

@section('content')

<div>
    <div class="container">

        <style>
            svg {

                display: none;
            }

            path {

                display: none;
            }
        </style>


        <div class="row">



            <div class="col-md-12 mt-4">


                <h4>Avatar List</h4>

                <a class="btn btn-success" href="{{ route('addAvatar') }}">+ Add Avatar</a><br><br>

                <div class="col-md-9">

                  <form action="{{ url()->current() }}" class="row g-3 mb-4">

                    <div class="col-md-4">

                            <input name="search" value="{{ $search }}" placeholder="Search avatar name" class="form-control">


                    </div>

                    <div class="col-md-2">

                            <button class="btn btn-sm btn-primary" type="search">Search</button>



                    </div>

                   
                    
                   


                  </form>

                </div>

                <div class="card card-xy">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-hover">

                                <thead>

                                    <tr>
                                        <th>Avatar Name</th>
                                        <th>Image</th>
                                        <th>Number of times used</th>
                                        <th>Status</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>

                                <tbody>

                                    @forelse($avatars as $avatar)

                                    <tr>
                                        <td>{{ $avatar->name }}</td>
                                        <td><img src="{{ asset($avatar->image_url) }}" class="img img-fluid" style="max-height:90px;" /></td>
                                        <td>{{ $avatar->times_used }}</td>
                                        <td>

                                            @if($avatar->shown_status)


                                            <b>Shown</b>
                                            <button class="btn btn-danger btn-sm toggle-avatar" data-type="hide" data-avatar-id="{{ \Crypt::encrypt($avatar->id) }}" type="button">Toggle</button>

                                            @else

                                            <b>Hidden</b>
                                            <button class="btn btn-info btn-sm toggle-avatar" type="button" data-type="show" data-avatar-id="{{ \Crypt::encrypt($avatar->id) }}">Toggle</button>


                                            @endif
                                        </td>
                                        <td>@if($avatar->times_used==0) <a href="{{ route('editAvatar',['avatar'=>\Crypt::encrypt($avatar->id)]) }}" class="btn btn-info btn-sm">Edit</a> <a href="javascript:void(0)" class="btn btn-danger btn-sm deactivate-avatar" data-avatar-id="{{ \Crypt::encrypt($avatar->id) }}">Deactivate</a>@endif </td>
                                    </tr>


                                    @empty

                                    <tr>
                                        <th colspan="4">No Avatars found</th>
                                    </tr>

                                    @endforelse


                                </tbody>

                            </table>
                        </div>
                    </div>
                </div>

                {{ $avatars->links('pagination::bootstrap-5') }}

            </div>

        </div>

    </div>
</div>

@push('script')


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

        $(document).on('click', '.toggle-avatar', function() {

            var type = $(this).data('type');
            var avatar_id = $(this).data('avatar-id');

            if (type == "hide") {
                var popup_message = "Are you sure to hide this avatar from future onboardings";
            } else {

                var popup_message = "Are you sure to enable this avatar for future onboardings";


            }


            swal.fire({

                title: "Are you sure?",
                text: popup_message,
                icon: "warning",
                showCancelButton: true

            }).then((result) => {

                if (result.isConfirmed) {

                    $.LoadingOverlay('show');

                    var input_data = JSON.stringify({
                        avatar: avatar_id
                    });
                    fetch("{{ route('toggleAvatar') }}", {
                            method: "POST",
                            body: input_data,
                            headers: {
                                'X-CSRF-TOKEN': "{{ csrf_token() }}",
                                'Content-Type': "application/json"
                            }

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

                            $.LoadingOverlay('hide');

                            if (response.status == "success") {
                                swal.fire({
                                    title: "Avatar status changed",
                                    text: response.message,
                                    icon: "success"
                                }).then((result) => {

                                    if (result.isConfirmed) {
                                        window.location.reload();
                                    }
                                });
                            } else {

                                swal.fire({

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



                        })
                        .catch((response) => {


                            $.LoadingOverlay('hide');

                            swal.fire({

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


                        });

                }
            });

        });

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

            var avatar_id = $(this).data('avatar-id');

            var input_data = JSON.stringify({
                avatar: avatar_id
            });

            swal.fire({

                title: "Are you sure?",
                text: "Are you sure to deactivate avatar",
                icon: "warning",
                showCancelButton: true
            }).then((result) => {

                if (result.isConfirmed) {

                    $.LoadingOverlay('show');
                    fetch("{{ route('deactivateAvatar') }}", {

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


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

                            $.LoadingOverlay('hide');

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

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

                                    window.location.reload();
                                });
                            } else if (response.status == "error") {

                                swal.fire({

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

                            }
                        }).catch((response) => {

                            $.LoadingOverlay('hide');

                            swal.fire({

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



                        });
                }
            });

        });

    });
</script>

@endpush


@endsection