<x-layout>
    @section('title', $title.' - ')
    @section('page_title', $title)
    @include('admin/ar-css')
    @include('admin/ar-php-script')
    @include('admin/header_admin')
    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>

    <section id="dashboard" class="ar-dashboard-height">
        
        <div class="ar-dashboard-row" style="height:100%">
            <div id="ar-left-nav">
                @include('admin/left_nav')
            </div>

            <div id="ar-dashboard-content">
                <a href="javascript:void(0)" id="btn-add-new" class="btn-regular">+ New User</a>

                <div class="table-container">
                    @if(count($users) > 0)
                        <table id="ar-table">
                            <thead>
                                <th style="width:1%">ID</th>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Username</th>
                                <th>Password</th>
                                <th>Referral_Code</th>
                                <th>Referred_By</th>
                                <th>Action</th>
                            </thead>
                            
                            <tbody id="ar-table-body">
                                @foreach($users as $item)
                                    <tr id="index_{{ $item->id }}">
                                        <td>{{ $item->id }}</td>
                                        <td>{{ $item->name }}</td>
                                        <td>{{ $item->email }}</td>
                                        <td>{{ $item->username }}</td>
                                        <td>{{ $item->password }}</td>
                                        <td>{{ $item->referral_code }}</td>
                                        <td>{{ $item->referral_by }}</td>
    
                                        <td style="width:1%;white-space:nowrap">
                                            <a id="btn-edit" data-id="{{ $item->id }}" style="cursor:pointer;margin-left:10px;color:#000000">
                                                <i class="fa fa-pencil"></i>
                                            </a>
                                            <a id="btn-delete" data-id="{{ $item->id }}" style="cursor:pointer;margin-left:10px;color:#000000">
                                                <i class="fa fa-trash"></i>
                                            </a>
                                            <a href="/user-details?id={{$item->id}}&name={{$item->name}}" style="cursor:pointer;margin-left:10px;color:#000000">
                                                <i class="fa fa-arrow-right"></i>
                                            </a>
                                        </td>
    
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                        <div style="padding:10px 0">
                            {{ $users->links() }}
                        </div>
                    @endif
                </div>

            </div>
        </div>
    </section>
    
    <div id="modal" class="modal">
        <div class="form-popup ar-view-modal" style="max-height:80%;background-color:#f8f8f8;overflow:scroll">
            <div style="text-align:center"><h5>Manage User</h5></div>
            <form id="myForm">
                @csrf
                <input id="id" name="id" type="hidden">

                <div class="form-group">
                    <label for="name">Nama:</label> 
                    <input class="form-control" id="name" name="name" type="text" placeholder="Nama" value="" required>
                </div>

                <div class="form-group">
                    <label for="email">Email:</label> 
                    <input class="form-control" id="email" name="email" type="text" placeholder="Email" value="" required>
                </div>

                <div class="form-group">
                    <label for="username">Username:</label> 
                    <input class="form-control" id="username" name="username" type="text" placeholder="Username" value="" required>
                </div>

                <div class="form-group">
                    <label for="password">Password:</label> 
                    <input class="form-control" id="password" name="password" type="text" placeholder="Email" value="" required>
                </div>

                <div class="form-group">
                    <label for="referral_code">Referral Code:</label> 
                    <div><input class="form-control" id="referral_code" name="referral_code" type="text" placeholder="Referral Code" value="" style="display:inline-block;width:unset">
                    <button id="btn-generate-referral-code" class="btn btn-primary">Generate Code</button></div>
                </div>

                <div class="form-group">
                    <button id="btn-store" class="btn btn-primary">Simpan</button>
                    <button class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </form>
        </div>        
    </div>
    
    <div id="modal-progress" class="modal">
        <div class="ar-view-modal">
            Mohon tunggu. Sedang proses...
        </div>
    </div>

    <script>

        $('body').on('click','#btn-add-new',function(e){
            $('#modal').modal('show');
        });
        
        $('body').on('click','#btn-edit',function(e){
            $('#modal-progress').modal('show');
            let id = $(this).data('id');
            let token = "{{ csrf_token() }}";

            $.ajax({
                url: `/user-data`,
                type: 'GET',
                cache: false,
                data:{'id':id,'_token':token},
                success:function(response){
                    $('#id').val(response.data.id);
                    $('#name').val(response.data.name);
                    //$('#address').val(response.data.address);
                    //$('#phone').val(response.data.phone);
                    $('#email').val(response.data.email);
                    $('#referral_code').val(response.data.referral_code);

                    $('#modal-progress').modal('hide');
                    $('#modal').modal('show');
                }
            });
        });

        $('body').on('click','#btn-generate-referral-code',function(e){
            //$('#modal-progress').modal('show');
            e.preventDefault();
            $.ajax({
                url: `/user-generate`,
                type: 'GET',
                cache: false,
                success:function(response){
                    $('#referral_code').val(response);
                }
            });
        });
        
    </script>
    
    @include('admin/ar-script')

</x-layout>
