@extends('layouts.app')

@section('head')

@endsection

@section('content')

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

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

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

            <form action="#" 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 items-center h-6">
                                        <input x-model="showHidden" id="show_hidden" name="show_hidden" type="checkbox"
                                            class="w-4 h-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="grid gap-2 -space-y-px rounded-md isolate">
                                <div class="grid grid-cols-1 sm:grid-cols-2 gap-y-2 gap-x-3">
                                    <div>
                                        <label for="name" class="block text-xs leading-6 text-gray-500">İSİM</label>
                                        <div class="mt-0.5">
                                            <input type="text" name="name" id="name"
                                                class="block w-full px-2 py-1 text-gray-900 uppercase border-0 rounded-md shadow-sm bg-stone-50 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="surname"
                                            class="block text-xs leading-6 text-gray-500">SOYİSİM</label>
                                        <div class="mt-0.5">
                                            <input type="text" name="surname" id="surname"
                                                class="block w-full px-2 py-1 text-gray-900 uppercase border-0 rounded-md shadow-sm bg-stone-50 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="SOYİSİM">
                                        </div>
                                    </div>
                                </div>
                                <div class="w-3/4">
                                    <label for="check_in_date" class="block text-xs leading-6 text-gray-500">ODA</label>
                                    <div class="mt-0.5 grid grid-cols-1">
                                        <select id="location" name="location"
                                            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($rooms as $room)
                                            <option value="{{ $room->id }}" {{ $room->id == $room_id ? 'selected' : ''
                                                }}>{{ $room->name }}</option>
                                            @endforeach
                                        </select>
                                        <svg class="self-center col-start-1 row-start-1 mr-2 text-gray-500 pointer-events-none size-5 justify-self-end 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="check_in_date" class="block text-xs leading-6 text-gray-500">GİRİŞ
                                            TARİHİ</label>
                                        <div class="mt-0.5">
                                            <input type="date" disabled name="check_in_date" id="check_in_date"
                                                class="block w-full px-2 py-1 text-gray-900 uppercase border-0 rounded-md shadow-sm bg-stone-50 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="YILDIRIM" value="{{ $check_in_date }}">
                                        </div>
                                    </div>
                                    <div>
                                        <label for="check_out_date" class="block text-xs leading-6 text-gray-500">ÇIKIŞ
                                            TARİHİ</label>
                                        <div class="mt-0.5">
                                            <input type="date" disabled name="check_out_date" id="check_out_date"
                                                class="block w-full px-2 py-1 text-gray-900 uppercase border-0 rounded-md shadow-sm bg-stone-50 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="5112458546" value="{{ $check_out_date }}">
                                        </div>
                                    </div>
                                </div>
                                <div>
                                    <label for="line_1" class="block text-xs leading-6 text-gray-500">Adres Satırı
                                        1*</label>
                                    <div class="mt-0.5">
                                        <input type="text" name="line_1" id="line_1" required
                                            class="block w-3/4 px-2 py-1 text-gray-900 uppercase border-0 rounded-md shadow-sm bg-stone-50 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="KIRCAALI MH. KIREMITCI CD.">
                                    </div>
                                </div>
                                <div x-show="showHidden == 1" x-cloak>
                                    <label for="line_2" class="block text-xs leading-6 text-gray-500">Adres Satırı
                                        2</label>
                                    <div class="mt-0.5">
                                        <input type="text" name="line_2" id="line_2"
                                            class="block w-3/4 px-2 py-1 text-gray-900 uppercase border-0 rounded-md shadow-sm bg-stone-50 ring-1 ring-inset ring-gray-300 placeholder:text-gray-300 focus:ring-2 focus:ring-inset focus:ring-stone-600 sm:text-sm sm:leading-6"
                                            placeholder="KARAKASGIL PLZ. NO.3 D.504">
                                    </div>
                                </div>
                                <div class="grid grid-cols-1 sm:grid-cols-2 gap-y-2 gap-x-3">
                                    <div x-show="showHidden == 1" x-cloak="">
                                        <label for="district" class="block text-xs leading-6 text-gray-500">İlçe</label>
                                        <div class="mt-0.5">
                                            <input type="text" name="district" id="district"
                                                class="block w-full px-2 py-1 text-gray-900 uppercase border-0 rounded-md shadow-sm bg-stone-50 ring-1 ring-inset ring-gray-300 placeholder:text-gray-300 focus:ring-2 focus:ring-inset focus:ring-stone-600 sm:text-sm sm:leading-6"
                                                placeholder="OSMANGAZİ">
                                        </div>
                                    </div>
                                    <div>
                                        <label for="city" class="block text-xs leading-6 text-gray-500">Şehir*</label>
                                        <div class="mt-0.5">
                                            <input type="text" name="city" id="city" required
                                                class="block w-full px-2 py-1 text-gray-900 uppercase border-0 rounded-md shadow-sm bg-stone-50 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="BURSA">
                                        </div>
                                    </div>
                                    <div x-show="showHidden == 1" x-cloak="">
                                        <label for="country" class="block text-xs leading-6 text-gray-500">Ülke</label>
                                        <div class="mt-0.5">
                                            <input type="text" name="country" id="country"
                                                class="block w-full px-2 py-1 text-gray-900 uppercase border-0 rounded-md shadow-sm bg-stone-50 ring-1 ring-inset ring-gray-300 placeholder:text-gray-300 focus:ring-2 focus:ring-inset focus:ring-stone-600 sm:text-sm sm:leading-6"
                                                placeholder="TÜRKİYE">
                                        </div>
                                    </div>
                                    <div x-show="showHidden == 1" x-cloak="">
                                        <label for="zip" class="block text-xs leading-6 text-gray-500">Posta
                                            Kodu</label>
                                        <div class="mt-0.5">
                                            <input type="text" name="zip" id="zip"
                                                class="block w-full px-2 py-1 text-gray-900 uppercase border-0 rounded-md shadow-sm bg-stone-50 ring-1 ring-inset ring-gray-300 placeholder:text-gray-300 focus:ring-2 focus:ring-inset focus:ring-stone-600 sm:text-sm sm:leading-6"
                                                placeholder="16220">
                                        </div>
                                    </div>
                                    <div x-show="showHidden == 1" x-cloak="">
                                        <label for="phone" class="block text-xs leading-6 text-gray-500">Telefon</label>
                                        <div class="mt-0.5">
                                            <input type="text" name="phone" id="phone"
                                                class="block w-full px-2 py-1 text-gray-900 uppercase border-0 rounded-md shadow-sm bg-stone-50 ring-1 ring-inset ring-gray-300 placeholder:text-gray-300 focus:ring-2 focus:ring-inset focus:ring-stone-600 sm:text-sm sm:leading-6"
                                                placeholder="0850 255 1090">
                                        </div>
                                    </div>
                                    <div x-show="showHidden == 1" x-cloak="">
                                        <label for="email" class="block text-xs leading-6 text-gray-500">Eposta</label>
                                        <div class="mt-0.5">
                                            <input type="email" name="email" id="email"
                                                class="block w-full px-2 py-1 text-gray-900 border-0 rounded-md shadow-sm bg-stone-50 ring-1 ring-inset ring-gray-300 placeholder:text-gray-300 focus:ring-2 focus:ring-inset focus:ring-stone-600 sm:text-sm sm:leading-6"
                                                placeholder="posta@akildolusler.com">
                                        </div>
                                    </div>
                                </div>

                                <div x-data="{ prices: @json(array_fill(0, count($dates), $price)),
                                                    get total() {
                                                        return this.prices.reduce((sum, price) => sum + parseFloat(price || 0), 0).toFixed(2);
                                                    },
                                                }">
                                    <div class="flex justify-end mt-6 gap-x-2">
                                        @foreach($dates as $index => $night)
                                        <div class="w-1/4">
                                            <label for="price" class="block text-xs leading-6 text-gray-500">{{
                                                date('d.m D', strtotime($night)) }}</label>
                                            <div class="mt-0.5">
                                                <input @click="$event.target.select()" type="text" name="price"
                                                    id="price"
                                                    class="block w-full px-2 py-1 text-right text-gray-900 uppercase border-0 rounded-md shadow-sm bg-stone-50 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"
                                                    x-model="prices[{{ $index }}]" value="{{ $price }}">
                                            </div>
                                        </div>
                                        @endforeach
                                    </div>
                                    <div class="flex justify-end py-2 mt-4 text-2xl font-bold">
                                        <p
                                            x-text="total.toLocaleString('tr-TR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })">
                                        </p>
                                        <input type="text" name="total" id="total" x-model="total" hidden>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <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' => 'GERİ DÖN',
                    'confirm' => 'İPTAL ET'
                    ])
                    @include('modals.confirm', [
                    'title' => 'REZERVASYON 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')

@endsection