@extends('layouts.user')
@section('pageTitle')
    Anasayfa
@endsection
@section('content')
    <div class="pt-2 pb-20 w-full">
        <div class="flex flex-col gap-4 overflow-y-auto h-[calc(100vh-150px)]">
            <div class="px-6 sm:px-24 md:px-44">
                @include('components.workers.activeOrPassive')
            </div>
            @if ($demandSift)
                <div class="border-y border-theme_secondary_black text-sm text-gray-300 py-4 px-6 sm:px-24 lg:px-36">
                    <div class="relative flex justify-start items-center gap-4 mb-4">
                        @php
                            $type = $demandSift->ticket->user->user_departman->customer_user;
                            $officeName = '';
                            $logo = '';

                            if ($type->headOffice) {
                                $officeName = $type->headOffice->office_name;
                                $logo = $type->headOffice->office_logo;
                            }
                            if ($type->branch) {
                                $officeName = $type->branch->branch_name;
                                $logo = $type->branch->headOffice->office_logo;
                            }
                        @endphp
                        <img class="w-12 h-12 rounded object-cover" src="{{ getCdnFile($logo) }}" alt="">
                        <div class="flex flex-col">
                            <p class="font-semibold pr-14">
                                {{ $officeName }}
                            </p>
                            <p class="text-gray-500 text-xs">
                                {{ \Carbon\Carbon::parse($demandSift->ticket->date)->isoFormat('D MMMM Y') }}</p>
                        </div>
                        <span
                            class="p-1 rounded-2xl bg-green-800 text-gray-200 text-xs w-20 text-center absolute -right-4 top-0">
                            Yaklaşan İşiniz
                        </span>
                    </div>
                    @include('components.workers.accordion')
                </div>
            @endif
            <div
                class="text-center lg:col-start-8 lg:col-end-13 lg:row-start-1 lg:mt-4 xl:col-start-9 m-4 bg-theme_secondary_black p-2 rounded-md">
                <div class="flex items-center text-gray-300">
                    <button type="button" value="{{ $current_month->month - 1 }}" name="month"
                        class="flex flex-none items-center justify-center text-gray-400 hover:text-gray-500 previous">
                        <span class="sr-only">Previous month</span>
                        <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                            aria-hidden="true">
                            <path fill-rule="evenodd"
                                d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
                                clip-rule="evenodd" />
                        </svg>
                    </button>
                    <div class="flex-auto font-semibold">{{ $current_month->month_name }}</div>
                    <button type="button" value="{{ $current_month->month + 1 }}" name="month"
                        class="flex flex-none items-center justify-center text-gray-400 hover:text-gray-500 next">
                        <span class="sr-only">Next month</span>
                        <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                            aria-hidden="true">
                            <path fill-rule="evenodd"
                                d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
                                clip-rule="evenodd" />
                        </svg>
                    </button>
                </div>
                <div class="mt-6 grid grid-cols-7 text-xs leading-6 text-gray-300">
                    <div>P</div>
                    <div>S</div>
                    <div>Ç</div>
                    <div>P</div>
                    <div>C</div>
                    <div>C</div>
                    <div>P</div>
                </div>
                <div class="isolate mt-2 grid grid-cols-7 gap-px  bg-gray-600 text-sm shadow ring-1 ring-gray-600">
                    @foreach ($allData as $data)
                        @php
                            $allDays = $noAvailableDays
                                ->pluck('no_available_day')
                                ->map(function ($date) {
                                    return $date;
                                })
                                ->toArray();
                        @endphp
                        @if ($data->day == $current_day && $data->month == $current_month->month && $current_month->month == now()->format('m'))
                            <button type="button" class="data-button bg-theme_black py-1.5 text-gray-400 focus:z-10"
                                value="{{ $data->date }}">
                                <time datetime="{{ $data->date }}"
                                    class="mx-auto flex h-7 w-7 items-center justify-center rounded-full font-semibold text-white {{ in_array($data->date, $allDays) ? 'bg-red-500' : 'bg-blue-900' }}">{{ $data->day }}</time>
                            </button>
                        @else
                            <button type="button"
                                class="data-button bg-theme_black py-1.5 text-gray-400 focus:z-10 group {{ in_array($data->date, $allDays) ? 'border-red-500' : '' }}"
                                value="{{ $data->date }}">
                                <time datetime="{{ $data->date }}"
                                    class="mx-auto flex h-7 w-7 items-center justify-center rounded-full group-hover:text-white group-focus:text-gray-600 {{ in_array($data->date, $allDays) ? 'bg-red-500 text-white' : 'group-focus:bg-gray-200' }}">{{ $data->day }}</time>
                            </button>
                        @endif
                    @endforeach
                </div>
            </div>
        </div>
    </div>
    @if ($errors->any())
        @include('components.error-modal-second')
    @elseif (session('success'))
        @include('components.success-modal')
    @elseif(session('error'))
        @include('components.error-modal')
    @endif
    <div id="userInfoPopup" class="hidden">
        <div tabindex="-1"
            class="fixed w-full flex items-center justify-center z-[200] top-0 left-0 p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] md:max-h-full">
            <div class="relative w-full max-w-md max-h-full">
                <div class="relative bg-theme_black rounded-lg shadow border border-gray-400">
                    <button type="button"
                        class="absolute closePopup top-3 right-2.5 text-gray-300 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center"
                        data-modal-hide="popup-modal">
                        <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
                        </svg>
                        <span class="sr-only">Close modal</span>
                    </button>
                    <div class="p-6 text-center">
                        <svg class="mx-auto mb-4 text-gray-300 w-12 h-12 dark:text-gray-200" aria-hidden="true"
                            xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                        </svg>
                        <h3 class="mb-5 text-lg font-normal text-gray-300 capitalize">
                            UYARI! Bu işlemi onayladığınız takdirde firmanız tarafından herhangi bir işte
                            çalıştırılmayacaksınız. Devam etmek istiyor musunuz ?
                        </h3>
                        <div class="flex justify-center items-center gap-4 mt-4">
                            <button type="button" id="kapan"
                                class="closePopup inline-flex justify-center gap-2 items-center w-32 p-2 rounded text-gray-300 focus:ring-red-900 focus:ring-4 font-semibold bg-red-700">
                                <i class="fa-solid fa-xmark"></i>
                                Vazgeç
                            </button>
                            <button id="acceptButton" type="button"
                                class="acceptExit inline-flex justify-center gap-2 items-center w-32 p-2 rounded text-gray-300 focus:ring-green-900 focus:ring-4 font-semibold bg-green-700">
                                <i class="fa-solid fa-check"></i>
                                Devam Et
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="calendarPopup" class="hidden">
        <div tabindex="-1"
            class="fixed w-full flex items-center justify-center z-[300] top-0 left-0 p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] md:max-h-full">
            <div class="relative w-full max-w-xs max-h-full">
                <div class="relative bg-theme_black rounded-lg shadow border border-gray-400">
                    <button type="button"
                        class="absolute closePopupModal top-3 right-2.5 text-gray-300 bg-transparent rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center"
                        data-modal-hide="calendarPopup">
                        <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
                        </svg>
                        <span class="sr-only">Close modal</span>
                    </button>
                    <div class="px-2 py-6 text-center">
                        <i class="fa-solid fa-comment mx-auto mb-4 text-gray-300 text-5xl"></i>
                        <div class="text-lg font-normal text-gray-300 capitalize whitespace-normal">
                            <h1 id="dateName">
                            </h1>
                        </div>
                        <form method="POST" action="{{ route('workers.createNoAvailableDay') }}" class="grid gap-2 p-4"
                            onsubmit="showLoading()">
                            @csrf
                            <input type="hidden" name="day" id="noAvailableDayDate">
                            <textarea class="input-2 w-full" name="description" id="noAvailableDayDescription" placeholder="Açıklama"></textarea>
                            <div class="flex gap-2 justify-end">
                                <div class="hidden w-1/2" id="noAvailableDayDeleteContainer">
                                    <input type="hidden" id="noAvailableDayId">
                                    <button type="button"
                                        class="noAvailableDayDelete button-3 text-sm w-full bg-red-500 justify-center">
                                        <i class="fa-solid fa-trash"></i>
                                        Sil
                                    </button>
                                </div>
                                <button class="button-3 text-sm w-1/2 justify-center">
                                    <i class="fa-solid fa-save"></i>
                                    Kaydet
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('javascript')
    <script>
        let switchElement = $('#switch');
        let toast = $('#toast');
        let icon = $('.icon');
        let debitFile = @json($debitFile);

        $('.label').click(function() {
            if (switchElement.prop('checked')) {
                $.ajax({
                    method: "GET",
                    url: "workers/change/status/active",
                    success: function(response) {
                        icon.empty();
                        if (response.userStatus == '0') {
                            toast.removeClass('bg-green-700');
                            toast.addClass('bg-red-700')
                            icon.append('<i class="fa-solid fa-exclamation"></i>')
                            var errorMessage = $('.errorMessage');
                            errorMessage.text(response.message);
                            toastActive();
                            switchElement.prop('checked', true);
                        }
                        if (response.userStatus == '1') {
                            toast.removeClass('bg-red-700');
                            toast.addClass('bg-green-700')
                            icon.append('<i class="fa-solid fa-check"></i>')
                            var errorMessage = $('.errorMessage');
                            errorMessage.text(response.message);
                            toastActive();
                            switchElement.prop('checked', false);
                        }
                        if (response.userStatus == '3') {
                            toast.removeClass('bg-red-700');
                            toast.addClass('bg-green-700')
                            icon.append('<i class="fa-solid fa-check"></i>')
                            var errorMessage = $('.errorMessage');
                            errorMessage.text(response.message);
                            toastActive();
                            switchElement.prop('checked', true);
                        }
                    },
                    error: function(response) {
                        console.log(response);
                    }
                });
            } else {
                switchElement.prop('checked', true);
                $('#userInfoPopup').show();
                var acceptButton = $('#acceptButton');
                acceptButton.click(function() {
                    $('#userInfoPopup').hide();
                    $.ajax({
                        method: "GET",
                        url: "workers/change/status/passive",
                        success: function(response) {
                            if (response.userStatus == '0') {
                                toast.removeClass('bg-red-700');
                                toast.addClass('bg-green-700')
                                icon.empty();
                                icon.append('<i class="fa-solid fa-check"></i>')
                                var errorMessage = $('.errorMessage');
                                errorMessage.text(response.message);
                                toastActive();
                                switchElement.prop('checked', true);
                            }
                        },
                        error: function(response) {
                            console.log(response);
                        }
                    });
                });
            }
        });

        $(document).ready(function() {
            var user = @json($authUser);
            var activate = user.is_active;

            if (activate == 0) {
                switchElement.prop('checked', true);
            } else {
                switchElement.prop('checked', false);
            }
        });

        // ACCORDION JS
        $(document).ready(function() {
            // Accordion click event
            $('[data-accordion-target]').on('click', function() {
                var target = $(this).data('accordion-target');
                var isExpanded = $(this).attr('aria-expanded') === 'true';

                // Toggle accordion body visibility
                $(target).slideToggle(isExpanded);
                $(this).attr('aria-expanded', !isExpanded);
            });
        });

        $('.closePopup').click(function() {
            $('#userInfoPopup').hide();
        });

        $(document).ready(function() {
            if (debitFile.length > 0) {
                toast.removeClass('bg-green-700');
                toast.addClass('bg-red-700')
                icon.append('<i class="fa-solid fa-exclamation"></i>')
                var errorMessage = $('.errorMessage');
                errorMessage.text('Lütfen Zimmetler için Gerekli Dosyaları Yükleyiniz');
                toastActive();
            }
        });

        function navigate(queryString) {
            var currentUrl = window.location.href;

            // Parametre adı kontrolü
            var paramName = queryString.split('=')[0];

            // Eğer aynı parametre adı varsa, mevcut parametreyi güncelle
            if (currentUrl.includes(paramName + '=')) {
                currentUrl = currentUrl.replace(new RegExp(paramName + '=[^&]+'), queryString);
            } else {
                // Parametre adı yoksa, yeni parametreyi ekleyin
                var separator = currentUrl.includes('?') ? '&' : '?';
                currentUrl = currentUrl + separator + queryString;
            }

            // Yeni URL'ye yönlendir
            window.location.href = currentUrl;
        }

        $('.previous').click(function() {
            var month = $(this).val();
            navigate('month=' + month);
        });

        $('.next').click(function() {
            var month = $(this).val();
            navigate('month=' + month);
        });

        let availableDate;

        $('.data-button').click(function() {
            availableDate = $(this).val();
            $.ajax({
                type: "GET",
                url: "/workers/get/no/available/day/" + availableDate,
                success: function(response) {
                    $('#noAvailableDayDescription').val(response.description);
                    $('#noAvailableDayId').val(response.id);
                    $('#noAvailableDayDeleteContainer').show();
                },
                error: function(response) {
                    $('#noAvailableDayDescription').val('');
                    $('#noAvailableDayId').val('');
                    $('#noAvailableDayDeleteContainer').hide();
                }
            });
            $('#noAvailableDayDate').val(availableDate);

            var date = new Date(availableDate);
            var day = date.getDate();
            var month = date.toLocaleString('default', {
                month: 'long'
            });
            var year = date.getFullYear();
            $('#dateName').text(day + ' ' + month + ' ' + year);

            $('#calendarPopup').show();
        });

        $('.noAvailableDayDelete').click(function() {
            var id = $('#noAvailableDayId').val();

            if (availableDate != null && id != null) {
                var csrfToken = $('meta[name="csrf-token"]').attr('content');
                $.ajax({
                    type: "POST",
                    url: "workers/delete/no-available-day/" + id,
                    data: {
                        _token: csrfToken
                    },
                    success: function(response) {
                        $('#noAvailableDayDescription').val('');
                        location.reload();
                    },
                });
            }
        });
    </script>
@endsection