@extends('layouts.app')

@section('content')
<div class="bg-gray-900 opacity-50 hidden fixed inset-0 z-10" id="sidebarBackdrop"></div>
<div id="main-content" class="h-full w-full bg-gray-50 relative overflow-y-auto">
   <main>

      <div class="pt-6 px-4">
          
         <breadcrumb :items="[{'title' : 'Bajet', 'icon' : 'fas fa-file-invoice'}]"></breadcrumb>

         
         @if (Session::has('type'))
         <div class="@if(Session::get('type') == 'error') bg-red-100 border-red-500 text-red-900 @else bg-yellow-100 border-green-500 text-green-900 @endif  border-t-4 rounded-b px-4 py-3 shadow-md w-96 mx-auto mb-5" role="alert">
            <div class="flex">
              <div class="py-1">
                  @if(Session::get('type') == 'error')
                     <svg class="fill-current h-6 w-6 text-red-500 mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z"/></svg>
                  @else
                     <svg xmlns="http://www.w3.org/2000/svg" class="fill-current h-6 w-6 text-green-500 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
                     </svg>
                  @endif
               </div>
              <div>
                <p class="font-bold">{{ Session::get('message') }}</p>
                <p class="text-sm">{{ Session::get('title') }}</p>
              </div>
            </div>
          </div>
         @endif
        


         <div class=" flex justify-center items-center mx-auto">
         
            <a href="{{ route('bajet.tambah') }}" class="bg-white shadow  px-6 py-4 border border-solid rounded-lg w-1/6 mr-3 hover:bg-yellow-300 hover:transition-all cursor-pointer transition transform hover:-translate-y-1 ">
                <img src="{{ asset('img/budgeting.png') }}"  class="h-40 mx-auto text-center" alt="Windster Logo">
                <h2 class="mx-auto text-center font-bold text-2xl mt-4 uppercase">Daftar</h2>
            </a>
            
            <a href="{{ route('bajet.kemaskini') }}" class="bg-white shadow  px-6 py-4 border border-solid rounded-lg w-1/6 hover:bg-yellow-300 hover:transition-all cursor-pointer  transition transform hover:-translate-y-1 ">
                <img src="{{ asset('img/budget.png') }}" class="h-40 mx-auto text-center" alt="Windster Logo">
                <h2 class="mx-auto text-center font-bold text-2xl mt-4 uppercase">Kemaskini</h2>
            </a>
           
         </div>


      </div>
   </main>
   @include('layouts.footer')
@endsection