@extends('layouts.admin')

@section('title', trans('admin.Users'))
@section('page-title', trans('admin.Users'))

@section('content')

<section class="dpage active">
    <div class="page-head">
        <div><h2>{{ trans('admin.Users') }}</h2></div>
        <div class="page-head-actions">
            @if (auth('user')->user()->has_permission('create-users'))
                <button type="button" class="btn btn-primary btn-sm" onclick="openUserModal('create')">＋ {{ trans('admin.Add') }}</button>
            @endif
        </div>
    </div>

    <div class="toolbar">
        <select id="role">
            <option value="">{{ trans('admin.Roles') }}</option>
            @foreach ($roles as $role)
                <option value="{{ $role->name }}">{{ $role->name }}</option>
            @endforeach
        </select>
    </div>

    <div class="card">
        <div class="table-wrap">
            <table class="table" id="usersTable" style="width:100%;">
                <thead>
                <tr>
                    <th>#</th>
                    <th>{{ trans('admin.Username') }}</th>
                    <th>{{ trans('admin.Name') }}</th>
                    <th>{{ trans('admin.Role') }}</th>
                    <th>{{ trans('admin.Status') }}</th>
                    <th>{{ trans('admin.Created at') }}</th>
                    <th>{{ trans('admin.Actions') }}</th>
                </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</section>

<!-- ============ MODAL: Add / Edit user ============ -->
@if (auth('user')->user()->has_permission('create-users') || auth('user')->user()->has_permission('update-users'))
<div class="modal-backdrop" id="userModal">
  <div class="modal-box">
    <div class="modal-head">
      <h3 id="userModalTitle">{{ trans('admin.Add') }} {{ trans('admin.Users') }}</h3>
      <button class="modal-close" onclick="closeModal('userModal')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg></button>
    </div>
    <form id="userForm">
      @csrf
      <input type="hidden" name="user_id" id="userId" value="">
      <div class="modal-body" style="padding-bottom:0;">
        <div class="field" style="margin-bottom:16px;">
          <label>{{ trans('admin.Username') }}</label>
          <input type="text" name="username" id="userUsername" required>
        </div>
        <div class="field" style="margin-bottom:16px;">
          <label>{{ trans('admin.Name') }}</label>
          <input type="text" name="name" id="userName" required>
        </div>
        <div class="field" style="margin-bottom:16px;">
          <label>{{ trans('admin.Password') }}</label>
          <input type="password" name="password" id="userPassword">
          <span class="hint" id="userPasswordHint"></span>
        </div>
        <div class="field">
          <label>{{ trans('admin.Roles') }}</label>
          <select name="role_id" id="userRoleId" required>
            <option value="">—</option>
            @foreach ($roles as $role)
              <option value="{{ $role->id }}">{{ $role->name }}</option>
            @endforeach
          </select>
        </div>
        <div class="hint" id="userErrors" style="color:var(--red); margin-top:10px;"></div>
      </div>
      <div class="modal-foot">
        <button type="button" class="btn btn-ghost" onclick="closeModal('userModal')">{{ trans('admin.Close') }}</button>
        <button type="submit" class="btn btn-primary" id="userSubmitBtn">{{ trans('admin.Save') }}</button>
      </div>
    </form>
  </div>
</div>
@endif

@endsection

@section('script')
@if(auth('user')->user()->has_permission('export-users'))
<script src="{{ asset('theme/dashboard/plugins/datatables-buttons/js/buttons.colVis.js') }}"></script>
<script src="{{ asset('vendor/datatables/buttons.server-side.js') }}"></script>
@endif
<script type="text/javascript">
    var usersTable = $('#usersTable').DataTable({
        processing: true,
        serverSide: true,
        dom: '{{ auth('user')->user()->has_permission('export-users') ? 'Blrtip' : 'lrtip' }}',
        pageLength: 10,
        lengthMenu: [10, 25, 50, 100],
        ajax: {
          "url": "{{ route('dashboard.users.index') }}",
          "data": function (d) {
            d.role = $('#role').val();
          }
        },
        columns: [
            {data: 'id', name: 'id'},
            {data: 'username', name: 'username'},
            {data: 'name', name: 'name'},
            {data: 'role', name: 'role'},
            {data: 'status_badge', name: 'status_badge', orderable: false, searchable: false},
            {data: 'created_at', name: 'created_at'},
            {data: 'action', name: 'action', orderable: false, searchable: false},
        ],
        @if(auth('user')->user()->has_permission('export-users'))
        buttons: [
            { extend: 'colvis', text: '{{ __('admin.column_visibility') }}' },
            { extend: 'postExcelVisibleColumns', text: '{{ __('admin.excel') }}' },
            { extend: 'postCsvVisibleColumns', text: '{{ __('admin.csv') }}' },
            { extend: 'postPdfVisibleColumns', text: '{{ __('admin.pdf') }}' },
        ],
        @endif
        language: {
            search: "{{ __('admin.search') }}: ",
            loadingRecords: "{{ __('admin.loading') }}",
            emptyTable: "{{ __('admin.no_result') }}",
            zeroRecords: "{{ __('admin.no_result') }}",
            lengthMenu: "{{ __('admin.Show') }} _MENU_ {{ __('admin.entries') }}",
            paginate: {
                previous: "{{ __('admin.previous') }}",
                next: "{{ __('admin.next') }}",
            }
        },
    });

    $(document).on('change', '#role', function() {
        usersTable.ajax.reload();
    });

    function openUserModal(mode, id){
        $('#userForm')[0].reset();
        $('#userId').val('');
        $('#userErrors').html('');

        if (mode === 'edit') {
            $('#userModalTitle').text("{{ trans('admin.Edit') }} {{ trans('admin.Users') }}");
            $('#userPassword').prop('required', false);
            $('#userPasswordHint').text("{{ trans('admin.leave password blank') }}");

            $.get("{{ url('dashboard/users') }}/" + id + "/edit", function(res){
                var data = res.data;
                $('#userId').val(data.id);
                $('#userUsername').val(data.username);
                $('#userName').val(data.name);
                $('#userRoleId').val(data.role_id);
                openModal('userModal');
            }).fail(function(xhr){
                dashToast('✕', (xhr.responseJSON && xhr.responseJSON.message) || "{{ trans('admin.faild') }}");
            });
        } else {
            $('#userModalTitle').text("{{ trans('admin.Add') }} {{ trans('admin.Users') }}");
            $('#userPassword').prop('required', true);
            $('#userPasswordHint').text('');
            openModal('userModal');
        }
    }

    $(document).on('click', '.edit-user', function(){
        openUserModal('edit', $(this).data('id'));
    });

    $(document).on('click', '.toggle-user-status', function(){
        var $btn = $(this);
        $btn.prop('disabled', true);

        $.post("{{ url('dashboard/users') }}/" + $btn.data('id') + "/toggle-status", {
            _token: "{{ csrf_token() }}"
        }, function(res){
            usersTable.ajax.reload(null, false);
            dashToast('✓', "{{ trans('admin.success') }}");
        }).fail(function(xhr){
            dashToast('✕', (xhr.responseJSON && xhr.responseJSON.message) || "{{ trans('admin.faild') }}");
        }).always(function(){
            $btn.prop('disabled', false);
        });
    });

    $('#userForm').on('submit', function(e){
        e.preventDefault();
        var $btn = $('#userSubmitBtn');
        var id = $('#userId').val();
        var url = id
            ? "{{ url('dashboard/users') }}/" + id + "/edit"
            : "{{ route('dashboard.users.store') }}";
        $('#userErrors').html('');
        $btn.prop('disabled', true);

        $.ajax({
            url: url,
            method: 'POST',
            data: $(this).serialize(),
            success: function(res){
                closeModal('userModal');
                $('#userForm')[0].reset();
                usersTable.ajax.reload(null, false);
                dashToast('✓', "{{ trans('admin.success') }}");
            },
            error: function(xhr){
                if (xhr.status === 422) {
                    var errors = xhr.responseJSON.errors;
                    var html = '';
                    $.each(errors, function(key, val){ html += val[0] + '<br>'; });
                    $('#userErrors').html(html);
                } else {
                    dashToast('✕', "{{ trans('admin.faild') }}");
                }
            },
            complete: function(){
                $btn.prop('disabled', false);
            }
        });
    });
</script>

@endsection