@extends('layouts.app')

@section('content')

    <div class="">
        <main>
            <header class="relative isolate bg-stone-50">
                <div class="absolute inset-0 -z-10 overflow-hidden" aria-hidden="true">
                    <div
                        class="absolute left-16 top-full -mt-16 transform-gpu opacity-50 blur-3xl xl:left-1/2 xl:-ml-80">
                        <div
                            class="aspect-[1154/678] w-[72.125rem] bg-gradient-to-br {{ $type == 'received' ? '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="mx-auto px-4 py-10 sm:px-6 lg:px-16">
                    <div class="mx-auto flex max-w-2xl items-center justify-between gap-x-8 lg:mx-0 lg:max-w-none">
                        <a href="{{ route('companies.show', $company->slug) }}" class="flex items-center gap-x-6">
                            @if($company->type == 'client')
                                <span class="inline-flex h-20 w-20 items-center justify-center rounded-full bg-emerald-50 ring-1 ring-emerald-100">
                                    <span class="text-3xl font-medium leading-none text-emerald-600">{{ $company->shortname }}</span>
                                </span>
                            @else
                                <span class="inline-flex h-20 w-20 items-center justify-center rounded-full bg-amber-50 ring-1 ring-amber-100">
                                    <span class="text-3xl font-medium leading-none text-amber-600">{{ $company->shortname }}</span>
                                </span>
                            @endif
                            <h1>
                                <div class="mt-1 text-base truncate uppercase font-semibold leading-6 text-gray-900">{{ $company->name }}</div>
                            </h1>
                        </a>
                        <div class="flex items-center gap-x-2 sm:gap-x-3">
                            <div class="relative sm:hidden">
                                <button type="button" class="-m-3 block p-3" id="more-menu-button"
                                        aria-expanded="false" aria-haspopup="true">
                                    <span class="sr-only">More</span>
                                    <svg class="h-5 w-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-left text-sm leading-6 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="mx-auto px-4 py-4 sm:px-6 lg:px-8">

                {{--BREADCRUMB--}}
                <nav class="flex pb-4" aria-label="Breadcrumb">
                    <ol role="list" class="flex uppercase items-center space-x-4">
                        <li>
                            <div>
                                <a href="{{ route('dashboard') }}" class="text-gray-400 hover:text-gray-500">
                                    <svg class="h-5 w-5 flex-shrink-0" 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="h-5 w-5 flex-shrink-0 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="h-5 w-5 flex-shrink-0 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', $company->slug) }}" class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
                                   aria-current="page">{{ $company->name }}</a>
                            </div>
                        </li>
                        <li>
                            <div class="flex items-center">
                                <svg class="h-5 w-5 flex-shrink-0 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>
                                <div class="ml-4 text-sm font-medium text-gray-500" aria-current="page">{{ $type == 'received' ? 'TAHSİLAT OLUŞTUR' : 'ÖDEME OLUŞTUR' }}</div>
                            </div>
                        </li>
                    </ol>
                </nav>

                <div class="mx-auto grid grid-cols-1 grid-rows-1 items-start 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="rounded-lg bg-white shadow-sm ring-1 ring-stone-300">
                            <dl class="flex flex-wrap">
                                <div class="flex-auto p-6">
                                    <dt class="text-lg font-semibold text-gray-900">İŞLETME BİLGİLERİ</dt>
                                    <dd class="grid gap-1 justify-items-start text-left mt-2 text-gray-500">
                                        <div class="flex flex-wrap items-center gap-x-3 font-medium text-gray-900">
                                            <label for="date" class="block text-sm font-medium leading-6 text-gray-500">İŞLETME ADI</label>
                                            <span>{{ $company->name }}</span>
                                        </div>
                                        <div class="flex flex-wrap items-center gap-x-3 font-medium text-gray-900">
                                            <label for="date" class="block text-sm font-medium leading-6 text-gray-500">BAKİYE</label>
                                            <span>{{ number_format($company->getCompanyBalance(), 2, ',', '.') }}</span>
                                        </div>
                                    </dd>
                                </div>
                            </dl>
                        </div>
                    </div>

                    <!--FATURA-->
                    <form action="{{ route('invoices.store') }}" method="POST" enctype="multipart/form-data"
                          class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl md:col-span-2">
                        @csrf

                        <div class="p-8">
                            {{--CONTENT--}}
                            @include('invoice._partials.receipt-header')

                            <div class="mt-3 sm:mt-4">
                                <div class="mt-4">
                                    <input type="text" hidden="" name="company_id" value="{{ $company->id }}">
                                    <input type="text" hidden="" name="category_id" value="{{ $type == 'received' ? 'income' : 'expense' }}">
                                    <input type="text" hidden="" name="type" value="{{ $type == 'received' ? 'received' : 'paid' }}">

                                    <div class="isolate -space-y-px grid grid-cols-6 gap-4 py-6">

                                        <div class="col-span-2">
                                            <label for="date" class="block text-sm leading-6 text-gray-500">Fiş
                                                Tarihi</label>
                                            <div class="mt-1">
                                                <input type="date" name="date" id="date"
                                                       class="block w-full rounded-md border-0 bg-stone-50 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-stone-600 sm:text-sm sm:leading-6"
                                                       value="{{ \Carbon\Carbon::now()->format('Y-m-d') }}">
                                            </div>
                                        </div>
                                        <div class="col-span-2">
                                            <label for="number" class="block text-sm leading-6 text-gray-500">Fiş
                                                No</label>
                                            <div class="mt-1">
                                                <input type="text" name="number" id="number"
                                                       class="block w-full rounded-md border-0 bg-stone-50 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-stone-600 sm:text-sm sm:leading-6"
                                                       placeholder="Örn; A-235678">
                                            </div>
                                        </div>

                                        <div class="col-span-5">
                                            <label for="note" class="block text-sm leading-6 text-gray-500">
                                                Açıklama</label>
                                            <div class="mt-1">
                                                <input type="text" name="note" id="note"
                                                       class="block w-full rounded-md border-0 bg-stone-50 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-stone-600 sm:text-sm sm:leading-6"
                                                       placeholder="Örn; Ürün satışı">
                                            </div>
                                        </div>
                                        <div
                                            x-data="{ vat_ratio: 0, total_vat: 0, total_amount: 0, calculateVAT() { this.total_vat = (this.total_amount / ( 100 + this.vat_ratio) * this.vat_ratio).toFixed(2); } }"
                                            class="col-span-6 grid grid-cols-3 items-center gap-4">
                                            <div>
                                                <label for="vat_ratio" class="block text-sm leading-6 text-gray-500">Vergi oranı</label>
                                                <div class="relative mt-1">
                                                    <input type="number" name="vat_ratio" id="vat_ratio" step="1"
                                                           class="block w-full text-right bg-stone-50 rounded-md border-0 py-1.5 pr-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-stone-600 sm:text-sm sm:leading-6"
                                                           placeholder="0" x-model.number="vat_ratio" @input="calculateVAT" @click="$event.target.select()">
                                                    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                                                        <span class="text-gray-500 sm:text-sm" id="price-currency">%</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div>
                                                <label for="total_vat" class="block text-sm leading-6 text-gray-500">Vergi</label>
                                                <div class="relative mt-1">
                                                    <input type="number" name="total_vat" id="total_vat" step="0.01"
                                                           class="block w-full text-right bg-stone-50 rounded-md border-0 py-1.5 pr-7 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-stone-600 sm:text-sm sm:leading-6"
                                                           placeholder="0.00" x-model.number="total_vat" readonly>
                                                    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                                                        <span class="text-gray-500 sm:text-sm" id="price-currency">TRY</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div>
                                                <label for="total_amount" class="block text-sm leading-6 text-gray-500">Toplam Tutar</label>
                                                <div class="relative mt-1">
                                                    <input type="number" name="total_amount" id="total_amount" step="0.01" min="0"
                                                           class="block w-full text-right bg-stone-50 rounded-md border-0 py-2.5 pr-7 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-stone-600 sm:text-lg sm:leading-6"
                                                           placeholder="0.00" aria-describedby="price-currency" x-model.number="total_amount" @input="calculateVAT"
                                                           @click="$event.target.select()">
                                                    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                                                        <span class="text-gray-500 sm:text-sm">TRY</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-span-6 border-dashed border-t-2 border-stone-600/10"></div>

                                        <div class="col-span-3">
                                            <label for="due_date" class="block text-sm leading-6 text-gray-500">Beklenen Tahsilat Tarihi</label>
                                            <label for="due_date" class="block text-xs leading-6 text-gray-500">Planlama yapıyorsanız bu tarih önemlidir.</label>
                                            <div class="mt-1">
                                                <input type="date" name="due_date" id="due_date"
                                                       class="block w-full rounded-md border-0 bg-stone-50 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-stone-600 sm:text-sm sm:leading-6"
                                                       value="{{ \Carbon\Carbon::now()->addDays(30)->format('Y-m-d') }}">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{--BUTTONS--}}
                        <div class="flex items-center justify-end gap-x-4 border-t bg-gradient-to-l from-stone-900/10 rounded-b-xl px-4 py-4 sm:px-8">
                            @include('modals.cancel', [
                                'title' => 'YAPTIĞINIZ DEĞİŞİKLİKLER KAYBOLACAK!',
                                'subtitle' => 'İPTAL ETMEK İSTEDİĞİNİZDEN EMİN MİSİNİZ?',
                                'route' => route('dashboard'),
                                'button' => 'VAZGEÇ',
                                'cancel' => 'HAYIR, GERİ DÖN',
                                'confirm' => 'EVET, İPTAL ET'
                                ])
                            @include('modals.confirm', [
                                'title' => 'FİŞ OLUŞTURULACAK',
                                'subtitle' => 'DEVAM ETMEK İSTİYOR MUSUNUZ?',
                                'route' => '#',
                                'button' => 'OLUŞTUR',
                                'cancel' => 'HAYIR, GERİ DÖN',
                                'confirm' => 'EVET, OLUŞTUR'
                                ])
                        </div>
                    </form>
                </div>
            </div>
        </main>
    </div>

@endsection

@section('scripts')
@endsection

@section('outerScripts')
@endsection