@extends('layouts.app')

@section('content')

    <div class="min-h-screen -mt-16">
        <main class="pt-20">
            <div class="mx-auto max-w-screen-2xl px-4 pt-4 pb-60 sm:px-6 lg:px-8">
                <div
                    class="mx-auto grid max-w-2xl grid-cols-1 grid-rows-1 items-start gap-4 lg:mx-0 lg:max-w-none lg:grid-cols-3">

                    <div class="grid gap-4 lg:col-start-1 lg:col-end-3">
                        {{--ANA BAŞLIK--}}
                        <div class="overflow-hidden rounded-lg bg-white ring-1 ring-stone-300 shadow">
                            <h2 class="sr-only" id="profile-overview-title">Category Overview</h2>
                            <div class="bg-white p-6">
                                <div class="sm:flex sm:items-center sm:justify-between">
                                    <div class="sm:flex sm:space-x-5">
                                        <div class="flex-shrink-0">
                                            <span
                                                class="inline-flex h-20 w-20 items-center justify-center rounded-full bg-gray-50 ring-1 ring-gray-200">
                                                <span class="material-symbols-rounded text-4xl text-gray-700">
                                                    apparel
                                                </span>
                                            </span>
                                        </div>
                                        <div class="mt-4 text-center sm:mt-0 sm:pt-1 sm:text-left">
                                            <p class="text-sm font-medium text-sky-500">{{ $product->type == 'product' ? 'Ürün' : 'Hizmet' }}</p>
                                            <p class="text-xl font-bold text-gray-900 sm:text-2xl">{{ $product->name }}</p>
                                            <p class="text-sm font-medium text-gray-600">{{ $product->brand }}, {{ $product->model }}</p>
                                        </div>
                                    </div>
                                    <div class="mt-5 flex justify-center sm:mt-0">
                                        <x-button-black href="" click="" type="" ring="rose">
                                            {{ $product->type == 'product' ? 'ÜRÜNÜ' : 'HİZMETİ' }} SİL
                                        </x-button-black>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {{--URUN FORMU--}}
                        <form class="overflow-hidden rounded-lg bg-white ring-1 ring-stone-300 shadow p-6">
                            <div class="space-y-12">

                                <div class="border-b border-gray-900/10 pb-12">
                                    <h2 class="text-base font-semibold leading-7 text-gray-900">{{ $product->type == 'product' ? 'Ürün' : 'Hizmet' }} Durumu</h2>
                                    <p class="mt-1 text-sm leading-6 text-gray-600">This information will be displayed publicly so be careful what you share.</p>

                                    <div class="mt-10 space-y-10">
                                        <fieldset>
                                            <div class="mt-6 space-y-6">
                                                <div class="flex items-center gap-x-3">
                                                    <input id="push-everything" name="is_active" value="1" type="radio" class="h-4 w-4 border-gray-300 text-sky-600 focus:ring-sky-600"
                                                    {{ $product->is_active == 1 ? 'checked' : '' }}>
                                                    <label for="push-everything" class="block text-sm font-medium leading-6 text-gray-900">Yayında</label>
                                                </div>
                                                <div class="flex items-center gap-x-3">
                                                    <input id="push-email" name="is_active" value="0" type="radio" class="h-4 w-4 border-gray-300 text-sky-600 focus:ring-sky-600"
                                                    {{ $product->is_active == 0 ? 'checked' : '' }}>
                                                    <label for="push-email" class="block text-sm font-medium leading-6 text-gray-900">Taslak</label>
                                                </div>
                                            </div>
                                        </fieldset>
                                    </div>
                                </div>

                                <div class="border-b border-gray-900/10 pb-12">
                                    <h2 class="text-base font-semibold leading-7 text-gray-900">{{ $product->type == 'product' ? 'Ürün' : 'Hizmet' }} Detayları</h2>
                                    <p class="mt-1 text-sm leading-6 text-gray-600">This information will be displayed publicly so be careful what you share.</p>

                                    <div class="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
                                        <div class="col-span-3">
                                            <label for="type" class="block text-sm font-medium leading-6 text-gray-900">TÜR</label>
                                            <select id="type" name="type"
                                                    class="mt-2 block w-full bg-gray-50 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 {{ $product->type == 'product' ? 'selected' : '' }} value="product">ÜRÜN</option>
                                                <option {{ $product->type == 'service' ? 'selected' : '' }} value="service">HİZMET</option>
                                            </select>
                                        </div>
                                        <div class="col-span-3">
                                            <label for="category_id" class="block text-sm font-medium leading-6 text-gray-900">KATEGORİ</label>
                                            <select id="category_id" name="category_id"
                                                    class="mt-2 block w-full bg-gray-50 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($categories_all as $category)
                                                    <option {{ $category->id == $product->category_id ? 'selected' : '' }} value="{{ $category->id }}">{{ $category->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-span-6">
                                            <label for="name" class="block text-sm font-medium leading-6 text-gray-900">BAŞLIK</label>
                                            <div class="mt-2">
                                                <input type="text" name="name" id="name"
                                                       autocomplete="name" value="{{ $product->name }}"
                                                       class="block w-full bg-gray-50 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="col-span-6">
                                            <label for="slug" class="block text-sm font-medium leading-6 text-gray-900">SAYFA UZANTISI</label>
                                            <div class="mt-2">
                                                <input type="text" name="slug" id="slug"
                                                       autocomplete="slug" value="{{ $product->slug }}"
                                                       class="block w-full bg-gray-50 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="col-span-2">
                                            <label for="brand" class="block text-sm font-medium leading-6 text-gray-900">MARKA</label>
                                            <div class="mt-2">
                                                <input type="text" name="brand" id="brand"
                                                       autocomplete="brand" value="{{ $product->brand }}"
                                                       class="block w-full bg-gray-50 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="col-span-2">
                                            <label for="model" class="block text-sm font-medium leading-6 text-gray-900">MODEL</label>
                                            <div class="mt-2">
                                                <input type="text" name="model" id="model"
                                                       autocomplete="model" value="{{ $product->model }}"
                                                       class="block w-full bg-gray-50 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="col-span-2">
                                            <label for="color" class="block text-sm font-medium leading-6 text-gray-900">RENK</label>
                                            <div class="mt-2">
                                                <input type="text" name="color" id="color"
                                                       autocomplete="color" value="{{ $product->color }}"
                                                       class="block w-full bg-gray-50 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="col-span-6">
                                            <label for="description" class="block text-sm font-medium leading-6 text-gray-900">AÇIKLAMA</label>
                                            <div class="mt-2">
                                                <div class="mt-2">
                                                    <textarea id="description" name="description" rows="5" class="block w-full rounded-md border-0 py-1.5 px-3 bg-gray-50 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">{{ $product->description }}</textarea>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-span-2">
                                            <label for="unit" class="block text-sm font-medium leading-6 text-gray-900">BİRİM</label>
                                            <select id="unit" name="unit"
                                                    class="mt-2 block w-full bg-gray-50 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 {{ $product->unit == 'pcs' ? 'selected' : '' }} value="pcs">ADET</option>
                                                <option {{ $product->unit == 'hour' ? 'selected' : '' }} value="hour">SAAT</option>
                                                <option {{ $product->unit == 'day' ? 'selected' : '' }} value="day">GÜN</option>
                                                <option {{ $product->unit == 'season' ? 'selected' : '' }} value="season">SEZON</option>
                                                <option {{ $product->unit == 'month' ? 'selected' : '' }} value="month">AY</option>
                                                <option {{ $product->unit == 'year' ? 'selected' : '' }} value="year">YIL</option>
                                                <option {{ $product->unit == '' ? 'selected' : '' }} value="">*</option>
                                            </select>
                                        </div>
                                        <div class="col-span-2">
                                            <label for="discounted_price" class="block text-sm font-medium leading-6 text-gray-900">NORMAL FİYAT</label>
                                            <div class="relative mt-2 rounded-md shadow-sm">
                                                <input type="text" name="discounted_price"
                                                       id="discounted_price" value="{{ $product->discounted_price }}"
                                                       class="block w-full bg-gray-50 rounded-md border-0 py-1.5 text-right text-gray-900 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.00">
                                            </div>
                                        </div>
                                        <div class="col-span-2">
                                            <label for="sale_price" class="block text-sm font-medium leading-6 text-gray-900">SATIŞ FİYATI</label>
                                            <div class="relative mt-2 rounded-md shadow-sm">
                                                <input type="text" name="sale_price"
                                                       id="sale_price" value="{{ $product->sale_price }}"
                                                       class="block w-full bg-gray-50 rounded-md border-0 py-1.5 text-right pr-16 text-gray-900 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.00">
                                                <div class="absolute inset-y-0 right-0 flex items-center">
                                                    <label for="currency" class="sr-only">Currency</label>
                                                    <select id="currency" name="currency" class="h-full rounded-md border-0 bg-transparent py-0 pl-2 pr-7 text-gray-500 focus:ring-2 focus:ring-inset focus:ring-sky-600 sm:text-sm">
                                                        <option value="TRY">TRY</option>
                                                        <option value="USD">USD</option>
                                                        <option value="EUR">EUR</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>

                            </div>

                            <div class="mt-6 flex items-center justify-end gap-x-6">
                                <x-a-black href="" click="" type="" ring="rose">
                                    VAZGEÇ
                                </x-a-black>
                                <x-a-black href="" click="" type="submit" ring="emerald">
                                    KAYDET
                                </x-a-black>
                            </div>
                        </form>
                    </div>

                    {{--AKTIVITELER--}}
                    <div class="p-4 shadow bg-white ring-1 ring-stone-400/20 sm:mx-0 sm:rounded-lg lg:col-start-3">
                        <!-- Activity feed -->
                        <h2 class="flex items-center text-lg font-jbmono-bold leading-6 text-stone-700">
                            <span class="material-symbols-rounded mr-1">
                                bolt
                            </span>
                            Geçmiş
                        </h2>
                        <ul role="list" class="mt-6 space-y-6">
                            <li class="relative flex gap-x-4">
                                <div class="absolute left-0 top-0 flex w-6 justify-center -bottom-6">
                                    <div class="w-px bg-gray-200"></div>
                                </div>
                                <div
                                    class="relative flex h-6 w-6 flex-none items-center justify-center bg-white">
                                    <div
                                        class="h-1.5 w-1.5 rounded-full bg-gray-50 ring-1 ring-gray-300"></div>
                                </div>
                                <p class="flex-auto py-0.5 text-xs leading-5 text-gray-500"><span
                                        class="font-medium text-gray-900">Chelsea Hagon</span> created the
                                    invoice.</p>
                                <time datetime="2023-01-23T10:32"
                                      class="flex-none py-0.5 text-xs leading-5 text-gray-500">7d ago
                                </time>
                            </li>
                            <li class="relative flex gap-x-4">
                                <div class="absolute left-0 top-0 flex w-6 justify-center -bottom-6">
                                    <div class="w-px bg-gray-200"></div>
                                </div>
                                <div
                                    class="relative flex h-6 w-6 flex-none items-center justify-center bg-white">
                                    <div
                                        class="h-1.5 w-1.5 rounded-full bg-gray-50 ring-1 ring-gray-300"></div>
                                </div>
                                <p class="flex-auto py-0.5 text-xs leading-5 text-gray-500"><span
                                        class="font-medium text-gray-900">Chelsea Hagon</span> edited the
                                    invoice.</p>
                                <time datetime="2023-01-23T11:03"
                                      class="flex-none py-0.5 text-xs leading-5 text-gray-500">6d ago
                                </time>
                            </li>
                            <li class="relative flex gap-x-4">
                                <div class="absolute left-0 top-0 flex w-6 justify-center -bottom-6">
                                    <div class="w-px bg-gray-200"></div>
                                </div>
                                <div
                                    class="relative flex h-6 w-6 flex-none items-center justify-center bg-white">
                                    <div
                                        class="h-1.5 w-1.5 rounded-full bg-gray-50 ring-1 ring-gray-300"></div>
                                </div>
                                <p class="flex-auto py-0.5 text-xs leading-5 text-gray-500"><span
                                        class="font-medium text-gray-900">Chelsea Hagon</span> sent the invoice.
                                </p>
                                <time datetime="2023-01-23T11:24"
                                      class="flex-none py-0.5 text-xs leading-5 text-gray-500">6d ago
                                </time>
                            </li>
                            <li class="relative flex gap-x-4">
                                <div class="absolute left-0 top-0 flex w-6 justify-center -bottom-6">
                                    <div class="w-px bg-gray-200"></div>
                                </div>
                                <img
                                    src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
                                    alt="" class="relative mt-3 h-6 w-6 flex-none rounded-full bg-gray-50">
                                <div class="flex-auto bg-stone-50 rounded-md p-3 ring-1 ring-inset ring-gray-200">
                                    <div class="flex justify-between gap-x-4">
                                        <div class="py-0.5 text-xs leading-5 text-gray-500"><span
                                                class="font-medium text-gray-900">Chelsea Hagon</span> commented
                                        </div>
                                        <time datetime="2023-01-23T15:56"
                                              class="flex-none py-0.5 text-xs leading-5 text-gray-500">3d ago
                                        </time>
                                    </div>
                                    <p class="text-sm leading-6 text-gray-500">Called client, they reassured me
                                        the invoice would be paid by the 25th.</p>
                                </div>
                            </li>
                            <li class="relative flex gap-x-4">
                                <div class="absolute left-0 top-0 flex w-6 justify-center -bottom-6">
                                    <div class="w-px bg-gray-200"></div>
                                </div>
                                <div
                                    class="relative flex h-6 w-6 flex-none items-center justify-center bg-white">
                                    <div
                                        class="h-1.5 w-1.5 rounded-full bg-gray-50 ring-1 ring-gray-300"></div>
                                </div>
                                <p class="flex-auto py-0.5 text-xs leading-5 text-gray-500"><span
                                        class="font-medium text-gray-900">Alex Curren</span> viewed the invoice.
                                </p>
                                <time datetime="2023-01-24T09:12"
                                      class="flex-none py-0.5 text-xs leading-5 text-gray-500">2d ago
                                </time>
                            </li>
                            <li class="relative flex gap-x-4">
                                <div class="absolute left-0 top-0 flex w-6 justify-center h-6">
                                    <div class="w-px bg-gray-200"></div>
                                </div>
                                <div
                                    class="relative flex h-6 w-6 flex-none items-center justify-center bg-white">
                                    <svg class="h-6 w-6 text-sky-600" viewBox="0 0 24 24" fill="currentColor"
                                         aria-hidden="true">
                                        <path fill-rule="evenodd"
                                              d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
                                              clip-rule="evenodd"/>
                                    </svg>
                                </div>
                                <p class="flex-auto py-0.5 text-xs leading-5 text-gray-500"><span
                                        class="font-medium text-gray-900">Alex Curren</span> paid the invoice.
                                </p>
                                <time datetime="2023-01-24T09:20"
                                      class="flex-none py-0.5 text-xs leading-5 text-gray-500">1d ago
                                </time>
                            </li>
                        </ul>
                    </div>

                </div>
            </div>
        </main>
    </div>

@endsection