@extends('layouts.app')
@section('urlContent')
    {!! view('components.breadcrumbs', [
        'b_items' => [
            'Müşteri Puantaj' => '/accounting/customer-payroll',
        ],
    ]) !!}
@endsection
@section('content')
    {{-- @include('components.sidebar')
@include('components.profile') --}}
    <div class="container-app">
        <div class="flex items-center justify-between pb-4">
            <div class="flex items-center gap-2">
                <div>
                    <button
                        class="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="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 }}">{{ $i }}</option>
                        @endfor
                    </select>
                </div>
            </div>
        </div>
        <ol class="orderedList text-sm leading-6 lg:col-span-7 xl:col-span-8 w-full">
            @foreach ($customers as $customer)
                <li class="officeRow relative flex space-x-6 py-6 xl:static bg-theme_secondary_black rounded-3xl p-8 mt-4">
                    <img class="w-14 h-14 rounded-full object-cover showImage cursor-pointer"
                        src="{{ getCdnFile($customer->headOffice?->office_logo) }}">
                    <a href="{{ route('accounting.customerPayrollDetails', ['customer' => $customer, '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">
                                {{ $customer->name }}
                            </h3>
                            <dl class="mt-2 flex flex-col text-gray-400 xl:flex-row">
                                <div class="flex items-center space-x-3">
                                    <dt class="flex items-center h-5 w-5 fill-gray-400">
                                        <i class="fa-solid fa-city"></i>
                                    </dt>
                                    <p class="text-gray-300 capitalize">
                                        {{ $customer->city }}
                                    </p>
                                </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="flex items-center h-5 w-5 fill-gray-400">
                                        <i class="fa-solid fa-building"></i>
                                    </dt>
                                    <p class="text-gray-300 capitalize">
                                        {{ $customer->district }}
                                    </p>
                                </div>
                            </dl>
                        </div>
                    </a>
                    <div class="flex gap-6 items-center text-gray-300">
                        <span
                            class="whitespace-nowrap">{{ isset($headOfficeCosts[$customer->id]) ? sprintf('%.2f', $headOfficeCosts[$customer->id]) : '0' }}
                            TL</span>
                        <button value="{{ $customer->id }}"
                            class="inline-flex whitespace-nowrap items-center px-2 py-1 rounded gap-2 font-medium text-white bg-blue-600 addInvoiceButton">
                            <i class="fa-solid fa-file-arrow-up"></i>
                            Fatura Yükle
                        </button>
                    </div>
                </li>
            @endforeach
            @if (count($customers) <= 0)
                <x-noData>
                    <x-slot name="message">
                        Hiç Veri Bulunamadı
                    </x-slot>
                </x-noData>
            @endif
        </ol>
    </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
    @include('components.accounting.addInvoice')
    @include('components.showImage')
@endsection
@section('javascript')
    <script>
        $('.card-toggle-button').click(function() {
            var container = $(this).closest('.relative');
            var cardContent = container.find('.card-content');
            cardContent.toggle();
        });

        $('.addInvoiceButton').click(function() {
            var customerId = $(this).val();
            $('#customerId').val(customerId);
            console.log(customerId);
            $('.addInvoiceModal').fadeIn();
        });

        $('.closeAddInvoiceModal').click(function() {
            $('.addInvoiceModal').fadeOut();
        });

        $('#monthButton').click(function() {
            $('#monthDropdown').fadeToggle('fast');
        });

        $('#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);
        });

        $(document).ready(function() {
            $('[data-popover-target]').hover(
                function() {
                    var target = $(this).data('popover-target');
                    $('[data-popover="' + target + '"]').removeClass('opacity-0 invisible').addClass(
                        'opacity-100 visible');
                },
                function() {
                    var target = $(this).data('popover-target');
                    $('[data-popover="' + target + '"]').addClass('opacity-0 invisible').removeClass(
                        'opacity-100 visible');
                }
            );
        });
    </script>
@endsection