@extends('layouts.app')

@section('headScripts')

@endsection

@section('content')

{{--İŞLEV ÇUBUĞU--}}
<header class="tracking-tight shadow bg-slate-900/60">
    <div class="lg:divide-y lg:divide-slate-700">
        <nav class="hidden divide-x divide-slate-800 lg:flex" aria-label="Global">
            <div
                class="bg-gradient-to-b from-slate-600 to-slate-500 ps-2.5 pe-4 py-1.5 text-sm text-slate-50 shadow-sm rounded-e-2xl">
                {{ $company->name }}</div>
            <a href="#" type="button"
                class="px-3.5 py-1.5 text-sm text-slate-100 hover:bg-slate-800 transition-all">İletişim</a>
            <a href="#" type="button"
                class="px-3.5 py-1.5 text-sm text-slate-100 hover:bg-slate-800 transition-all">Teklif</a>
            <a href="#" type="button"
                class="px-3.5 py-1.5 text-sm text-slate-100 hover:bg-slate-800 transition-all">Ayarlar</a>
        </nav>
    </div>
</header>

<div class="">
    <main>
        <div class="px-4 pt-4 mx-auto max-w-screen-2xl pb-60 sm:px-6 lg:px-8">
            <div
                class="grid items-start max-w-2xl grid-cols-1 grid-rows-1 gap-4 mx-auto lg:mx-0 lg:max-w-none lg:grid-cols-3">

                {{--BREADCRUMB--}}
                <nav class="flex py-2" aria-label="Breadcrumb">
                    <ol role="list" class="flex items-center space-x-4 uppercase text-slate-200">
                        <li>
                            <div>
                                <a href="{{ route('dashboard') }}" class=hover:text-slate-500">
                                    <svg class="flex-shrink-0 w-5 h-5" viewBox="0 0 20 20" fill="currentColor"
                                        aria-hidden="true">
                                        <path fill-rule="evenodd"
                                            d="M9.293 2.293a1 1 0 011.414 0l7 7A1 1 0 0117 11h-1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-3a1 1 0 00-1-1H9a1 1 0 00-1 1v3a1 1 0 01-1 1H5a1 1 0 01-1-1v-6H3a1 1 0 01-.707-1.707l7-7z"
                                            clip-rule="evenodd" />
                                    </svg>
                                    <span class="sr-only">Home</span>
                                </a>
                            </div>
                        </li>
                        <li>
                            <div class="flex items-center">
                                <svg class="flex-shrink-0 w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
                                    aria-hidden="true">
                                    <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
                                </svg>
                                <a href="#" class="ml-4 text-sm font-medium hover:text-slate-400">İŞLETMELER</a>
                            </div>
                        </li>
                        <li>
                            <div class="flex items-center">
                                <svg class="flex-shrink-0 w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
                                    aria-hidden="true">
                                    <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
                                </svg>
                                <a href="#" class="ml-4 text-sm font-medium hover:text-slate-400" aria-current="page">{{
                                    $company->name }}</a>
                            </div>
                        </li>
                    </ol>
                </nav>

                <div class="grid gap-4 lg:col-start-1 lg:col-end-3">
                    {{--SAYFA BAŞLIĞI--}}
                    <div class="overflow-hidden rounded-lg shadow bg-white/80 ring-1 ring-slate-300">
                        <h2 class="sr-only" id="profile-overview-title">Profile Overview</h2>
                        <div class="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 rounded-full pattern-charlie-emerald">
                                        <span
                                            class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-slate-700 ring-1 ring-slate-600">
                                            @if( $company->shortname )
                                            <span class="text-3xl font-medium leading-none text-slate-200">{{
                                                $company->shortname }}</span>
                                            @else
                                            <span class="text-3xl font-medium leading-none text-slate-200">{{
                                                \Illuminate\Support\Str::limit($company->name, 3, '') }}</span>
                                            @endif
                                        </span>
                                    </div>
                                    <div class="w-full mt-4 text-center sm:mt-0 sm:pt-1 sm:text-left">
                                        <p class="text-sm font-medium text-emerald-600">İşletme</p>
                                        <p class="text-xl font-bold text-gray-900 uppercase truncate sm:text-2xl">{{
                                            $company->name }}</p>
                                    </div>
                                </div>
                                <div class="flex justify-center gap-3 mt-5 sm:mt-0">

                                </div>
                            </div>
                        </div>
                    </div>

                    @if(!is_null($tasks) && count($tasks) > 0)
                    <div class="p-4 rounded-lg shadow bg-white/80 ring-1 ring-slate-300">
                        <h2 class="flex items-center mb-4 text-lg leading-6 font-jbmono-bold text-slate-700">
                            <span class="mr-1 material-symbols-rounded">
                                task
                            </span>
                            GÖREVLER
                        </h2>
                        @livewire('tasks-timeline', ['tasks' => $tasks, 'filter' => $company->id])
                    </div>
                    @endif

                </div>

                {{--SAĞ PANEL--}}
                <div
                    class="grid grid-cols-1 gap-4 p-4 shadow bg-white/80 ring-1 ring-slate-400/20 sm:mx-0 sm:rounded-lg lg:col-start-3">

                    {{-- EPOSTALAR --}}
                    <div>
                        <h2 class="flex items-center text-lg leading-6 font-jbmono-bold text-slate-700">
                            <span class="mr-1 material-symbols-rounded">
                                mail
                            </span>
                            E-posta Adresleri
                        </h2>
                        @if($company->emails->count() > 0)
                            <div class="mt-3 space-y-2">
                                @foreach($company->emails as $email)
                                    <div class="flex items-center justify-between p-2 rounded bg-slate-50 ring-1 ring-slate-200">
                                        <div class="flex items-center gap-2 min-w-0">
                                            <span class="material-symbols-rounded text-slate-400 text-base">alternate_email</span>
                                            <span class="text-sm text-slate-700 truncate">{{ $email->email }}</span>
                                        </div>
                                        <div class="flex items-center gap-1 shrink-0">
                                            @if($email->is_primary)
                                                <span class="px-1.5 py-0.5 text-[10px] font-medium rounded bg-emerald-100 text-emerald-700">Birincil</span>
                                            @endif
                                            @if($email->label)
                                                <span class="px-1.5 py-0.5 text-[10px] font-medium rounded bg-slate-200 text-slate-600">{{ $email->label }}</span>
                                            @endif
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <p class="mt-2 text-sm text-slate-400">Kayıtlı e-posta adresi yok.</p>
                        @endif
                    </div>

                    {{-- NOTLAR --}}
                    <div>
                        <h2 class="flex items-center text-lg leading-6 font-jbmono-bold text-slate-700">
                            <span class="mr-1 material-symbols-rounded">
                                note
                            </span>
                            Notlar
                        </h2>

                    </div>
                </div>

            </div>
        </div>
    </main>
</div>

@endsection

@section('scripts')

@endsection