@section('title') {{'My businesses'}} @endsection
@php
   $planName = $user->subscription?->plan?->name ?? 'Starter';
   
   $now = \carbon\Carbon::now();  
   $expire = $user->subscription?->expired_at ? \carbon\Carbon::create($user->subscription->expired_at) : null;
   $planExpired = $expire ? $now->greaterThanOrEqualTo($expire) : false;
   $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">
            {{ __('QR Code') }} 
        </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">
            <!--button type="button" 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 Business
            </!--button -->
           
            
        </div>
        @if (count($businesses) ==0)
            <div >You do not have nay businesses added yet. Please add a business to continue.</div>
        @endif
        @foreach ($businesses as $business)
                @php
                   $qid =  '';
                   $config =  ['cc'=>'','dc'=>'','l'=>'','gl'=>'','n'=>''];
                   
                @endphp
            @isset($business->qrCode)
                @php
                   $qid =  Optimus::encode($business->qrCode->id);
                   $dconfig =  $business->qrCode->config;
                  
                   if($dconfig){
                    $config = ($dconfig);
                   }
                   
                @endphp
            @endisset
           
            <form class=" pb-6 " id="replyForm" method="POST" action="{{ route('qrcode.save') }}" enctype="multipart/form-data"> 
                @if(Session::has('success'))
            <x-alert level="success" message="{{ Session::get('success') }}"> </x-alert>
                @php
                    Session::forget('success');
                @endphp
            
            @endif
                <input type="hidden" name="bid" value="{{ $business->enc_id }}">
                <input type="hidden" name="qid" value="{{  $qid }}">
                <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="">
                        
                            @csrf
                        <div class="flex justify-center flex-wrap flex-row" >
                            <div class="form 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="{{ $business->enc_id }}_business"  name="business" 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="{{ ($config['n']) ? $config['n'] : $business->name }}"/> 
                                            
                                            <label for="{{ $business->enc_id }}_business" 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">Business Name</label>
                                    </div>
                                </div>
                                @error('business')
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </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="{{ $business->enc_id }}_google_link" name="google_link" value="{{ ($config['gl']) ? $config['gl'] : '' }}" 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="Google Link" /> 
                                            
                                            <label for="{{ $business->enc_id }}_google_link" 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">Google Invite Link</label>
                                    </div>
                                </div>
                                @error('google_link')
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                                
                            </div>
                            <div class="result w-2/12  ">
                            
                            
                            </div>
                        </div>
                        
                        <div class="flex justify-center flex-wrap flex-row" >
                            <div class="result w-3/12  ">
                                <span style="font-size: 15.5px;"><b>SCAN FOR FEEDBACK</b></span>
                                <div id="canvas" class="flex justify-center "></div>
                                    
                            </div> 
                            <div class="result w-4/12  ">
                                <p style="font-size:16px; margin-bottom:31px; font-weight:bold;">QR code setup</p>
                                <p class="text-info" id="qrMsg"></p>
                                
    
                                
                                    <div class="flex mb-2">
                                        <div class="flex-none w-6/12">
                                        QR code
                                        </div>
                                        <div class="flex-initial  w-4/12">
                                        
                                            <input type="color" name="dots_color"  id="qrColor" value="{{ ($config['dc']) ? $config['dc'] : '#000' }}"  class="shadow-sm bg-gray-50 h-9 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full py-1 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:shadow-sm-light" required>
                                        </div>
                                    </div>
                                    <div class="flex mb-2">
                                        <div class="flex-none w-6/12">
                                        Corner 3 Dots
                                        </div>
                                        <div class="flex-initial  w-4/12">
                                            <input type="color" name="corner_dots_color" value="{{ ($config['cc']) ? $config['cc'] : '#000' }}" id="qr_corner_dots"  class="shadow-sm h-9 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full py-1 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:shadow-sm-light" required>
                                        </div>
                                    </div>
                                    <div class="flex mb-2">
                                        <div class="flex-none w-6/12">
                                            Logo inside QR
                                        </div>
                                        <div class="flex-initial  w-4/12 ">
                                        
                                            <input name="qr_logo" class=" w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 "  type="file" id="qrLogo">
    
                                            
                                        </div>
                                        <div class="flex-initial w-12/12">
                                            <div id="fileError" class="text-red-600"></div>
                                            @error('qr_logo')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                        </div>
                                    </div>
                                    
                                    
                                    
                                    <div class="flex content">
                                        <div class="flex-none w-6/12">
                                        
                                        </div>
                                        <div class="flex-initial  w-4/12">
                                            <button type="submit" class="w-full text-white bg-gradient-to-r from-green-400 via-green-500 to-green-600 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-green-300 dark:focus:ring-green-800 font-medium rounded-lg text-sm px-3 py-2 text-center mr-2 mb-2">Save Settings</button>
                                        </div>
                                    </div>
                                    
                                    
                                
                            </div> 
                            <div class="result w-5/12  ">
                              
                                <p>QR lander link : <a class="underline text-blue-400" target="_BLANK" href="{{  url('/q/'.$business->enc_id) }}">{{  url('/q/'.$business->enc_id) }}</a></p>
                                
                                <button id="downloadQRBtn" type="button" class="mt-5 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-xs px-3 py-2 text-center mr-2 mb-2">Download QR code image</button>
                            </div>
                        </div>   
                        
                    </div> 
                </div>
            </form>
            
        
      
        
        @endforeach
       

        
    </div>
    





</section>




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