@extends('layouts.dashboard')

@section('content')

<!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
      <div class="container-full">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="d-flex align-items-center">
                <div class="me-auto">
                    <h3 class="page-title">User Details</h3>
                    <div class="d-inline-block align-items-center">
                        <nav>
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="#"><i class="mdi mdi-home-outline"></i></a></li>
                                <li class="breadcrumb-item" aria-current="page">User</li>
                                <li class="breadcrumb-item active" aria-current="page">Details</li>
                            </ol>
                        </nav>
                    </div>
                </div>
                
            </div>
        </div>
        <style type="text/css">
            .col_padding
            {
                padding: 10px;
            }
            .delete
            {
                width: 200px;
            }
            .delete1
            {
                width: 150px;
            }
        </style>
        <!-- Main content -->
        <section class="content">

          <div class="row">
            <div class="col-lg-12">
                <div class="box" style="background: none;box-shadow: none">
                    <div class="box-body">
                        <div class="row" style="justify-content: end;">
                            @include('layouts.flash-message')
                            
                            <div class="row">
                                <style>
                                    .box-view
                                    {
                                        border: 1px solid #dbd6d6;
                                        text-align: center;
                                        padding: 16px 10px 8px 10px;
                                        border-radius: 5px;
                                        cursor: pointer;
                                    }
                                </style>
                                <div class="col-md-12">
                                    <div class="card">
                                        <div class="card-body">
                                            
                                            <div class="row" style="display: flex;justify-content:center;margin-bottom: 10px;">
                                                <div class="col-md-2">
                                                    <div class="box-view">
                                                        <h4>{{ $user_details->name }}</h4>
                                                        <p>{{ $user_details->uni_number }}</p>
                                                    </div>
                                                </div>
                                                <!--<div class="col-md-2"></div>-->
                                                <!--<div class="col-md-2"></div>-->
                                                <!--<div class="col-md-2"></div>-->
                                                <!--<div class="col-md-2"></div>-->
                                            </div>
                                            <?php 
                                                $subadmin_check = \App\Models\User::where('admin_id', $user_details->uni_number)->get(); 
                                                // dd($user_details);
                                            ?>
                                            
                                            <div class="row" style="display: flex;justify-content:center;margin-bottom: 10px;">
                                                @if(count($subadmin_check) > 0)
                                                @foreach($subadmin_check as $key => $value)
                                                    <div class="col-md-2">
                                                        <div class="box-view" id="SecendAmin" onClick="divFunction('{{ $value->id }}', '{{ $value->uni_number }}')">
                                                            <h4>{{ $value->name }}</h4>
                                                            <p>{{ $value->uni_number }}</p>
                                                        </div>
                                                    </div>
                                                @endforeach
                                                @endif
                                            </div>
                                                
                                            
                                            <div class="row" style="display: flex;justify-content:center;margin-bottom: 10px;" id="seconedRow">
                                                
                                            </div>
                                            
                                            <div class="row" style="display: flex;justify-content:center;margin-bottom: 10px;" id="ThirdRow">
                                                
                                            </div>
                                            
                                        </div>
                                    </div>
                                </div>
                                
                            </div>
                            
                        </div>
                    </div>              
                </div>
            </div>
        </div>

        </section>
        <!-- /.content -->
      </div>
  </div>
  <!-- /.content-wrapper -->
    <script src="<?php echo url('');?>/public/admin_assets/js/vendors.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    
    <script>
    
        function divFunction(id1, id2){
            // alert(id1); 
            var user_id = id1;
            var refer = id2;
            // alert(refer);
            $.ajax({
                url: '{{ route('admin.user.chart.level.one') }}',
                method: "POST",
                data: {
                    _token: '{{ csrf_token() }}', 
                    user_id: user_id,
                    refer: refer
                },
                success: function (response) {
                    console.log(response);
                    $("#seconedRow").empty();
                    $("#ThirdRow").empty();
                    if(response)
                    {
                        $("#seconedRow").show();
                        $("#seconedRow").append(response);
                    }
                    
                }
            });
        }

        // $(document).ready(function () {
            
        //     $('#SecendAmin').on('click', function () {
                
                
                
        //     });
        // });
    </script>
    <script>
        // function divFunction1(id1, id2)
        // {
        //     var user_id = id1;
        //     var refer = id2;
        //     $.ajax({
        //         url: '{{ route('admin.user.chart.level.two') }}',
        //         method: "POST",
        //         data: {
        //             _token: '{{ csrf_token() }}', 
        //             user_id: user_id,
        //             refer: refer
        //         },
        //         success: function (response) {
        //             console.log(response);
        //             $("#ThirdRow").empty();
        //             if(response)
        //             {
        //                 $("#ThirdRow").show();
        //                 $("#ThirdRow").append(response);
        //             }
        //         }
        //     });
        // }
        // $(document).ready(function () {
            
        //     $('#SecendAmin1').on('click', function () {
                
        //         var removeButton = $(this); 
                
                
        //     });
        // });
    </script>
@endsection