@extends('admin.layouts.main-layout')
@section("css")
        
@endsection
@section("content")
            <div id="top" class="sa-app__body">
                    <div class="mx-xxl-3 px-4 px-sm-5">
                        <div class="py-5">
                            <div class="row g-4 align-items-center">
                                <div class="col">
                                    <nav class="mb-2" aria-label="breadcrumb">
                                        <ol class="breadcrumb breadcrumb-sa-simple">
                                            <li class="breadcrumb-item active" aria-current="page"></li>
                                        </ol>
                                    </nav>
                                    <h1 class="h3 m-0">Refrence No</h1>
                                </div>
                                <div class="">
                                    <a href="{{ url('admin/refrence/create') }}" class="btn btn-primary radius-30 mt-2 mt-lg-0">
                                        <i class="bx bxs-plus-square"></i>Refrence No
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                <div class="mx-xxl-3 px-4 px-sm-5 pb-6">
                    <div class="sa-layout">
                        <div class="sa-layout__backdrop" data-sa-layout-sidebar-close=""></div>

                        <div class="sa-layout__content">
                            <div class="card">
                                <div class="p-4">
                                    <div class="row g-4">
                                        <form role="form" method="get" action="">
                                            <div class="box-body">
                                                <div class="row">
                                                    
                                                    <div class="col-md-4">
                                                        <!--<div class="form-group">-->
                                                        <!--    <input type="text" name="search_name" id="search_by_name-btn" class="form-control" placeholder="Search by Name" value="{{Request::get('search_name')}}">-->
                                                        <!--</div>-->
                                                    </div>
                                                   
                                                    <div class="col-md-4">
                                                        <!--<div class="form-group">-->
                                                        <!--    <select class="form-control select2"  name="search_status" style="width: 100%;">-->
                                                        <!--    <option value="">--Select Status --</option>-->
                                                        <!--    <option value="1" {{Request::get('search_status') == '1' ? 'selected' : ''}}>Active</option>-->
                                                        <!--    <option value="0" {{Request::get('search_status') == '0' ? 'selected' : ''}}>Inactive</option>-->
                                                        <!--    </select>-->
                                                        <!--</div>-->
                                                    </div>
                                                    <!--<div class="col-md-2">-->
                                                    <!--    <button type="submit" class="btn btn-success">Search</button>-->
                                                    <!--</div>-->
                                                    <!--<div class="col-md-2">-->
                                                    <!--    <a href="{{url('admin/refrence')}}" class="btn btn-danger reset-btn">Reset</a>-->
                                                    <!--</div>-->
                                                    <!-- <div class="col-md-2">
                                                        <button type="submit" class="btn btn-success" name="type" value="excel">
                                                            Excel Export 
                                                        </button>
                                                    </div> -->
                                                    
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                                <div class="sa-divider"></div>
                                <table class="table table-bordered table-striped datatable">
                                    <thead>
                                        <tr>
                                            <th>No</th>
                                            <th>User Name</th>
                                            <th>Code</th>
                                            <th>Earnings</th>
                                            <th>View</th>
                                        </tr>
                                        @php
                                        $page=1;
                                        if(Request::input('page'))
                                        $page=Request::input('page');
                                        $sort = $lists->perPage();
                                        @endphp
                                    </thead>
                                    <tbody>
                                        @forelse($lists as $key => $list)
                                        <tr>
                                            <td>{{ $sort*($page-1)+($key+1) }}</td>
                                            <td>{{ isset($list->user)? $list->user->name:'' }}</td>
                                            <td>{{ $list->code }}</td>
                                            <td>{{ $list->earnings }}</td>
                                           <td><button class="btn btn-primary view-btn" onclick="viewModal({{$list}})">View</button></td>
                                        </tr>
                                        @empty
                                        <tr>
                                            <td colspan="6" class="text-center">Record not found </td>
                                        </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                                <div class="sa-divider"></div>
                                <div class="row m-3">
                                    <div class="col-md-6 text-start" style="margin: 20px 0px;">
                                        Showing {{$lists->firstItem()}} to {{$lists->lastItem()}} of {{$lists->total()}}
                                    </div>
                                    <div class="col-md-6 text-end">
                                        {{ $lists->appends(request()->query())->links('vendor.pagination.default') }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="myModalLabel">Referral Code Details</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 id="referral-details">
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endsection
            <script>  
            function viewModal(data) {
                var html = '<table class="table">';
                html += '<thead><tr><th>Customer Name</th><th>Amount</th></tr></thead>';
                html += '<tbody>';
                for (var key in data.refel_code_his) {
                    if (data.refel_code_his.hasOwnProperty(key)) {
                        console.log(data.refel_code_his[key]);
                        html += '<tr><td><strong>' + data.refel_code_his[key].user.name + '</strong></td><td>' + 100 + '</td></tr>';
                    }
                }
                html += '</tbody></table>';
                
                // Set the HTML content of the modal body
                $('#referral-details').html(html);
            
                // Show the modal
                $('#myModal').modal('show');
            }


           </script>