@extends('layouts.component.app')

@section('title', config('app.name'))

<script>
    // Function to dispatch the event
    function openPopup() {
        Livewire.dispatch('openPopup');
    }
</script>

@section('content')
    <div>
        <div class="flex justify-between items-center mt-4 mx-4 mb-4">
            <h2 class="font-bold text-csy-dark-blue text-xl">Organigramm</h2>
            @can('editAny_Orga', new \App\Models\Rolle())
                <button type="button" onclick="openPopup()"
                        class="inline-flex items-center gap-x-1.5 rounded-md bg-[rgb(241,131,0)] px-5 py-2 z-2000 text-sm font-semibold text-white shadow-sm hover:bg-orange-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-600">
                    Einstellungen
                </button>
            @else
                <button type="button"
                        disabled
                        class="grayscale inline-flex items-center gap-x-1.5 rounded-md bg-[rgb(241,131,0)] px-5 py-2 z-2000 text-sm font-semibold text-white shadow-sm hover:bg-orange-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-600">
                    Einstellungen
                </button>
            @endcan
        </div>
        @livewire('address-book.address-book', ['isOrganigrammMode' => true])
        @livewire('organigramm.orga')
    </div>
    <!-- Button unten links zum alten Bild von Organigramm -->
    @if($buttonUrl)
        <div class="m-6 flex justify-start">
            <a href="{{config('constants.WEBPORTAL_URL')."/?p=orga&mid=".session()->get('mid')."&fid=".session()->get('fid'). '&from_orga=1'}}"
               class="px-4 py-2 bg-gray-200 text-gray-800 font-semibold rounded-lg shadow hover:bg-gray-300 transition">
                Bisheriges Organigramm (Grafik)
            </a>
        </div>
    @endif
@endsection