@extends('layouts.app')

@section('styles')

@endsection

@section('content')

    <div class="">

        @include('components.notification')

        <main class="tracking-tight">
            <div class="flex h-full flex-col">
                <!-- Top nav-->
                <!-- Bottom section -->
                <div class="flex min-h-0 flex-1 overflow-hidden">
                    <!-- Main area -->
                    <main class="grid grid-cols-4 min-w-0 flex-1 border-t border-gray-200 xl:flex xl:flex-row">
                        {{--DETAIL--}}
                        <section class="col-span-3 flex h-full flex-1 flex-col overflow-hidden xl:order-last">
                            <!-- Top section -->
                            <div class="shrink-0 border-b border-gray-200 bg-stone-100">
                                <!-- Toolbar-->
                                <div class="flex h-16 flex-col justify-center">
                                    <div class="px-4 sm:px-6 lg:px-8">
                                        <div class="flex justify-between py-3">
                                            <!-- Left buttons -->
                                            <div>
                                                <div class="isolate inline-flex rounded-md shadow-xs sm:space-x-3 sm:shadow-none">
                                                    <span class="inline-flex sm:shadow-xs">
                                                      <button type="button"
                                                              class="inline-flex tracking-tight items-center px-3 py-2 bg-gray-800 border border-transparent rounded-l-md font-semibold text-xs text-white uppercase hover:bg-gray-700 focus:bg-gray-700 active:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 transition ease-in-out duration-150">
                                                        <svg class="mr-2 size-5 text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"
                                                             data-slot="icon">
                                                          <path fill-rule="evenodd"
                                                                d="M7.793 2.232a.75.75 0 0 1-.025 1.06L3.622 7.25h10.003a5.375 5.375 0 0 1 0 10.75H10.75a.75.75 0 0 1 0-1.5h2.875a3.875 3.875 0 0 0 0-7.75H3.622l4.146 3.957a.75.75 0 0 1-1.036 1.085l-5.5-5.25a.75.75 0 0 1 0-1.085l5.5-5.25a.75.75 0 0 1 1.06.025Z"
                                                                clip-rule="evenodd"/>
                                                        </svg>
                                                        CEVAPLA
                                                      </button>
                                                      <button type="button"
                                                              class="inline-flex tracking-tight items-center px-3 py-2 bg-gray-800 border border-transparent font-semibold text-xs text-white uppercase hover:bg-gray-700 focus:bg-gray-700 active:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 transition ease-in-out duration-150">
                                                        <svg class="mr-2 size-5 text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"
                                                             data-slot="icon">
                                                          <path
                                                              d="m2.695 14.762-1.262 3.155a.5.5 0 0 0 .65.65l3.155-1.262a4 4 0 0 0 1.343-.886L17.5 5.501a2.121 2.121 0 0 0-3-3L3.58 13.419a4 4 0 0 0-.885 1.343Z"/>
                                                        </svg>
                                                        NOT AL
                                                      </button>
                                                      <button type="button"
                                                              class="inline-flex tracking-tight items-center px-3 py-2 bg-gray-800 border border-transparent rounded-r-md font-semibold text-xs text-white uppercase hover:bg-gray-700 focus:bg-gray-700 active:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 transition ease-in-out duration-150">
                                                        <svg class="mr-2 size-5 text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"
                                                             data-slot="icon">
                                                          <path
                                                              d="M10 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM1.615 16.428a1.224 1.224 0 0 1-.569-1.175 6.002 6.002 0 0 1 11.908 0c.058.467-.172.92-.57 1.174A9.953 9.953 0 0 1 7 18a9.953 9.953 0 0 1-5.385-1.572ZM16.25 5.75a.75.75 0 0 0-1.5 0v2h-2a.75.75 0 0 0 0 1.5h2v2a.75.75 0 0 0 1.5 0v-2h2a.75.75 0 0 0 0-1.5h-2v-2Z"/>
                                                        </svg>
                                                        KİŞİ EKLE
                                                      </button>
                                                    </span>

                                                    <span class="hidden space-x-3 lg:flex">
                                                      <button type="button"
                                                              class="inline-flex tracking-tight items-center px-3 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase hover:bg-gray-700 focus:bg-gray-700 active:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 transition ease-in-out duration-150">
                                                        <svg class="mr-2 size-5 text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"
                                                             data-slot="icon">
                                                          <path d="M2 3a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H2Z"/>
                                                          <path fill-rule="evenodd"
                                                                d="M2 7.5h16l-.811 7.71a2 2 0 0 1-1.99 1.79H4.802a2 2 0 0 1-1.99-1.79L2 7.5ZM7 11a1 1 0 0 1 1-1h4a1 1 0 1 1 0 2H8a1 1 0 0 1-1-1Z"
                                                                clip-rule="evenodd"/>
                                                        </svg>
                                                        Archive
                                                      </button>
                                                      <button type="button"
                                                              class="inline-flex tracking-tight items-center px-3 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase hover:bg-gray-700 focus:bg-gray-700 active:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 transition ease-in-out duration-150">
                                                        <svg class="mr-2 size-5 text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"
                                                             data-slot="icon">
                                                          <path fill-rule="evenodd"
                                                                d="M2 4.75C2 3.784 2.784 3 3.75 3h4.836c.464 0 .909.184 1.237.513l1.414 1.414a.25.25 0 0 0 .177.073h4.836c.966 0 1.75.784 1.75 1.75v8.5A1.75 1.75 0 0 1 16.25 17H3.75A1.75 1.75 0 0 1 2 15.25V4.75Zm8.75 4a.75.75 0 0 0-1.5 0v2.546l-.943-1.048a.75.75 0 1 0-1.114 1.004l2.25 2.5a.75.75 0 0 0 1.114 0l2.25-2.5a.75.75 0 1 0-1.114-1.004l-.943 1.048V8.75Z"
                                                                clip-rule="evenodd"/>
                                                        </svg>
                                                        Move
                                                      </button>
                                                    </span>

                                                    <div class="relative -ml-px block sm:shadow-xs lg:hidden">
                                                        <div>
                                                            <button type="button"
                                                                    class="relative inline-flex items-center gap-x-1.5 rounded-r-md bg-white px-2 py-2 text-sm font-semibold text-stone-900 ring-1 ring-gray-300 ring-inset hover:bg-stone-50 focus:z-10 sm:rounded-md sm:px-3"
                                                                    id="menu-2-button" aria-expanded="false" aria-haspopup="true">
                                                                <span class="sr-only sm:hidden">More</span>
                                                                <span class="hidden sm:inline">More</span>
                                                                <svg class="size-5 text-stone-400 sm:-mr-1" viewBox="0 0 20 20" fill="currentColor"
                                                                     aria-hidden="true"
                                                                     data-slot="icon">
                                                                    <path fill-rule="evenodd"
                                                                          d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z"
                                                                          clip-rule="evenodd"/>
                                                                </svg>
                                                            </button>
                                                        </div>

                                                        <!--
                                                          Dropdown menu, show/hide based on menu state.

                                                          Entering: "transition ease-out duration-100"
                                                            From: "transform opacity-0 scale-95"
                                                            To: "transform opacity-100 scale-100"
                                                          Leaving: "transition ease-in duration-75"
                                                            From: "transform opacity-100 scale-100"
                                                            To: "transform opacity-0 scale-95"
                                                        -->
                                                        <div
                                                            class="absolute right-0 z-10 mt-2 w-36 origin-top-right rounded-md bg-white ring-1 shadow-lg ring-black/5 focus:outline-hidden"
                                                            role="menu" aria-orientation="vertical" aria-labelledby="menu-2-button" tabindex="-1">
                                                            <div class="py-1" role="none">
                                                                <!-- Active: "bg-stone-100 text-stone-900 outline-hidden", Not Active: "text-stone-700" -->
                                                                <a href="#" class="block px-4 py-2 text-sm text-stone-700 sm:hidden" role="menuitem"
                                                                   tabindex="-1"
                                                                   id="menu-2-item-0">Note</a>
                                                                <a href="#" class="block px-4 py-2 text-sm text-stone-700 sm:hidden" role="menuitem"
                                                                   tabindex="-1"
                                                                   id="menu-2-item-1">Assign</a>
                                                                <a href="#" class="block px-4 py-2 text-sm text-stone-700" role="menuitem"
                                                                   tabindex="-1"
                                                                   id="menu-2-item-2">Archive</a>
                                                                <a href="#" class="block px-4 py-2 text-sm text-stone-700" role="menuitem"
                                                                   tabindex="-1" id="menu-2-item-3">Move</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- Right buttons -->
                                            <nav aria-label="Pagination">
                                              <span class="isolate inline-flex rounded-md shadow-xs">
                                                <a href="#"
                                                   class="relative inline-flex items-center rounded-l-md bg-white px-3 py-2 text-stone-400 ring-1 ring-gray-300 ring-inset hover:z-10 hover:bg-stone-50 focus:z-10">
                                                  <span class="sr-only">Next</span>
                                                  <svg class="size-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
                                                    <path fill-rule="evenodd"
                                                          d="M9.47 6.47a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 1 1-1.06 1.06L10 8.06l-3.72 3.72a.75.75 0 0 1-1.06-1.06l4.25-4.25Z"
                                                          clip-rule="evenodd"/>
                                                  </svg>
                                                </a>
                                                <a href="#"
                                                   class="relative -ml-px inline-flex items-center rounded-r-md bg-white px-3 py-2 text-stone-400 ring-1 ring-gray-300 ring-inset hover:z-10 hover:bg-stone-50 focus:z-10">
                                                  <span class="sr-only">Previous</span>
                                                  <svg class="size-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
                                                    <path fill-rule="evenodd"
                                                          d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z"
                                                          clip-rule="evenodd"/>
                                                  </svg>
                                                </a>
                                              </span>
                                            </nav>
                                        </div>
                                    </div>
                                </div>
                                <!-- Message header -->
                            </div>

                            <div class="min-h-0 flex-1 overflow-y-auto">
                                <div class="bg-white pt-5 pb-6 shadow-sm">
                                    <div class="px-4 sm:flex sm:items-baseline sm:justify-between sm:px-6 lg:px-8">
                                        <div class="sm:w-0 sm:flex-1">
                                            <h1 id="message-heading" class="text-lg font-medium text-stone-900">Re: New pricing for existing
                                                customers</h1>
                                            <p class="mt-1 truncate text-sm text-stone-500">joearmstrong@example.com</p>
                                        </div>

                                        <div class="mt-4 flex items-center justify-between sm:mt-0 sm:ml-6 sm:shrink-0 sm:justify-start">
                                            <span
                                                class="inline-flex items-center rounded-full bg-cyan-100 px-3 py-0.5 text-sm font-medium text-cyan-800">Open</span>
                                            <div class="relative ml-3 inline-block text-left">
                                                <div>
                                                    <button type="button"
                                                            class="-my-2 flex items-center rounded-full bg-white p-2 text-stone-400 hover:text-stone-600 focus:ring-2 focus:ring-blue-600 focus:outline-hidden"
                                                            id="menu-3-button" aria-expanded="false" aria-haspopup="true">
                                                        <span class="sr-only">Open options</span>
                                                        <svg class="size-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"
                                                             data-slot="icon">
                                                            <path
                                                                d="M10 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM10 8.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM11.5 15.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z"/>
                                                        </svg>
                                                    </button>
                                                </div>

                                                <!--
                                                  Dropdown menu, show/hide based on menu state.

                                                  Entering: "transition ease-out duration-100"
                                                    From: "transform opacity-0 scale-95"
                                                    To: "transform opacity-100 scale-100"
                                                  Leaving: "transition ease-in duration-75"
                                                    From: "transform opacity-100 scale-100"
                                                    To: "transform opacity-0 scale-95"
                                                -->
                                                <div
                                                    class="absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white ring-1 shadow-lg ring-black/5 focus:outline-hidden"
                                                    role="menu" aria-orientation="vertical" aria-labelledby="menu-3-button" tabindex="-1">
                                                    <div class="py-1" role="none">
                                                        <!-- Active: "bg-stone-100 text-stone-900 outline-hidden", Not Active: "text-stone-700" -->
                                                        <button type="button" class="flex w-full justify-between px-4 py-2 text-sm text-stone-700"
                                                                role="menuitem" tabindex="-1"
                                                                id="menu-3-item-0">
                                                            <span>Copy email address</span>
                                                        </button>
                                                        <a href="#" class="flex justify-between px-4 py-2 text-sm text-stone-700" role="menuitem"
                                                           tabindex="-1" id="menu-3-item-1">
                                                            <span>Previous conversations</span>
                                                        </a>
                                                        <a href="#" class="flex justify-between px-4 py-2 text-sm text-stone-700" role="menuitem"
                                                           tabindex="-1" id="menu-3-item-2">
                                                            <span>View original</span>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Thread section-->
                                <ul role="list" class="space-y-4 py-4 sm:space-y-4 px-4">
                                    @foreach($emails as $item)
                                        <li class="bg-white px-4 py-6 shadow-sm sm:rounded-lg sm:px-6">
                                            <div class="sm:flex sm:items-baseline sm:justify-between">
                                                <div class="text-base font-medium">
                                                    <span class="text-stone-900">{{ $item['subject'] }}</span>
                                                    <p class="text-stone-400 text-xs">{{ $item['from'] }}</p>
                                                </div>
                                                <p class="mt-1 text-sm whitespace-nowrap text-stone-600 sm:mt-0 sm:ml-3">
                                                    <time datetime="{{ $item['date'] }}">{{ $item['date'] }}</time>
                                                </p>
                                            </div>
                                            <div class="mt-4 space-y-6 text-sm text-stone-800">
                                                {!! $item['body'] !!}
                                                {{--
                                                <iframe srcdoc="{{ $item['body'] }}" style="width: 100%; height: 800px; border: none;"></iframe>
                                                --}}
                                            </div>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        </section>
                        <!--LIST-->
                        <aside class="col-span-1 hidden xl:order-first xl:block xl:shrink-0">
                            <div class="relative flex h-full w-96 flex-col border-r border-gray-200 bg-stone-100">
                                <div class="shrink-0">
                                    <div class="flex h-16 flex-col justify-center bg-stone-100 px-6">
                                        <div class="flex items-baseline space-x-3">
                                            <h2 class="text-lg font-medium text-stone-900">Gelen Kutusu</h2>
                                            <p class="text-sm font-medium text-stone-500">{{ $count }} mesaj</p>
                                        </div>
                                    </div>
                                    <div class="border-t border-b border-gray-200 bg-stone-50 px-6 py-2 text-sm font-medium text-stone-500">Sorted by
                                        date
                                    </div>
                                </div>
                                <nav aria-label="Message list" class="min-h-0 flex-1 overflow-y-auto">
                                    <ul role="list" class="divide-y divide-gray-200 border-b border-gray-200">
                                        @foreach($emails as $item)
                                            <li class="relative bg-white px-6 py-5 focus-within:ring-2 focus-within:ring-blue-600 focus-within:ring-inset hover:bg-stone-50">
                                                <div class="flex justify-between space-x-3">
                                                    <div class="min-w-0 flex-1">
                                                        <a href="#" class="block focus:outline-hidden">
                                                            <span class="absolute inset-0" aria-hidden="true"></span>
                                                            <p class="truncate text-sm font-medium text-stone-900">{{ $item['from'] }}</p>
                                                            <p class="truncate text-sm text-stone-500">{{ $item['subject'] }}</p>
                                                        </a>
                                                    </div>
                                                    <time datetime="{{ $item['date'] }}"
                                                          class="shrink-0 text-xs tracking-tighter whitespace-nowrap text-stone-500">{{ \Carbon\Carbon::parse($item['date'])->diffForHumans() }}</time>
                                                </div>
                                                {{--
                                                                                                <div class="mt-1">
                                                                                                    <p class="line-clamp-2 text-sm text-stone-600">{{ Str::limit($item['body'], 100) }}</p>
                                                                                                </div>
                                                --}}
                                            </li>
                                        @endforeach
                                    </ul>
                                </nav>
                            </div>
                        </aside>
                    </main>
                </div>
            </div>
        </main>
    </div>

@endsection

@section('scripts')
    <script>

    </script>
@endsection