@section('title') {{'My businesses'}} @endsection
@php
   $planName =   $user->subscription->plan->name;       
   
   $now = \carbon\Carbon::now();  
   $expire = \carbon\Carbon::create($user->subscription->expired_at);  
   $planExpired = $now->greaterThanOrEqualTo($expire);
   $isAnual = 'true';
   $monthlyStyle ='display:none;';
   $yearlyStyle ='display:initial;';
   if($planName=='Pro Monthly' || $planName=='Multi Pro Monthly') {
        $isAnual = 'false';
        $monthlyStyle ='display:initial;';
        $yearlyStyle ='display:none;';
    }  
    $config =  ['cc'=>'','dc'=>'','l'=>'','gl'=>'','n'=>''];
@endphp
<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
            {{ __('Users') }}  
        </h2>
        
    </x-slot>

  <section class="padding-y-lg pb-12 pt-5">

 




      
    <div class="container  justify-center mx-auto max-width-xs  ">
        
        <div class="w-full md:w-auto flex flex-col md:flex-row space-y-2 md:space-y-0 items-stretch md:items-center justify-end md:space-x-3 flex-shrink-0 mb-2">
            <a id="addUser" href="#" class="flex items-center justify-center text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center  mb-2">
                <svg class="h-3.5 w-3.5 mr-2" fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path clip-rule="evenodd" fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" />
                </svg>
                Add User 
            </a>

            
           
            
        </div>

        <form style="display: none;" class=" pb-6 " id="addUserForm" method="POST" action="{{ route('users.store') }}" enctype="multipart/form-data"> 
            @if(Session::has('success'))
                <x-alert level="success" message="{{ Session::get('success') }}"> </x-alert>
                @php
                    Session::forget('success');
                @endphp
            
            @endif
            
            <div class="w-full  text-center bg-white border border-gray-200 rounded-lg shadow sm:px-8 sm:py-2 dark:bg-gray-800 dark:border-gray-700">
                <div class="">
                    <div id="addUserSuccess"  style="display:none; " class="p-4 mb-4 text-sm text-green-800 rounded-lg bg-green-50 dark:bg-gray-800 dark:text-green-400" role="alert">
                      </div>
                      <div id="addUserDanger" style="display:none; " class="p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400" role="alert">
                        
                      </div>
                        @csrf
                    <div class="flex justify-center flex-wrap flex-row" >
                        
                        <div class="result w-5/12  pr-4">
                            <div class="bg-white pt-4 pb-3 rounded-lg">
                                <div class="relative bg-inherit w-full">
                                   
                                    <input type="text" id="username"  name="name" class="peer bg-transparent h-10 w-full rounded-lg text-black placeholder-transparent ring-0 px-2 ring-black-500 focus:ring-black-600 focus:outline-none focus:border-blue-600" placeholder=""  value=""/>    
                                    <label for="username" class="absolute cursor-text left-0 -top-3 text-sm text-gray-500 bg-inherit mx-1 px-1 peer-placeholder-shown:text-base peer-placeholder-shown:text-black-500 peer-placeholder-shown:top-2 peer-focus:-top-3 peer-focus:text-blue-600 peer-focus:text-sm transition-all">Name</label>
                                </div>
                            </div>
                            
                            <span id="nameError"  class="error text-red-600"></span>
                            
                            
                        </div>
                        <div class="result w-5/12  pr-4">
                            <div class="bg-white pt-4 pb-3 rounded-lg">
                                <div class="relative bg-inherit w-full">
                                   
                                    <input type="text" id="useremail"  name="email" class="peer bg-transparent h-10 w-full rounded-lg text-black placeholder-transparent ring-0 px-2 ring-black-500 focus:ring-black-600 focus:outline-none focus:border-blue-600" placeholder=""  value=""/>    
                                    <label for="useremail" class="absolute cursor-text left-0 -top-3 text-sm text-gray-500 bg-inherit mx-1 px-1 peer-placeholder-shown:text-base peer-placeholder-shown:text-black-500 peer-placeholder-shown:top-2 peer-focus:-top-3 peer-focus:text-blue-600 peer-focus:text-sm transition-all">Email</label>
                                </div>
                            </div>
                           
                            <span id="emailError" class="error text-red-600"></span>
                           
                            
                        </div>
                        <div class="result w-2/12    pt-4 pb-3 text-left">
                            <input type="hidden" name="parent_id" value="{{ Optimus::encode($user->id); }}" />
                            <button type="submit" class=" text-white bg-gradient-to-r from-cyan-500 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-cyan-300 dark:focus:ring-cyan-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2">Create & send invite</button>
                        </div>
                          
                        
                    </div>
                    
                     
                    
                </div> 
            </div>
        </form>
        
        @if (count($childUsers) ==0)
            <div ></div>
        @endif

       
        <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
            <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
                <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                    <tr>
                        <th scope="col" class="px-6 py-3">
                            Name
                        </th>
                        <th scope="col" class="px-6 py-3">
                            Email
                        </th>
                        <th scope="col" class="px-6 py-3">
                            Business Assigned
                        </th>
                       
                        <th scope="col" class="px-6 py-3">
                            <span class="sr-only">Actions</span>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($childUsers as $childUser)
                    <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                        <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                            {{ $childUser->name }}
                        </th>
                        <td class="px-6 py-4">
                            {{ $childUser->email }}
                        </td>
                        <td class="px-6 py-4">
                            ABC ltd
                        </td>
                       
                        <td class="px-6 py-4 text-right">
                            <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a> 
                            | <a href="#" class="font-medium text-green-600 dark:text-blue-500 hover:underline">Send Invite</a>
                            | <a href="#" class="font-medium text-red-600 dark:text-blue-500 hover:underline">Delete</a>
                        </td>
                    </tr>
                    @endforeach

                   
                </tbody>
            </table>
        </div>

       
       

        
    </div>
    





</section>




  
<script src="{{ asset('js/jquery.js') }}"></script>
<script src="{{ asset('js/qr-code-styling.js') }}"></script>
@include('dashboard.qrcodesJs',['config'=>$config])
@include('dashboard.usersJs',['config'=>$config])
</x-app-layout>