@extends('layouts.app')

@section('content')

<header class="shadow bg-gradient-to-b from-stone-100 to-white">
    <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">
                ALINAN BELGELER</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="max-w-6xl pb-24 mx-auto space-y-10 divide-y divide-gray-900/10">
    <div class="grid grid-cols-3 pt-5 gap-x-4 gap-y-4 md:grid-cols-1">
        {{--BREADCRUMB--}}
        <nav class="flex py-2" aria-label="Breadcrumb">
            <ol role="list" class="flex items-center space-x-4 uppercase">
                <li>
                    <div>
                        <a href="{{ route('dashboard') }}" class="text-stone-400 hover:text-stone-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 text-stone-300" 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="{{ route('integrations.e-files.index') }}"
                            class="ml-4 text-sm font-medium text-stone-500 hover:text-stone-700">E-BELGELER</a>
                    </div>
                </li>
                <li>
                    <div class="flex items-center">
                        <svg class="flex-shrink-0 w-5 h-5 text-stone-300" 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="{{ route('integrations.e-files.incoming-files') }}"
                            class="ml-4 text-sm font-medium text-stone-500 hover:text-stone-700"
                            aria-current="page">GELEN BELGELER</a>
                    </div>
                </li>
                <li>
                    <div class="flex items-center">
                        <svg class="flex-shrink-0 w-5 h-5 text-stone-300" 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 text-stone-500 hover:text-stone-700"
                            aria-current="page">BELGELERİ AL</a>
                    </div>
                </li>
            </ol>
        </nav>

        <div class="flex items-center">
            <div class="flex-shrink-0">
                <span class="text-4xl material-symbols-outlined text-stone-600">
                    vertical_align_bottom
                </span>
            </div>
            <div class="flex-1 w-0 pb-1 pl-2">
                <dl>
                    <dd>
                        <div class="text-2xl font-bold text-stone-600">BELGELERİ AL</div>
                    </dd>
                </dl>
            </div>
        </div>

        <div class="grid grid-cols-3 gap-x-4 gap-y-4 md:grid-cols-1">
            <div
                class="p-4 mx-auto bg-white shadow ring-1 ring-stone-300 sm:mx-0 sm:rounded-lg lg:col-span-2 lg:row-span-2 lg:row-end-2">
                @isset($response->return)
                @foreach($response->return as $invoice)
                {{ $invoice->zarfVerisi }}
                @endforeach
                @else
                <div class="p-4 rounded-md bg-yellow-50">
                    <div class="flex">
                        <div class="shrink-0">
                            <svg class="text-yellow-400 size-5" viewBox="0 0 20 20" fill="currentColor"
                                aria-hidden="true" data-slot="icon">
                                <path fill-rule="evenodd"
                                    d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495ZM10 5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 5Zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
                                    clip-rule="evenodd" />
                            </svg>
                        </div>
                        <div class="ml-3">
                            <h3 class="text-sm font-bold text-yellow-800">YENİ BİRŞEYLER YOK GİBİ GÖRÜNÜYOR</h3>
                            <div class="mt-2 text-sm text-yellow-700">
                                <p>Yeni gelen belge bulunamadı. İşlemediğiniz belgeleri kontrol etmek için "GELEN
                                    BELGELER" sayfasına göz atabilir, belgeleri tekrar kontrol etmek için aşağıdaki
                                    butona basabilirsiniz.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <button type="button" onclick="location.reload()"
                    class="inline-flex mt-4 items-center gap-x-1.5 rounded-md bg-stone-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-stone-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-stone-600">
                    <span class="material-symbols-outlined">
                        sync
                    </span>
                    YENİDEN DENE
                </button>
                @endisset
            </div>
        </div>

    </div>
</div>

@endsection

@section('scripts')

@endsection