@extends('layouts.app')

@section('head')
@endsection

@section('content')
    <div class="space-y-10 divide-y divide-gray-900/10 max-w-3xl mx-auto pb-24">
        <div class="grid grid-cols-3 gap-x-8 gap-y-8 md:grid-cols-1">

            <div class="grid grid-cols-3 gap-x-8 gap-y-8 pt-10 md:grid-cols-1">

                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <span class="material-symbols-rounded text-4xl text-stone-600">
                            add
                        </span>
                    </div>
                    <div class="pl-2 pb-1 w-0 flex-1">
                        <dl>
                            <dd>
                                <div class="text-2xl font-bold text-stone-600">YENİ KİRALAMA</div>
                            </dd>
                        </dl>
                    </div>
                </div>

                <form action="{{ route('hirings.store') }}" enctype="multipart/form-data" method="POST"
                    class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl md:col-span-2">
                    @csrf
                    {{-- CONTENT --}}
                    <div class="p-8">
                        <div x-data="{ addressType: 'billing', showHidden: 0 }" x-init="$watch('addressType', value => console.log(value))">

                            <fieldset class="flex justify-end">
                                <div class="space-y-5">
                                    <div class="relative flex items-start">
                                        <div class="mr-3 text-xs leading-6">
                                            <span id="show_hidden" class="text-gray-400">Tüm alanları göster/gizle</span>
                                        </div>
                                        <div class="flex h-6 items-center">
                                            <input x-model="showHidden" id="show_hidden" name="show_hidden" type="checkbox"
                                                class="h-4 w-4 rounded border-stone-300 text-stone-600 focus:ring-stone-600">
                                        </div>
                                    </div>
                                </div>
                            </fieldset>

                            <div>
                                <input type="text" hidden="" name="company_id" value="1">
                                <div class="isolate -space-y-px rounded-md grid gap-2">
                                    <div class="w-3/4">
                                        <label for="product_id" class="block text-xs leading-6 text-gray-500">ÜRÜN</label>
                                        <div class="mt-0.5 grid grid-cols-1">
                                            <select id="product_id" name="product_id"
                                                class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-stone-50 py-1.5 pr-8 pl-3 text-base ring-1 ring-inset ring-gray-400 text-gray-900 outline-1 -outline-offset-1 outline-gray-300 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6">
                                                @foreach ($products as $product)
                                                    <option value="{{ $product->id }}">
                                                        {{ $product->name }} {{ $product->brand }} {{ $product->model }} {{ $product->description }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            <svg class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-500 sm:size-4"
                                                viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
                                                <path fill-rule="evenodd"
                                                    d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"
                                                    clip-rule="evenodd" />
                                            </svg>
                                        </div>
                                    </div>
                                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-y-2 gap-x-3">
                                        <div>
                                            <label for="start_date" class="block text-xs leading-6 text-gray-500">BAŞLANGIÇ
                                                TARİHİ</label>
                                            <div class="mt-0.5">
                                                <input type="date" name="start_date" id="start_date"
                                                    class="uppercase block w-full bg-stone-50 rounded-md border-0 py-1 px-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-400 placeholder:text-gray-300 focus:ring-2 focus:ring-inset focus:ring-stone-600 sm:text-sm sm:leading-6"
                                                    placeholder="" value="{{ date('Y-m-d') }}">
                                            </div>
                                        </div>
                                        <div>
                                            <label for="end_date" class="block text-xs leading-6 text-gray-500">BİTİŞ
                                                TARİHİ</label>
                                            <div class="mt-0.5">
                                                <input type="date" name="end_date" id="end_date"
                                                    class="uppercase block w-full bg-stone-50 rounded-md border-0 py-1 px-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-400 placeholder:text-gray-300 focus:ring-2 focus:ring-inset focus:ring-stone-600 sm:text-sm sm:leading-6"
                                                    placeholder="" value="{{ date('Y-m-d', strtotime('+1 week')) }}">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-y-2 gap-x-3">
                                        <div class="col-span-2 mt-2" x-data="companyCombobox()" x-init="init()">
                                            <label for="combobox"
                                                class="block text-xs leading-6 text-gray-500">İŞ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-400 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">
                                                <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-stone-700"
                                                            role="option" tabindex="-1"
                                                            @click="selectCompany(company)">
                                                            <span class="block truncate" x-text="company.name"></span>
                                                        </li>
                                                    </template>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-y-2 gap-x-3">
                                        <div>
                                            <label for="responsible_person"
                                                class="block text-xs leading-6 text-gray-500">YETKİLİ KİŞİ</label>
                                            <div class="mt-0.5">
                                                <input type="text" name="responsible_person" id="responsible_person"
                                                    class="uppercase block w-full bg-stone-50 rounded-md border-0 py-1 px-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-400 placeholder:text-gray-300 focus:ring-2 focus:ring-inset focus:ring-stone-600 sm:text-sm sm:leading-6"
                                                    placeholder="İSİM">
                                            </div>
                                        </div>
                                        <div>
                                            <label for="responsible_number"
                                                class="block text-xs leading-6 text-gray-500">İLETİŞİM</label>
                                            <div class="mt-0.5">
                                                <input type="text" name="responsible_number" id="responsible_number"
                                                    class="uppercase block w-full bg-stone-50 rounded-md border-0 py-1 px-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-400 placeholder:text-gray-300 focus:ring-2 focus:ring-inset focus:ring-stone-600 sm:text-sm sm:leading-6"
                                                    placeholder="0555 333 2255">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-y-2 gap-x-3">
                                        <div x-show="showHidden == 0" x-cloak="">
                                            <label for="period" class="block text-xs leading-6 text-gray-500">KİRALAMA
                                                PERİYODU</label>
                                            <div class="mt-0.5">
                                                <input type="text" name="period" id="period"
                                                    class="uppercase block w-full bg-stone-50 rounded-md border-0 py-1 px-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-400 placeholder:text-gray-300 focus:ring-2 focus:ring-inset focus:ring-stone-600 sm:text-sm sm:leading-6"
                                                    placeholder="2 AY">
                                            </div>
                                        </div>
                                        <div>
                                            <label for="offer_id" class="block text-xs leading-6 text-gray-500">TEKLİF
                                                NO</label>
                                            <div class="mt-0.5">
                                                <input type="text" name="offer_id" id="offer_id"
                                                    class="uppercase block w-full bg-stone-50 rounded-md border-0 py-1 px-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-400 placeholder:text-gray-300 focus:ring-2 focus:ring-inset focus:ring-stone-600 sm:text-sm sm:leading-6"
                                                    placeholder="TK00001">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-span-full">
                                        <label for="details"
                                            class="block text-xs leading-6 text-gray-500">DETAYLAR</label>
                                        <div class="mt-0.5">
                                            <textarea rows="4" type="text" name="details" id="details" autocomplete="details"
                                                class="block w-full rounded-md bg-stone-50 border-0 p-1.5 text-stone-700 shadow-sm ring-1 ring-inset ring-gray-400 placeholder:text-stone-400 focus:ring-2 focus:ring-inset focus:ring-gray-600 sm:text-sm sm:leading-6 uppercase"></textarea>
                                        </div>
                                    </div>
                                    <div class="grid grid-cols-1 sm:grid-cols-4 gap-y-2 gap-x-3">
                                        <div class="">
                                            <label for="price"
                                                class="block text-xs leading-6 text-gray-500">FİYAT</label>
                                            <div class="mt-0.5">
                                                <input type="text" name="price" id="price"
                                                    class="uppercase block w-full text-right bg-stone-50 rounded-md border-0 py-1 px-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-400 placeholder:text-gray-300 focus:ring-2 focus:ring-inset focus:ring-stone-600 sm:text-sm sm:leading-6">
                                            </div>
                                        </div>
                                        <div class="">
                                            <label for="currency" class="block text-xs leading-6 text-gray-500">PARA
                                                BİRİMİ</label>
                                            <div class="mt-0.5 grid grid-cols-1">
                                                <select id="currency" name="currency"
                                                    class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-stone-50 py-1 pr-8 pl-3 text-base ring-1 ring-inset ring-gray-400 text-gray-900 outline-1 -outline-offset-1 outline-gray-300 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6">
                                                    <option value="TRL">TRL</option>
                                                    <option value="USD">USD</option>
                                                    <option value="EUR">EUR</option>
                                                </select>
                                                <svg class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-500 sm:size-4"
                                                    viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"
                                                    data-slot="icon">
                                                    <path fill-rule="evenodd"
                                                        d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"
                                                        clip-rule="evenodd" />
                                                </svg>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <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' => 'GERİ DÖN',
                            'confirm' => 'İPTAL ET',
                        ])
                        @include('modals.confirm', [
                            'title' => 'ADRES OLUŞTURULACAK',
                            'subtitle' => 'DEVAM ETMEK İSTİYOR MUSUNUZ?',
                            'route' => '#',
                            'button' => 'OLUŞTUR',
                            'cancel' => 'GERİ DÖN',
                            'confirm' => 'OLUŞTUR',
                        ])
                    </div>
                </form>
            </div>
        </div>
    </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() {
                    if (!this.search.trim()) {
                        this.filteredCompanies = this.companies;
                        this.isOpen = true;
                        return;
                    }

                    // Turkish character mapping for case-insensitive comparison
                    const turkishToAscii = {
                        'ğ': 'g',
                        'Ğ': 'G',
                        'ü': 'u',
                        'Ü': 'U',
                        'ş': 's',
                        'Ş': 'S',
                        'ı': 'i',
                        'I': 'İ',
                        'i': 'i',
                        'İ': 'I',
                        'ö': 'o',
                        'Ö': 'O',
                        'ç': 'c',
                        'Ç': 'C'
                    };

                    const normalizeString = (str) => {
                        return str.toLowerCase().split('').map(char => turkishToAscii[char] || char).join('');
                    };

                    const searchTerms = normalizeString(this.search).split(' ').filter(term => term.length > 0);

                    this.filteredCompanies = this.companies.filter(company => {
                        const normalizedCompanyName = normalizeString(company.name);
                        return searchTerms.every(term => normalizedCompanyName.includes(term));
                    });

                    this.isOpen = true;
                },
                selectCompany(company) {
                    this.search = company.name;
                    this.selectedCompanyId = company.id;
                    this.selectedCompanyName = company.name;
                    this.isOpen = false;
                }
            }
        }
    </script>
@endsection