@extends('layouts.user')
@section('pageTitle')
    İşlerim
@endsection
@section('content')
    <div class="container-user">
        <div class="flex justify-center items-center px-8 mt-2">
            <button id="complete" onclick="changeFragment('approvedOffers')"
                class="relative nav-item inline-flex w-1/3 text-indigo-700 justify-center items-center rounded-[10px] transition-all delay-100 font-semibold text-sm">
                Aktif
                <span class="bg-indigo-700 w-4 h-0.5 absolute -bottom-1.5 hidden"></span>
            </button>
            <button id="past" onclick="changeFragment('pastOffers')"
                class="relative nav-item inline-flex w-1/3 justify-center items-center rounded-[10px] transition-all delay-100 font-semibold text-sm text-gray-300">
                Geçmiş
                <span class="bg-indigo-700 w-4 h-0.5 absolute -bottom-1.5 hidden"></span>
            </button>
            {{-- <span class="indicator bg-indigo-700 w-4 h-0.5 absolute left-[112px] -bottom-2"></span> --}}
        </div>

        <div class="grid grid-cols-1 overflow-y-auto mt-6 h-[calc(100vh-216px)] sm:px-12 md:px-24">
            <div class="space-y-4" id="approvedOffers">
                @foreach ($approvedTickets as $approvedTicket)
                    @php
                        $customer = $approvedTicket->user->user_departman->customer_user;
                        if ($customer->headOffice) {
                            $icon = $customer->headOffice->office_logo;
                        } else {
                            $icon = $customer->branch->headOffice->office_logo;
                        }
                    @endphp
                    <a href="{{ route('workers.offer.detail', ['offer' => $approvedTicket]) }}">
                        <div class="border-y border-theme_secondary_black text-sm text-gray-300 py-4 px-6">
                            <div class="relative flex justify-start items-center gap-4">
                                <img class="w-12 h-12 rounded object-cover" src="{{ getCdnFile($icon) }}" alt="">
                                <div class="flex flex-col">
                                    <p class="font-semibold pr-14">
                                        {{ $customer->headOffice ? $customer->headOffice->office_title : ($customer->branch ? $customer->branch->branch_name : '') }}
                                    </p>
                                    <p class="text-gray-500 text-xs">
                                        {{ \Carbon\Carbon::parse($approvedTicket?->date)->isoFormat('D MMMM Y') }}
                                    </p>
                                </div>
                                @if (
                                    $approvedTicket->demandSifts->where('user_id', auth()->user()->id)->first()->status == '1' ||
                                        $approvedTicket->demandSifts->where('user_id', auth()->user()->id)->first()->status == '3')
                                    <span
                                        class="w-6 h-6 flex justify-center items-center rounded-2xl bg-green-800 text-gray-200 text-xs text-center absolute -right-4 top-0">
                                        <i class="fa-solid fa-check"></i>
                                    </span>
                                @elseif ($approvedTicket->demandSifts->where('user_id', auth()->user()->id)->first()->status == '2')
                                    <span
                                        class="w-6 h-6 flex justify-center items-center rounded-2xl bg-yellow-600 text-gray-200 text-xs text-center absolute -right-4 top-0">
                                        <i class="fa-regular fa-hourglass-half"></i>
                                    </span>
                                @elseif ($approvedTicket->demandSifts->where('user_id', auth()->user()->id)->first()->status == '0')
                                    <span
                                        class="w-6 h-6 flex justify-center items-center rounded-2xl bg-red-800 text-gray-200 text-xs text-center absolute -right-4 top-0">
                                        <i class="fa-regular fa-x"></i>
                                    </span>
                                @endif
                            </div>
                        </div>
                    </a>
                @endforeach
            </div>

            <div class="hidden space-y-4" id="pastOffers">
                @foreach ($pastTickets as $pastTicket)
                    @php
                        $customer = $pastTicket?->user?->user_departman?->customer_user;
                        if ($customer->headOffice) {
                            $icon = $customer->headOffice->office_logo;
                        } else {
                            $icon = $customer->branch->headOffice->office_logo;
                        }
                    @endphp
                    <a href="{{ route('workers.offer.detail', ['offer' => $pastTicket]) }}">
                        <div class="border-y border-theme_secondary_black text-sm text-gray-300 py-4 px-6">
                            <div class="relative flex justify-start items-center gap-4">
                                <img class="w-12 h-12 rounded object-cover" src="{{ getCdnFile($icon) }}" alt="">
                                <div class="flex flex-col">
                                    <p class="font-semibold pr-14">
                                        {{ $customer->headOffice ? $customer->headOffice->office_title : ($customer->branch ? $customer->branch->branch_name : '') }}
                                    </p>
                                    <p class="text-gray-500 text-xs">
                                        {{ \Carbon\Carbon::parse($pastTicket?->date)->isoFormat('D MMMM Y') }}
                                    </p>
                                </div>
                                @if (
                                    $pastTicket->demandSifts->where('user_id', auth()->user()->id)->first()->status == '1' ||
                                        $pastTicket->demandSifts->where('user_id', auth()->user()->id)->first()->status == '3')
                                    <span
                                        class="w-6 h-6 flex justify-center items-center rounded-2xl bg-green-800 text-gray-200 text-xs text-center absolute -right-4 top-0">
                                        <i class="fa-solid fa-check"></i>
                                    </span>
                                @elseif ($pastTicket->demandSifts->where('user_id', auth()->user()->id)->first()->status == '2')
                                    <span
                                        class="w-6 h-6 flex justify-center items-center rounded-2xl bg-yellow-600 text-gray-200 text-xs text-center absolute -right-4 top-0">
                                        <i class="fa-regular fa-hourglass-half"></i>
                                    </span>
                                @elseif ($pastTicket->demandSifts->where('user_id', auth()->user()->id)->first()->status == '0')
                                    <span
                                        class="w-6 h-6 flex justify-center items-center rounded-2xl bg-red-800 text-gray-200 text-xs text-center absolute -right-4 top-0">
                                        <i class="fa-regular fa-x"></i>
                                    </span>
                                @endif
                            </div>
                        </div>
                    </a>
                @endforeach
            </div>
        </div>
        {{-- * month filter --}}
        <button class="absolute right-0 px-3 rounded-l-full top-16 bg-white filterButton hidden">
            <i class="fa-solid fa-filter text-gray-400"></i>
        </button>
        <div class="monthDropdown hidden">
            <div class="absolute top-0 right-0 w-full flex justify-center items-center h-screen bg-black/60">
                <div class="z-10 bg-theme_secondary_black rounded-lg shadow p-4">
                    <div class="flex justify-between">
                        <h1 class="text-sm text-gray-400 font-semibold mb-4">
                            Seçtiğiniz aya ait bilgileri görün
                        </h1>
                        <button class="closeFilter mr-2 text-xl text-theme_secondary_black">
                            <i class="fa-solid fa-xmark"></i>
                        </button>
                    </div>
                    <select id="months" class="input-2 w-full text-sm">
                        <option selected disabled>Ay Seçiniz</option>
                        @foreach (range(1, 12) as $month)
                            @php
                                $monthName = \Carbon\Carbon::create()->month($month)->locale('tr')->monthName;

                                $monthValue = str_pad($month, 2, '0', STR_PAD_LEFT);
                            @endphp
                            <option value="{{ $monthValue }}">{{ $monthName }}</option>
                        @endforeach
                    </select>
                    <div class="flex justify-between mt-4">
                        <button type="button" onclick="clearFilter()"
                            class="text-white bg-red-700 focus:outline-none font-medium rounded-lg text-sm px-2 py-2 text-center me-2 mb-2">
                            Filtreyi Temizle
                        </button>
                        <button type="button"
                            class="closeFilter text-white bg-gray-700 focus:outline-none font-medium rounded-lg text-sm px-2 py-2 text-center me-2 mb-2">
                            Kapat
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @include('components.showImage')
    @if (session('error'))
        <x-toast color="red-700">
            <x-slot name="message">
                {{ session('error') }}
            </x-slot>
            <x-slot name="icon">
                <i class="fa-solid fa-exclamation"></i>
            </x-slot>
        </x-toast>
    @endif
    @if (session('success'))
        <x-toast color="green-700">
            <x-slot name="message">
                {{ session('success') }}
            </x-slot>
            <x-slot name="icon">
                <i class="fa-solid fa-check"></i>
            </x-slot>
        </x-toast>
    @endif
    @if ($errors->any())
        @include('components.error-modal-second')
    @elseif (session('success'))
        @include('components.success-modal')
    @elseif(session('error'))
        @include('components.error-modal')
    @endif
@endsection
@section('javascript')
    <script>
        $('.filterButton').click(function() {
            $('.monthDropdown').fadeIn('fast');
        });
        $('.closeFilter').click(function() {
            $('.monthDropdown').fadeOut('fast');
        });

        $(document).ready(function() {
            $('.nav-item').click(function() {
                var clickedId = $(this).attr('id');
                var indicator = $('.indicator');
                var filterButton = $('.filterButton');

                $(this).find('span').fadeIn('fast');
                $(this).siblings().find('span').fadeOut('fast');

                $(this).addClass('text-indigo-700').siblings().removeClass('text-indigo-700').addClass(
                    'text-gray-300');

                if (clickedId === 'complete') {
                    $('#pastOffers').slideUp('fast');
                    $('#approvedOffers').slideDown('fast');
                    filterButton.hide();
                } else if (clickedId === 'past') {
                    $('#approvedOffers').slideUp('fast');
                    $('#pastOffers').slideDown('fast');
                    filterButton.show();
                }
            });
        });

        $('#months').change(function() {
            var dataMonthValue = $(this).val();
            var hash = window.location.hash;
            window.location.href = '?month=' + dataMonthValue + hash;
        });

        function clearFilter() {
            var baseUrl = window.location.href.split('?')[0];
            window.location.href = baseUrl;
        }

        function changeFragment(fragment) {
            window.location.hash = fragment;
        }

        $(document).ready(function() {
            var currentFragment = window.location.hash;
            var filterButton = $('.filterButton');
            if (currentFragment === '#approvedOffers') {
                $('#complete').click();
                filterButton.hide();
            }
            if (currentFragment === '#pastOffers') {
                $('#past').click();
                filterButton.show();
            }
        });
    </script>
@endsection