@extends('layout/main')
@section('title', 'About | ' . env('APP_NAME'))
@section('content')
<div class="mb-30"></div>
<div class="container" x-data="{tab: {{\App\Models\PublicSiteDepartment::first()->id}}}">
    <h2 class="text-xl md:text-[28px] font-bold text-primary mb-30"> {!! ___('about_us.about_us') !!} </h2>
    <div class="inline-flex mb-30 md:hidden">
        <div class="relative z-5"
            x-data="{open: false, toggle() {if (this.open) {return this.close()}; this.$refs.button.focus(); this.open = true }, close(focusAfter) { if (! this.open) return; this.open = false; focusAfter &amp;&amp; focusAfter.focus()} }"
            x-on:keydown.escape.prevent.stop="close($refs.button)"
            x-on:focusin.window="! $refs.panel.contains($event.target) && close()" x-id="['dropdown-button']">
            <!-- Button-->
            <button
                class="w-72 h-60 flex items-center justify-between bg-primary px-5 rounded-lg text-sm text-white font-medium"
                x-ref="button" x-on:click="toggle()" :aria-expanded="open" :aria-controls="$id('dropdown-button')"
                type="button">{!! ___('about_us.chooseTab') !!}
                <!-- Heroicon: chevron-down-->
                <svg class="h-5 w-5 fill-current transition-transform" xmlns="http://www.w3.org/2000/svg"
                    viewbox="0 0 20 20" :class="open ? 'rotate-180' : ''">
                    <path fill-rule="evenodd"
                        d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                        clip-rule="evenodd"></path>
                </svg>
            </button><!-- Panel-->
            <div class="absolute right-0 mt-2 w-full rounded-md bg-white shadow max-h-[288px] overflow-y-auto"
                x-ref="panel" x-show="open" x-transition.origin.top.left="" x-on:click.outside="close($refs.button)"
                :id="$id('dropdown-button')" style="display: none;">
                @foreach($aboutus_taps as $tap)
                <a class="block py-4 px-3 text-center border-b border-b-exgray first-of-type:border-t-2xl last-of-type:border-b-2xl last-of-type:border-b-0 hover:bg-primary hover:text-white"
                    href="null" data-index="{{$tap->id}}" :class="tab == $el.dataset.index ? 'bg-primary text-white' : ''"
                    @click.prevent="tab = $el.dataset.index">{!! sessionLocale()=='en' ? $tap->title_en : $tap->title_ar !!}</a>
                @endforeach
            </div>
        </div>
    </div>
    <div class="grid grid-cols-12 gap-20 mb-30">
        <div class="col-span-12 md:col-span-3 hidden md:block">
            <div class="h-full overflow-y-auto border border-exgray rounded-2xl max-h-[400px] md:max-h-full">
            @foreach($aboutus_taps as $tap)
                <a class="block py-4 px-3 text-center border-b border-b-exgray first-of-type:border-t-2xl last-of-type:border-b-2xl last-of-type:border-b-0 hover:bg-primary hover:text-white"
                    href="null" data-index="{{$tap->id}}" :class="tab == $el.dataset.index ? 'bg-primary text-white' : ''"
                    @click.prevent="tab = $el.dataset.index">{!! sessionLocale()=='en' ? $tap->title_en : $tap->title_ar !!}</a>
                @endforeach
            </div>
        </div>
        <div class="col-span-12 md:col-span-9">
        @foreach($aboutus_taps as $tap)

            <div class="flex flex-col gap-30" x-show="tab == {{$tap->id}}">
                {!! sessionLocale()=='en' ? $tap->description_en : $tap->description_ar !!}
            </div>
            @endforeach
        </div>
    </div>
</div>
<div class="mb-100"></div>
@endsection