@extends('layouts.app')
@section('urlContent')
    {!! view('components.breadcrumbs', [
        'b_items' => [
            'Hızlı Talep Tipleri' => '/operation/quick/demand/change/ticket-type',

            'Aylık Hızlı Talep' => '/operation/quick/monthly/demand',

            $department->name . ' Talepleri' => '/operation/monthly/department/' . $department->id . '/tickets',
        ],
    ]) !!}
@endsection
@section('content')
    <div class="container-app">
        <div class="flex lg:flex-row flex-col gap-4 items-end lg:items-center justify-between pb-4">
            <div class="flex justify-start gap-6">
                <div>
                    <button
                        class="filter-button-all inline-flex w-44 items-center justify-between text-gray-600 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 font-medium rounded-lg text-sm px-3 py-1.5"
                        type="button" id="monthButton">
                        <i class="fa-solid fa-filter w-3 h-3 text-gray-500 mr-2.5"></i>
                        <span class="choosenMonth">
                            {{ $monthName }}
                        </span>
                        <svg class="w-2.5 h-2.5 ml-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                            viewBox="0 0 10 6">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="m1 1 4 4 4-4" />
                        </svg>
                    </button>
                    <!-- month dropdown -->
                    <div id="monthDropdown"
                        class="filter-dropdown-all z-10 hidden bg-theme_secondary_white rounded-lg shadow absolute mt-2">
                        <ul id="months" class="p-3 grid gap-4 grid-cols-3 text-sm text-gray-600">
                            <li>
                                <div class="flex items-center rounded p-2">
                                    <button
                                        class="date-button inline-flex justify-start w-full text-sm cursor-pointer font-medium rounded"
                                        data-month="01">
                                        Ocak
                                    </button>
                                </div>
                            </li>
                            <li>
                                <div class="flex items-center rounded p-2">
                                    <button
                                        class="date-button inline-flex justify-start w-full text-sm cursor-pointer font-medium rounded"
                                        data-month="02">
                                        Şubat
                                    </button>
                                </div>
                            </li>
                            <li>
                                <div class="flex items-center rounded p-2">
                                    <button
                                        class="date-button inline-flex justify-start w-full text-sm cursor-pointer font-medium rounded"
                                        data-month="03">
                                        Mart
                                    </button>
                                </div>
                            </li>
                            <li>
                                <div class="flex items-center rounded p-2">
                                    <button
                                        class="date-button inline-flex justify-start w-full text-sm cursor-pointer font-medium rounded"
                                        data-month="04">
                                        Nisan
                                    </button>
                                </div>
                            </li>
                            <li>
                                <div class="flex items-center rounded p-2">
                                    <button
                                        class="date-button inline-flex justify-start w-full text-sm cursor-pointer font-medium rounded"
                                        data-month="05">
                                        Mayıs
                                    </button>
                                </div>
                            </li>
                            <li>
                                <div class="flex items-center rounded p-2">
                                    <button
                                        class="date-button inline-flex justify-start w-full text-sm cursor-pointer font-medium rounded"
                                        data-month="06">
                                        Haziran
                                    </button>
                                </div>
                            </li>
                            <li>
                                <div class="flex items-center rounded p-2">
                                    <button
                                        class="date-button inline-flex justify-start w-full text-sm cursor-pointer font-medium rounded"
                                        data-month="07">
                                        Temmuz
                                    </button>
                                </div>
                            </li>
                            <li>
                                <div class="flex items-center rounded p-2">
                                    <button
                                        class="date-button inline-flex justify-start w-full text-sm cursor-pointer font-medium rounded"
                                        data-month="08">
                                        Ağustos
                                    </button>
                                </div>
                            </li>
                            <li>
                                <div class="flex items-center rounded p-2">
                                    <button
                                        class="date-button inline-flex justify-start w-full text-sm cursor-pointer font-medium rounded"
                                        data-month="09">
                                        Eylül
                                    </button>
                                </div>
                            </li>
                            <li>
                                <div class="flex items-center rounded p-2">
                                    <button
                                        class="date-button inline-flex justify-start w-full text-sm cursor-pointer font-medium rounded"
                                        data-month="10">
                                        Ekim
                                    </button>
                                </div>
                            </li>
                            <li>
                                <div class="flex items-center rounded p-2">
                                    <button
                                        class="date-button inline-flex justify-start w-full text-sm cursor-pointer font-medium rounded"
                                        data-month="11">
                                        Kasım
                                    </button>
                                </div>
                            </li>
                            <li>
                                <div class="flex items-center rounded p-2">
                                    <button
                                        class="date-button inline-flex justify-start w-full text-sm cursor-pointer font-medium rounded"
                                        data-month="12">
                                        Aralık
                                    </button>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div id="yearDropdown">
                    <select
                        class="inline-flex cursor-pointer w-24 items-center justify-between text-gray-600 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 font-medium rounded-lg text-sm px-3 py-1.5"
                        name="year" id="year">
                        @for ($i = env('APP_STARTED_YEAR', '2023'); $i < now()->addYears(2)->format('Y'); $i++)
                            <option value="{{ $i }}"
                                {{ request('year') && request('year') == $i ? 'selected' : '' }}>{{ $i }}
                            </option>
                        @endfor
                    </select>
                </div>
            </div>
            <div class="flex justify-end px-2">
                <a href="{{ route('operation.monthlyQuickDemandDetail', ['department' => $department->id]) }}"
                    class="inline-flex items-center gap-3 bg-blue-700 px-4 py-2 rounded-md text-white font-semibold">
                    <i class="fa-solid fa-square-plus"></i>
                    Yeni Talep
                </a>
            </div>
        </div>
        <div class="grid lg:gap-x-12 pb-4">
            <div class="order-2 lg:order-1 lg:col-span-7 xl:col-span-8 w-full">
                <ol class="officeList overflow-y-auto lg:h-[calc(100vh-240px)] overflow-x-hidden mt-4 text-sm leading-6">
                    @foreach ($tickets as $item)
                        <li data-status="{{ $item->status }}"
                            class="officeRow relative flex items-center space-x-6 md:py-6 bg-theme_secondary_black rounded-3xl p-4 md:p-8 mt-4">
                            <a href="{{ route('operation.monthlyDepartmentTicketDetail', ['department' => $department->id, 'ticket' => $item->id]) }}"
                                class="w-full">
                                <div class="relative flex-auto">
                                    <h3 class="pr-10 font-semibold xl:pr-0 text-gray-300 capitalize userFullName">
                                        {{ $item->department->name }} <span
                                            class="text-xs lg:pl-5">#{{ $item->ticket_id }}</span>
                                    </h3>
                                    <dl class="mt-2 flex flex-col text-gray-400 xl:flex-row">
                                        <div data-popover-target-second="{{ $loop->iteration }}"
                                            data-popover-placement="right" class="flex items-center space-x-3">
                                            <dt class="flex items-center h-5 w-5 fill-gray-400">
                                                <i class="fa-solid fa-info-circle"></i>
                                            </dt>
                                            <div class="text-gray-300 capitalize">
                                                @if (count($item->demands) > 0)
                                                    <div>
                                                        @php
                                                            $allDemandsQuantity = 0;
                                                            foreach ($item->demands as $demand) {
                                                                $quantity = $demand->quantity;
                                                                $allDemandsQuantity += $quantity;
                                                            }
                                                        @endphp
                                                        {{ $allDemandsQuantity }} Adet Çalışan Talep Ediliyor
                                                    </div>
                                                    <div popover-target-content="{{ $loop->iteration }}" role="tooltip"
                                                        class="absolute left-52 -top-2 z-[1000] invisible inline-block w-64 text-sm font-light text-gray-300 transition-opacity duration-300 bg-theme_black border border-gray-200 rounded-lg shadow-sm opacity-0">
                                                        <div class="flex flex-col gap-1 px-3 py-2 font-semibold">
                                                            @foreach ($item->demands as $demand)
                                                                <p
                                                                    class="bg-theme_secondary_black p-4 rounded-lg text-white">
                                                                    {{ $demand->quantity . ' Adet ' . $demand->demandRole->title }}
                                                                </p>
                                                            @endforeach
                                                        </div>
                                                        <div data-popper-arrow></div>
                                                    </div>
                                                @else
                                                    Henüz Atama Yapılmamış
                                                @endif
                                            </div>
                                        </div>
                                        <div
                                            class="mt-2 flex items-center 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">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($demand?->tickets?->date)->isoFormat('D MMMM Y') }}">{{ \Carbon\Carbon::parse($demand?->tickets?->date)->isoFormat('D MMMM Y') }}
                                                    Saat {{ date('H:i', strtotime($demand->hour)) }}
                                                </time>
                                                @if ($demand?->tickets?->end_date)
                                                    - <time class="text-gray-300"
                                                        datetime="{{ \Carbon\Carbon::parse($demand?->tickets?->end_date)->isoFormat('D MMMM Y') }}">
                                                        {{ \Carbon\Carbon::parse($demand?->tickets?->end_date)->isoFormat('D MMMM Y') }}
                                                        Saat {{ date('H:i', strtotime($demand->hour)) }}
                                                    </time>
                                                @endif
                                            </dd>
                                        </div>
                                    </dl>
                                </div>
                            </a>
                            <form method="POST" action="{{ route('operation.deleteTicket', ['ticket' => $item->id]) }}">
                                @csrf
                                <div class="flex justify-end items-center gap-4 whitespace-nowrap">
                                    <button class="bg-red-700 button-3">
                                        Sil
                                    </button>
                                </div>
                            </form>
                        </li>
                    @endforeach
                    @if (count($tickets) <= 0)
                        <x-noData>
                            <x-slot name="message">
                                Hiç Veri Bulunamadı
                            </x-slot>
                        </x-noData>
                    @endif
                </ol>
            </div>
        </div>
    </div>
    @if ($errors->any())
        @include('components.error-modal-second')
    @endif
    @if (session('error'))
        @include('components.error-modal')
    @endif
    @if (session('success'))
        @include('components.success-modal')
    @endif
@endsection
@section('javascript')
    <script>
        $('#year').change(function() {
            var urlParams = new URLSearchParams(window.location.search);
            var dataMonthValue = urlParams.get('month');
            if (dataMonthValue == undefined) {
                dataMonthValue = '01';
            }
            var dataYearValue = $(this).val();
            window.location.href = '?year=' + dataYearValue + '&month=' + dataMonthValue;
        });

        $('#months .date-button').click(function() {
            var dataMonthValue = $(this).data('month');
            window.location.href = '?year=' + $('#year').val() + '&month=' + dataMonthValue;
        });

        $(document).ready(function() {
            var currentDate = new Date();
            var currentMonth = (currentDate.getMonth() + 1).toString().padStart(2, '0');

            var urlParams = new URLSearchParams(window.location.search);
            var urlMonth = urlParams.get('month');
            var urlYear = urlParams.get('year');

            if (urlYear == undefined) {
                $('#year').val(currentDate.getFullYear());
            }

            var selectedMonth = urlMonth || currentMonth;
            var selectedYear = urlYear || $('#year').val();

            $('#months button[data-month="' + selectedMonth + '"]').closest('div').addClass(
                'bg-blue-600 text-white');

            $('#year').val(selectedYear);
        });
    </script>
@endsection