@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-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>
                        @if ($company != null)
                            <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', $company->slug) }}"
                                        class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
                                        aria-current="page">{{ $company->name }}</a>
                                </div>
                            </li>
                        @endif
                        <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>
                                <div class="ml-4 text-sm font-medium text-gray-500" aria-current="page">
                                    {{ $type == 'sale' ? 'SATIŞ FİŞİ OLUŞTUR' : 'ALIŞ FİŞİ OLUŞTUR' }}
                                </div>
                            </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">

                    <!--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">
                                    @if ($company != null)
                                        <input type="text" hidden="" name="company_id" value="{{ $company->id }}">
                                    @else
                                        <div class="w-1/2 mt-2" x-data="companyCombobox()" x-init="init()">
                                            <label for="person"
                                                class="block text-sm font-medium leading-6 text-stone-700">İŞLETME</label>
                                            <div class="relative">
                                                <input id="combobox" type="text"
                                                    class="bg-stone-50 w-full rounded-md border-0 py-1.5 pl-3 pr-12 text-stone-700 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-sky-600 sm:text-sm sm:leading-6"
                                                    role="combobox" aria-controls="options" aria-expanded="false"
                                                    x-model="search" @input="filterCompanies">
                                                <input type="hidden" name="company_id" x-model="selectedCompanyId">
                                                <input type="hidden" name="company_name" :value="search">
                                                <!-- Clear button (X) -->
                                                <button type="button"
                                                    class="absolute inset-y-0 flex items-center pr-1 text-gray-400 right-8 hover:text-gray-500 focus:outline-none"
                                                    @click="clearSelection()" x-show="search.length > 0">
                                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5"
                                                        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>
                                                <button type="button"
                                                    class="absolute inset-y-0 right-0 flex items-center px-2 rounded-r-md focus:outline-none"
                                                    @click="toggleDropdown">
                                                    <svg class="w-5 h-5 text-gray-400" viewBox="0 0 20 20"
                                                        fill="currentColor" aria-hidden="true">
                                                        <path fill-rule="evenodd"
                                                            d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z"
                                                            clip-rule="evenodd" />
                                                    </svg>
                                                </button>
                                                <ul class="absolute z-10 w-full py-1 mt-1 overflow-auto text-base bg-white rounded-md shadow-lg max-h-60 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
                                                    id="options" role="listbox" x-show="isOpen"
                                                    @click.away="isOpen = false">
                                                    <template x-for="(company, index) in filteredCompanies"
                                                        :key="index">
                                                        <li class="relative py-2 pl-3 cursor-default select-none pr-9 text-stone-700"
                                                            role="option" tabindex="-1" @click="selectCompany(company)">
                                                            <span class="block truncate" x-text="company.name"></span>
                                                        </li>
                                                    </template>
                                                </ul>
                                            </div>
                                        </div>
                                    @endif
                                    <input type="text" hidden="" name="category_id"
                                        value="{{ $type == 'sale' ? 'income' : 'expense' }}">
                                    <input type="text" hidden="" name="type"
                                        value="{{ $type == 'sale' ? 'sales_receipt' : 'purchase_receipt' }}">

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

                                        <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="grid items-center grid-cols-3 col-span-6 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 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="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                                                        <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 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="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                                                        <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 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="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                                                        <span class="text-gray-500 sm:text-sm">TRY</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-span-6 border-t-2 border-dashed 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 px-4 py-4 border-t gap-x-4 bg-gradient-to-l from-stone-900/10 rounded-b-xl 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' => 'SATIŞ 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')
    <script>
        //İŞLETME COMBOBOX
        function companyCombobox() {
            return {
                search: '',
                isOpen: false,
                companies: @json($companies_all),
                filteredCompanies: [],
                selectedCompanyId: null,
                init() {
                    this.filteredCompanies = this.companies;
                },
                toggleDropdown() {
                    this.isOpen = !this.isOpen;
                },
                filterCompanies() {
                    const turkishCharMap = {
                        'i': 'iı',
                        'ı': 'iı',
                        's': 'sş',
                        'ş': 'sş',
                        'g': 'gğ',
                        'ğ': 'gğ',
                        'u': 'uü',
                        'ü': 'uü',
                        'c': 'cç',
                        'ç': 'cç',
                        'o': 'oö',
                        'ö': 'oö'
                    };

                    const normalizeString = (str) => {
                        return str.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '').split('').map(
                            char => {
                                return turkishCharMap[char] || char;
                            }).join('');
                    };

                    const searchLower = normalizeString(this.search);
                    this.filteredCompanies = this.companies.filter(company => {
                        const normalizedCompanyName = normalizeString(company.name);
                        return searchLower.split('').every(char => normalizedCompanyName.includes(char));
                    });
                    this.isOpen = true;
                },
                selectCompany(company) {
                    this.search = company.name;
                    this.selectedCompanyId = company.id;
                    this.selectedCompanyName = company.name;
                    this.isOpen = false;
                },
                clearSelection() {
                    this.search = '';
                    this.selectedCompanyId = null;
                    this.filteredCompanies = this.companies;
                }
            }
        }
    </script>
@endsection

@section('outerScripts')
@endsection