@extends('layouts.app')

@section('content')
    <div class="">
        <main>
            <form action="{{ route('waybill.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <!-- INVOICE HEADER -->
                <div class="-mx-4 px-16 py-8 bg-white shadow-sm ring-1 ring-gray-900/5 sm:mx-0 lg:col-span-2 lg:row-span-2 lg:row-end-2">
                    <dl class="flex max-w-7xl mx-auto grid-cols-3 text-sm leading-6">
                        <div class="flex-none min-w-60 sm:pr-4 uppercase">
                            <dt class="text-lg font-semibold text-gray-900">TEDARİKÇİ</dt>
                            <div class="mt-2" x-data="companyCombobox()" x-init="init()">
                                <div class="relative">
                                    <input id="combobox" type="text"
                                           class="w-full rounded-md border-0 bg-white py-1.5 pl-3 pr-12 text-gray-900 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">
                                    <button type="button" class="absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none" @click="toggleDropdown">
                                        <svg class="h-5 w-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 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg 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 cursor-default select-none py-2 pl-3 pr-9 text-gray-900" role="option" tabindex="-1"
                                                @click="selectCompany(company)">
                                                <span class="block truncate" x-text="company.name"></span>
                                            </li>
                                        </template>
                                    </ul>
                                </div>
                            </div>
                            <div class="mt-3">
                                <label for="comment" class="block text-sm font-medium leading-6 text-gray-900">AÇIKLAMA</label>
                                <div class="mt-2">
                                    <textarea rows="4" name="comment" id="comment"
                                              class="block w-full rounded-md border-0 px-3 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-sky-600 sm:text-sm sm:leading-6"></textarea>
                                </div>
                            </div>
                        </div>

                        <div class="flex-1 text-right">
                            <dt class="text-lg font-semibold text-gray-900">İRSALİYE BİLGİLERİ</dt>
                            <dd class="grid gap-1 justify-items-end 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">İRSALİYE TARİHİ</label>
                                    <input type="date" id="date" name="date" min="{{ $min_date }}"
                                           max="{{ $max_date }}"
                                           value="{{ $today }}"
                                           class="min-w-64 block rounded-md border-0 py-0.5 px-3 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-sky-600 sm:text-sm sm:leading-6">
                                </div>
                                <div class="flex flex-wrap items-center gap-x-3 font-medium text-gray-900">
                                    <label for="number"
                                           class="block text-sm font-medium leading-6 text-gray-500">İRSALİYE NO:</label>
                                    <input type="text" id="number" name="number"
                                           placeholder="AAA0000000023" value=""
                                           class="min-w-64 block rounded-md border-0 py-0.5 px-3 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-sky-600 sm:text-sm sm:leading-6">
                                </div>
                                <div class="flex flex-wrap items-center gap-x-3 font-medium text-gray-900">
                                    <label for="location" class="block text-sm font-medium leading-6 text-gray-500">ÖZELLEŞTİRME NO:</label>
                                    <span class="min-w-64 pl-3">TR1.2</span>
                                </div>
                                <div class="flex flex-wrap items-center gap-x-3 font-medium text-gray-900">
                                    <label for="location" class="block text-sm font-medium leading-6 text-gray-500">SENARYO:</label>
                                    <span class="min-w-64 pl-3">TEMELİRSALİYE</span>
                                </div>
                                <div class="flex flex-wrap items-center gap-x-3 font-medium text-gray-900">
                                    <label for="type" class="block text-sm font-medium leading-6 text-gray-500">İRSALİYE TİPİ:</label>
                                    <select id="type" name="type"
                                            class="min-w-64 block rounded-md border-0 py-0.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-sky-600 sm:text-sm sm:leading-6">
                                        <option value="sales_invoice" disabled>SATIS İRSALİYESİ</option>
                                        <option value="incoming_waybill" selected>ALIŞ İRSALİYESİ</option>
                                        <option value="ext_invoice" disabled>IADE</option>
                                    </select>
                                </div>
                                <div class="flex flex-wrap items-center gap-x-3 font-medium text-gray-900">
                                    <label for="currency" class="block text-sm font-medium leading-6 text-gray-500">PARA BİRİMİ:</label>
                                    <select id="currency" name="currency"
                                            class="min-w-64 block rounded-md border-0 py-0.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-sky-600 sm:text-sm sm:leading-6">
                                        <option value="TRL" selected>TRL</option>
                                        <option value="USD" disabled>USD</option>
                                        <option value="EUR" disabled>EUR</option>
                                        <option value="GBP" disabled>GBP</option>
                                    </select>
                                </div>
                                <div class="flex flex-wrap items-center gap-x-3 font-medium text-gray-900">
                                    <label for="location" class="block text-sm font-medium leading-6 text-gray-500">İRSALİYE ALT TİPİ:</label>
                                    <span class="min-w-64 pl-3">-</span>
                                </div>
                            </dd>
                        </div>
                    </dl>
                </div>
                <!-- ROWS -->
                <div id="invoice"
                     class="mx-auto mt-4 px-6 max-w-7xl pt-10 pb-6 bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-lg lg:col-span-2 lg:row-span-2 lg:row-end-2"
                     x-data="{
                            rows: [
{{--                                    { product_name: '', product_id: '', quantity: 1, unitPrice: 0.00 }--}}
                                ],
                            totalForAllRows: 0,
                            showProducts: false,
                            currentIndex: null,
                            addRow() {
                                this.rows.push({ product_name: '', product_id: '', quantity: 1, warehouse_id: '', unit: 'pcs', unitPrice: 0.00 });
                            },
                            removeRow(index) {
                                if (this.rows[index]) {
                                    this.rows.splice(index, 1);
                                }
                            },
                            isRowsEmpty() {
                                return this.rows.length === 0;
                            }
                       }">

                    <template x-for="(row, index) in rows" :key="index">
                        <div class="grid grid-cols-7 gap-2 mb-4">
                            <div x-data="productCombobox(rows, currentIndex)" x-init="init()" class="relative col-start-1 col-span-3">
                                <label :for="'product_name_' + index"
                                       class="absolute -top-2 left-2 inline-block bg-white px-1 text-xs font-medium text-gray-400">Ürün/Hizmet</label>
                                <input :id="'product_name_' + index" :name="'rows[' + index + '][product_name]'" type="text"
                                       class="w-full rounded-md border-0 bg-white py-1.5 pl-3 pr-12 text-gray-900 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="row.product_name" @change="handleProductChange($event, index)"
                                       @click="showProducts = true; currentIndex = index" @input="searchTerm = $event.target.value; filterProducts(index)">
                                <input type="hidden" :name="'rows[' + index + '][product_id]'" :value="row.product_id">

                                <button @click="showProducts = !showProducts; currentIndex = index" type="button"
                                        class="absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none">
                                    <svg class="h-5 w-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>

                                {{--ÜRÜNLER--}}
                                <ul x-show="showProducts && currentIndex === index" @click.away="showProducts = false"
                                    class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
                                    id="options" role="listbox">
                                    <template x-for="(product, productIndex) in filteredProducts[index]" :key="productIndex">
                                        <li @click="rows[currentIndex].product_name = product.name; rows[currentIndex].product_id = product.id; showProducts = false"
                                            class="relative cursor-default select-none py-2 pl-3 pr-9 text-gray-900 transition-all hover:bg-stone-50"
                                            role="option" tabindex="-1">
                                            <span class="block truncate" x-text="product.name"></span>
                                        </li>
                                    </template>
                                </ul>
                            </div>
                            <div class="col-start-4 col-span-1">
                                <div class="relative">
                                    <label :for="'quantity_' + index"
                                           class="absolute -top-2 left-2 inline-block bg-white px-1 text-xs font-medium text-gray-400">Miktar</label>
                                    <input x-model="row.quantity"
                                           @click="$event.target.select()"
                                           type="number" :name="'rows[' + index + '][quantity]'"
                                           :id="'quantity_' + index"
                                           class="block w-full 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-sky-600 sm:text-sm sm:leading-6">
                                </div>
                            </div>
                            <div class="relative col-start-5 col-span-1">
                                <label :for="'warehouse_id_' + index"
                                       class="absolute -top-2 left-2 inline-block bg-white px-1 text-xs font-medium text-gray-400">Depo</label>
                                <select :id="'warehouse_id_' + index" :name="'rows[' + index + '][warehouse_id]'"
                                        class="block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-sky-600 sm:text-sm sm:leading-6">
                                    @foreach($warehouse_all as $warehouse)
                                        <option value="{{ $warehouse->id }}">{{ $warehouse->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="relative col-start-6 col-span-1">
                                <label :for="'unit_' + index"
                                       class="absolute -top-2 left-2 inline-block bg-white px-1 text-xs font-medium text-gray-400">Birim</label>
                                <select :id="'unit_' + index" :name="'rows[' + index + '][unit]'"
                                        class="block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-sky-600 sm:text-sm sm:leading-6">
                                    <option value="pcs" selected>Adet</option>
                                    <option value="kg">Kilogram</option>
                                    <option value="lt">Litre</option>
                                </select>
                            </div>
                            <div class="col-start-7 col-span-1">
                                <div class="relative">
                                    <label :for="'unit_price_' + index"
                                           class="absolute -top-2 right-2 inline-block bg-white px-1 text-xs font-medium text-gray-400">Birim
                                        Fiyat</label>
                                    <input x-model="row.unitPrice"
                                           @click="$event.target.select()"
                                           type="text" :name="'rows[' + index + '][unit_price]'"
                                           :id="'unit_price_' + index"
                                           class="price-mask block w-full text-right rounded-md border-0 py-1.5 pr-10 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-sky-600 sm:text-sm sm:leading-6"
                                           placeholder="0">
                                    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                                        <span class="text-gray-500 sm:text-sm">TL</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-start-8 col-span-1">
                                <button @click="removeRow(index)" type="button"
                                        class="rounded-full rotate-45 mt-1 bg-rose-200 p-1 text-white shadow-sm hover:bg-rose-400 transition-all focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-rose-600">
                                    <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path
                                            d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z"/>
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </template>

                    {{--SATIR EKLE--}}
                    <div class="flex justify-center">
                        <button @click="addRow()" type="button"
                                class="rounded-full bg-stone-300 transition-all p-1 text-white shadow-sm hover:bg-stone-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-stone-600">
                            <svg class="h-7 w-7" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                <path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z"/>
                            </svg>
                        </button>
                    </div>

                </div>
                <!-- DİĞER BİLGİLER -->
                <input type="hidden" name="category_id" value="income">
                <!-- FOOTER -->
                <div id="footer"
                     class="mx-auto flex gap-3 justify-end mt-4 p-6 max-w-7xl pt-6 bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-lg lg:col-span-2 lg:row-span-2 lg:row-end-2">
                    @include('modals.cancel', [
                        'title' => 'YAPTIĞINIZ DEĞİŞİKLİKLER KAYBOLACAK!',
                        'subtitle' => 'BELGEYİ İPTAL ETMEK İSTEDİĞİNİZDEN EMİN MİSİNİZ?',
                        'route' => route('dashboard'),
                        'button' => 'VAZGEÇ',
                        'cancel' => 'VAZGEÇ',
                        'confirm' => 'İPTAL ET'
                        ])
                    @include('modals.confirm', [
                        'title' => 'BELGE OLUŞTURULACAK',
                        'subtitle' => 'DEVAM ETMEK İSTİYOR MUSUNUZ?',
                        'route' => '#',
                        'button' => 'OLUŞTUR',
                        'cancel' => 'VAZGEÇ',
                        'confirm' => 'OLUŞTUR'
                        ])
                </div>
            </form>
        </main>
    </div>
@endsection

@section('scripts')
    <script>
        //FİYAT MASKE
        var inputs = document.querySelectorAll('.price-mask');
        inputs.forEach(input => {
            input.addEventListener('input', function (e) {
                var value = this.value.replace(/,/g, '.');
                value = parseFloat(value);
                this.value = value.toLocaleString('tr-TR', {minimumFractionDigits: 2, maximumFractionDigits: 4});
            });
        });

        //İŞ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.isOpen = false;
                }
            }
        }

        //ÜRÜN COMBOBOX
        function productCombobox(rows, currentIndex) {
            return {
                searchTerm: '',
                products: @json($products_all),
                filteredProducts: [],
                rows: rows,
                showProducts: false,
                currentIndex: currentIndex,
                init() {
                    this.filteredProducts = this.rows.map(() => this.products);
                },
                normalizeString(str) {
                    const turkishCharMap = {
                        'i': 'iı',
                        'ı': 'iı',
                        's': 'sş',
                        'ş': 'sş',
                        'g': 'gğ',
                        'ğ': 'gğ',
                        'u': 'uü',
                        'ü': 'uü',
                        'c': 'cç',
                        'ç': 'cç',
                        'o': 'oö',
                        'ö': 'oö'
                    };

                    return str.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '').split('').map(char => {
                        return turkishCharMap[char] || char;
                    }).join('');
                },
                filterProducts(index) {
                    const searchLower = this.normalizeString(this.searchTerm);
                    this.filteredProducts[index] = this.products.filter(product => {
                        const normalizedProductName = this.normalizeString(product.name);
                        return searchLower.split('').every(char => normalizedProductName.includes(char));
                    });
                },
                handleProductChange(event, index) {
                    const selectedValue = event.target.value;
                    const normalizedSelectedValue = this.normalizeString(selectedValue);
                    const productExists = this.products.some(product => this.normalizeString(product.name) === normalizedSelectedValue);

                    if (!productExists) {
                        this.rows[index].product_name = `${selectedValue} (yeni ürün)`;
                    } else {
                        this.rows[index].product_name = selectedValue;
                    }
                }
            }
        }
    </script>
@endsection

@section('outerScripts')
    <script>

    </script>
@endsection