@extends('layouts.app')
@section('content')
    {{-- @include('components.sidebar') --}}
    {{-- @include('components.profile') --}}

    <div class="w-full pt-20">
        <h2 class="text-lg font-semibold text-gray-300">Personel Taleplerim</h2>
        <div class="flex justify-center items-center gap-4 mt-4">
            <button id="incomplete"
                class="p-2 inline-flex justify-center items-center rounded-[10px] transition-all delay-100 font-bold border-theme_secondary_black hover:bg-blue-700 hover:border-blue-700 border-2 text-gray-300">Tamamlanmamış
                Talepler</button>
            <button id="complete"
                class="p-2 inline-flex justify-center items-center rounded-[10px] transition-all delay-100 font-bold border-theme_secondary_black hover:bg-blue-700 hover:border-blue-700 border-2 text-gray-300">Tamamlanmış
                Talepler</button>
            <button id="past"
                class="p-2 inline-flex justify-center items-center rounded-[10px] transition-all delay-100 font-bold border-theme_secondary_black hover:bg-blue-700 hover:border-blue-700 border-2 text-gray-300">Geçmiş
                Talepler</button>
        </div>
        <div class="py-4" id="incompleteList">
            {{-- <div class="text-white">Tamamlanmamış Talepler</div> --}}
            <ol class="orderedList mt-4 text-sm leading-6 lg:col-span-7 xl:col-span-8 w-full">
                @foreach ($uncompletedDemands as $uncompletedDemand)
                    <li class="meetRow relative flex space-x-6 py-6 xl:static bg-theme_secondary_black rounded-3xl p-8 mt-4"
                        style="">
                        <img src="{{ asset('assets/profilePictures/user2.jpeg') }}"
                            class="h-14 w-14 flex-none rounded-full object-cover">
                        <a href="{{ route('customer.demand.show', ['demand' => $uncompletedDemand]) }}" class="w-full">
                            <div class="flex-auto">
                                <h3 class="pr-10 font-semibold text-gray-300 xl:pr-0">
                                    {{ $uncompletedDemand->tickets->user->full_name }}</h3>
                                <dl class="mt-2 flex flex-col text-gray-400 xl:flex-row">
                                    <div class="flex items-start space-x-3">
                                        <dt class="mt-0.5"><span class="sr-only">Date</span><svg
                                                class="h-5 w-5 fill-gray-400" xmlns="http://www.w3.org/2000/svg"
                                                viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                                <path class="fill-gray-300" fill-rule="evenodd"
                                                    d="M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z"
                                                    clip-rule="evenodd"></path>
                                            </svg></dt>
                                        <dd><time class="text-gray-300"
                                                datetime="{{ \Carbon\Carbon::parse($uncompletedDemand->tickets->date)->isoFormat('D MMMM Y') }}">{{ \Carbon\Carbon::parse($uncompletedDemand->tickets->date)->isoFormat('D MMMM Y') }}
                                                Saat {{ date('H:i', strtotime($uncompletedDemand->hour)) }}
                                            </time>
                                        </dd>
                                    </div>
                                    <div
                                        class="mt-2 flex items-start space-x-3 xl:mt-0 xl:ml-3.5 xl:border-l xl:border-gray-400 xl:border-opacity-50 xl:pl-3.5">
                                        <dt class="mt-0.5"><span class="sr-only">Adres</span><svg class="fill-gray-300"
                                                xmlns="http://www.w3.org/2000/svg" height="1em"
                                                viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
                                                <path
                                                    d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z">
                                                </path>
                                            </svg></dt>
                                        <dd class="uppercase text-gray-300">{{ $uncompletedDemand->quantity }}
                                            {{ $uncompletedDemand->categories->title }}</dd>
                                    </div>

                                </dl>
                            </div>
                        </a>
                    </li>
                @endforeach
            </ol>
        </div>
        <div class="py-4 hidden" id="completeList">
            {{-- <div class="text-white">Tamamlanmış Talepler</div> --}}
            <ol class="orderedList mt-4 text-sm leading-6 lg:col-span-7 xl:col-span-8 w-full">
                @foreach ($completedDemands as $completedDemand)
                    <li class="meetRow relative flex space-x-6 py-6 xl:static bg-theme_secondary_black rounded-3xl p-8 mt-4"
                        style=""><img src="{{ asset('assets/profilePictures/user2.jpeg') }}" alt=""
                            class="h-14 w-14 flex-none rounded-full">
                        <a href="{{ route('customer.demand.show', ['demand' => $completedDemand]) }}" class="w-full">
                            <div class="flex-auto">
                                <h3 class="pr-10 font-semibold text-gray-300 xl:pr-0">
                                    {{ $completedDemand->tickets->user->full_name }}</h3>
                                <dl class="mt-2 flex flex-col text-gray-400 xl:flex-row">
                                    <div class="flex items-start space-x-3">
                                        <dt class="mt-0.5"><span class="sr-only">Date</span><svg
                                                class="h-5 w-5 fill-gray-400" xmlns="http://www.w3.org/2000/svg"
                                                viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                                <path class="fill-gray-300" fill-rule="evenodd"
                                                    d="M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z"
                                                    clip-rule="evenodd"></path>
                                            </svg></dt>
                                        <dd><time class="text-gray-300"
                                                datetime="{{ \Carbon\Carbon::parse($completedDemand->tickets->date)->isoFormat('D MMMM Y') }}">{{ \Carbon\Carbon::parse($completedDemand->tickets->date)->isoFormat('D MMMM Y') }}
                                                Saat {{ date('H:i', strtotime($completedDemand->hour)) }}
                                            </time>
                                        </dd>
                                    </div>
                                    <div
                                        class="mt-2 flex items-start space-x-3 xl:mt-0 xl:ml-3.5 xl:border-l xl:border-gray-400 xl:border-opacity-50 xl:pl-3.5">
                                        <dt class="mt-0.5"><span class="sr-only">Adres</span><svg class="fill-gray-300"
                                                xmlns="http://www.w3.org/2000/svg" height="1em"
                                                viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
                                                <path
                                                    d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z">
                                                </path>
                                            </svg></dt>
                                        <dd class="uppercase text-gray-300">{{ $completedDemand->quantity }}
                                            {{ $completedDemand->categories->title }}</dd>
                                    </div>

                                </dl>
                            </div>
                        </a>
                    </li>
                @endforeach
            </ol>
        </div>

        <div class="py-4 hidden" id="pastList">
            {{-- <div class="text-white">Geçmiş Talepler</div> --}}
            <ol class="orderedList mt-4 text-sm leading-6 lg:col-span-7 xl:col-span-8 w-full">
                @foreach ($pastDemands as $pastDemand)
                    <li class="meetRow relative flex space-x-6 py-6 xl:static bg-theme_secondary_black rounded-3xl p-8 mt-4"
                        style=""><img src="{{ asset('assets/profilePictures/user2.jpeg') }}" alt=""
                            class="h-14 w-14 flex-none rounded-full">
                        <a href="{{ route('customer.demand.show', ['demand' => $pastDemand]) }}" class="w-full">
                            <div class="flex-auto">
                                <h3 class="pr-10 font-semibold text-gray-300 xl:pr-0">
                                    {{ $pastDemand->tickets->user->full_name }}</h3>
                                <dl class="mt-2 flex flex-col text-gray-400 xl:flex-row">
                                    <div class="flex items-start space-x-3">
                                        <dt class="mt-0.5"><span class="sr-only">Date</span><svg
                                                class="h-5 w-5 fill-gray-400" xmlns="http://www.w3.org/2000/svg"
                                                viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                                <path class="fill-gray-300" fill-rule="evenodd"
                                                    d="M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z"
                                                    clip-rule="evenodd"></path>
                                            </svg></dt>
                                        <dd><time class="text-gray-300"
                                                datetime="{{ \Carbon\Carbon::parse($pastDemand->tickets->date)->isoFormat('D MMMM Y') }}">{{ \Carbon\Carbon::parse($pastDemand->tickets->date)->isoFormat('D MMMM Y') }}
                                                Saat {{ date('H:i', strtotime($pastDemand->hour)) }}
                                            </time>
                                        </dd>
                                    </div>
                                    <div
                                        class="mt-2 flex items-start space-x-3 xl:mt-0 xl:ml-3.5 xl:border-l xl:border-gray-400 xl:border-opacity-50 xl:pl-3.5">
                                        <dt class="mt-0.5"><span class="sr-only">Adres</span><svg class="fill-gray-300"
                                                xmlns="http://www.w3.org/2000/svg" height="1em"
                                                viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
                                                <path
                                                    d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z">
                                                </path>
                                            </svg></dt>
                                        <dd class="uppercase text-gray-300">{{ $pastDemand->quantity }}
                                            {{ $pastDemand->categories->title }}</dd>
                                    </div>
                                </dl>
                            </div>
                        </a>
                    </li>
                @endforeach
            </ol>
        </div>
    </div>
@endsection
@section('javascript')
    <script>
        $('#incomplete').click(function() {
            $('#incomplete').addClass('bg-blue-700')
            $('#complete').removeClass('bg-blue-700')
            $('#past').removeClass('bg-blue-700')
            $('#completeList').slideUp('fast');
            $('#pastList').slideUp('fast');
            $('#incompleteList').slideDown();
        });
        $('#complete').click(function() {
            $('#complete').addClass('bg-blue-700')
            $('#incomplete').removeClass('bg-blue-700')
            $('#past').removeClass('bg-blue-700')
            $('#pastList').slideUp('fast');
            $('#incompleteList').slideUp('fast');
            $('#completeList').slideDown();
        });
        $('#past').click(function() {
            $('#past').addClass('bg-blue-700')
            $('#incomplete').removeClass('bg-blue-700')
            $('#complete').removeClass('bg-blue-700')
            $('#completeList').slideUp('fast');
            $('#incompleteList').slideUp('fast');
            $('#pastList').slideDown();
        });
    </script>
@endsection