@extends('layouts.app')

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

        {{-- BREADCRUMB --}}
        <nav class="flex py-2" 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') }}"
                            class="ml-4 text-sm font-medium text-stone-500 hover:text-stone-700">CARİ HESAPLAR</a>
                    </div>
                </li>
                @if (isset($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', $company->slug) }}"
                            class="ml-4 text-sm font-medium text-stone-500 hover:text-stone-700" aria-current="page">{{
                            $company->name }}</a>
                    </div>
                </li>
                @else
                <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>
                        <p class="ml-4 text-sm font-medium text-stone-500 hover:text-stone-700" aria-current="page">
                            YENİ
                            OLUŞTUR</p>
                    </div>
                </li>
                @endif
            </ol>
        </nav>

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

            <div class="flex items-center gap-2">
                <div class="flex-shrink-0">
                    <span class="text-4xl material-symbols-rounded text-stone-600">
                        apartment
                    </span>
                </div>
                <div class="flex-1 w-0 pb-1">
                    <dl>
                        <dd>
                            <div class="text-2xl font-bold text-stone-600">
                                @if (isset($company))
                                {{ $company->name }}
                                @else
                                YENİ CARİ HESAP
                                @endif
                            </div>
                        </dd>
                    </dl>
                </div>
            </div>

            <form
                action="@if (isset($company)) {{ route('companies.update', $company->slug) }}@else{{ route('companies.store') }} @endif"
                method="POST" class="bg-white shadow-sm ring-1 ring-stone-900/5 sm:rounded-xl md:col-span-2"
                x-data="{ type: '{{ old('type', $company->type ?? 'client') }}', name: '{{ old('name', $company->name ?? '') }}', get shortname() { if (!this.name) return ''; const turkishToEnglish = { 'ç': 'c', 'Ç': 'C', 'ğ': 'g', 'Ğ': 'G', 'ı': 'i', 'İ': 'I', 'ö': 'o', 'Ö': 'O', 'ş': 's', 'Ş': 'S', 'ü': 'u', 'Ü': 'U' }; return this.name.split('').map(char => turkishToEnglish[char] || char).join('').replace(/\s+/g, '').toUpperCase().substring(0, 3); } }">
                @csrf
                @if (isset($company))
                @method('PATCH')
                @endif
                {{-- CONTENT --}}
                <div class="p-8">
                    <div>
                        <div>
                            <div class="grid gap-2 -space-y-px rounded-md isolate">
                                <div>
                                    <fieldset class="sm:col-span-6">
                                        <legend class="block text-xs leading-6 text-stone-500">İşletme tipi</legend>
                                        <div
                                            class="mt-2 space-y-6 tracking-tighter sm:flex sm:items-center sm:space-x-6 sm:space-y-0">
                                            <div class="flex items-center">
                                                <input x-model="type" id="1" name="type" value="client" type="radio"
                                                    class="w-4 h-4 border-stone-300 text-stone-600 focus:ring-sky-600"
                                                    @if (old('type', $company->type ?? 'client') == 'client') checked
                                                @endif>
                                                <label for="1"
                                                    class="block ml-2 text-sm font-medium leading-6 text-stone-900">MÜŞTERİ</label>
                                            </div>
                                            <div class="flex items-center">
                                                <input x-model="type" id="2" name="type" value="supplier" type="radio"
                                                    class="w-4 h-4 border-stone-300 text-stone-600 focus:ring-sky-600"
                                                    @if (old('type', $company->type ?? 'client') == 'supplier') checked
                                                @endif>
                                                <label for="2"
                                                    class="block ml-2 text-sm font-medium leading-6 text-stone-900">TEDARİKÇİ</label>
                                            </div>
                                        </div>
                                    </fieldset>
                                </div>
                                <div class="grid grid-cols-1 sm:grid-cols-4 gap-y-2 gap-x-3">
                                    <div class="col-span-3">
                                        <label for="name" class="block text-xs leading-6 text-stone-500">İşletme
                                            Adı*</label>
                                        <div class="mt-0.5">
                                            <input type="text" name="name" id="name" required x-model="name"
                                                value="{{ old('name', $company->name ?? '') }}"
                                                class="block w-full py-1 uppercase border-0 rounded-md shadow-sm text-stone-900 bg-stone-50 ring-1 ring-inset ring-stone-400 placeholder:text-stone-300 focus:ring-2 focus:ring-inset focus:ring-stone-600 sm:text-sm sm:leading-6"
                                                placeholder="METRO">
                                        </div>
                                        <label for="name"
                                            class="block text-xs italic font-thin leading-6 tracking-tight text-stone-400"><b>"METRO"</b>
                                            gibi uygulama içerisinde kullanılacak kısa isim.</label>
                                    </div>
                                    <div class="col-span-1">
                                        <label for="shortname"
                                            class="block text-xs leading-6 text-stone-500">Kısaltma</label>
                                        <div class="mt-0.5">
                                            <input type="text" name="shortname" id="shortname" required disabled
                                                x-model="shortname"
                                                value="{{ old('shortname', $company->shortname ?? '') }}"
                                                class="block w-full py-1 uppercase border-0 rounded-md shadow-sm text-stone-900 bg-stone-50 ring-1 ring-inset ring-stone-300 placeholder:text-stone-300 focus:ring-2 focus:ring-inset focus:ring-stone-600 sm:text-sm sm:leading-6">
                                        </div>
                                    </div>
                                </div>
                                <div class="grid grid-cols-1 sm:grid-cols-2 gap-y-2 gap-x-3">
                                    <div>
                                        <label for="city" class="block text-xs leading-6 text-stone-500">Şehir</label>
                                        <div class="mt-0.5">
                                            <input type="text" name="city" id="city" required
                                                value="{{ old('city', $company->city ?? 'İSTANBUL') }}"
                                                class="block w-full py-1 uppercase border-0 rounded-md shadow-sm text-stone-900 bg-stone-50 ring-1 ring-inset ring-stone-300 placeholder:text-stone-300 focus:ring-2 focus:ring-inset focus:ring-stone-600 sm:text-sm sm:leading-6">
                                        </div>
                                    </div>
                                    <div>
                                        <label for="country" class="block text-xs leading-6 text-stone-500">Ülke</label>
                                        <div class="mt-0.5">
                                            <input type="text" name="country" id="country"
                                                value="{{ old('country', $company->country ?? 'TÜRKİYE') }}"
                                                class="block w-full py-1 uppercase border-0 rounded-md shadow-sm text-stone-900 bg-stone-50 ring-1 ring-inset ring-stone-300 placeholder:text-stone-300 focus:ring-2 focus:ring-inset focus:ring-stone-600 sm:text-sm sm:leading-6"
                                                value="TÜRKİYE">
                                        </div>
                                    </div>
                                    <div>
                                        <label for="phone"
                                            class="block text-xs leading-6 text-stone-500">Telefon</label>
                                        <div class="mt-0.5">
                                            <input type="text" name="phone" id="phone"
                                                value="{{ old('phone', $company->phone ?? '') }}"
                                                class="block w-full py-1 uppercase border-0 rounded-md shadow-sm text-stone-900 bg-stone-50 ring-1 ring-inset ring-stone-300 placeholder:text-stone-300 focus:ring-2 focus:ring-inset focus:ring-stone-600 sm:text-sm sm:leading-6"
                                                placeholder="0850 255 1090">
                                        </div>
                                    </div>
                                    <div>
                                        <label for="email" class="block text-xs leading-6 text-stone-500">Eposta</label>
                                        <div class="mt-0.5">
                                            <input type="email" name="email" id="email"
                                                value="{{ old('email', $company->email ?? '') }}"
                                                class="block w-full py-1 border-0 rounded-md shadow-sm text-stone-900 bg-stone-50 ring-1 ring-inset ring-stone-300 placeholder:text-stone-300 focus:ring-2 focus:ring-inset focus:ring-stone-600 sm:text-sm sm:leading-6"
                                                placeholder="posta@akildolusler.com">
                                        </div>
                                    </div>
                                    <div>
                                        <label for="website" class="block text-xs leading-6 text-stone-500">İnternet
                                            Sitesi</label>
                                        <div class="mt-0.5">
                                            <input type="text" name="website" id="website"
                                                value="{{ old('website', $company->website ?? '') }}"
                                                class="block w-full py-1 border-0 rounded-md shadow-sm text-stone-900 bg-stone-50 ring-1 ring-inset ring-stone-300 placeholder:text-stone-300 focus:ring-2 focus:ring-inset focus:ring-stone-600 sm:text-sm sm:leading-6"
                                                placeholder="www.metro.com.tr">
                                        </div>
                                    </div>
                                    <div>
                                        <label for="description"
                                            class="block text-xs leading-6 text-stone-500">Açıklama</label>
                                        <div class="mt-0.5">
                                            <input type="text" name="description" id="description"
                                                value="{{ old('description', $company->description ?? '') }}"
                                                class="block w-full py-1 border-0 rounded-md shadow-sm text-stone-900 bg-stone-50 ring-1 ring-inset ring-stone-300 placeholder:text-stone-300 focus:ring-2 focus:ring-inset focus:ring-stone-600 sm:text-sm sm:leading-6"
                                                placeholder="Açıklama giriniz">
                                        </div>
                                    </div>
                                    <div>
                                        <label for="slug" class="block text-xs leading-6 text-stone-500">Uzantı</label>
                                        <div class="mt-0.5">
                                            <input type="text" name="slug" id="slug" disabled
                                                value="{{ old('slug', $company->slug ?? '') }}"
                                                class="block w-full py-1 border-0 rounded-md shadow-sm text-stone-900 bg-stone-50 ring-1 ring-inset ring-stone-300 placeholder:text-stone-300 focus:ring-2 focus:ring-inset focus:ring-stone-600 sm:text-sm sm:leading-6">
                                        </div>
                                        <label for="slug"
                                            class="block text-xs italic font-thin leading-6 tracking-tight text-stone-400">*Bu
                                            alan
                                            gerekmedikçe değiştirilmemelidir.</label>
                                    </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' => 'EVET, İPTAL ET',
                    ])
                    @if (isset($company))
                    @include('modals.confirm', [
                    'title' => 'CARİ HESAP GÜNCELLENECEK',
                    'subtitle' => 'DEĞİŞİKLİKLER KAYIT EDİLECEK. DEVAM ETMEK İSTİYOR MUSUNUZ?',
                    'route' => '#',
                    'button' => 'GÜNCELLE',
                    'cancel' => 'GERİ DÖN',
                    'confirm' => 'GÜNCELLE',
                    ])
                    @include('modals.cancel', [
                    'title' => 'CARİ HESAP SİLİNECEK.',
                    'subtitle' => 'CARİ HESAP SİLİNECEK. DEVAM ETMEK İSTİYOR MUSUNUZ?',
                    'route' => route('companies.destroy', $company->id),
                    'button' => 'SİL',
                    'cancel' => 'GERİ DÖN',
                    'confirm' => 'SİL',
                    ])
                    @else
                    @include('modals.confirm', [
                    'title' => 'CARİ HESAP OLUŞTURULACAK',
                    'subtitle' => 'DEVAM ETMEK İSTİYOR MUSUNUZ?',
                    'route' => '#',
                    'button' => 'OLUŞTUR',
                    'cancel' => 'GERİ DÖN',
                    'confirm' => 'OLUŞTUR',
                    ])
                    @endif
                </div>

            </form>

        </div>
    </div>
</div>
@endsection

@section('scripts')
@endsection