@extends('adminlte::page')

@section('title', __('users.tab-title'))

@section('content_header')
    <h3 class="text-center menu-title">{{ __('users.title') }}</h3>
@stop

@section('content')
<div class="row">
    <div class="col page-tab">
        <div class="card">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table display table-hover users-table w-100"></table>
                </div>
{{--                <br><br>    <hr>--}}
{{--                <h4>Serviseri</h4>--}}
{{--                <div class="table-responsive">--}}
{{--                    <table class="table display table-hover serviser-table w-100"></table>--}}
{{--                </div>--}}
            </div>
        </div>
        <div class="ft-pagination">
            <span class="float-right position-right-10"></span>
        </div>
    </div>
</div>
@stop

@push('css')
    @include('adminlte::libs.css.datatables')
    @include('adminlte::libs.css.select2')
@endpush
@section('footer')
    @include('users.modals.create')
    @include('users.modals.delete')
    @include('users.modals.edit')
    @include('users.modals.verification-mail')
    @include('layouts.error-modal')
@append
@php
    $url = url()->current();
    $columns = [
        [
            'data' => 'name',
            'name' => 'name',
            'title' => __('users.table.columns.name')
        ],
        [
            'data' => 'email',
            'name' => 'email',
            'title' => __('users.table.columns.email')
        ],
        [
            'data' => 'phone_number',
            'name' => 'phone_number',
            'title' => __('users.table.columns.phone_number'),
            'sortable' => false,
        ],
          [
            'data' => 'roles',
            'name' => 'roles',
            'title' => __('users.table.columns.roles')
        ],
        [
            'data' => 'actions',
            'name' => 'actions',
            'title' => __('users.table.columns.actions'),
            'sortable' => false,
            'width' => '8%'
        ]
    ];
    $endpoint = [
        'url' => "{$url}/all",
        'dataSrc' => 'data'
    ];

    $endpoint_serviser = [
        'url' => "{$url}/all?role=serviser",
        'dataSrc' => 'data'
    ];
@endphp

{{--@section('head_js')--}}
{{--    @include('adminlte::libs.js.select2')--}}
{{--@append--}}

@push('js')
    @include('adminlte::libs.js.datatables')
    @include('adminlte::libs.js.select2')

    <script defer type="text/javascript" src="{{ asset('js/tabswitcher.min.js') }}"></script>
    <script defer type="text/javascript" src="{{ asset('js/datatables-helpers.min.js') }}"></script>
    <script defer type="text/javascript" src="{{ asset('js/modal-helpers.min.js') }}"></script>
    <script defer type="text/javascript" src="{{ asset('js/users.min.js') }}"></script>
    {{-- Add inline js when developing or testing here. When you're finished, transfer to users.js --}}

    <script type="text/javascript">
        $(document).ready(function() {
            $('#user-create-modal, #user-edit-modal').on('show.bs.modal', function () {
                $(this).find('[id="user[roles]"]').select2({
                    dropdownParent: $(this),
                    width: '100%',
                    theme: 'bootstrap4',
                    placeholder: 'Uloge'
                })
            })

            {{-- display create/edit forms with validation errors --}}
            @if($errors->hasBag('store-user'))
                @unless(empty(old('user.roles')))
                $('[id="user[roles]"]').val(JSON.parse('@json(old('user.roles'))')).trigger('change')
                @endunless
                $('#user-create-modal').modal('show')
                console.error(JSON.parse('{!! $errors->getBag('store-user')->toJson() !!}'))
            @endif
            @if($errors->hasBag('update-user'))
                @unless(empty(old('user.roles')))
                $('[id="user[roles]"]').val(JSON.parse('@json(old('user.roles'))')).trigger('change')
                @endunless
                showUserEditForm('{{ "{$url}/" . session()->get('userId') }}')
                console.error(JSON.parse('{!! $errors->getBag('update-user')->toJson() !!}'))
            @endif


            let dt_settings = {
                ajax:   JSON.parse('@json($endpoint)'),
                columns: JSON.parse('@json($columns)'),
                deferRender: true,
                autoWidth: false,
                buttons: [{
                    text: '{!! __('generic.buttons.add') !!}',
                    className: 'btn btn-primary',
                    action: () => $('#user-create-modal').modal('show')
                }],
            }
            var table = generateDatatable(dt_settings, $('.users-table'));


            {{-- delete chosen user --}}
            $('#user-delete-button').click(function () {
                $(this).prop('disabled', true)

                deleteEntity('{{ "{$url}/" }}' + this.dataset.user_id, function (response) {
                    table.ajax.reload()
                    $('#user-delete-modal').modal('hide')
                })
            })

            $('#user-delete-modal').on('hidden.bs.modal', function () {
                $(this).find('#user-delete-button').attr('data-user_id', '')
                $(this).find('.user-name').text('')
                $(this).find('button').prop('disabled', false)
            })

            {{-- initialize form inputs with chosen user's data --}}
            $(document).on('click', '.users-table .btn-edit', function () {
                showUserEditForm('{{ "{$url}/" }}' + this.dataset.user_id)
            })


            $(document).on('click', '.users-table .btn-send-verification-mail, .serviser-table .btn-send-verification-mail', function () {
                var el = $(this);

                $.ajax({
                    type: "POST",
                    url: route('users.sendVerificationMail', el.attr('data-user_id')),
                    data: {
                        _token: "{{ csrf_token() }}",
                    },
                    success: function(response){
                        el.closest('tr').find('td:nth-child(3) .fas').removeClass('fa-minus');
                        el.closest('tr').find('td:nth-child(3) .fas').addClass('fa-clock');
                        el.closest('tr').find('td:nth-child(3) .fas').css('color', '#007bff');

                        $('#user-sent-verification-mail-modal #mail-sent-to').text(response.user_name)
                        $('#user-sent-verification-mail-modal').modal('show');
                    },
                    error: function(response) {
                        $('#errorModal').modal('show');
                    }
                });
            })
        })
    </script>
@endpush