@extends('layouts.app')
@section('urlContent')
    {!! view('components.breadcrumbs', [
        'b_items' => [
            'SGK Puantaj' => '/accounting/sgk-payroll',
        ],
    ]) !!}
@endsection
@section('content')
    <div class="container-app">
        {{-- TOP CUSTOMER INFO SECTION --}}
        <div class="grid gap-2 bg-teheme_third_gray text-gray-200 rounded-md p-6 mb-4 firmInfo">
            <div class="grid grid-cols-2 gap-2">
                <h1 class="font-bold text-xl col-span-2">
                    {{ $firm->firm_name }}
                </h1>
                <p class="font-semibold">
                    Vergi Dairesi : <span class="text-gray-700">{{ $firm->tax_admin }}</span>
                </p>
                <p class="font-semibold">
                    Vergi No : <span class="text-gray-700">{{ $firm->tax_no }}</span>
                </p>
                <p class="font-semibold">
                    Adres : <span class="text-gray-700">{{ $firm->firm_address }}</span>
                </p>
                <p class="font-semibold">
                    Web Adresi : <a href="{{ 'https://' . $firm->web_address }}" target="_blank"
                        class="text-gray-700">{{ $firm->web_address }}</a>
                </p>
            </div>
            {{-- KISALTMALAR --}}
            <div class="flex gap-3 text-white mt-[28px] text-sm">
                <div class="flex items-center gap-1 font-semibold">
                    <span class="bg-amber-300 p-1 rounded">
                        N
                    </span>
                    Normal
                </div>
                <div class="flex items-center justify-start gap-1 font-semibold">
                    <span class="bg-orange-800 p-1 rounded">
                        T
                    </span>
                    Resmi Tatil
                </div>
                <div class="flex items-center justify-start gap-1 font-semibold">
                    <span class="bg-red-950 p-1 rounded">
                        H
                    </span>
                    Hafta Tatili
                </div>
                <div class="flex items-center justify-start gap-1 font-semibold">
                    <span class="bg-gray-300 text-theme_black p-1 rounded">
                        İ
                    </span>
                    İzinli
                </div>
                <div class="flex items-center justify-start gap-1 font-semibold">
                    <span class="bg-pink-400 p-1 rounded">
                        R
                    </span>
                    Raporlu
                </div>
                <div class="flex items-center justify-start gap-1 font-semibold">
                    <span class="bg-fuchsia-600 p-1 rounded">
                        E
                    </span>
                    Eksik Gün
                </div>
                <div class="flex items-center justify-start gap-1 font-semibold">
                    <span class="bg-cyan-500 p-1 rounded">
                        Y
                    </span>
                    Yarım Gün
                </div>
                <div class="flex items-center justify-start gap-1 font-semibold">
                    <span class="bg-green-700 p-1 rounded">
                        S
                    </span>
                    Yıllık İzin
                </div>
                <div class="flex items-center justify-start gap-1 font-semibold">
                    <span class="bg-orange-400 p-1 rounded">
                        K
                    </span>
                    Yarım Gün Resmi Tatil
                </div>
                <div class="flex items-center justify-start gap-1 font-semibold">
                    <span class="bg-slate-600 p-1 rounded">
                        C
                    </span>
                    Yarım Gün Hafta Tatili
                </div>
            </div>
        </div>
        <button class="absolute right-1 top-10 px-3 button-3 firmInfoButton">
            <i class="fa-solid fa-arrow-up"></i>
        </button>
        <div class="flex items-center justify-between pb-4">
            <div class="flex justify-start gap-6">
                {{-- MONTH SELECT --}}
                <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 }}">{{ $i }}</option>
                        @endfor
                    </select>
                </div>
            </div>
            <div class="flex flex-col">
                <h1 class="text-theme_white text-xl font-semibold">
                    {{ $monthName }} Ayı Puantaj Listesi
                </h1>
            </div>
        </div>
        <div class="relative z-[1] overflow-x-auto shadow-md sm:rounded-lg border-t border-theme_secondary_black">
            <table class="w-full text-[10px] text-left text-gray-400">
                <thead class="text-theme_white bg-theme_black border-b-2 border-teheme_third_black">
                    <tr>
                        <th scope="col" class="table-tr">
                            Ad Soyad
                        </th>
                        <th scope="col" class="table-tr">
                            Tc No
                        </th>
                        <th scope="col" class="table-tr">
                            Ünvan
                        </th>
                        @foreach ($days as $day)
                            @php
                                if ($day->day_of_week == 0) {
                                    $day_name = 'Pzt';
                                } elseif ($day->day_of_week == 1) {
                                    $day_name = 'Sal';
                                } elseif ($day->day_of_week == 2) {
                                    $day_name = 'Çrş';
                                } elseif ($day->day_of_week == 3) {
                                    $day_name = 'Prş';
                                } elseif ($day->day_of_week == 4) {
                                    $day_name = 'Cum';
                                } elseif ($day->day_of_week == 5) {
                                    $day_name = 'Cmt';
                                } elseif ($day->day_of_week == 6) {
                                    $day_name = 'Pzr';
                                }
                            @endphp
                            <th scope="col" class="table-tr">
                                {{ $day->day }}
                                {{ $day_name }}
                            </th>
                        @endforeach
                        <th scope="col" class="table-tr">
                            Çal Gün
                        </th>
                        <th scope="col" class="table-tr">
                            SGK Gün
                        </th>
                        <th scope="col" class="table-tr">
                            İzin Gün
                        </th>
                        <th scope="col" class="table-tr">
                            Gün Top
                        </th>
                        <th scope="col" class="table-tr">
                            Eks Gün
                        </th>
                        <th scope="col" class="table-tr">
                            Eksik Gün Neden
                        </th>
                        <th scope="col" class="table-tr">
                            İmza
                        </th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($accountings as $accounting)
                        <tr class="bg-theme_secondary_black border-b-2 text-theme_white border-teheme_third_black">
                            <input type="hidden" class="user_id" value="{{ $accounting[0]->user->id }}">
                            <td class="table-td text-center">
                                {{ $accounting[0]->user->full_name }}
                            </td>
                            <td class="table-td text-center">
                                {{ $accounting[0]->user_tckn }}
                            </td>
                            <td class="table-td text-center">
                                {{ \Spatie\Permission\Models\Role::find($accounting[0]->job_id)->title }}
                            </td>

                            @foreach ($days as $key => $day)
                                @php
                                    $dayDate = Carbon\Carbon::create($day->date)->format('Y-m-d');

                                    $status = $accounting[0]->status;

                                    $backgroundColors = [
                                        'n' => 'bg-amber-300',
                                        't' => 'bg-orange-800',
                                        'h' => 'bg-red-950',
                                        'i' => 'bg-gray-300',
                                        'r' => 'bg-pink-400',
                                        'e' => 'bg-fuchsia-600',
                                        'y' => 'bg-cyan-500',
                                        's' => 'bg-green-700',
                                        'k' => 'bg-orange-400',
                                        'c' => 'bg-slate-600',
                                    ];
                                @endphp

                                @if ($accounting->contains('working_date', $dayDate))
                                    @if (
                                        $accounting->where('working_date', $dayDate)->first()->status == '1' ||
                                            $accounting->where('working_date', $dayDate)->first()->status == 'n')
                                        <td data-day="{{ $dayDate }}"
                                            class="table-td text-center {{ $day->status == 'weekend' ? 'bg-amber-300' : 'bg-amber-300' }}">
                                            <button class="statusButton p-1 rounded-xl">
                                                N
                                            </button>
                                        </td>
                                    @elseif ($accounting->where('working_date', $dayDate)->first()->status == 't')
                                        <td data-day="{{ $dayDate }}"
                                            class="table-td text-center {{ $day->status == 'weekend' ? 'bg-red-950' : 'bg-orange-800' }}">
                                            <button class="statusButton p-1 rounded-xl">
                                                T
                                            </button>
                                        </td>
                                    @elseif ($accounting->where('working_date', $dayDate)->first()->status == 'h')
                                        <td data-day="{{ $dayDate }}"
                                            class="table-td text-center {{ $day->status == 'weekend' ? 'bg-red-950' : 'bg-red-950' }}">
                                            <button class="statusButton p-1 rounded-xl">
                                                H
                                            </button>
                                        </td>
                                    @elseif ($accounting->where('working_date', $dayDate)->first()->status == 'i')
                                        <td data-day="{{ $dayDate }}"
                                            class="table-td text-center {{ $day->status == 'weekend' ? 'bg-red-950' : 'bg-gray-300' }}">
                                            <button class="statusButton p-1 rounded-xl">
                                                I
                                            </button>
                                        </td>
                                    @elseif ($accounting->where('working_date', $dayDate)->first()->status == 'r')
                                        <td data-day="{{ $dayDate }}"
                                            class="table-td text-center {{ $day->status == 'weekend' ? 'bg-red-950' : 'bg-pink-400' }}">
                                            <button class="statusButton p-1 rounded-xl">
                                                R
                                            </button>
                                        </td>
                                    @elseif ($accounting->where('working_date', $dayDate)->first()->status == 'e')
                                        <td data-day="{{ $dayDate }}"
                                            class="table-td text-center {{ $day->status == 'weekend' ? 'bg-red-950' : 'bg-fuchsia-600' }}">
                                            <button class="statusButton p-1 rounded-xl">
                                                E
                                            </button>
                                        </td>
                                    @elseif ($accounting->where('working_date', $dayDate)->first()->status == 'y')
                                        <td data-day="{{ $dayDate }}"
                                            class="table-td text-center {{ $day->status == 'weekend' ? 'bg-red-950' : 'bg-cyan-500' }}">
                                            <button class="statusButton p-1 rounded-xl">
                                                Y
                                            </button>
                                        </td>
                                    @elseif ($accounting->where('working_date', $dayDate)->first()->status == 's')
                                        <td data-day="{{ $dayDate }}"
                                            class="table-td text-center {{ $day->status == 'weekend' ? 'bg-red-950' : 'bg-green-700' }}">
                                            <button class="statusButton p-1 rounded-xl">
                                                S
                                            </button>
                                        </td>
                                    @elseif ($accounting->where('working_date', $dayDate)->first()->status == 'k')
                                        <td data-day="{{ $dayDate }}"
                                            class="table-td text-center {{ $day->status == 'weekend' ? 'bg-red-950' : 'bg-orange-400' }}">
                                            <button class="statusButton p-1 rounded-xl">
                                                K
                                            </button>
                                        </td>
                                    @elseif ($accounting->where('working_date', $dayDate)->first()->status == 'c')
                                        <td data-day="{{ $dayDate }}"
                                            class="table-td text-center {{ $day->status == 'weekend' ? 'bg-red-950' : 'bg-slate-600' }}">
                                            <button class="statusButton p-1 rounded-xl">
                                                C
                                            </button>
                                        </td>
                                    @endif
                                @else
                                    @php
                                        $offDay = $offDays
                                            ->where('day_off_start_day', $dayDate)
                                            ->where('personel_user_id', $accounting[0]->user_id)
                                            ->first();
                                    @endphp
                                    @if ($offDay != null)
                                        @if ($offDay->day_off_type == '0')
                                            <td data-day="{{ $dayDate }}" class="table-td text-center bg-blue-700">
                                                Üİ
                                            </td>
                                        @elseif ($offDay->day_off_type == '1')
                                            <td data-day="{{ $dayDate }}" class="table-td text-center bg-red-400">
                                                H
                                            </td>
                                        @elseif ($offDay->day_off_type == '2')
                                            <td data-day="{{ $dayDate }}" class="table-td text-center bg-green-400">
                                                R
                                            </td>
                                        @endif
                                    @else
                                        <td data-day="{{ $dayDate }}" class="table-td text-center">

                                        </td>
                                    @endif
                                @endif
                            @endforeach
                            <td class="table-td text-center">
                                {{ count($days) }}
                            </td>
                            <td class="table-td text-center">
                                @php
                                    $uniqueData = collect($accounting)->unique('working_date')->values()->all();
                                @endphp
                                {{ count($uniqueData) }}
                            </td>
                            <td class="table-td text-center">
                                0
                            </td>
                            <td class="table-td text-center">
                                {{ count($uniqueData) }}
                            </td>
                            <td class="table-td text-center">
                                {{ count($days) - (count($uniqueData) + 0) }}
                            </td>
                            <td class="table-td text-center">

                            </td>
                            <td class="table-td text-center">

                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </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);
        });

        $('.firmInfoButton').click(function() {
            $(this).toggleClass('rotate-180');

            var isFirmInfoVisible = $('.firmInfo').is(':visible');

            if (isFirmInfoVisible) {
                // .firmInfo gorunmuyorsa
                localStorage.setItem('firmInfo', 'passive');
            } else {
                // .firmInfo gorunuyorsa
                localStorage.setItem('firmInfo', 'active');
            }

            $('.firmInfo').slideToggle();
        });

        $(document).ready(function() {
            var firmInfo = localStorage.getItem('firmInfo');

            if (firmInfo == 'active' || !firmInfo) {
                $('.firmInfo').show();
            } else if (firmInfo == 'passive') {
                $('.firmInfo').hide();
            }
        });
    </script>
@endsection