@extends('layouts.app')

@section('content')

<div class="">
    <main>
        <header class="relative isolate bg-stone-50">
            <div class="absolute inset-0 overflow-hidden -z-10" aria-hidden="true">
                <div class="absolute -mt-16 opacity-50 left-16 top-full transform-gpu blur-3xl xl:left-1/2 xl:-ml-80">
                    <div class="aspect-[1154/678] w-[72.125rem] bg-gradient-to-br {{ $transaction->deleted_at == null ? 'from-[#10b981] to-[#a7f3d0]' : 'from-[#fb7185] to-[#e11d48]' }}"
                        style="clip-path: polygon(100% 38.5%, 82.6% 100%, 60.2% 37.7%, 52.4% 32.1%, 47.5% 41.8%, 45.2% 65.6%, 27.5% 23.4%, 0.1% 35.3%, 17.9% 0%, 27.7% 23.4%, 76.2% 2.5%, 74.2% 56%, 100% 38.5%)">
                    </div>
                </div>
                <div class="absolute inset-x-0 bottom-0 h-px bg-gray-900/5"></div>
            </div>

            <div class="px-4 py-10 mx-auto sm:px-6 lg:px-16">
                <div class="flex items-center justify-between max-w-2xl mx-auto gap-x-8 lg:mx-0 lg:max-w-none">
                    <a href="{{ route('companies.show', $transaction->company->slug) }}"
                        class="flex items-center gap-x-6">
                        @if($transaction->company->type == 'client')
                        <span
                            class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-emerald-50 ring-1 ring-emerald-100">
                            <span class="text-3xl font-medium leading-none text-emerald-600">{{
                                mb_substr($transaction->company->name, 0, 3, 'UTF-8') }}</span>
                        </span>
                        @else
                        <span
                            class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-amber-50 ring-1 ring-amber-100">
                            <span class="text-3xl font-medium leading-none text-amber-600">{{
                                mb_substr($transaction->company->name, 0, 3, 'UTF-8') }}</span>
                        </span>
                        @endif
                        <h1>
                            <div class="text-sm leading-6 text-gray-500"><span class="text-gray-700">#{{
                                    $transaction->number }}</span></div>
                            <div class="mt-1 text-base font-semibold leading-6 text-gray-900 uppercase truncate">{{
                                $transaction->company->name }}</div>
                        </h1>
                    </a>
                    <div class="flex items-center gap-x-2 sm:gap-x-3">

                        @if($transaction->uuid == null)
                        @if($transaction->deleted_at == null)

                        {{-- Bank Transaction (paid/received) için edit butonu --}}
                        @can('update', $transaction)
                        <x-a-button href="{{ route('transactions.edit', $transaction->id) }}" click="" type="button"
                            ring="amber" icon="edit">
                            İŞLEMİ DÜZENLE
                        </x-a-button>
                        @endcan
                        @include('modals.cancel', [
                        'title' => 'EFATURA OLUŞTURULACAK',
                        'subtitle' => 'Fatura silme işlemi geri alınamaz. Devam etmek istiyor musunuz?',
                        'route' => route('invoices.destroy', $transaction->id),
                        'cancel' => 'HAYIR, GERİ DÖN',
                        'confirm' => 'EVET, SİL',
                        'b_name' => 'BELGEYİ SİL',
                        'b_icon' => 'close',
                        'b_ring' => 'rose',
                        ])
                        @endif
                        @endif

                        <div class="relative sm:hidden">
                            <button type="button" class="block p-3 -m-3" id="more-menu-button" aria-expanded="false"
                                aria-haspopup="true">
                                <span class="sr-only">More</span>
                                <svg class="w-5 h-5 text-gray-500" 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>

                            <div class="absolute right-0 z-10 mt-0.5 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="more-menu-button"
                                tabindex="-1">
                                <!-- Active: "bg-gray-50", Not Active: "" -->
                                <button type="button"
                                    class="block w-full px-3 py-1 text-sm leading-6 text-left text-gray-900"
                                    role="menuitem" tabindex="-1" id="more-menu-item-0">Copy URL
                                </button>
                                <a href="#" class="block px-3 py-1 text-sm leading-6 text-gray-900" role="menuitem"
                                    tabindex="-1" id="more-menu-item-1">Edit</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <div class="px-4 py-4 mx-auto sm:px-6 lg:px-8">

            {{--BREADCRUMB--}}
            <nav class="flex pb-4" aria-label="Breadcrumb">
                <ol role="list" class="flex items-center space-x-4 uppercase">
                    <li>
                        <div>
                            <a href="{{ route('dashboard') }}" class="text-gray-400 hover:text-gray-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-gray-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('companies.index') }}"
                                class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700">HESAPLAR</a>
                        </div>
                    </li>
                    <li>
                        <div class="flex items-center">
                            <svg class="flex-shrink-0 w-5 h-5 text-gray-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('companies.show', $transaction->company->slug) }}"
                                class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
                                aria-current="page">{{ $transaction->company->name }}</a>
                        </div>
                    </li>
                    <li>
                        <div class="flex items-center">
                            <svg class="flex-shrink-0 w-5 h-5 text-gray-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-gray-500 hover:text-gray-700"
                                aria-current="page">{{ $transaction->note }}</a>
                        </div>
                    </li>
                </ol>
            </nav>

            <div
                class="grid items-start grid-cols-1 grid-rows-1 mx-auto gap-x-8 gap-y-8 lg:mx-0 lg:max-w-none lg:grid-cols-3">

                <!--SIDEBAR-->
                <div class="lg:col-start-3 lg:row-end-1">
                    <h2 class="sr-only">Özet</h2>
                    <div class="bg-white rounded-lg shadow-sm ring-1 ring-stone-300">
                        <dl class="flex flex-wrap">
                            <div class="flex-auto pt-6 pl-6">
                                <dt class="text-lg font-semibold text-gray-900">FATURA BİLGİLERİ</dt>
                                <dd class="grid gap-1 mt-2 text-left text-gray-500 justify-items-start">
                                    <div class="flex flex-wrap items-center font-medium text-gray-900 gap-x-3">
                                        <label for="date"
                                            class="block text-sm font-medium leading-6 text-gray-500">FATURA
                                            TARİHİ</label>
                                        <span>{{ date('d.m.Y', strtotime($transaction->date)) }}</span>
                                    </div>
                                    <div class="flex flex-wrap items-center font-medium text-gray-900 gap-x-3">
                                        <label for="number"
                                            class="block text-sm font-medium leading-6 text-gray-500">FATURA NO:</label>
                                        <span>{{ $transaction->number }}</span>
                                    </div>
                                    <div class="flex flex-wrap items-center font-medium text-gray-900 gap-x-3">
                                        <label for=""
                                            class="block text-sm font-medium leading-6 text-gray-500">ÖZELLEŞTİRME
                                            NO:</label>
                                        <span>TR.1.2</span>
                                    </div>
                                    <div class="flex flex-wrap items-center font-medium text-gray-900 gap-x-3">
                                        <label for=""
                                            class="block text-sm font-medium leading-6 text-gray-500">SENARYO:</label>
                                        <span>TEMELFATURA</span>
                                    </div>
                                    <div class="flex flex-wrap items-center font-medium text-gray-900 gap-x-3">
                                        <label for="type"
                                            class="block text-sm font-medium leading-6 text-gray-500">FATURA
                                            TİPİ:</label>
                                        <span>{{ $transaction->type }}</span>
                                    </div>
                                    <div class="flex flex-wrap items-center font-medium text-gray-900 gap-x-3">
                                        <label for="currency"
                                            class="block text-sm font-medium leading-6 text-gray-500">PARA
                                            BİRİMİ:</label>
                                        <span>{{ $transaction->currency }}</span>
                                    </div>
                                    @if($transaction->currency != 'TRL')
                                    <div class="flex flex-wrap items-center font-medium text-gray-900 gap-x-3">
                                        <label for="currency"
                                            class="block text-sm font-medium leading-6 text-gray-500">DÖVİZ
                                            KURU:</label>
                                        <span>{{ $transaction->ex_rate }} TRL</span>
                                    </div>
                                    @endif
                                    <div class="flex flex-wrap items-center font-medium text-gray-900 gap-x-3">
                                        <label for="" class="block text-sm font-medium leading-6 text-gray-500">FATURA
                                            ALT TİPİ:</label>
                                        <span>-</span>
                                    </div>
                                </dd>
                            </div>
                            <div class="self-end flex-none px-6 pt-4">
                                <dt class="sr-only">Status</dt>
                                @if($transaction->deleted_at == null)
                                <dd
                                    class="px-2 py-1 text-xs font-medium text-green-600 rounded-md bg-green-50 ring-1 ring-inset ring-green-600/20">
                                    İŞLENDİ
                                </dd>
                                @else
                                <dd
                                    class="px-2 py-1 text-xs font-medium rounded-md bg-rose-50 text-rose-600 ring-1 ring-inset ring-rose-600/20">
                                    SİLİNDİ
                                </dd>
                                @endif
                            </div>
                        </dl>
                        <div class="px-6 py-6 mt-6 border-t border-gray-900/5">
                            {{--AKTİVİTELER--}}
                            <div>
                                <h2 class="flex items-center text-lg leading-6 font-jbmono-bold text-stone-700">
                                    <span class="mr-1 material-symbols-outlined">
                                        history
                                    </span>
                                    Düzenleme Geçmişi
                                </h2>
                                <ul role="list" class="mt-6 space-y-6">
                                    <li class="relative flex gap-x-4">
                                        <div
                                            class="relative flex items-center justify-center flex-none w-6 h-6 bg-white">
                                            <div class="h-1.5 w-1.5 rounded-full bg-gray-100 ring-1 ring-gray-300">
                                            </div>
                                        </div>
                                        <p class="flex-auto py-0.5 text-xs leading-5 text-gray-500">
                                            <span class="font-medium text-gray-900">{{ $transaction->user->name
                                                }}</span>
                                            <br>Belgeyi oluşturdu.
                                        </p>
                                        @if($transaction->created_at)
                                        <time datetime="{{ $transaction->created_at->toDateTimeString() }}"
                                            class="flex-none py-0.5 text-xs leading-5 text-gray-500">{{
                                            $transaction->created_at->diffForHumans() }}
                                        </time>
                                        @endif
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <!--FATURA-->
                <div
                    class="px-4 py-8 -mx-4 bg-white shadow-sm ring-1 ring-stone-300 sm:mx-0 sm:rounded-lg sm:px-8 sm:pb-14 lg:col-span-2 lg:row-span-2 lg:row-end-2 xl:px-16 xl:pb-20 xl:pt-16">

                    @include('transactions._partials.header')


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

@endsection

@section('scripts')
@endsection

@section('outerScripts')
@endsection