@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>
                            </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>
                    @if (isset($receipt) && $receipt->company)
                    <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', $receipt->company->slug) }}"
                                class="ml-4 text-sm font-medium text-stone-500 hover:text-stone-700">{{
                                $receipt->company->name }}</a>
                        </div>
                    </li>
                    @elseif ($company != null)
                    <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', $company->slug) }}"
                                class="ml-4 text-sm font-medium text-stone-500 hover:text-stone-700">{{ $company->name
                                }}</a>
                        </div>
                    </li>
                    @endif
                    <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>
                            <div class="ml-4 text-sm font-medium text-stone-500">
                                {{ isset($receipt) ? 'FİŞ DÜZENLE' : ($type == 'sale' ? 'SATIŞ FİŞİ OLUŞTUR' : ($type ==
                                'quick-sale' ? 'HIZLI SATIŞ 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">

                <!--SIDEBAR-->
                <div class="lg:col-start-3 lg:row-end-1"> </div>

                <!--FİŞ FORMU-->
                <form action="{{ isset($receipt) ? route('receipts.update', $receipt) : route('receipts.store') }}"
                    method="POST" enctype="multipart/form-data"
                    class="bg-white shadow-sm ring-1 ring-stone-900/5 sm:rounded-xl md:col-span-2">
                    @csrf
                    @if(isset($receipt))
                    @method('PUT')
                    @endif

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

                        <div class="mt-3 sm:mt-4">
                            <div class="mt-4">
                                @if ($company != null || isset($receipt))
                                <input type="hidden" name="company_id"
                                    value="{{ $company?->id ?? $receipt->company_id }}">
                                @else
                                <div class="w-1/2 mt-2" x-data="companyCombobox()" x-init="init()">
                                    <label for="person"
                                        class="block text-sm font-bold 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-stone-300 focus:ring-2 focus:ring-inset focus:ring-stone-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-stone-400 right-8 hover:text-stone-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-stone-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

                                @if(!isset($receipt))
                                <input type="hidden" name="category_id"
                                    value="{{ in_array($type, ['sale', 'quick-sale']) ? 'income' : 'expense' }}">
                                <input type="hidden" name="type"
                                    value="{{ in_array($type, ['sale', 'quick-sale']) ? 'sales_receipt' : 'purchase_receipt' }}">
                                @endif

                                {{-- FİŞ BİLGİLERİ --}}
                                <div x-data="{
                                    total_sub: {{ old('total_sub', isset($receipt) ? $receipt->total_sub : 0) }},
                                    vat_ratio: {{ old('vat_ratio', isset($receipt) ? $receipt->vat_ratio : 0) }},
                                    total_vat: {{ old('total_vat', isset($receipt) ? $receipt->total_vat : 0) }},
                                    total_amount: {{ old('total_amount', isset($receipt) ? $receipt->total_amount : 0) }},
                                    @if ($type == 'spend' || $type == 'quick-sale')
                                    transaction_amount: {{ old('transaction_amount', isset($receipt) ? $receipt->total_amount : 0) }},
                                    @endif
                                    onSubChange() {
                                        this.total_vat = parseFloat((this.total_sub * this.vat_ratio / 100).toFixed(2));
                                        this.total_amount = parseFloat((this.total_sub + this.total_vat).toFixed(2));
                                        @if ($type == 'spend' || $type == 'quick-sale')
                                        this.transaction_amount = this.total_amount;
                                        @endif
                                    },
                                    onAmountChange() {
                                        this.total_sub = parseFloat((this.total_amount / (1 + this.vat_ratio / 100)).toFixed(2));
                                        this.total_vat = parseFloat((this.total_amount - this.total_sub).toFixed(2));
                                        @if ($type == 'spend' || $type == 'quick-sale')
                                        this.transaction_amount = this.total_amount;
                                        @endif
                                    },
                                    onRatioChange() {
                                        this.total_sub = parseFloat((this.total_amount / (1 + this.vat_ratio / 100)).toFixed(2));
                                        this.total_vat = parseFloat((this.total_amount - this.total_sub).toFixed(2));
                                    }
                                }">
                                    <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 font-bold leading-6 text-stone-700">FİŞ
                                                TARİHİ*</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-stone-900 shadow-sm ring-1 ring-inset ring-stone-300 placeholder:text-stone-400 focus:ring-2 focus:ring-inset focus:ring-stone-600 sm:text-sm sm:leading-6"
                                                    value="{{ old('date', isset($receipt) ? $receipt->date : \Carbon\Carbon::now()->format('Y-m-d')) }}">
                                            </div>
                                        </div>

                                        <div class="col-span-2">
                                            <label for="number" class="block text-sm leading-6 text-stone-500">FİŞ
                                                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-stone-900 shadow-sm ring-1 ring-inset ring-stone-300 placeholder:text-stone-400 focus:ring-2 focus:ring-inset focus:ring-stone-600 sm:text-sm sm:leading-6"
                                                    placeholder="A-235678"
                                                    value="{{ old('number', isset($receipt) ? $receipt->number : '') }}">
                                            </div>
                                        </div>

                                        <div class="col-span-5">
                                            <label for="note"
                                                class="block text-sm leading-6 text-stone-500">AÇIKLAMA/NOT</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-stone-900 shadow-sm ring-1 ring-inset ring-stone-300 placeholder:text-stone-400 focus:ring-2 focus:ring-inset focus:ring-stone-600 sm:text-sm sm:leading-6"
                                                    placeholder="{{ in_array($type, ['sale', 'quick-sale']) ? 'X ÜRÜN SATIŞI' : 'X ÜRÜN ALIŞI' }}"
                                                    value="{{ old('note', isset($receipt) ? $receipt->note : '') }}">
                                            </div>
                                        </div>

                                        <div class="grid items-center grid-cols-4 col-span-6 gap-4">
                                            <div>
                                                <label for="total_sub"
                                                    class="block text-sm leading-6 text-stone-500">ÜRÜN/HİZMET
                                                    FİYATI</label>
                                                <div class="relative mt-1">
                                                    <input type="number" name="total_sub" id="total_sub" step="0.01"
                                                        class="block w-full text-right bg-stone-50 rounded-md border-0 py-1.5 text-stone-900 shadow-sm ring-1 ring-inset ring-stone-300 placeholder:text-stone-400 focus:ring-2 focus:ring-inset focus:ring-stone-600 sm:text-sm sm:leading-6"
                                                        placeholder="0.00" x-model.number="total_sub"
                                                        @input="onSubChange" @click="$event.target.select()">
                                                    <div
                                                        class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                                                        <span class="text-stone-400 sm:text-sm">TRL</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div>
                                                <label for="vat_ratio"
                                                    class="block text-sm leading-6 text-stone-500">VERGİ
                                                    ORANI</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-stone-900 shadow-sm ring-1 ring-inset ring-stone-300 placeholder:text-stone-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="onRatioChange" @click="$event.target.select()">
                                                    <div
                                                        class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                                                        <span class="text-stone-400 sm:text-sm">%</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div>
                                                <label for="total_vat"
                                                    class="block text-sm leading-6 text-stone-500">VERGİ
                                                    TUTARI</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-stone-900 shadow-sm ring-1 ring-inset ring-stone-300 placeholder:text-stone-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-stone-400 sm:text-sm">TRL</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div>
                                                <label for="total_amount"
                                                    class="block text-sm font-bold leading-6 text-stone-700">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-stone-900 ring-1 ring-inset ring-stone-300 placeholder:text-stone-400 focus:ring-2 focus:ring-inset focus:ring-stone-600 sm:text-lg sm:leading-6"
                                                        placeholder="0.00" x-model.number="total_amount"
                                                        @input="onAmountChange" @click="$event.target.select()">
                                                    <div
                                                        class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                                                        <span class="text-stone-400 sm:text-sm">TRL</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        @if ($type != 'spend' && $type != 'quick-sale')
                                        <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-stone-500">VADE
                                                TARİHİ</label>
                                            <label for="due_date" class="block text-xs leading-6 text-stone-400">
                                                Tahsilat ve ödemeleriniz için 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-stone-900 shadow-sm ring-1 ring-inset ring-stone-300 placeholder:text-stone-400 focus:ring-2 focus:ring-inset focus:ring-stone-600 sm:text-sm sm:leading-6"
                                                    value="{{ old('due_date', isset($receipt) ? $receipt->due_date : \Carbon\Carbon::now()->addDays(30)->format('Y-m-d')) }}">
                                            </div>
                                        </div>
                                        @endif
                                    </div>

                                    {{-- ÖDEME / TAHSİLAT BİLGİLERİ --}}
                                    @if ($type == 'spend' || $type == 'quick-sale')
                                    <div class="mt-2 pt-4 border-t-2 border-dashed border-stone-600/10">
                                        <h3 class="pb-4 text-xs font-bold tracking-widest text-stone-400 uppercase">
                                            {{ $type == 'quick-sale' ? 'Tahsilat Bilgileri' : 'Ödeme Bilgileri' }}
                                        </h3>
                                        <div class="grid grid-cols-6 gap-4">
                                            <div class="col-span-2">
                                                <label for="bank_id"
                                                    class="block text-sm font-bold leading-6 text-stone-700">ÖDEME
                                                    YÖNTEMİ*</label>
                                                <div class="grid grid-cols-1 mt-1">
                                                    <select id="bank_id" name="bank_id" required
                                                        class="col-start-1 row-start-1 w-full rounded-md border-0 bg-stone-50 py-1.5 pl-3 pr-8 text-stone-900 shadow-sm ring-1 ring-inset ring-stone-300 focus:ring-2 focus:ring-inset focus:ring-stone-600 sm:text-sm sm:leading-6">
                                                        <option value="">...ödeme yöntemi seçiniz</option>
                                                        @foreach ($banks as $item)
                                                        <option value="{{ $item->id }}" {{ old('bank_id',
                                                            isset($receipt) ? $receipt->bank_id : '') == $item->id ?
                                                            'selected' : '' }}>
                                                            {{ $item->name }}
                                                        </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-span-2">
                                                <label for="transaction_date"
                                                    class="block text-sm font-bold leading-6 text-stone-700">
                                                    {{ $type == 'quick-sale' ? 'TAHSİLAT' : 'ÖDEME' }} TARİHİ*
                                                </label>
                                                <div class="mt-1">
                                                    <input type="date" name="transaction_date" id="transaction_date"
                                                        class="block w-full rounded-md border-0 bg-stone-50 py-1.5 text-stone-900 shadow-sm ring-1 ring-inset ring-stone-300 placeholder:text-stone-400 focus:ring-2 focus:ring-inset focus:ring-stone-600 sm:text-sm sm:leading-6"
                                                        value="{{ old('transaction_date', isset($receipt) ? \Carbon\Carbon::parse($receipt->date)->format('Y-m-d') : \Carbon\Carbon::now()->format('Y-m-d')) }}">
                                                </div>
                                            </div>
                                            <div class="col-span-2">
                                                <label for="transaction_amount"
                                                    class="block text-sm font-bold leading-6 text-stone-700">
                                                    {{ $type == 'quick-sale' ? 'TAHSİLAT' : 'ÖDEME' }} TUTARI
                                                </label>
                                                <label for="transaction_amount"
                                                    class="block text-xs leading-6 text-stone-400">
                                                    Boş bırakılırsa fiş tutarı geçerli olur.
                                                </label>
                                                <div class="relative mt-1">
                                                    <input type="number" name="transaction_amount"
                                                        id="transaction_amount" step="0.01"
                                                        class="block w-full text-right bg-stone-50 rounded-md border-0 py-1.5 text-stone-900 shadow-sm ring-1 ring-inset ring-stone-300 placeholder:text-stone-400 focus:ring-2 focus:ring-inset focus:ring-stone-600 sm:text-sm sm:leading-6"
                                                        placeholder="0.00" x-model.number="transaction_amount"
                                                        x-effect="transaction_amount = Math.min(transaction_amount, total_amount)"
                                                        @click="$event.target.select()">
                                                    <div
                                                        class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                                                        <span class="text-stone-400 sm:text-sm">TRL</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    @endif
                                </div>{{-- x-data wrapper --}}
                            </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' => isset($receipt) ? route('companies.show', $receipt->company->slug) :
                        route('dashboard'),
                        'cancel' => 'HAYIR, GERİ DÖN',
                        'confirm' => 'EVET, İPTAL ET',
                        'b_name' => 'VAZGEÇ',
                        'b_ring' => 'rose',
                        ])
                        @include('modals.confirm', [
                        'title' => isset($receipt) ? 'FİŞ GÜNCELLENECEK' : 'FİŞ OLUŞTURULACAK',
                        'subtitle' => 'DEVAM ETMEK İSTİYOR MUSUNUZ?',
                        'route' => '#',
                        'cancel' => 'HAYIR, GERİ DÖN',
                        'confirm' => isset($receipt) ? 'EVET, GÜNCELLE' : 'EVET, OLUŞTUR',
                        'b_name' => isset($receipt) ? 'GÜNCELLE' : 'OLUŞTUR',
                        'b_ring' => 'teal',
                        ])
                    </div>
                </form>
            </div>
        </div>
    </main>
</div>
@endsection

@section('scripts')
<script>
    // İŞLETME COMBOBOX
    function companyCombobox() {
        return {
            search: '{{ old('company_name', isset($receipt) ? $receipt->company->name : '') }}',
            isOpen: false,
            companies: @json($companies_all),
            filteredCompanies: [],
            selectedCompanyId: {{ old('company_id', isset($receipt) ? $receipt->company_id : '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.isOpen = false;
            },
            clearSelection() {
                this.search = '';
                this.selectedCompanyId = null;
                this.filteredCompanies = this.companies;
            }
        }
    }
</script>
@endsection

@section('outerScripts')
@endsection