@extends('layouts.app')

@section('content')

    <header class="bg-gradient-to-b from-stone-100 to-white shadow">
        <div class="lg:divide-y lg:divide-gray-200">
            <nav class="hidden lg:flex" aria-label="Global">
                <div class="bg-gradient-to-b from-stone-600 to-stone-500 ps-2.5 pe-4 py-1.5 text-sm text-stone-50 shadow-sm rounded-e-2xl">ÇALIŞANLAR</div>
                <a href="" type="button" class="px-3.5 py-1.5 text-sm text-stone-500 hover:bg-stone-100 transition-all">Yeni Oluştur</a>
            </nav>
        </div>
    </header>

    <div class="space-y-10 divide-y divide-gray-900/10 max-w-6xl mx-auto pb-24">
        <div class="grid grid-cols-3 gap-x-8 gap-y-8 md:grid-cols-1">

            <div class="grid grid-cols-3 gap-x-4 gap-y-4 pt-5 md:grid-cols-1">

                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <span class="material-symbols-outlined text-4xl text-stone-600">
                            account_box
                        </span>
                    </div>
                    <div class="pl-2 pb-1 w-0 flex-1">
                        <dl>
                            <dd>
                                <div class="text-2xl font-bold text-stone-600">ÇALIŞANLAR</div>
                            </dd>
                        </dl>
                    </div>
                </div>

                <div class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl md:col-span-2">
                    <div class="px-4 sm:px-6 lg:px-8">
                        <div class="flow-root">
                            <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
                                <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
                                    <table class="min-w-full divide-y divide-gray-300">
                                        <thead>
                                        <tr>
                                            <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-0">ÇALIŞAN</th>
                                            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">DEPARTMAN</th>
                                            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">DURUM</th>
                                            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">MAAŞ</th>
                                            <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-0">
                                                <span class="sr-only">GÖRÜNTÜLE</span>
                                            </th>
                                        </tr>
                                        </thead>
                                        <tbody class="divide-y divide-gray-200 bg-white">
                                        @php
                                            function replaceTurkishChars($string) {
                                                $turkish = ['ç', 'ğ', 'ı', 'ö', 'ş', 'ü', 'Ç', 'Ğ', 'İ', 'Ö', 'Ş', 'Ü'];
                                                $english = ['c', 'g', 'i', 'o', 's', 'u', 'C', 'G', 'I', 'O', 'S', 'U'];
                                                return str_replace($turkish, $english, $string);
                                            }
                                        @endphp
                                        @foreach($employees as $employee)
                                            <tr>
                                                <td class="whitespace-nowrap tracking-tighter py-5 pl-4 pr-3 text-sm sm:pl-0">
                                                    <div class="flex items-center">
                                                        <div class="size-11 shrink-0">
                                                            <span class="inline-flex h-10 w-10 items-center justify-center rounded-full
                                                            {{ $employee->gender == 'male' ? 'bg-blue-100 ring-1 ring-blue-200' : 'bg-rose-100 ring-1 ring-rose-200' }}">
                                                                <span class="text-sm font-medium leading-none text-stone-600">{{ $employee->shortname }}</span>
                                                            </span>
                                                        </div>
                                                        <div class="ml-4">
                                                            <div class="font-medium text-gray-900">{{ $employee->name }} {{ $employee->surname }}</div>
                                                            <div class="mt-1 text-gray-500">{{ $employee->email }}</div>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td class="whitespace-nowrap px-3 py-5 text-sm text-gray-500">
                                                    <div class="text-gray-500">{{ $employee->title }}</div>
                                                    <div class="mt-1 font-bold text-gray-800">{{ $employee->department->name }}</div>
                                                </td>
                                                <td class="whitespace-nowrap px-3 py-5 text-sm text-gray-500">
                                                    <span
                                                        class="inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20">Active</span>
                                                </td>
                                                <td class="whitespace-nowrap px-3 py-5 text-sm text-gray-500">
                                                    <span>{{ number_format($employee->net_salary, 2, ',', '.') }}<span class="text-sm pl-1 text-stone-400">TRL</span></span>
                                                </td>
                                                <td class="relative whitespace-nowrap py-5 pl-3 pr-4 text-right text-sm font-medium sm:pr-0">
                                                    <a href="#" class="text-indigo-600 hover:text-indigo-900">Edit<span class="sr-only">, Lindsay Walton</span></a>
                                                </td>
                                            </tr>
                                        @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('scripts')

@endsection