@extends('layouts.app')
@section('urlContent')
    {!! view('components.breadcrumbs', [
        'b_items' => [
            'Çalışan Maaş' => '/accounting/salary-index',
            'Genel Hakediş' => '/accounting/general-payment-detail',
        ],
    ]) !!}
@endsection

@section('content')
    <div class="container-app">
        @php
            $month = request('month') ? request('month') : now()->format('m');
            $year = request('year') ? request('year') : now()->format('Y');

            $startOfMonth = Carbon\Carbon::create($year, $month)->startOfMonth()->format('Y-m-d');
            $centerOfMonth = Carbon\Carbon::create($year, $month)->addWeeks(2)->format('Y-m-d');
            $endOfMonth = Carbon\Carbon::create($year, $month)->endOfMonth()->format('Y-m-d');
        @endphp
        {{-- MONTH SELECT --}}
        <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 }}"
                                {{ request('year') && request('year') == $i ? 'selected' : '' }}>{{ $i }}
                            </option>
                        @endfor
                    </select>
                </div>
            </div>
            <div class="relative">
                <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                    <svg class="w-5 h-5 text-gray-400" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20"
                        xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd"
                            d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
                            clip-rule="evenodd"></path>
                    </svg>
                </div>
                <input type="text" id="search_payment_detail"
                    class="block p-2 pl-10 text-sm text-gray-400 border border-gray-300 focus:outline-none rounded-lg w-80 bg-gray-50"
                    placeholder="Ara...">
            </div>
            {{-- <button class="excel-button" type="button" onclick="downloadExcel()">
                <img class="w-7 h-7" src="{{ asset('assets/icons/excel.svg') }}">
                Excel indir
            </button> --}}
            <div class="flex gap-4 justify-end px-2">
                <button type="button" id="newProcessButton"
                    class="inline-flex items-center gap-3 bg-blue-700 px-4 py-2 rounded-md text-white font-semibold">
                    <i class="fa-solid fa-square-plus"></i>
                    İşlem Ekle
                </button>
            </div>
        </div>
        <div class="relative z-[1] overflow-x-auto shadow-md sm:rounded-lg border-t border-theme_secondary_black">
            <table id="payrollTable" class="w-full text-xs text-left text-gray-400">
                <thead class="text-xs 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">
                            Hizmetler
                        </th>

                        <th scope="col" class="table-tr">
                            BES
                        </th>
                        <th scope="col" class="table-tr">
                            İcra Kesintisi
                        </th>
                        <th scope="col" class="table-tr">
                            Zimmet Kesintisi
                        </th>
                        <th scope="col" class="table-tr">
                            Geçen Aydan - Devir
                        </th>
                        <th scope="col" class="table-tr">
                            Geçen Aydan + Devir
                        </th>
                        <th scope="col" class="table-tr">
                            Ek Ücret
                        </th>

                        <th scope="col" class="table-tr">
                            Toplam Gun Sayisi
                        </th>
                        <th scope="col" class="table-tr">
                            Toplam Hakediş
                        </th>

                        <th scope="col" class="table-tr">
                            Ödenmesi Gereken Banka
                        </th>
                        <th scope="col" class="table-tr">
                            Ödenmesi Gereken Nakit
                        </th>

                        <th scope="col" class="table-tr">
                            Detay
                        </th>
                    </tr>
                </thead>
                <tbody id="payment_details_table">
                    @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="1">
                            @php
                                $totalDebitMinius =
                                    $accounting[0]->debit_bes->sum(function ($item) {
                                        return $item->amount - $item->payyed;
                                    }) +
                                    $accounting[0]->debit_icra->sum(function ($item) {
                                        return $item->amount - $item->payyed;
                                    }) +
                                    $accounting[0]->debit_zimmet->sum(function ($item) {
                                        return $item->amount - $item->payyed;
                                    }) +
                                    $accounting[0]->debit_pervoiusMonthPaymentMinius->sum(function ($item) {
                                        return $item->amount - $item->payyed;
                                    });

                                $totalDebitPlus = $accounting[0]->debit_pervoiusMonthPaymentPlus->sum(function ($item) {
                                    return $item->amount - $item->payyed;
                                });

                                $totalDebitCashPayment = $accounting[0]->debit_cashPayment
                                    ->where('cash_payment_status', false)
                                    ->sum(function ($item) {
                                        return $item->amount - $item->payyed;
                                    });

                                $totalCashPayment = $accounting
                                    ->where('cash_payment_status', false)
                                    ->sum('cash_payment');

                                $totalBankPayment = $accounting
                                    ->where('bank_payment_status', false)
                                    ->sum('bank_payment');

                                $totalExecutionDebt = $accounting->sum('icra_debt');
                                $totalPayment = $totalCashPayment + $totalBankPayment + $totalDebitPlus;
                                $totalCostWithDebit = $totalPayment - $totalDebitCashPayment - $totalDebitMinius;
                            @endphp
                            <td class="table-td text-center">
                                {{ $accounting[0]->user->full_name }}
                            </td>
                            <td class="table-td text-center">
                                {{ $accounting[0]->user->roles->first()->title }}
                            </td>

                            <td class="table-td text-center">
                                {{ $accounting[0]->debit_bes->sum('amount') }}
                            </td>
                            <td class="table-td text-center">
                                {{ $totalExecutionDebt }}
                            </td>
                            <td class="table-td text-center">
                                {{ $accounting[0]->debit_zimmet->sum('amount') }}
                            </td>
                            <td class="table-td text-center">
                                {{ $accounting[0]->debit_pervoiusMonthPaymentMinius->sum('amount') }}
                            </td>
                            <td class="table-td text-center">
                                {{ $accounting[0]->debit_pervoiusMonthPaymentPlus->sum('amount') }}
                            </td>
                            <td class="table-td text-center">
                                {{ $accounting[0]->additional_fee->sum('additional_fee') }}
                            </td>
                            <td class="table-td text-center">
                                {{ count($accounting->where('sgk_working_day', 1)) }}
                            </td>
                            <td class="table-td text-center">
                                {{ sprintf('%.2f', $accounting->sum('cash_payment') + $accounting->sum('bank_payment')) }}
                                TL
                            </td>

                            <td class=" table-td text-center">
                                {{ sprintf('%.2f', $accounting->where('bank_payment_status', false)->sum('bank_payment')) }}
                            </td>
                            <td class=" table-td text-center">
                                {{ sprintf(
                                    '%.2f',
                                    $accounting->where('cash_payment_status', false)->sum(function ($item) {
                                        return $item->cash_payment - $item->payed_cash_payment;
                                    }),
                                ) }}
                            </td>
                            <td class="table-td text-center">
                                <a
                                    href="{{ route('accounting.debitParams', ['user' => $accounting[0]->user]) }}">Detay</a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    <x-popup-modal id="calcPopup">
        <x-slot name="message">Yeniden Hesaplamak için gerekli alanları seçin</x-slot>
        <x-slot name="content">
            <form action="{{ route('accounting.reCalculate') }}" method="POST">
                @csrf
                <div class="form_cols_1">
                    <label for="year" class="flex flex-col items-start w-full gap-2 text-gray-300">
                        Yıl Seçiniz
                        <select name="year" id="" class="input-2 pr-10 w-full">
                            @for ($i = env('APP_STARTED_YEAR', '2023'); $i < now()->addYears(2)->format('Y'); $i++)
                                <option value="{{ $i }}" {{ date('Y') == $i ? 'selected' : '' }}>
                                    {{ $i }}
                                </option>
                            @endfor
                        </select>
                    </label>
                    <label for="year" class="flex flex-col items-start w-full gap-2 text-gray-300">
                        Ay Seçiniz
                        <select name="month" class="input-2 pr-10 w-full">
                            <option {{ date('m') == '01' ? 'selected' : '' }} value="01">Ocak</option>
                            <option {{ date('m') == '02' ? 'selected' : '' }} value="02">Şubat</option>
                            <option {{ date('m') == '03' ? 'selected' : '' }} value="03">Mart</option>
                            <option {{ date('m') == '04' ? 'selected' : '' }} value="04">Nisan</option>
                            <option {{ date('m') == '05' ? 'selected' : '' }} value="05">Mayıs</option>
                            <option {{ date('m') == '06' ? 'selected' : '' }} value="06">Haziran</option>
                            <option {{ date('m') == '07' ? 'selected' : '' }} value="07">Temmuz</option>
                            <option {{ date('m') == '08' ? 'selected' : '' }} value="08">Ağustos</option>
                            <option {{ date('m') == '09' ? 'selected' : '' }} value="09">Eylül</option>
                            <option {{ date('m') == '10' ? 'selected' : '' }} value="10">Ekim</option>
                            <option {{ date('m') == '11' ? 'selected' : '' }} value="11">Kasım</option>
                            <option {{ date('m') == '12' ? 'selected' : '' }} value="12">Aralık</option>
                        </select>
                    </label>
                    <label for="year" class="flex flex-col items-start w-full gap-2 text-gray-300">
                        Rol Seçiniz
                        <select name="roles[]" id="roleSelect"
                            class="input-2 w-full py-2 border border-[#6b7280] text-left" multiple>
                            @foreach ($workerRoles as $workerRole)
                                <option value="{{ $workerRole->id }}">{{ $workerRole->title }}</option>
                            @endforeach
                        </select>
                    </label>
                    <div class="flex justify-end items-center">
                        <button type="submit"
                            class="inline-flex items-center gap-3 bg-blue-700 px-4 me-2 py-2 rounded-md text-white font-semibold">
                            <i class="fa-solid fa-gear"></i>
                            Yeniden Hesapla
                        </button>
                    </div>
                </div>
            </form>
        </x-slot>
    </x-popup-modal>

    <x-popup-modal id="newProcess">
        <x-slot name="message">
            Yapmak istediğiniz işlemi seçiniz
        </x-slot>
        <x-slot name="content">
            <form action="{{ route('accounting.debitParamStore') }}" method="POST" class="mt-6 space-y-6"
                onsubmit="showLoading()">
                @csrf
                <div>
                    <label class="text-gray-300" for="worker">
                        Çalışan
                    </label>
                    <select id="worker" name="worker" data-filter="true"
                        class="block w-full border border-[#6b7280] text-gray-300 py-2 mt-1 rounded-[10px] transition-all bg-theme_secondary_black outline-none focus:ring-0"
                        required autofocus autocomplete="worker">
                        @foreach ($workers as $worker)
                            <option value="{{ $worker->id }}">{{ $worker->full_name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="text-gray-300" for="type">
                        Tip
                    </label>
                    <select id="type" name="type" class="mt-1 block w-full input-2" required autofocus
                        autocomplete="type">
                        <option selected disabled>Tip Seçiniz</option>
                        <option value="zimmet">Zimmet Kesintisi</option>
                        <option value="bes">BES</option>
                        <option value="pervoiusMonthPaymentMinius">Gecmis Aydan - Devir</option>
                        <option value="pervoiusMonthPaymentPlus">Gecmis Aydan + Devir</option>
                        <option value="cashPayment">Nakit odeme</option>
                    </select>
                </div>
                <div class="flex gap-4 items-center" id="checkbox_area">
                    <label for="normal" class="text-gray-300 flex items-center gap-2">
                        <input type="radio" name="cashPaymentType" checked value="normal" id="normal"
                            class="checkbox-dark">Normal
                    </label>
                    <label for="notNormal" class="text-gray-300 flex items-center gap-2">
                        <input type="radio" name="cashPaymentType" value="notNormal" id="notNormal"
                            class="checkbox-dark">Ara
                    </label>
                </div>
                <div>
                    <label class="text-gray-300" for="amount">
                        Miktar
                    </label>
                    <input id="amount" name="amount" type="number" class="mt-1 block w-full input-2" required
                        autofocus autocomplete="amount" />
                </div>
                <div>
                    <label class="text-gray-300" for="date">
                        Tarih
                    </label>
                    <input id="date" name="date" type="date" class="mt-1 block w-full input-2" required
                        autocomplete="date" />
                </div>
                <div>
                    <label class="text-gray-300" for="description">
                        Açıklama
                    </label>
                    <textarea id="description" name="description" class="mt-1 block w-full input-2 delay-0 duration-0" required autofocus
                        autocomplete="description"></textarea>
                </div>
                <div class="flex items-center justify-end gap-4 text-sm text-gray-300">
                    <button class="button-2 px-4">Kaydet</button>
                </div>
            </form>
        </x-slot>
    </x-popup-modal>
    @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>
        $('#calcButton').click(function() {
            $('#calcPopup').show();
        });

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

        // filtre
        document.getElementById('search_payment_detail').addEventListener('input', function() {
            var searchText = this.value.toLowerCase();
            var tableRows = document.querySelectorAll('#payment_details_table tr');

            tableRows.forEach(function(row) {
                var rowData = row.textContent.toLowerCase();
                if (rowData.includes(searchText)) {
                    row.style.display = '';
                } else {
                    row.style.display = 'none';
                }
            });
        });

        $('#roleSelect').multipleSelect({
            formatSelectAll: function() {
                return 'Hepsini Seç'
            },
            formatAllSelected: function() {
                return 'Hepsi Seçildi'
            },
            position: 'top',
        });
    </script>
    <script lang="javascript" src="https://cdn.sheetjs.com/xlsx-0.20.2/package/dist/xlsx.full.min.js"></script>

    <script>
        $('#newProcessButton').click(function() {
            $('#newProcess').show();
        });

        $('#worker').multipleSelect()

        $('#checkbox_area').hide();

        $('#type').change(function() {
            var val = $(this).val();

            if (val == 'cashPayment') {
                $('#checkbox_area').show();
            } else {
                $('#checkbox_area').hide();
            }

            if (val == 'pervoiusMonthPaymentMinius' || val == 'pervoiusMonthPaymentPlus') {
                $('#date').attr('type', 'month');
            } else {
                $('#date').attr('type', 'date');
            }
        });

        $('#date').change(function() {
            var type = $(this).attr('type');
            console.log(type);
        });
    </script>
@endsection