@extends('layouts.app')

@section('content')

{{-- BAŞLIK --}}
<main class="grid min-h-full px-4 pt-24 pb-8 text-stone-200 lexend-500 place-items-start sm:py-24 lg:px-12">
    <div>

        <h1 class="mt-4 text-5xl font-semibold tracking-tight text-stone-100 sm:text-7xl">{{
            __('dashboard.account-center') }}
        </h1>
        <p class="mt-6 text-lg sm:text-xl/8">{{ __('dashboard.manage-account-tools') }}</p>

        <div class="flex flex-wrap items-center justify-start mt-10 gap-3">
            <a href="{{ route('profile.show') }}"
                class="flex items-center rounded-md bg-stone-800/80 pl-4 pr-5 py-2.5 text-sm font-semibold shadow-xs hover:bg-stone-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-stone-600">
                <span class="pr-1.5 material-symbols-rounded">
                    person
                </span>
                <div>
                    <p>{{ __('dashboard.profile') }}</p>
                    <p class="text-xs font-normal text-stone-400">{{ Auth::user()->name }}</p>
                </div>
            </a>
            <a href="{{ route('teams.show', Auth::user()->currentTeam->id) }}"
                class="flex items-center rounded-md bg-stone-800/80 pl-4 pr-5 py-2.5 text-sm font-semibold shadow-xs hover:bg-stone-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-stone-600">
                <span class="pr-1.5 material-symbols-rounded">
                    {{ Auth::user()->currentTeam->type == 'business' ? 'business_center' : 'family_restroom' }}
                </span>
                <div>
                    <p>{{ Auth::user()->currentTeam->type == 'business' ? __('dashboard.business') :
                        __('dashboard.family') }}
                    </p>
                    <p class="text-xs font-normal text-stone-400">{{ Auth::user()->currentTeam->name }}</p>
                </div>
            </a>
            <a href="https://wa.me/0908502551090/" target="_blank"
                class="flex items-center rounded-md bg-stone-700/80 pl-4 pr-5 py-2.5 text-sm font-semibold shadow-xs hover:bg-stone-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-stone-600">
                <span class="pr-1.5 material-symbols-rounded">
                    quick_phrases
                </span>
                <div>
                    <p>{{ __('dashboard.live-support') }}</p>
                    <p class="text-xs font-normal text-stone-400">{{ __('dashboard.support-hours') }}</p>
                </div>
            </a>
        </div>
    </div>
</main>

<div class="grid gap-5 mx-4 mt-12 lg:mx-12">

    {{-- BİLDİRİM --}}
    <div class="max-w-5xl p-4 shadow-sm rounded-xl bg-teal-200/50">
        <div class="flex items-center">
            <div class="shrink-0">
                <svg class="text-teal-700 size-6" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"
                    data-slot="icon">
                    <path fill-rule="evenodd"
                        d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z"
                        clip-rule="evenodd" />
                </svg>
            </div>
            <div class="ml-3">
                <p class="text-sm font-medium text-teal-700">{{ __('notifications.everything-is-ok') }}</p>
            </div>
        </div>
    </div>

    {{-- ARAÇLAR --}}
    <p class="text-lg sm:text-xl/8 text-stone-50">{{ __('dashboard.tools-you-have') }}</p>
    <div class="max-w-7xl">

        {{-- <div class="max-w-4xl p-3 mb-4 shadow-sm rounded-xl bg-white/70">
            <div class="flex items-center">
                <div class="shrink-0">
                    <span class="material-symbols-rounded text-stone-700">wand_stars</span>
                </div>
                <div class="ml-3">
                    <p class="text-xs font-medium tracking-tight text-stone-900/70">{{ __('notifications.apper-tools')
                        }}</p>
                </div>
            </div>
        </div> --}}

        <div class="grid grid-cols-2 lg:grid-cols-7 gap-4">
            @foreach ($user_accesses as $tool)
            @php
            $toolType = strtolower($tool->type);
            $locale = app()->getLocale();
            $avatarName = $tools_config[$toolType]['names'][$locale] ?? ucfirst($tool->type);
            @endphp
            <a href="https://{{ $tool->type }}.apper.com.tr/dashboard"
                class="p-2 grid gap-y-1 transition-all bg-white/80 hover:bg-white hover:shadow hover:ring-2 hover:ring-stone-600 rounded-xl group shrink-0">
                <div class="flex items-center">
                    <div>
                        <img class="inline-block size-11"
                            src="https://cdn.apper.com.tr/img/apper/icon-color-{{ $tool->type }}.svg"
                            alt="{{ $tool->type }}" />
                    </div>
                    <div class="ml-2.5 truncate">
                        <p class="text-sm font-medium text-stone-700 group-hover:text-stone-900">{{ ucfirst($toolType)
                            }}</p>
                        {{-- <p class="text-xs text-stone-500 group-hover:text-stone-700">{{ $avatarName }}</p> --}}
                        <p class="flex items-center text-xs font-medium text-stone-400 truncate">{{ __('dashboard.go')
                            }}

                    </div>
                </div>
                {{-- <div>
                    <span
                        class="inline-flex items-center rounded-md bg-yellow-50 px-2 py-1 text-xs font-medium text-yellow-800 ring-1 ring-inset ring-yellow-600/20">Bildirim</span>
                </div>
                --}}
            </a>
            @endforeach
        </div>
    </div>
    {{-- INTEGRATIONS --}}
    <p class="text-lg sm:text-xl/8 text-stone-50">{{ __('dashboard.integrations') }}</p>
    <div class="max-w-7xl mb-24">
        <div class="grid grid-cols-2 lg:grid-cols-7 gap-4">
            @if ($has_pos_access == true)
            <a href="https://app.bulutadisyon.com/login" target="_blank"
                class="block p-4 transition-all bg-white/80 hover:bg-white hover:shadow hover:ring-2 hover:ring-stone-600 rounded-xl group shrink-0">
                <div class="flex items-center">
                    <div>
                        <img class="inline-block size-9" src="https://cdn.apper.com.tr/img/apper/icon-color-pos.svg"
                            alt="pos" />
                    </div>
                    <div class="ml-2.5 truncate">
                        <p class="text-sm font-medium text-stone-700 group-hover:text-stone-900">Poscloud</p>
                        <p class="flex items-center text-xs font-medium text-stone-400 truncate">{{ __('dashboard.go')
                            }}
                            <span class="material-symbols-rounded text-sm text-stone-500 pl-0.5">arrow_outward</span>
                        </p>
                    </div>
                </div>
            </a>
            @endif
            @if ($has_sabee_access == true)
            <a href="https://chm.sabeeapp.com/" target="_blank"
                class="block p-4 transition-all bg-white/80 hover:bg-white hover:shadow hover:ring-2 hover:ring-stone-600 rounded-xl group shrink-0">
                <div class="flex items-center">
                    <div>
                        <img class="inline-block size-9" src="https://cdn.apper.com.tr/img/apper/icon-color-sabee.svg"
                            alt="sabee" />
                    </div>
                    <div class="ml-2.5 truncate">
                        <p class="text-sm font-medium text-stone-700 group-hover:text-stone-900">Sabeeapp</p>
                        <p class="flex items-center text-xs font-medium text-stone-400 truncate">{{ __('dashboard.go')
                            }}
                            <span class="material-symbols-rounded text-sm text-stone-500 pl-0.5">arrow_outward</span>
                        </p>
                    </div>
                </div>
            </a>
            @endif
            @if ($has_gib_access == true)
            <div
                class="block p-4 transition-all bg-white/80 hover:bg-white hover:shadow hover:ring-2 hover:ring-stone-600 rounded-xl group shrink-0">
                <div class="flex items-center">
                    <div>
                        <img class="inline-block size-9" src="https://cdn.apper.com.tr/img/apper/icon-color-gib.svg"
                            alt="sabee" />
                    </div>
                    <div class="ml-2.5 truncate">
                        <p class="text-sm font-medium text-stone-700 group-hover:text-stone-900">E-Belge</p>
                        <p class="flex items-center text-xs font-medium text-stone-400 truncate">{{
                            __('dashboard.connected') }}</p>
                    </div>
                </div>
            </div>
            @endif
            @if ($has_inpos_access == true)
            <div
                class="block p-4 transition-all bg-white/80 hover:bg-white hover:shadow hover:ring-2 hover:ring-stone-600 rounded-xl group shrink-0">
                <div class="flex items-center">
                    <div>
                        <img class="inline-block size-9" src="https://cdn.apper.com.tr/img/apper/icon-color-inpos.svg"
                            alt="sabee" />
                    </div>
                    <div class="ml-2.5 truncate">
                        <p class="text-sm font-medium text-stone-700 group-hover:text-stone-900">inPos</p>
                        <p class="flex items-center text-xs font-medium text-stone-400 truncate">{{
                            __('dashboard.connected') }}</p>
                    </div>
                </div>
            </div>
            @endif
            <a href="{{ route('integrations.index') }}"
                class="flex items-center p-4 transition-all bg-white/20 hover:bg-white/40 ring-2 ring-white/60 hover:shadow hover:ring-4 hover:ring-white rounded-xl group shrink-0">
                <div class="flex items-center gap-x-2">
                    <span class="material-symbols-rounded text-4xl text-white">add</span>
                    <div class="truncate">
                        <p class="text-sm font-medium text-white">{{ __('dashboard.add-new') }}</p>
                    </div>
                </div>
            </a>
        </div>
    </div>

    {{-- GÜNCELLEMELER --}}
    {{-- <div class="my-24 max-w-7xl">
        <div class="p-4 bg-stone-800/80 text-stone-400 rounded-xl">
            <h2 class="text-lg font-semibold text-stone-300">{{ __('dashboard.updates') }}</h2>
            <ul class="mt-4 space-y-2">
                @foreach ($release_notes as $update)
                <li class="text-xs">
                    <span class="pr-0.5 font-bold text-stone-200">{{
                        ucfirst($update->tool) }}</span>
                    {{ $update->note }} - <span class="italic text-stone-500">{{
                        $update->created_at->diffForHumans() }}</span>
                </li>
                @endforeach
            </ul>
        </div>
    </div> --}}

</div>

@endsection

@section('scripts')

@endsection