@extends('layouts.app')

@section('content')
    {{--
        <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                {{ __('Genel Bakış') }}
            </h2>
        </div>
    --}}

    <div class="py-8">
        <div class="max-w-screen-2xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">

                <main>
                    <div class="relative isolate overflow-hidden">
                        <!-- Secondary navigation -->
                        <header class="pb-4 pt-6 sm:pb-6">
                            <div class="mx-auto flex max-w-full flex-wrap items-center gap-6 px-4 sm:flex-nowrap sm:px-6 lg:px-8">
                                <h1 class="text-base font-semibold leading-7 text-gray-900">Nakit Akışı</h1>
                                <div
                                    class="order-last flex w-full gap-x-8 text-sm font-semibold leading-6 sm:order-none sm:w-auto sm:border-l sm:border-gray-200 sm:pl-6 sm:leading-7">
                                    <a href="#" class="text-emerald-600">Son 7 gün</a>
                                    <a href="#" class="text-gray-700">Son 30 gün</a>
                                    <a href="#" class="text-gray-700">Tüm zamanlar</a>
                                </div>
                                <a href="#"
                                   class="ml-auto flex items-center gap-x-1 rounded-md bg-emerald-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-emerald-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-emerald-600">
                                    <svg class="-ml-1.5 h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path
                                            d="M10.75 6.75a.75.75 0 00-1.5 0v2.5h-2.5a.75.75 0 000 1.5h2.5v2.5a.75.75 0 001.5 0v-2.5h2.5a.75.75 0 000-1.5h-2.5v-2.5z"/>
                                    </svg>
                                    Yeni fatura
                                </a>
                            </div>
                        </header>

                        <div class=" px-4 sm:flex-nowrap sm:px-6 lg:px-8 py-6">
                            <ul role="list" class="divide-y divide-gray-100">
                                <li class="flex items-center justify-between gap-x-6 py-5">
                                    <div class="min-w-0">
                                        <div class="flex items-start gap-x-3">
                                            <p class="text-sm font-semibold leading-6 text-gray-900">GraphQL API</p>
                                            <p class="rounded-md whitespace-nowrap mt-0.5 px-1.5 py-0.5 text-xs font-medium ring-1 ring-inset text-green-700 bg-green-50 ring-green-600/20">Complete</p>
                                        </div>
                                        <div class="mt-1 flex items-center gap-x-2 text-xs leading-5 text-gray-500">
                                            <p class="whitespace-nowrap">Due on <time datetime="2023-03-17T00:00Z">March 17, 2023</time></p>
                                            <svg viewBox="0 0 2 2" class="h-0.5 w-0.5 fill-current">
                                                <circle cx="1" cy="1" r="1" />
                                            </svg>
                                            <p class="truncate">Created by Leslie Alexander</p>
                                        </div>
                                    </div>
                                    <div class="flex flex-none items-center gap-x-4">
                                        <a href="#" class="hidden rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:block">View project<span class="sr-only">, GraphQL API</span></a>
                                        <div class="relative flex-none">
                                            <button type="button" class="-m-2.5 block p-2.5 text-gray-500 hover:text-gray-900" id="options-menu-0-button" aria-expanded="false" aria-haspopup="true">
                                                <span class="sr-only">Open options</span>
                                                <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                                    <path d="M10 3a1.5 1.5 0 110 3 1.5 1.5 0 010-3zM10 8.5a1.5 1.5 0 110 3 1.5 1.5 0 010-3zM11.5 15.5a1.5 1.5 0 10-3 0 1.5 1.5 0 003 0z" />
                                                </svg>
                                            </button>

                                            <!--
                                              Dropdown menu, show/hide based on menu state.

                                              Entering: "transition ease-out duration-100"
                                                From: "transform opacity-0 scale-95"
                                                To: "transform opacity-100 scale-100"
                                              Leaving: "transition ease-in duration-75"
                                                From: "transform opacity-100 scale-100"
                                                To: "transform opacity-0 scale-95"
                                            -->
                                            <div class="absolute right-0 z-10 mt-2 w-32 origin-top-right rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="options-menu-0-button" tabindex="-1">
                                                <!-- Active: "bg-gray-50", Not Active: "" -->
                                                <a href="#" class="block px-3 py-1 text-sm leading-6 text-gray-900" role="menuitem" tabindex="-1" id="options-menu-0-item-0">Edit<span class="sr-only">, GraphQL API</span></a>
                                                <a href="#" class="block px-3 py-1 text-sm leading-6 text-gray-900" role="menuitem" tabindex="-1" id="options-menu-0-item-1">Move<span class="sr-only">, GraphQL API</span></a>
                                                <a href="#" class="block px-3 py-1 text-sm leading-6 text-gray-900" role="menuitem" tabindex="-1" id="options-menu-0-item-2">Delete<span class="sr-only">, GraphQL API</span></a>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="flex items-center justify-between gap-x-6 py-5">
                                    <div class="min-w-0">
                                        <div class="flex items-start gap-x-3">
                                            <p class="text-sm font-semibold leading-6 text-gray-900">New benefits plan</p>
                                            <p class="rounded-md whitespace-nowrap mt-0.5 px-1.5 py-0.5 text-xs font-medium ring-1 ring-inset text-gray-600 bg-gray-50 ring-gray-500/10">In progress</p>
                                        </div>
                                        <div class="mt-1 flex items-center gap-x-2 text-xs leading-5 text-gray-500">
                                            <p class="whitespace-nowrap">Due on <time datetime="2023-05-05T00:00Z">May 5, 2023</time></p>
                                            <svg viewBox="0 0 2 2" class="h-0.5 w-0.5 fill-current">
                                                <circle cx="1" cy="1" r="1" />
                                            </svg>
                                            <p class="truncate">Created by Leslie Alexander</p>
                                        </div>
                                    </div>
                                    <div class="flex flex-none items-center gap-x-4">
                                        <a href="#" class="hidden rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:block">View project<span class="sr-only">, New benefits plan</span></a>
                                        <div class="relative flex-none">
                                            <button type="button" class="-m-2.5 block p-2.5 text-gray-500 hover:text-gray-900" id="options-menu-1-button" aria-expanded="false" aria-haspopup="true">
                                                <span class="sr-only">Open options</span>
                                                <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                                    <path d="M10 3a1.5 1.5 0 110 3 1.5 1.5 0 010-3zM10 8.5a1.5 1.5 0 110 3 1.5 1.5 0 010-3zM11.5 15.5a1.5 1.5 0 10-3 0 1.5 1.5 0 003 0z" />
                                                </svg>
                                            </button>

                                            <!--
                                              Dropdown menu, show/hide based on menu state.

                                              Entering: "transition ease-out duration-100"
                                                From: "transform opacity-0 scale-95"
                                                To: "transform opacity-100 scale-100"
                                              Leaving: "transition ease-in duration-75"
                                                From: "transform opacity-100 scale-100"
                                                To: "transform opacity-0 scale-95"
                                            -->
                                            <div class="absolute right-0 z-10 mt-2 w-32 origin-top-right rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="options-menu-1-button" tabindex="-1">
                                                <!-- Active: "bg-gray-50", Not Active: "" -->
                                                <a href="#" class="block px-3 py-1 text-sm leading-6 text-gray-900" role="menuitem" tabindex="-1" id="options-menu-1-item-0">Edit<span class="sr-only">, New benefits plan</span></a>
                                                <a href="#" class="block px-3 py-1 text-sm leading-6 text-gray-900" role="menuitem" tabindex="-1" id="options-menu-1-item-1">Move<span class="sr-only">, New benefits plan</span></a>
                                                <a href="#" class="block px-3 py-1 text-sm leading-6 text-gray-900" role="menuitem" tabindex="-1" id="options-menu-1-item-2">Delete<span class="sr-only">, New benefits plan</span></a>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="flex items-center justify-between gap-x-6 py-5">
                                    <div class="min-w-0">
                                        <div class="flex items-start gap-x-3">
                                            <p class="text-sm font-semibold leading-6 text-gray-900">Onboarding emails</p>
                                            <p class="rounded-md whitespace-nowrap mt-0.5 px-1.5 py-0.5 text-xs font-medium ring-1 ring-inset text-gray-600 bg-gray-50 ring-gray-500/10">In progress</p>
                                        </div>
                                        <div class="mt-1 flex items-center gap-x-2 text-xs leading-5 text-gray-500">
                                            <p class="whitespace-nowrap">Due on <time datetime="2023-05-25T00:00Z">May 25, 2023</time></p>
                                            <svg viewBox="0 0 2 2" class="h-0.5 w-0.5 fill-current">
                                                <circle cx="1" cy="1" r="1" />
                                            </svg>
                                            <p class="truncate">Created by Courtney Henry</p>
                                        </div>
                                    </div>
                                    <div class="flex flex-none items-center gap-x-4">
                                        <a href="#" class="hidden rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:block">View project<span class="sr-only">, Onboarding emails</span></a>
                                        <div class="relative flex-none">
                                            <button type="button" class="-m-2.5 block p-2.5 text-gray-500 hover:text-gray-900" id="options-menu-2-button" aria-expanded="false" aria-haspopup="true">
                                                <span class="sr-only">Open options</span>
                                                <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                                    <path d="M10 3a1.5 1.5 0 110 3 1.5 1.5 0 010-3zM10 8.5a1.5 1.5 0 110 3 1.5 1.5 0 010-3zM11.5 15.5a1.5 1.5 0 10-3 0 1.5 1.5 0 003 0z" />
                                                </svg>
                                            </button>

                                            <!--
                                              Dropdown menu, show/hide based on menu state.

                                              Entering: "transition ease-out duration-100"
                                                From: "transform opacity-0 scale-95"
                                                To: "transform opacity-100 scale-100"
                                              Leaving: "transition ease-in duration-75"
                                                From: "transform opacity-100 scale-100"
                                                To: "transform opacity-0 scale-95"
                                            -->
                                            <div class="absolute right-0 z-10 mt-2 w-32 origin-top-right rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="options-menu-2-button" tabindex="-1">
                                                <!-- Active: "bg-gray-50", Not Active: "" -->
                                                <a href="#" class="block px-3 py-1 text-sm leading-6 text-gray-900" role="menuitem" tabindex="-1" id="options-menu-2-item-0">Edit<span class="sr-only">, Onboarding emails</span></a>
                                                <a href="#" class="block px-3 py-1 text-sm leading-6 text-gray-900" role="menuitem" tabindex="-1" id="options-menu-2-item-1">Move<span class="sr-only">, Onboarding emails</span></a>
                                                <a href="#" class="block px-3 py-1 text-sm leading-6 text-gray-900" role="menuitem" tabindex="-1" id="options-menu-2-item-2">Delete<span class="sr-only">, Onboarding emails</span></a>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="flex items-center justify-between gap-x-6 py-5">
                                    <div class="min-w-0">
                                        <div class="flex items-start gap-x-3">
                                            <p class="text-sm font-semibold leading-6 text-gray-900">iOS app</p>
                                            <p class="rounded-md whitespace-nowrap mt-0.5 px-1.5 py-0.5 text-xs font-medium ring-1 ring-inset text-gray-600 bg-gray-50 ring-gray-500/10">In progress</p>
                                        </div>
                                        <div class="mt-1 flex items-center gap-x-2 text-xs leading-5 text-gray-500">
                                            <p class="whitespace-nowrap">Due on <time datetime="2023-06-07T00:00Z">June 7, 2023</time></p>
                                            <svg viewBox="0 0 2 2" class="h-0.5 w-0.5 fill-current">
                                                <circle cx="1" cy="1" r="1" />
                                            </svg>
                                            <p class="truncate">Created by Leonard Krasner</p>
                                        </div>
                                    </div>
                                    <div class="flex flex-none items-center gap-x-4">
                                        <a href="#" class="hidden rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:block">View project<span class="sr-only">, iOS app</span></a>
                                        <div class="relative flex-none">
                                            <button type="button" class="-m-2.5 block p-2.5 text-gray-500 hover:text-gray-900" id="options-menu-3-button" aria-expanded="false" aria-haspopup="true">
                                                <span class="sr-only">Open options</span>
                                                <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                                    <path d="M10 3a1.5 1.5 0 110 3 1.5 1.5 0 010-3zM10 8.5a1.5 1.5 0 110 3 1.5 1.5 0 010-3zM11.5 15.5a1.5 1.5 0 10-3 0 1.5 1.5 0 003 0z" />
                                                </svg>
                                            </button>

                                            <!--
                                              Dropdown menu, show/hide based on menu state.

                                              Entering: "transition ease-out duration-100"
                                                From: "transform opacity-0 scale-95"
                                                To: "transform opacity-100 scale-100"
                                              Leaving: "transition ease-in duration-75"
                                                From: "transform opacity-100 scale-100"
                                                To: "transform opacity-0 scale-95"
                                            -->
                                            <div class="absolute right-0 z-10 mt-2 w-32 origin-top-right rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="options-menu-3-button" tabindex="-1">
                                                <!-- Active: "bg-gray-50", Not Active: "" -->
                                                <a href="#" class="block px-3 py-1 text-sm leading-6 text-gray-900" role="menuitem" tabindex="-1" id="options-menu-3-item-0">Edit<span class="sr-only">, iOS app</span></a>
                                                <a href="#" class="block px-3 py-1 text-sm leading-6 text-gray-900" role="menuitem" tabindex="-1" id="options-menu-3-item-1">Move<span class="sr-only">, iOS app</span></a>
                                                <a href="#" class="block px-3 py-1 text-sm leading-6 text-gray-900" role="menuitem" tabindex="-1" id="options-menu-3-item-2">Delete<span class="sr-only">, iOS app</span></a>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="flex items-center justify-between gap-x-6 py-5">
                                    <div class="min-w-0">
                                        <div class="flex items-start gap-x-3">
                                            <p class="text-sm font-semibold leading-6 text-gray-900">Marketing site redesign</p>
                                            <p class="rounded-md whitespace-nowrap mt-0.5 px-1.5 py-0.5 text-xs font-medium ring-1 ring-inset text-yellow-800 bg-yellow-50 ring-yellow-600/20">Archived</p>
                                        </div>
                                        <div class="mt-1 flex items-center gap-x-2 text-xs leading-5 text-gray-500">
                                            <p class="whitespace-nowrap">Due on <time datetime="2023-06-10T00:00Z">June 10, 2023</time></p>
                                            <svg viewBox="0 0 2 2" class="h-0.5 w-0.5 fill-current">
                                                <circle cx="1" cy="1" r="1" />
                                            </svg>
                                            <p class="truncate">Created by Courtney Henry</p>
                                        </div>
                                    </div>
                                    <div class="flex flex-none items-center gap-x-4">
                                        <a href="#" class="hidden rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:block">View project<span class="sr-only">, Marketing site redesign</span></a>
                                        <div class="relative flex-none">
                                            <button type="button" class="-m-2.5 block p-2.5 text-gray-500 hover:text-gray-900" id="options-menu-4-button" aria-expanded="false" aria-haspopup="true">
                                                <span class="sr-only">Open options</span>
                                                <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                                    <path d="M10 3a1.5 1.5 0 110 3 1.5 1.5 0 010-3zM10 8.5a1.5 1.5 0 110 3 1.5 1.5 0 010-3zM11.5 15.5a1.5 1.5 0 10-3 0 1.5 1.5 0 003 0z" />
                                                </svg>
                                            </button>

                                            <!--
                                              Dropdown menu, show/hide based on menu state.

                                              Entering: "transition ease-out duration-100"
                                                From: "transform opacity-0 scale-95"
                                                To: "transform opacity-100 scale-100"
                                              Leaving: "transition ease-in duration-75"
                                                From: "transform opacity-100 scale-100"
                                                To: "transform opacity-0 scale-95"
                                            -->
                                            <div class="absolute right-0 z-10 mt-2 w-32 origin-top-right rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="options-menu-4-button" tabindex="-1">
                                                <!-- Active: "bg-gray-50", Not Active: "" -->
                                                <a href="#" class="block px-3 py-1 text-sm leading-6 text-gray-900" role="menuitem" tabindex="-1" id="options-menu-4-item-0">Edit<span class="sr-only">, Marketing site redesign</span></a>
                                                <a href="#" class="block px-3 py-1 text-sm leading-6 text-gray-900" role="menuitem" tabindex="-1" id="options-menu-4-item-1">Move<span class="sr-only">, Marketing site redesign</span></a>
                                                <a href="#" class="block px-3 py-1 text-sm leading-6 text-gray-900" role="menuitem" tabindex="-1" id="options-menu-4-item-2">Delete<span class="sr-only">, Marketing site redesign</span></a>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>

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

            </div>
        </div>
    </div>
@endsection