@extends('layouts.master')

@section('page-title'){{ __('Backoffice Users') }}@endsection

@section('menu')
{{ __('Admin') }}
@endsection

@section('sub-menu'){{ __('Backoffice Users') }}@endsection

@section('content')
{{-- <p id="response_message" class="d-none alert"></p> --}}

<a href="javascript:;" class="js-create-backoffice-user btn btn-primary mb-5" data-url="{{ route('admin.back-office-user.create') }}" >
    {{ __('Add new user') }}
</a>



<table class="table table-striped">
        <thead>
        <tr>
            <th>{{ __('ID') }}</th>
            <th>{{ __('Username') }}</th>
            <th>{{ __('Partner') }}</th>
            <th>{{ __('Skin') }}</th>
            @if (getenv('APP_MARKET') == 'gt')
                <th>{{ __('Affiliate') }}</th>
            @endif
            <th>{{ __('Email') }}</th>
            <th>{{ __('Role') }}</th>
            <th>{{ __('Action') }}</th>
        </tr>
        </thead>
        <tbody>
        @if (!empty($users))
            @foreach ($users as $k => $row)
                <tr>
                    <td>{{ $row->user_id }}</td>
                    <td>{{ $row->username }}</td>
                    <td>{{ $row->partner_name ? $row->partner_name : "All" }}</td>
                    <td>{{ $row->skin_name ? $row->skin_name : "All" }}</td>
                    @if (getenv('APP_MARKET') == 'gt')
                        <td>{{ $row->name }}</td>
                    @endif
                    <td>{{ $row->email }}</td>
                    <td>
                        {{ implode(' | ', GetUserRoles($row->rights)) }}
                    </td>
                    <td>
                        <a href="javascript:;"
                            class="js-update-backoffice-user btn btn-primary"
                            data-id={{ $row->user_id }}
                            data-url="{{ route('admin.back-office-user.show', $row->user_id) }}" >{{ __('Edit') }}</a>
                        <a href="javascript:;"  class="js-delete-backoffice-user btn btn-danger" data-id="{{ $row->user_id }}" >{{ __('Delete') }}</a>
                    </td>
                </tr>
            @endforeach
        @endif
        </tbody>
    </table>

    <div id="userModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="userModal" aria-hidden="true"></div>
@endsection

@section('script')

<script>
        $( document ).ready(function() {
            $('form').attr('autocomplete', 'off');
            $('input').attr('autocomplete', 'off');

        });

        $(document).on('click', '.js-delete-backoffice-user', function () {
            var id = $(this).attr('data-id');
            var trElem = $(this).closest('tr');
            Swal.fire({
                title: "Are you sure?",
                text: "",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#02a499",
                cancelButtonColor: "#ec4561",
                confirmButtonText: "Yes, delete it!"
              }).then(function (result) {
                if (result.value) {

                    $.ajax({
                        data: {"_token": "{{ csrf_token() }}"},
                        type: 'POST',
                        url: "{{ url('') }}/admin/deleteBackOfficeUser/" + id,

                        success: function (response) {
                            if (response.success){
                                Swal.fire("Deleted!", "User is successfully deleted.", "success");

                                trElem.remove();
                            }
                            else {
                                Swal.fire("Error!", "Error occured.", "error");
                            }
                        }
                    });
                }
            });
        });

        $(document).on('click', '.js-update-backoffice-user', function () {
            let id = $(this).attr('data-id')
            let url = $(this).attr('data-url')

            $.ajax({
                url: url,
                type: 'GET',
                beforeSend: function () {
                    $("#loading").show()
                },
                success: function(data) {
                    $('#userModal').html(data.content)
                    $('#userModal').modal({
                        show:true
                    });
                    $("#loading").hide()
                },
                error: function(xhr) {
                    $("#loading").hide()
                },
                complete: function() {
                    $("#loading").hide()
                },
            });
        });

        $(document).on('click', '#updateUser', function () {
            $.ajax({
                url: $('.updateForm').attr('action'),
                type: 'POST',
                data: $('.updateForm').serialize(),
                beforeSend: function () {
                    $("#loading").show()
                },
                success: function(success) {
                    $("#loading").hide()
                    toastr.success(success.message)
                    setTimeout(() => {
                        location.reload()
                    }, 1500);
                },
                error: function(error) {
                    $("#loading").hide()

                    if (error.status === 422) {
                        $.each(error.responseJSON.errors,function(input, message){
                            toastr.error(message)
                        })
                    } else {
                        toastr.error(error.responseJSON.message)
                    }
                },
                complete: function() {
                    $("#loading").hide()
                },
            });
        });

        $(document).on('click', '.js-create-backoffice-user', function () {
            let url = $(this).attr('data-url')

            $.ajax({
                url: url,
                type: 'GET',
                beforeSend: function () {
                    $("#loading").show()
                },
                success: function(data) {
                    $('#userModal').html(data.content)
                    $('#userModal').modal({
                        show:true
                    });
                    $("#loading").hide()
                },
                error: function(xhr) {
                    $("#loading").hide()
                },
                complete: function() {
                    $("#loading").hide()
                },
            });
        });

        $(document).on('click', '#createUser', function () {
            $.ajax({
                url: $('.storeForm').attr('action'),
                type: 'POST',
                data: $('.storeForm').serialize(),
                beforeSend: function () {
                    $("#loading").show()
                },
                success: function(success) {
                    $("#loading").hide()
                    toastr.success(success.message)
                    setTimeout(() => {
                        location.reload()
                    }, 1500);
                },
                error: function(error) {
                    $("#loading").hide()

                    if (error.status === 422) {
                        $.each(error.responseJSON.errors,function(input, message){
                            toastr.error(message)
                        })
                    } else {
                        toastr.error(error.responseJSON.message)
                    }
                },
                complete: function() {
                    $("#loading").hide()
                },
            });
        })
</script>
@endsection