@extends('layouts.guard')

@section('content')
<div>
    <section aria-labelledby="profile-overview-title">
        <div class="max-w-3xl mt-80 mx-auto px-4 sm:px-6 lg:max-w-7xl lg:px-8 rounded-lg bg-white overflow-hidden">
            <h2 class="sr-only" id="profile-overview-title">Profile Overview</h2>
            <div class="bg-white p-6">
                <div class="sm:flex sm:items-center sm:justify-between">
                    <div class="sm:flex sm:space-x-5">
                        <div class="flex-shrink-0">
                            <img class="mx-auto h-20 w-20 rounded-full"
                                src="/media/images/logo.png"
                                alt="">
                        </div>
                        <div class="mt-4 text-center sm:mt-0 sm:pt-1 sm:text-left">
                            <p class="text-sm font-medium text-gray-600">Hi,</p>
                            <p class="text-xl font-bold text-gray-900 sm:text-2xl">{{Auth::user()->name}}</p>
                            <p class="text-sm font-medium text-gray-600"> @if(Auth::user()->assignment->isEmpty() ) @else Your assignment is {{Auth::user()->assignment->where('status','active')->first()->site->name}} @endif</p>
                        </div>
                    </div>
                    <div class="mt-5 flex justify-center sm:mt-0">
                        {{-- <a href="#"
                            class="flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                            View profile
                        </a> --}}
                    </div>
                </div>
            </div>
            {{-- <div
                class="border-t border-gray-200 bg-gray-50 grid grid-cols-1 divide-y divide-gray-200 sm:grid-cols-3 sm:divide-y-0 sm:divide-x">

                <div class="px-6 py-5 text-sm font-medium text-center">
                    <span class="text-gray-900">{{Auth::user()->email}}</span>
                    <!-- space -->
                    <span class="text-gray-600"></span>
                </div>

                <div class="px-6 py-5 text-sm font-medium text-center">
                    <span class="text-gray-900">{{Auth::user()->phone_number}}</span>
                    <!-- space -->
                    <span class="text-gray-600"></span>
                </div>

                <div class="px-6 py-5 text-sm font-medium text-center">
                    <span class="text-gray-900">{{Auth::user()->dob}}</span>
                    <!-- space -->
                    <span class="text-gray-600"></span>
                </div>

            </div> --}}
        </div>
    </section>
</div>

<!-- This example requires Tailwind CSS v2.0+ -->
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:max-w-7xl lg:px-8 rounded-lg bg-white overflow-hidden">
    <div class="max-w-7xl mx-auto text-center py-12 px-4 sm:px-6 lg:py-16 lg:px-8">

        @if (\Session::has('success'))


        <!-- This example requires Tailwind CSS v2.0+ -->
    <div class="rounded-md bg-green-50 p-4">
        <div class="flex">
          <div class="flex-shrink-0">
            <!-- Heroicon name: solid/check-circle -->
            <svg class="h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
            </svg>
          </div>
          <div class="ml-3">
            <p class="text-sm font-medium text-green-800">{!! \Session::get('success') !!}</p>
          </div>

        </div>
      </div>

    @endif




    @if(Auth::user()->assignment->isEmpty() ) You have not been assigned any site @else
        <h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
            <span class="block">Ready to dive in?</span>
            <span class="block">Scan the QR-Code to Clock In.</span>
          </h2>


          @if (\Session::has('error'))


          <!-- This example requires Tailwind CSS v2.0+ -->
      <div class="rounded-md bg-red-50 p-4">
          <div class="flex">
            <div class="flex-shrink-0">
              <!-- Heroicon name: solid/check-circle -->
              <svg class="h-5 w-5 text-red-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
              </svg>
            </div>
            <div class="ml-3">
              <p class="text-sm font-medium text-red-800">{!! \Session::get('error') !!}</p>
            </div>

          </div>
        </div>

      @endif
        {{-- Scan Code --}}
        <div id="container" class="max-w-7xl mx-auto text-center py-12 px-4 sm:px-6 lg:py-16 lg:px-8" >
            <canvas hidden="true" class="max-w-7xl mx-auto text-center py-12 px-4 sm:px-6 lg:py-16 lg:px-8" style="width: 400px; width:300px;" id="qr-canvas"></canvas>

            <div id="qr-result" hidden="">
              <b>Menu Link:</b>
              <span id="outputData"></span>
            </div>
          </div>







        {{-- End Code --}}


      <div class="mt-8 flex justify-center">



        <div class="inline-flex rounded-md shadow">
          <a href="#"  id="btn-scan-qr" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-900 hover:bg-indigo-700"> Scan Code </a>
        </div>
        {{-- <div class="ml-3 inline-flex">
          <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200"> Learn more </a>
        </div> --}}
      </div>

@endif


    </div>
  </div>



@endsection