@extends('layouts.app')

@section('content')

<div class="">
    <main>

        <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-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('companies.index') }}"
                                class="ml-4 text-sm font-medium text-stone-500 hover:text-stone-700">HESAPLAR</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('companies.show', $invoice->company->slug) }}"
                                class="ml-4 text-sm font-medium text-stone-500 hover:text-stone-700"
                                aria-current="page">{{ $invoice->company->name }}</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">{{ $invoice->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="grid gap-y-4 lg:col-start-3 lg:row-end-1">

                    {{-- BUTTONS --}}
                    <div
                        class="flex flex-wrap items-center gap-2 p-4 bg-white rounded-lg shadow-sm ring-1 ring-stone-300">
                        <!-- YAZDIR -->
                        <x-button type="button" onclick="printInvoice()" color="stone" ring="amber" icon="print">
                            YAZDIR
                        </x-button>
                        @if (auth()->user()->current_team_id == 2 || auth()->user()->current_team_id == 49)
                        <!-- ÖDEME NOTUNU GÖSTER/GİZLE -->
                        <x-button type="button" onclick="togglePaymentNote(this)" color="stone" ring="amber"
                            icon="visibility">
                            <span id="payment-note-label">ÖDEME NOTUNU GİZLE</span>
                        </x-button>
                        @endif
                        @if (count($bulutadisyon_integrations) > 0 && $invoice->type == 'purchase_invoice')
                        <!-- STOK DAĞITIMI -->
                        <x-a-button href="{{ route('invoices.allocate-stock', $invoice->id) }}" click="" type="button"
                            color="amber" ring="amber" icon="inventory">
                            STOK DAĞITIMI
                        </x-a-button>
                        @endif
                        @if (!$invoice->stockAllocations || $invoice->stockAllocations->isEmpty())
                        <!-- BELGEYİ DÜZENLE -->
                        <x-a-button href="{{ route('invoices.edit', $invoice->id) }}" click="" type="button"
                            ring="amber" color="stone" icon="edit">
                            BELGEYİ DÜZENLE
                        </x-a-button>
                        <!-- BELGEYİ SİL -->
                        @include('modals.cancel', [
                        'title' => 'FATURA SİLİNECEK',
                        'subtitle' =>
                        'Fatura silme işlemi geri alınamaz. Devam etmek istiyor musunuz?',
                        'route' => route('invoices.destroy', $invoice->id),
                        'cancel' => 'HAYIR, GERİ DÖN',
                        'confirm' => 'EVET, SİL',
                        'b_name' => 'BELGEYİ SİL',
                        'b_icon' => 'delete',
                        'b_color' => 'rose',
                        'b_ring' => 'rose',
                        'b_href' => '#',
                        ])
                        @endif
                    </div>

                    {{-- FATURA GÖRSELLERİ --}}
                    @if (count($invoice_images ?? []) > 0)
                    <div class="p-4 bg-white rounded-lg shadow-sm ring-1 ring-stone-300" x-data="invoiceImageViewer()">
                        <h2 class="flex items-center text-lg leading-6 font-jbmono-bold text-stone-700">
                            <span class="mr-1 material-symbols-rounded">image</span>
                            Fatura Görselleri
                        </h2>
                        <div class="flex flex-wrap gap-2 mt-4">
                            <template x-for="image in invoiceImages" :key="image.id">
                                <button type="button" @click="selectedImage = image"
                                    class="transition rounded-md hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-teal-600"
                                    title="Görseli büyüt">
                                    <img :src="image.url" :alt="image.name"
                                        class="object-cover w-16 h-16 rounded-md shadow-sm ring-1 ring-stone-200">
                                </button>
                            </template>
                        </div>

                        {{-- GÖRSEL ÖNİZLEME MODALI --}}
                        <div x-show="selectedImage" @keydown.escape.window="selectedImage = null"
                            class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-stone-900/70"
                            @click.self="selectedImage = null" style="display: none;">
                            <div class="relative max-w-full">
                                <button type="button" @click="selectedImage = null"
                                    class="absolute z-10 p-1 bg-white rounded-full shadow -top-3 -right-3 hover:bg-stone-100"
                                    title="Kapat">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-stone-600"
                                        viewBox="0 0 20 20" fill="currentColor">
                                        <path fill-rule="evenodd"
                                            d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                                            clip-rule="evenodd" />
                                    </svg>
                                </button>
                                <img :src="selectedImage ? selectedImage.url : ''"
                                    :alt="selectedImage ? selectedImage.name : ''"
                                    class="max-h-[85vh] max-w-full rounded-lg shadow-xl">
                            </div>
                        </div>
                    </div>
                    @endif

                    @if ($invoice->type == 'sales_invoice')
                    @if ($invoice->durum == null)
                    {{-- GÖNDER --}}
                    <div class="p-4 bg-white rounded-lg shadow-sm ring-1 ring-stone-300">
                        <form class="grid gap-y-4" action="{{ route('check-invoice-status', $invoice->id) }}"
                            method="GET">
                            <!-- FATURA TİPİ -->
                            <h3 class="text-lg font-semibold text-stone-900">E-BELGE OLUŞTUR</h3>

                            <fieldset aria-label="Pricing plans" class="relative -space-y-px bg-white rounded-md">
                                <label aria-label="temel fatura"
                                    class="group flex flex-col items-center border border-stone-200 p-4 first:rounded-tl-md first:rounded-tr-md last:rounded-bl-md last:rounded-br-md focus:outline-none has-[:checked]:relative has-[:checked]:border-teal-200 has-[:checked]:bg-teal-50">
                                    <span class="flex items-center justify-start gap-3 text-sm">
                                        <input type="radio" name="pricing-plan" value="enterprise" checked
                                            class="relative size-4 appearance-none rounded-full border border-stone-300 bg-white before:absolute before:inset-1 before:rounded-full before:bg-white checked:border-teal-600 checked:bg-teal-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600 disabled:border-stone-300 disabled:bg-stone-100 disabled:before:bg-stone-400 forced-colors:appearance-auto forced-colors:before:hidden [&:not(:checked)]:before:hidden" />
                                        <div class="grid">
                                            <div class="font-medium text-stone-900 group-has-[:checked]:text-teal-900">
                                                TEMEL FATURA</div>
                                            <div
                                                class="text-xs tracking-tight text-stone-900/50 group-has-[:checked]:text-teal-900/50">
                                                <b>TEMEL</b> tipi ile gönderilen E-Belgeler müşteri tarafından
                                                <b>reddedilemez.</b>
                                            </div>
                                        </div>
                                    </span>
                                </label>
                                <label aria-label="ticari fatura"
                                    class="group flex flex-col items-center border border-stone-200 p-4 first:rounded-tl-md first:rounded-tr-md last:rounded-bl-md last:rounded-br-md focus:outline-none has-[:checked]:relative has-[:checked]:border-teal-200 has-[:checked]:bg-teal-50">
                                    <span class="flex items-center justify-start gap-3 text-sm">
                                        <input type="radio" name="pricing-plan" value="enterprise"
                                            class="relative size-4 appearance-none rounded-full border border-stone-300 bg-white before:absolute before:inset-1 before:rounded-full before:bg-white checked:border-teal-600 checked:bg-teal-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600 disabled:border-stone-300 disabled:bg-stone-100 disabled:before:bg-stone-400 forced-colors:appearance-auto forced-colors:before:hidden [&:not(:checked)]:before:hidden" />
                                        <div class="grid">
                                            <div class="font-medium text-stone-900 group-has-[:checked]:text-teal-900">
                                                TİCARİ FATURA</div>
                                            <div
                                                class="text-xs tracking-tight text-stone-900/50 group-has-[:checked]:text-teal-900/50">
                                                <b>TİCARİ</b> tipi ile gönderilen E-Belgelerde müşteriden
                                                <b>"KABUL"</b>
                                                ya da <b>"RED"</b> mesajı alabilirsiniz.
                                            </div>
                                        </div>
                                    </span>
                                </label>
                            </fieldset>

                            <div class="grid gap-y-2">
                                <div>
                                    <label for="company"
                                        class="block font-medium text-sm/6 text-stone-900">Müşteri</label>
                                    <div class="mt-1">
                                        <input id="company" type="company" name="company"
                                            value="{{ $invoice->company->name }}" disabled
                                            class="block w-full rounded-md bg-white px-3 py-1.5 text-stone-900 outline outline-1 -outline-offset-1 outline-stone-300 placeholder:text-stone-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-teal-600 disabled:cursor-not-allowed disabled:bg-stone-50 disabled:text-stone-500 disabled:outline-stone-200 sm:text-sm/6" />
                                    </div>
                                </div>
                                <div>
                                    <label for="date" class="block font-medium text-sm/6 text-stone-900">Tarih</label>
                                    <div class="mt-1">
                                        <input id="date" type="date" name="date" value="{{ $invoice->date }}"
                                            class="block w-full rounded-md bg-white px-3 py-1.5 text-stone-900 outline outline-1 -outline-offset-1 outline-stone-300 placeholder:text-stone-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-teal-600 disabled:cursor-not-allowed disabled:bg-stone-50 disabled:text-stone-500 disabled:outline-stone-200 sm:text-sm/6" />
                                    </div>
                                </div>
                                <div>
                                    <label for="company" class="block font-medium text-sm/6 text-stone-900">Fatura
                                        Tutarı</label>
                                    <div class="mt-1">
                                        <input id="company" type="company" name="company"
                                            value="{{ number_format($invoice->total_amount, 2, ',', '.') }} {{ $invoice->currency }}"
                                            disabled
                                            class="block w-full text-right rounded-md bg-white px-3 py-1.5 text-stone-900 outline outline-1 -outline-offset-1 outline-stone-300 placeholder:text-stone-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-teal-600 disabled:cursor-not-allowed disabled:bg-stone-50 disabled:text-stone-500 disabled:outline-stone-200 sm:text-sm/6" />
                                    </div>
                                </div>
                            </div>

                            @include('modals.cancel', [
                            'title' => 'E-BELGE OLUŞTURULACAK',
                            'subtitle' => 'Belge oluşturulduktan sonra düzenleme ve silme işlemi yapamayacaksınız.
                            Devam
                            etmek istiyor musunuz?',
                            'route' => route('send', $invoice->id),
                            'cancel' => 'HAYIR, GERİ DÖN',
                            'confirm' => 'EVET, OLUŞTUR',
                            'b_name' => 'E-BELGE OLUŞTUR',
                            'b_icon' => 'receipt_long',
                            'b_color' => 'stone',
                            'b_ring' => 'amber',
                            'b_href' => '#',
                            ])
                        </form>
                    </div>
                    @endif

                    @if ($invoice->durum)
                    {{-- Belge Durumu Bilgilendirme --}}
                    @if ($invoice->durum == 1)
                    <div class="p-4 rounded-md bg-yellow-50">
                        <div class="flex">
                            <div class="shrink-0">
                                <svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true"
                                    class="text-yellow-400 size-6">
                                    <path fill-rule="evenodd"
                                        d="M10 18a8 8 0 100-16 8 8 0 000 16zm-1-11a1 1 0 112 0v3.5a1 1 0 11-2 0V7zm1 6.5a1 1 0 100 2 1 1 0 000-2z"
                                        clip-rule="evenodd" />
                                </svg>
                            </div>
                            <div class="ml-3">
                                <h3 class="text-base font-bold text-yellow-800">BELGE İŞLENMEYİ BEKLİYOR
                                </h3>
                                <div class="mt-2 text-sm text-yellow-700">
                                    <p>Bu belge entegratör tarafından alınmıştır ancak henüz işlenmemiştir.
                                        Lütfen
                                        durumu kontrol etmek için aşağıdaki butonu kullanın.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    @elseif ($invoice->durum == 'draft')
                    <div class="p-4 rounded-md bg-yellow-50">
                        <div class="flex">
                            <div class="shrink-0">
                                <svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true"
                                    class="text-yellow-400 size-6">
                                    <path fill-rule="evenodd"
                                        d="M10 18a8 8 0 100-16 8 8 0 000 16zm-1-11a1 1 0 112 0v3.5a1 1 0 11-2 0V7zm1 6.5a1 1 0 100 2 1 1 0 000-2z"
                                        clip-rule="evenodd" />
                                </svg>
                            </div>
                            <div class="ml-3">
                                <h3 class="text-base font-bold text-yellow-800">TASLAK OLARAK OLUŞTURULDU
                                </h3>
                                <div class="mt-2 text-sm text-yellow-700">
                                    <p>Bu belge oluşturulmuştur ancak henüz GİB'e gönderilmemiştir. Belgeyi
                                        inceledikten sonra "ONAYLA" butonu ile GİB'e gönderebilirsiniz.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    @elseif ($invoice->durum == 2)
                    <div class="p-4 rounded-md bg-red-50">
                        <div class="flex">
                            <div class="shrink-0">
                                <svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true"
                                    class="text-red-400 size-6">
                                    <path fill-rule="evenodd"
                                        d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z"
                                        clip-rule="evenodd" />
                                </svg>
                            </div>
                            <div class="ml-3">
                                <h3 class="text-base font-bold text-red-800">BELGE İŞLENEMEDİ</h3>
                                <div class="mt-2 text-sm text-red-700">
                                    <p>Bu belge işlenirken bir hata oluştu. Lütfen fatura bilgilerinizi
                                        kontrol
                                        edin
                                        veya destek ekibiyle iletişime geçin.</p>
                                    @if ($invoice->gonderim_cevabi_detayi)
                                    <p class="mt-2 font-semibold">Hata Detayı:
                                        {{ $invoice->gonderim_cevabi_detayi }}
                                    </p>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                    @elseif ($invoice->durum == 3)
                    <div class="p-4 rounded-md bg-teal-50">
                        <div class="flex">
                            <div class="shrink-0">
                                <svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true"
                                    class="text-teal-400 size-6">
                                    <path
                                        d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z"
                                        clip-rule="evenodd" fill-rule="evenodd" />
                                </svg>
                            </div>
                            <div class="ml-3">
                                <h3 class="text-base font-bold text-teal-800">BELGE BAŞARIYLA İŞLENDİ</h3>
                                <div class="mt-2 text-sm text-teal-700">
                                    <p>Bu belge entegratörünüz tarafından başarıyla işlenmiştir.
                                        Oluşturulan e-belgeye ait detaylı bilgi ve işlemler için entegratör
                                        panelini
                                        kullanabilirsiniz.</p>
                                    @if ($invoice->ulasti_mi)
                                    <p class="mt-2 font-semibold text-teal-800">✓ Belge alıcıya ulaştı
                                    </p>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                    @else
                    <div class="p-4 rounded-md bg-teal-50">
                        <div class="flex">
                            <div class="shrink-0">
                                <svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true"
                                    class="text-teal-400 size-6">
                                    <path
                                        d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z"
                                        clip-rule="evenodd" fill-rule="evenodd" />
                                </svg>
                            </div>
                            <div class="ml-3">
                                <h3 class="text-base font-bold text-teal-800">BELGE İŞLENDİ</h3>
                                <div class="mt-2 text-sm text-teal-700">
                                    <p>Bu belge entegratör tarafından başarıyla işlenmiştir. Oluşturulan
                                        e-belgeye ait detaylı bilgi ve işlemler için entegratör panelini
                                        kullanabilirsiniz.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif

                    {{-- DURUM GÜNCELLE --}}
                    <div class="p-4 bg-white rounded-md shadow-sm ring-1 ring-stone-200">
                        <form action="{{ route('check-invoice-status', $invoice->id) }}" method="GET">
                            <button type="submit"
                                class="inline-flex items-center justify-center w-full px-4 py-2 text-sm font-semibold text-white transition-all duration-150 ease-in-out border border-transparent rounded-lg bg-gradient-to-r from-stone-600 to-stone-700 hover:from-stone-700 hover:to-stone-800 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-offset-2 disabled:opacity-50">
                                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15">
                                    </path>
                                </svg>
                                Belge Durumunu Güncelle
                            </button>
                        </form>
                        <p class="mt-2 text-xs text-center text-stone-500">
                            Son güncelleme:
                            {{ $invoice->updated_at ? $invoice->updated_at->diffForHumans() : 'Bilinmiyor' }}
                        </p>
                    </div>

                    {{-- E-FILE DETAILS AND STATUS --}}
                    @if ($invoice->ettn || $invoice->uuid || $invoice->belgeOid)
                    <div class="p-4 bg-white rounded-md shadow-sm ring-1 ring-stone-200">
                        <h3 class="mb-3 text-sm font-semibold text-stone-700">E-Fatura Bilgileri</h3>
                        <dl class="space-y-2">
                            @if ($invoice->ettn)
                            <div class="flex justify-between text-xs">
                                <dt class="font-medium text-stone-500">ETTN:</dt>
                                <dd class="font-mono text-stone-900">{{ $invoice->ettn }}</dd>
                            </div>
                            @endif
                            @if ($invoice->uuid)
                            <div class="flex justify-between text-xs">
                                <dt class="font-medium text-stone-500">UUID:</dt>
                                <dd class="font-mono text-stone-900">
                                    {{ Str::limit($invoice->uuid, 20) }}
                                </dd>
                            </div>
                            @endif
                            @if ($invoice->belgeOid)
                            <div class="flex justify-between text-xs">
                                <dt class="font-medium text-stone-500">Belge OID:</dt>
                                <dd class="font-mono text-stone-900">{{ $invoice->belgeOid }}</dd>
                            </div>
                            @endif
                            @if ($invoice->gonderim_cevabi_kodu)
                            <div class="flex justify-between text-xs">
                                <dt class="font-medium text-stone-500">Cevap Kodu:</dt>
                                <dd class="font-mono text-stone-900">
                                    {{ $invoice->gonderim_cevabi_kodu }}
                                </dd>
                            </div>
                            @endif
                        </dl>
                    </div>
                    @endif
                    <div class="p-4 rounded-md bg-yellow-50">
                        <div class="flex">
                            <div class="shrink-0">
                                <svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true"
                                    class="text-yellow-400 size-6">
                                    <path
                                        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" fill-rule="evenodd" />
                                </svg>
                            </div>
                            <div class="ml-3">
                                <h3 class="text-base font-bold text-yellow-800">DİKKAT</h3>
                                <div class="mt-2 text-sm text-yellow-700">
                                    <p>Oluşturulan e-belgeler üzerinde düzenleme yapılamaz. İptal etmek
                                        isterseniz
                                        entegratör portalından iptal ettikten sonra buradan iptalini
                                        yapabilirsiniz.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif

                    {{-- NOTIFICATION FOR STOCK ALLOCATION --}}
                    @if ($invoice->stockAllocations && $invoice->stockAllocations->isNotEmpty())
                    <div class="p-4 rounded-md bg-yellow-50">
                        <div class="flex">
                            <div class="shrink-0">
                                <svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true"
                                    class="text-yellow-400 size-6">
                                    <path
                                        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" fill-rule="evenodd" />
                                </svg>
                            </div>
                            <div class="ml-3">
                                <h3 class="text-base font-bold text-yellow-800">DİKKAT</h3>
                                <div class="mt-2 text-sm text-yellow-700">
                                    <p>Bu fatura için stok dağıtım kayıtları bulunmaktadır. Bu nedenle fatura
                                        üzerinde
                                        işlem yapamazsınız.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif
                    @endif

                    @if ($invoice->stockAllocations && $invoice->stockAllocations->isNotEmpty())
                    {{-- STOCK ALLOCATIONS --}}
                    <div class="grid p-6 bg-white rounded-lg shadow-sm gap-y-4 ring-1 ring-stone-300">
                        <dl class="flex flex-wrap">
                            <div class="flex-auto">
                                <dt class="text-lg font-semibold text-stone-900">STOK DAĞITIMLARI</dt>
                                <dd class="grid gap-1 mt-2">
                                    @foreach ($invoice->stockAllocations as $stockAllocation)
                                    <div
                                        class="flex items-center justify-between text-sm font-medium text-stone-600 gap-x-3">
                                        <div>{{ $stockAllocation->invoiceLine->name }}
                                            <span class="text-xs italic font-normal text-stone-400">x
                                                {{ $stockAllocation->allocated_quantity }} ->
                                                {{ $stockAllocation->targetAccount ?
                                                $stockAllocation->targetAccount->title : 'Hesap Bilgisi Yok' }}
                                                @if ($stockAllocation->warehouse)
                                                / {{ $stockAllocation->warehouse->name }}
                                                @else
                                                / ANA DEPO
                                                @endif
                                            </span>
                                        </div>
                                        <div class="text-xs tracking-tight text-stone-400">
                                            {{ (function ($name) {
                                            $parts = explode(' ', trim($name));
                                            if (count($parts) === 0) {
                                            return '';
                                            }
                                            $firstName = array_shift($parts);
                                            $initials = implode(
                                            ' ',
                                            array_map(function ($word) {
                                            return mb_strtoupper(mb_substr($word, 0, 1)) . '.';
                                            }, $parts),
                                            );
                                            return $firstName . ($initials ? ' ' . $initials : '');
                                            })($stockAllocation->user->name) }}
                                        </div>
                                    </div>
                                    @endforeach
                                </dd>
                            </div>
                        </dl>
                        <!-- BİLDİRİM -->
                        <div class="">
                            <div class="flex items-center px-4 py-2 border border-yellow-200 rounded-md bg-yellow-50">
                                <div class="shrink-0">
                                    <svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true"
                                        class="text-yellow-400 size-6">
                                        <path
                                            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" fill-rule="evenodd" />
                                    </svg>
                                </div>
                                <div class="ml-3">
                                    <div class="text-xs text-yellow-700">
                                        <p>Faturada stok dağıtım kayıtları bulunmaktadır. Bu nedenle fatura üzerinde
                                            işlem yapamazsınız.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif

                    {{-- AKTİVİTELER --}}
                    <div class="bg-white rounded-lg shadow-sm ring-1 ring-stone-300">
                        <div class="p-6">
                            <div>
                                <h2 class="flex items-center text-lg leading-6 font-jbmono-bold text-stone-700">
                                    <span class="mr-1 material-symbols-rounded">
                                        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-stone-100 ring-1 ring-stone-300">
                                            </div>
                                        </div>
                                        <p class="flex-auto py-0.5 text-xs leading-5 text-stone-500">
                                            <span class="font-medium text-stone-900">{{ $invoice->user->name }}</span>
                                            <br>Belgeyi oluşturdu.
                                        </p>
                                        @if ($invoice->created_at)
                                        <time datetime="{{ $invoice->created_at->toDateTimeString() }}"
                                            class="flex-none py-0.5 text-xs leading-5 text-stone-500">{{
                                            $invoice->created_at->diffForHumans() }}
                                        </time>
                                        @endif
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                </div>

                <!--FATURA-->
                <div id="invoice"
                    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('invoice._partials.header')

                    @if ($invoice->type == 'sales_invoice' || $invoice->type == 'purchase_invoice')
                    @include('invoice._partials.invoice-content')
                    @elseif ($invoice->type == 'received' || $invoice->type == 'paid')
                    @include('invoice._partials.bill-content')
                    @endif

                    @if (auth()->user()->current_team_id == 2 || auth()->user()->current_team_id == 49)
                    <div class="mt-10">
                        <p id="payment-note" class="text-stone-900">
                            <b>{{ date('d.m.Y', strtotime($invoice->due_date)) }}</b>
                            tarihine kadar
                            <b>{{ number_format($invoice->ex_amount, 2, ',', '.') }}</b> {{ $invoice->currency }}
                            (<b>{{ number_format($invoice->total_amount, 2, ',', '.') }}</b> TRL)
                            ödenmesi bekleniyor
                        </p>

                        <dd class="mt-6 uppercase text-stone-500">
                            <p class="font-medium text-stone-900">ÖDEME BİLGİLERİ</p>
                            <div class="mt-2 text-xs">
                                <p class="leading-5 text-stone-800">
                                    Yerel banka hesap bilgileri - TRL</p>
                                <p class="leading-5 text-stone-800/50">
                                    UGUR KARAGOZ
                                </p>
                                <p class="leading-5 text-stone-800/50">
                                    IBAN - TR92 0015 7000 0000 0044 7868 54</p>
                                <p class="leading-5 text-stone-800/50">
                                    BANKA - ENPARA BANK
                                </p>
                            </div>
                            @if ($invoice->currency == 'EUR')
                            <div class="mt-2 text-xs">
                                <p class="leading-5 text-stone-800">
                                    Uluslararası banka hesap bilgileri - EUR</p>
                                <p class="leading-5 text-stone-800/50">
                                    APPER SOFTWARE OÜ
                                </p>
                                <p class="leading-5 text-stone-800/50">
                                    IBAN - BE29 9058 3935 6464</p>
                                <p class="leading-5 text-stone-800/50">
                                    BIC - TRWIBEB1XXX
                                </p>
                                <p class="leading-5 text-stone-800/50">
                                    BANKA - WISE, Rue du Trône 100, 3rd floor, Brussels, 1050, Belgium
                                </p>
                            </div>
                            @elseif ($invoice->currency == 'USD')
                            <div class="mt-2 text-xs">
                                <p class="leading-5 text-stone-800">
                                    Uluslararası banka hesap bilgileri - USD</p>
                                <p class="leading-5 text-stone-800/50">
                                    APPER SOFTWARE OÜ
                                </p>
                                <p class="leading-5 text-stone-800/50">
                                    IBAN - 217689072765</p>
                                <p class="leading-5 text-stone-800/50">
                                    BIC - TRWIUS35XXX
                                </p>
                                <p class="leading-5 text-stone-800/50">
                                    BANKA - WISE US Inc, 108 W 13th St, Wilmington, DE, 19801, United States
                                </p>
                            </div>
                            @elseif ($invoice->currency == 'GBP')
                            <div class="mt-2 text-xs">
                                <p class="leading-5 text-stone-800">
                                    Uluslararası banka hesap bilgileri - USD</p>
                                <p class="leading-5 text-stone-800/50">
                                    APPER SOFTWARE OÜ
                                </p>
                                <p class="leading-5 text-stone-800/50">
                                    IBAN - GB47TRWI60846477365932</p>
                                <p class="leading-5 text-stone-800/50">
                                    BIC - TRWIGB2LXXX
                                </p>
                                <p class="leading-5 text-stone-800/50">
                                    BANKA - WISE Payments Limited, Worship Square, 65 Clifton Street, London,
                                    EC2A 4JE,
                                    United Kingdom
                                </p>
                            </div>
                            @endif
                        </dd>
                    </div>
                    @endif

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

@endsection

@section('scripts')
<style>
    @media print {

        /* Hide everything except the invoice */
        body * {
            visibility: hidden;
        }

        #invoice,
        #invoice * {
            visibility: visible;
        }

        /* Position the invoice for printing */
        #invoice {
            position: absolute;
            left: 0;
            top: 0;
            width: 100% !important;
            max-width: none !important;
            margin: 0 !important;
            padding: 20px !important;
            box-shadow: none !important;
            border: none !important;
            border-radius: 0 !important;
        }

        /* Remove background colors and borders for print */
        #invoice {
            background: white !important;
            color: black !important;
        }

        /* Ensure proper page breaks */
        #invoice {
            page-break-inside: avoid;
        }

        /* Hide any buttons or interactive elements */
        button,
        .btn,
        .no-print {
            display: none !important;
        }

        /* Improve typography for print */
        #invoice h1,
        #invoice h2,
        #invoice h3 {
            color: black !important;
        }

        /* Ensure tables print well */
        #invoice table {
            width: 100% !important;
            border-collapse: collapse !important;
        }

        #invoice th,
        #invoice td {
            border: 1px solid #000 !important;
            padding: 8px !important;
        }

        /* Remove unnecessary spacing */
        #invoice .ring-1,
        #invoice .ring-stone-300,
        #invoice .shadow-sm {
            box-shadow: none !important;
            border: none !important;
        }

        /* Page setup */
        @page {
            size: A4;
            margin: 1cm;
        }
    }
</style>

<script>
    window.invoiceShowImages = @json($invoice_images ?? []);

        function invoiceImageViewer() {
            return {
                invoiceImages: window.invoiceShowImages || [],
                selectedImage: null
            };
        }

        function printInvoice() {
            console.log('Print function called'); // Debug için
            // Biraz bekleme süresi ekle
            setTimeout(function() {
                window.print();
            }, 100);
        }

        // Ödeme notunu göster/gizle. Tercih localStorage'da saklanır.
        function updatePaymentNoteButton(btn, isHidden) {
            if (!btn) return;
            var iconEl = btn.querySelector('.material-symbols-rounded');
            var labelEl = document.getElementById('payment-note-label');
            if (iconEl) iconEl.textContent = isHidden ? 'visibility_off' : 'visibility';
            if (labelEl) labelEl.textContent = isHidden ? 'ÖDEME NOTUNU GÖSTER' : 'ÖDEME NOTUNU GİZLE';
        }

        function togglePaymentNote(btn) {
            var note = document.getElementById('payment-note');
            if (!note) return;
            var willHide = note.style.display !== 'none';
            note.style.display = willHide ? 'none' : '';
            localStorage.setItem('hidePaymentNote', willHide ? '1' : '0');
            updatePaymentNoteButton(btn, willHide);
        }

        // Sayfa yüklendiğinde fonksiyonun tanımlı olduğunu kontrol et
        document.addEventListener('DOMContentLoaded', function() {
            console.log('Print function available:', typeof printInvoice);

            // Kaydedilmiş ödeme notu tercihini uygula
            var note = document.getElementById('payment-note');
            var btn = document.querySelector('[onclick="togglePaymentNote(this)"]');
            if (note && localStorage.getItem('hidePaymentNote') === '1') {
                note.style.display = 'none';
                updatePaymentNoteButton(btn, true);
            }
        });
</script>
@endsection