@extends('layouts.master')
@section('title',trans('users'))
@section('header')
@endsection
@section('main')
    <section id="dashboard-analytics">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="mb-0">{{trans('user list')}}</h4>
                        <a href="javascript:void(0)" data-toggle="modal" data-target="#createUserModal"
                           class="btn btn-flat-success">
                            {{trans('create user')}}
                            <i class="fa fa-plus-circle"></i>
                        </a>
                    </div>
                    <div class="card-content">
                        <div class="table-responsive mt-1">
                            <table class="table table-hover-animation mb-0">
                                <thead>
                                <tr>
                                    <th>{{trans('id')}}</th>
                                    <th>{{trans('name')}}</th>
                                    <th>{{trans('email')}}</th>
                                    <th>{{trans('gate count')}}</th>
                                    <th>{{trans('balance')}}</th>
                                    <th>{{trans('sum transaction gates')}}</th>
                                    <th>{{trans('created at')}}</th>
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($users as $user)
                                    <tr>
                                        <td>#{{$user->id}}</td>
                                        <td>
                                            {{ucfirst($user->name)}}
                                        </td>
                                        <td class="p-1">
                                            {{ucwords($user->email)}}
                                        </td>
                                        <td>
                                            <span class="badge badge-dark round">
                                                {{$user->number_gate}} Gate
                                            </span>
                                        </td>
                                        <td>
                                            <span class="badge badge-dark round">
                                                {{$user->balance}} USDT
                                            </span>
                                        </td>
                                        <td>
                                            <span class="badge badge-dark round">
                                                {{$user->sum_transaction_gates}} USDT
                                            </span>
                                        </td>
                                        <td>{{$user->created_at}}</td>
                                        <td>
                                            <div class="btn-group-sm">
                                                <a id="editBtn" href="javascript:void(0)"
                                                   class="btn btn-info"
                                                   data-toggle="modal"
                                                   data-target="#edituserModal"
                                                   data-id="{{$user->id}}"
                                                   data-name="{{$user->name}}"
                                                   data-email="{{$user->email}}"
                                                >{{trans('edit')}}</a>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div class="modal" id="createUserModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <form action="{{route('admin.user.store')}}" method="post">
                @csrf
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">{{trans('create')}} <span id="title"></span></h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="title">{{trans('name')}}</label>
                            <input type="text" name="name" id="name" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label for="site">{{trans('email')}}</label>
                            <input type="text" name="email" id="email" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label for="site">{{trans('password')}}</label>
                            <input type="password" name="password" id="password" class="form-control" required>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <input type="submit" class="btn btn-primary" value="{{trans('save')}}">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">{{trans('close')}}</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="modal" id="edituserModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <form id="editForm" action="" method="post">
                @csrf
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">{{trans('edit')}} <span id="title"></span></h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="title">{{trans('name')}}</label>
                            <input type="text" name="name" id="nameInput" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label for="site">{{trans('email')}}</label>
                            <input type="text" name="email" id="emailInput" class="form-control" required>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <input type="submit" class="btn btn-primary" value="{{trans('save')}}">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">{{trans('close')}}</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection
@section('footer')
    <script>
        $(document).on("click", "#editBtn", function () {
            var id = $(this).data('id');
            var name = $(this).data('name');
            var email = $(this).data('email');

            $("#nameInput").val(name);
            $("#emailInput").val(email);
            var url = `/wa-admin/users/update/${id}`
            $('#editForm').attr('action', url)
            // As pointed out in comments,
            // it is unnecessary to have to manually call the modal.
            // $('#addBookDialog').modal('show');
        });
    </script>
@endsection