@extends('layouts.app')
@section('urlContent')
    {!! view('components.breadcrumbs', [
        'b_items' => [
            'Servis Faturaları' => '/accounting/service/payrolls',
            'Şubeler' => '/accounting/service/payrolls',
            'Departmanlar' => '/accounting/service/payrolls/' . request()->segment(5),
        ],
    ]) !!}
@endsection
@section('content')
    <div class="container-app">
    {{-- * MONTH AND YEAR SELECT --}}
    <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 flex-col gap-4 w-full">
            <ol class="overflow-auto h-[calc(100vh-240px)] mt-4 text-sm leading-6 lg:col-span-7 xl:col-span-8 w-full">
                @foreach ($departments as $item)
                    <li class="relative flex space-x-6 py-6 bg-theme_secondary_black rounded-3xl p-8 mt-4" style="">
                        @php
                            $imageUrl = null;
                            if ($item->customer_role == 'Company') {
                                $imageUrl = $item->customer_user->headOffice->office_logo;
                            } elseif ($item->customer_role == 'Branch') {
                                $imageUrl = $item->customer_user->branch->headOffice->office_logo;
                            } else {
                                $imageUrl = 'resim yok';
                            }
                        @endphp
                        <img class="w-14 h-14 rounded-full object-cover showImage cursor-pointer"
                            src="{{ getCdnFile($imageUrl) }}">
                        <a href="{{ route('accounting.servicePayrollsDemands', ['department' => $item->id, 'year' => request()->year, 'month' => request()->month]) }}"
                            class="w-full">
                            <div class="flex-auto">
                                <h3 class="pr-10 font-semibold xl:pr-0 text-gray-300 capitalize userFullName">
                                    {{ $item->name }}
                                </h3>

                                <div class="mt-2 flex items-center">
                                    <p class="text-gray-300">
                                        {{ isset($item->user->roles[0]) ? $item->user->roles[0]->title : 'no Role' }}
                                    </p>
                                </div>
                            </div>
                        </a>
                        <div class="flex gap-6 items-center text-gray-300 capitalize">
                            <a href="{{ route('accounting.servicePayrollsDemands', ['department' => $item->id, 'year' => request()->year, 'month' => request()->month]) }}"
                                class="inline-flex whitespace-nowrap items-center px-2 py-1 rounded gap-2 font-medium text-white bg-blue-600">
                                Seç
                            </a>
                        </div>
                    </li>
                @endforeach
            </ol>
        </div>
    </div>
@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