@extends('layouts.app')

@section('head')
<script src="https://cdn.tiny.cloud/1/opnb5tiaxvfkkojbej4xw1cr9h524cvb9aaw2srmg8t13cf9/tinymce/7/tinymce.min.js"
    referrerpolicy="origin"></script>
@endsection

@section('styles')
@endsection

@section('content')
@include('components.alert')

@include('components.notification')

{{-- İŞLEV ÇUBUĞU --}}
<header class="tracking-tight shadow bg-gradient-to-b from-stone-100 to-white">
    <div class="lg:divide-y lg:divide-stone-200">
        <nav class="hidden divide-x 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">
                GİRİŞ EKRANI
            </div>
            <a href="{{ route('hirings.create') }}" type="button"
                class="px-3.5 py-1.5 text-sm text-stone-500 hover:bg-stone-100 transition-all">Yeni Oluştur</a>
            <div x-data="{ printMenu: false }" @mouseenter="printMenu = true" @mouseleave="printMenu = false"
                class="relative">
                <button type="button"
                    class="px-3.5 py-1.5 text-sm text-stone-500 hover:bg-stone-100 transition-all">Raporlar
                </button>
                <div class="absolute grid py-2 shadow-md bg-stone-50 min-w-44" x-show="printMenu" x-transition
                    x-cloak="">
                    <a href="#" type="button"
                        class="px-3.5 py-1.5 text-sm text-stone-500 hover:bg-stone-100 transition-all">Aktif
                        Kiralamalar</a>
                    <a href="#" type="button"
                        class="px-3.5 py-1.5 text-sm text-stone-500 hover:bg-stone-100 transition-all">Bekleyenler</a>
                    <a href="#" type="button"
                        class="px-3.5 py-1.5 text-sm text-stone-500 hover:bg-stone-100 transition-all">Tam Liste</a>
                </div>
            </div>
        </nav>
    </div>
</header>

<main>
    <div class="px-4 pt-4 mx-auto max-w-7xl pb-60">
        {{-- ÜST MENÜ --}}
        <div class="text-stone-700">
            <dl class="grid grid-cols-1 gap-3 sm:grid-cols-3">
                {{-- AKTİF --}}
                <div class="overflow-hidden bg-white rounded-lg shadow ring-1 ring-stone-200">
                    <div class="p-5">
                        <div class="flex items-center">
                            <div class="flex-shrink-0">
                                <span class="text-4xl material-symbols-rounded text-stone-600">
                                    play_arrow
                                </span>
                            </div>
                            <a href="#" class="flex-1 w-0 ml-3">
                                <dl>
                                    <dt class="text-sm font-light truncate text-stone-600">AKTİF KİRALAMALAR</dt>
                                    <dd>
                                        <div class="text-3xl font-bold text-stone-600">
                                            {{ $active_hirings }}<span class="text-xl text-stone-400">/{{
                                                $active_hirings + $available_products }}</span>
                                        </div>
                                    </dd>
                                    <div class="flex flex-wrap gap-x-0.5">
                                        @for ($i = 0; $i < $active_hirings; $i++) <span
                                            class="text-xs material-symbols-rounded text-stone-300">
                                            fiber_manual_record
                                            </span>
                                            @endfor
                                    </div>
                                </dl>
                            </a>
                        </div>
                    </div>
                </div>
                {{-- MÜSAİT OLAN --}}
                <div class="overflow-hidden bg-white rounded-lg shadow ring-1 ring-stone-200">
                    <div class="p-5">
                        <div class="flex items-center">
                            <div class="flex-shrink-0">
                                <span class="text-4xl material-symbols-rounded text-stone-600">
                                    pause
                                </span>
                            </div>
                            <a href="#" class="flex-1 w-0 ml-3">
                                <dl>
                                    <dt class="text-sm font-light truncate text-stone-600">KİRALANABİLİR ÜRÜNLER</dt>
                                    <dd>
                                        <div class="text-3xl font-bold text-stone-600">{{ $available_products }}</div>
                                    </dd>
                                    <div class="flex flex-wrap gap-x-1">
                                        @for ($i = 0; $i < $available_products; $i++) <span
                                            class="text-xs material-symbols-rounded text-stone-300">
                                            fiber_manual_record
                                            </span>
                                            @endfor
                                    </div>
                                </dl>
                            </a>
                        </div>
                    </div>
                </div>
                {{-- TÜM CİHAZLAR --}}
                <div class="overflow-hidden bg-white rounded-lg shadow ring-1 ring-stone-200">
                    <div class="p-5">
                        <div class="flex items-center">
                            <div class="flex-shrink-0">
                                <span class="text-4xl material-symbols-rounded text-stone-600">
                                    border_all
                                </span>
                            </div>
                            <a href="#" class="flex-1 w-0 ml-3">
                                <dl>
                                    <dt class="text-sm font-light truncate text-stone-600">TÜM ÜRÜNLER</dt>
                                    <dd>
                                        <div class="text-3xl font-bold text-stone-600">{{ $count_products }}</div>
                                    </dd>
                                    <div class="flex flex-wrap gap-x-1">
                                        @for ($i = 0; $i < $count_products; $i++) <span
                                            class="text-xs material-symbols-rounded text-stone-300">
                                            fiber_manual_record
                                            </span>
                                            @endfor
                                    </div>
                                </dl>
                            </a>
                        </div>
                    </div>
                </div>
            </dl>
        </div>

        {{-- KİRADAKİLER --}}
        <ul role="list"
            class="px-6 mt-4 bg-white divide-y shadow-xs divide-stone-100 ring-1 ring-stone-700/5 sm:rounded-xl">
            <div class="py-5 bg-white border-b border-stone-200">
                <h3 class="text-base font-semibold text-stone-700">AKTİF KİRALAMALAR</h3>
            </div>

            @livewire('hirings')

        </ul>

    </div>
</main>
@endsection

@section('scripts')
@endsection