@extends('layouts.app')
@section('urlContent')
    {!! view('components.breadcrumbs', [
        'b_items' => [
            'Personel Giriş Çıkış Onay' => '/accounting/timeSheet',
        ],
    ]) !!}
@endsection
@section('content')
    <div class="container-app">
        <div class="flex justify-between">
            <input class="input-2" type="date" name="date" id="date"
                value="{{ request()->date ?? today()->format('Y-m-d') }}">
            <button id="addNewButton" class="button-3">
                <i class="fa-solid fa-plus"></i>
                Yeni ekle
            </button>
        </div>
        <div class="relative overflow-x-auto shadow-md sm:rounded-lg border-t border-theme_secondary_black mt-4">
            <table class="w-full text-sm text-left text-gray-400">
                <thead class="text-xs text-theme_white bg-theme_black">
                    <tr>
                        <th scope="col" class="px-2 py-1">
                            Tc No
                        </th>
                        <th scope="col" class="px-2 py-1">
                            Ad
                        </th>
                        <th scope="col" class="px-2 py-1">
                            Soyad
                        </th>
                        <th scope="col" class="px-2 py-1">
                            Meslek
                        </th>
                        <th scope="col" class="px-2 py-1">
                            Merkez Ofis
                        </th>
                        <th scope="col" class="px-2 py-1 w-32">
                            Şube
                        </th>
                        <th scope="col" class="px-2 py-1 w-32">
                            Departman
                        </th>
                        <th scope="col" class="px-2 py-1 w-24">
                            Giriş Saati
                        </th>
                        <th scope="col" class="px-2 py-1 w-24">
                            Giriş Tipi
                        </th>
                        <th scope="col" class="px-2 py-1 w-24">
                            Çıkış Saati
                        </th>
                        <th scope="col" class="px-2 py-1 w-24">
                            Çıkış Tipi
                        </th>
                        <th scope="col" class="px-2 py-1 w-24">
                            Toplam Çalışma Saati
                        </th>
                        <th scope="col" class="px-2 py-1 w-24">
                            Toplam Mesai Saati
                        </th>
                        <th scope="col" class="px-2 py-1 text-center w-12">
                            İşlem
                        </th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($accountgings as $item)
                        @php
                            $roleName = $categories->find($item->job_id)->title;

                            $hour =
                                Carbon\Carbon::create($item->working_time)->format('H') +
                                Carbon\Carbon::create($item->shift)->format('H');
                            $explodedData = explode(':', $hour);
                            $hour = intval($explodedData[0]);
                        @endphp
                        <tr data-id="{{ $item->id }}"
                            class="{{ $hour >= 15 ? 'animate-flash' : 'bg-theme_secondary_black' }} transition-all duration-300">
                            <td class="px-1 py-4 font-semibold text-theme_white">
                                <input type="text" class="h-8 w-full input-2 py-0 text-sm border-none bg-transparent"
                                    name="tc_no" readonly value="{{ $item->user_tckn }}">
                            </td>
                            <td class="px-1 py-4 font-semibold text-theme_white">
                                <input type="text" class="h-8 w-full input-2 py-0 text-sm border-none bg-transparent"
                                    name="name" readonly value="{{ $item->user->name }}">
                            </td>
                            <td class="px-1 py-4 font-semibold text-theme_white">
                                <input type="text" class="h-8 w-full input-2 py-0 text-sm border-none bg-transparent"
                                    name="surname" readonly value="{{ $item->user->surname }}">
                            </td>
                            <td class="px-1 py-4 text-center text-theme_white">
                                <input type="text" class="h-8 w-full input-2 py-0 text-sm border-none bg-transparent"
                                    name="job" readonly value="{{ $roleName }}">
                            </td>
                            <td class="px-1 py-4 text-center text-theme_white">
                                <input type="text" class="h-8 w-full input-2 py-0 text-sm border-none bg-transparent"
                                    name="branch_office_id" readonly value="{{ $item->headOffice?->office_name }}">
                            </td>
                            <td class="px-1 py-4 text-center text-theme_white">
                                <input type="text" class="h-8 w-full input-2 py-0 text-sm border-none bg-transparent"
                                    name="branch_office_id" readonly value="{{ $item->branch?->branch_name }}">
                            </td>
                            <td class="px-1 py-4 text-center text-theme_white">
                                <input type="text" class="h-8 w-full input-2 py-0 text-sm border-none bg-transparent"
                                    name="department_id" readonly value="{{ $item->department?->name }}">
                            </td>
                            <td class="px-1 py-4 text-center text-theme_white">
                                <input type="text" class="h-8 w-full input-2 py-0 text-sm border-none bg-transparent"
                                    name="start_hour" readonly value="{{ $item->start_hour }}">
                            </td>
                            <td class="px-1 py-4 text-center text-theme_white">
                                <input type="text" class="h-8 w-full input-2 py-0 text-sm border-none bg-transparent"
                                    name="start_type" readonly value="{{ $item->login_type }}">
                            </td>
                            <td class="px-1 py-4 text-center text-theme_white">
                                <input type="text" class="h-8 w-full input-2 py-0 text-sm border-none bg-transparent"
                                    name="end_hour" readonly value="{{ $item->end_hour }}">
                            </td>
                            <td class="px-1 py-4 text-center text-theme_white">
                                <input type="text" class="h-8 w-full input-2 py-0 text-sm border-none bg-transparent"
                                    name="end_type" readonly value="{{ $item->exit_type }}">
                            </td>

                            <td class="px-1 py-4 text-center text-theme_white relative">
                                @if ($hour >= 15)
                                    <div class="w-max absolute top-1 right-2"
                                        data-popover-target-second="{{ $loop->index }}">
                                        <i class="fa-solid fa-triangle-exclamation text-white"></i>
                                    </div>
                                    <div popover-target-content="{{ $loop->index }}" role="tooltip"
                                        class="fixed translate-y-5 z-20 invisible inline-block w-44 text-sm font-light text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0">
                                        <div class="px-3 py-2 font-semibold capitalize">
                                            <p>
                                                UYARI ! mesai saatine manuel düzeltme gerekiyor
                                            </p>
                                            <p>
                                                Bir yanlışlık olabilir
                                            </p>
                                        </div>
                                        <div data-popper-arrow></div>
                                    </div>
                                @endif
                                <input type="text" class="h-8 w-full input-2 py-0 text-sm border-none bg-transparent"
                                    name="totaly_working_hour" readonly value="{{ $item->working_time }}">
                            </td>
                            <td class="px-1 py-4 text-center text-theme_white">
                                <input type="text" class="h-8 w-full input-2 py-0 text-sm border-none bg-transparent"
                                    name="working_date" readonly value="{{ $item->shift }}">
                            </td>

                            <td class="px-1 py-4 text-center">
                                <button class="editButton font-medium p-1 rounded bg-blue-700 text-white"
                                    value="{{ $item->id }}">Düzenle</button>
                            </td>
                        </tr>
                        @include('components.accounting.edit-popup', ['item' => $item])
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    @include('components.accounting.create-new-popup')
    @if ($errors->any())
        @include('components.error-modal-second')
    @endif
    @if (session('error'))
        <x-toast color="red-700">
            <x-slot name="message">
                {{ session('error') }}
            </x-slot>
            <x-slot name="icon">
                <i class="fa-solid fa-exclamation"></i>
            </x-slot>
        </x-toast>
    @endif
    @if (session('success'))
        <x-toast color="green-700">
            <x-slot name="message">
                {{ session('success') }}
            </x-slot>
            <x-slot name="icon">
                <i class="fa-solid fa-check"></i>
            </x-slot>
        </x-toast>
    @endif
@endsection
@section('javascript')
    <script>
        $(document).ready(function() {
            var date = $('#date').val();
            $('#selectedDate').val(date);
        });
    </script>

    <script>
        var officeSelect = $('#headOffice');
        var branchSelect = $('#branchOfficeSelect');
        var departSelect = $('#departmentSelect');
        var requestSelect = $('#requestSelect');
        var workerSelect = $('#workerSelect');
        var date = $('#selectedDate');
        var categories = @json($categories);

        date.change(function() {
            officeSelect.trigger('change');
        });

        officeSelect.change(function() {
            var office = $(this).val();

            $.ajax({
                type: "GET",
                url: "/accounting/get/user/to/department/sifts",
                data: {
                    headOfficeId: office,
                    date: date.val(),
                },
                success: function(response) {
                    departSelect.empty();
                    branchSelect.empty();
                    workerSelect.empty();
                    requestSelect.empty();

                    if (response.branches && response.branches.length > 0) {
                        updateBranch(branchSelect, response.branches);
                    }
                    if (response.departments && response.departments.length > 0) {
                        updateDepart(departSelect, response.departments);
                    }

                    departSelect.trigger('change');
                },
            });
        })

        branchSelect.change(function() {
            var office = $(this).val();

            $.ajax({
                type: "GET",
                url: "/accounting/get/user/to/department/sifts",
                data: {
                    branchId: office,
                    date: date.val(),
                },
                success: function(response) {
                    departSelect.empty();
                    workerSelect.empty();
                    requestSelect.empty();

                    if (response.departments && response.departments.length > 0) {
                        updateDepart(departSelect, response.departments);
                    }
                },
            });
        })

        let responseData;
        departSelect.change(function() {
            var office = $(this).val();

            $.ajax({
                type: "GET",
                url: "/accounting/get/user/to/department/sifts",
                data: {
                    departmentId: office,
                    date: date.val(),
                },
                success: function(response) {
                    requestSelect.empty();
                    workerSelect.empty();

                    responseData = response.demands;

                    console.log(responseData);

                    if (response.demands && response.demands.length > 0) {
                        updateDemands(requestSelect, response.demands);
                    }

                    requestSelect.trigger('change');
                },
            });
        })

        requestSelect.change(function() {
            updateWorker(responseData);
        })

        function updateDepart(select, data) {
            data.forEach(item => {
                var option = $('<option>', {
                    value: item.id,
                    text: item.name
                });
                select.append(option);
            });
            select.trigger('change');
        }

        function updateBranch(select, data) {
            select.empty();
            var defaultOption = $('<option>', {
                value: '',
                text: 'Şube Seç',
                selected: true,
                disabled: true
            });
            select.append(defaultOption);
            data.forEach(item => {
                var option = $('<option>', {
                    value: item.id,
                    text: item.branch_name
                });
                select.append(option);
            });
        }

        function updateDemands(select, data) {
            data.forEach(item => {
                var matchedCategory = categories.find(category => category.id == item.category);
                if (matchedCategory) {
                    var categoryName = matchedCategory.title;
                } else {
                    console.log("Category not found for item with ID: " + item.category);
                }

                var quantity = item.quantity;
                var option = $('<option>', {
                    value: item.id,
                    text: item.quantity + ' adet ' + categoryName
                });
                select.append(option);
            });
            select.trigger('change');

            updateWorker();
        }

        function updateWorker() {
            var valueDemand = requestSelect.val();
            console.log(responseData);
            var matchedDemand = responseData.find(demand => demand.id == valueDemand);

            workerSelect.empty();

            if (matchedDemand && matchedDemand.sifts.length > 0) {
                matchedDemand.sifts.forEach(item => {
                    if (item.status == 1 || item.status == 3) {

                        if (item.accounting) {
                            var newClass = 'text-green-500';
                        } else {
                            var newClass = 'text-red-500';
                        }

                        var option = $('<option>', {
                            value: item.id,
                            text: item.user.full_name,
                        }).addClass(newClass);

                        workerSelect.append(option);
                    }
                })
            }

            workerSelect.trigger('change');
        }

        workerSelect.change(function() {
            var selectedOption = $(this).find('option:selected');
            var newClass = selectedOption.attr('class');
            $(this).removeClass('text-green-500 text-red-500').addClass(newClass);
        });
    </script>
    <script>
        $('.start_hour').change(function() {
            var row = $(this).closest('tr');
            var endHourInput = row.find('.end_hour');
            var endHourValue = endHourInput.val();

            // Start hour değerini al
            var startHourValue = $(this).val();

            // Eğer end hour değeri doluysa tekrar hesaplama yap
            if (endHourValue) {
                var totalTime = calculateTotalTime(startHourValue, endHourValue);
                row.find('.totaly_working_hour').val(totalTime);
            }
        });

        $('.end_hour').change(function() {
            var row = $(this).closest('tr');
            var startHourInput = row.find('.start_hour');
            var startHourValue = startHourInput.val();

            // End hour değerini al
            var endHourValue = $(this).val();

            // Eğer start hour değeri doluysa tekrar hesaplama yap
            if (startHourValue) {
                var totalTime = calculateTotalTime(startHourValue, endHourValue);
                row.find('.totaly_working_hour').val(totalTime);
            }
        });

        function calculateTotalTime(startHour, endHour) {
            var startDate = new Date('2000-01-01 ' + startHour);
            var endDate = new Date('2000-01-01 ' + endHour);

            if (startDate > endDate) {
                endDate.setDate(endDate.getDate() + 1);
            }

            var hours = endDate.getHours() - startDate.getHours();
            var minutes = endDate.getMinutes() - startDate.getMinutes();

            if (minutes < 0) {
                hours--;
                minutes += 60;
            }

            var formattedTime = hours + ':' + (minutes < 10 ? '0' : '') + minutes;

            return formattedTime;
        }

        $(document).ready(function() {
            function flashRows() {
                $('.animate-flash').toggleClass('bg-red-900');
                setTimeout(flashRows, 2000);
            }
            flashRows();
        });

        $('#addNewButton').click(function() {
            $('.createNewPopup').show();
        });

        $('.close-new-popup').click(function() {
            $('.createNewPopup').hide();
        })

        $('.editButton').click(function() {
            var value = $(this).val();
            $('#editPopup_' + value).show();
        });

        $('.close-new-popup').click(function() {
            $('.editPopup').hide();
        })

        $(document).ready(function() {
            $('#create_entry_date').change(function() {
                var exitDateInput = $('#create_exit_date');

                var maxExitDate = new Date($(this).val());
                console.log($(this).val());
                maxExitDate.setDate(maxExitDate.getDate() + 2);
                exitDateInput.attr("min", $(this).val());
                exitDateInput.attr("max", maxExitDate.toISOString().split("T")[0]);
            });
        });

        $('#filter-clear').click(function() {
            $('#date').val('');
            $('#name_surname').val('');
            $('#tc_no').val('');
            $('#office').val('');
            window.location.href = '';
        });

        let departFilter = $('#department');
        let office = $('#office');
        let branch = $('#branch');
    </script>
    <script>
        $('#date').change(function() {
            var date = $(this).val();
            window.location.href = '?date=' + date;
        });
    </script>
@endsection