@extends('layouts.app')
@section('urlContent')
    {!! view('components.breadcrumbs', [
        'b_items' => [
            'Teklif Oluştur' => '/root/offer/create',
        ],
    ]) !!}
@endsection
@section('content')
    {{-- @include('components.sidebar') --}}
    {{-- @include('components.profile') --}}
    @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
    <div class="container-app">
        <form method="POST" action="{{ route('admin.offer.store') }}" enctype="multipart/form-data" onsubmit="showLoading()">
            @csrf
            <div
                class="flex flex-col 3xl:justify-between bg-theme_secondary_black text-gray-300 rounded-md h-[calc(100vh-150px)] overflow-y-auto p-4 mt-4">
                <div id="section_1">
                    <div class="flex flex-col justify-between h-[calc(100vh-100px)]">
                        <div class="flex px-4 py-4 items-center justify-between">
                            <div class="flex items-center gap-4 w-1/2">
                                <div class="w-8">
                                    <i class="text-3xl fa-regular fa-note-sticky"></i>
                                </div>
                                <h1 class="font-bold text-sm uppercase">Teklif Açıklaması</h1>
                            </div>
                            <input type="text" name="offer_description" value="{{ old('offer_description') }}"
                                class="bg-theme_secondary_black rounded-md w-1/2 lg:w-full text-sm">
                        </div>
                        <div
                            class="flex flex-col gap-8 border-t-2 border-teheme_third_black px-4 py-4 items-center justify-between">
                            <div class="flex items-start justify-between w-full">
                                <div class="flex items-center gap-4 w-1/2">
                                    <div class="w-8">
                                        <i class="text-xl fa-regular fa-building"></i>
                                    </div>
                                    <h1 class="font-bold text-sm uppercase">Müşteri</h1>
                                </div>
                                <select name="customer_id" id="customers"
                                    class="bg-theme_secondary_black rounded-md w-1/2 lg:w-full text-sm">
                                    <option selected disabled>Lütfen Müşteri Seçiniz</option>
                                </select>
                            </div>
                            <div class="flex items-center justify-between w-full">
                                <div class="w-1/2">
                                    <h1 class="ml-12 font-bold text-sm uppercase">Müşteri Bilgileri</h1>
                                </div>
                                <div class="w-1/2 lg:w-full text-sm text-gray-400">
                                    <p class="mb-1" id="address"></p>
                                    <p class="mb-1" id="officeTaxNo"></p>
                                    <p class="mb-1" id="taxAdmin"></p>
                                </div>
                            </div>
                        </div>
                        <div
                            class="flex flex-col gap-8 border-t-2 border-teheme_third_black px-4 py-4 items-center justify-between">
                            <div class="flex items-center justify-between w-full">
                                <div class="flex items-center gap-4 w-1/2">
                                    <div class="w-8">
                                        <i class="text-xl fa-regular fa-calendar"></i>
                                    </div>
                                    <h1 class="font-bold text-sm uppercase">Düzenleme Tarihi</h1>
                                </div>
                                <input type="date" name="update_date"
                                    class="bg-theme_secondary_black rounded-md w-1/2 lg:w-full text-sm"
                                    value="{{ date('Y-m-d') }}">
                            </div>
                            <div class="flex items-center justify-between w-full">
                                <div class="flex items-center gap-4 w-1/2">
                                    <div class="w-8">
                                        <i class="text-xl fa-regular fa-calendar"></i>
                                    </div>
                                    <h1 class="font-bold text-sm uppercase">Teklif Geçerlilik Tarihi</h1>
                                </div>
                                <div class="w-full gap-3 flex justify-between items-center">
                                    <input type="date" name="start_date"
                                        class="bg-theme_secondary_black rounded-md w-1/2 lg:w-full text-sm"
                                        value="{{ date('Y-m-d') }}">
                                    <input type="date" name="end_date"
                                        class="bg-theme_secondary_black rounded-md w-1/2 lg:w-full text-sm"
                                        value="{{ now()->addDays(1)->format('Y-m-d') }}">
                                </div>
                            </div>
                            <div class="flex items-start justify-between w-full">
                                <div class="flex items-center gap-4 w-1/2">
                                    <div class="w-8">
                                        <i class="text-xl fa-regular fa-bell"></i>
                                    </div>
                                    <h1 class="font-bold text-sm uppercase">Vade Tarihi</h1>
                                </div>
                                <div class="flex flex-col gap-3 w-1/2 lg:w-full">
                                    <div class="flex border border-teheme_third_black rounded-md text-sm">
                                        <button type="button" id="today"
                                            class="w-full border-r border-teheme_third_black p-1 duration-150 delay-75 transition-colors">Aynı
                                            Gün</button>
                                        <button type="button" id="afterSeven"
                                            class="w-full border-r border-teheme_third_black p-1 duration-150 delay-75 transition-colors">7
                                            Gün</button>
                                        <button type="button" id="afterFourteen"
                                            class="w-full border-r border-teheme_third_black p-1 duration-150 delay-75 transition-colors">14
                                            Gün</button>
                                        <button type="button" id="afterthirty"
                                            class="w-full border-r border-teheme_third_black p-1 duration-150 delay-75 transition-colors">30
                                            Gün</button>
                                        <button type="button" id="afterSixty" class="w-full p-1">60
                                            Gün</button>
                                    </div>
                                    <input type="date" name="vade_date" id="vade_date" value="{{ date('Y-m-d') }}"
                                        class="bg-theme_secondary_black rounded-md w-1/2 lg:w-full text-sm">
                                </div>
                            </div>
                        </div>
                        <div
                            class="flex flex-col gap-8 border-t-2 border-teheme_third_black px-4 py-4 items-center justify-between">
                            <div class="flex items-start justify-between w-full">
                                <div class="flex items-center gap-4 w-1/2">
                                    <div class="w-8">
                                        <i class="text-xl fa-solid fa-pen"></i>
                                    </div>
                                    <h1 class="font-bold text-sm uppercase">Teklif Koşulları</h1>
                                </div>
                                <textarea type="text" name="create_offer"
                                    placeholder="Teklifin geçerli olduğu süre, ödeme şartları vb. bilgiler için bu alanı doldurabilirsiniz"
                                    class="bg-theme_secondary_black rounded-md w-1/2 lg:w-full text-sm resize-none" rows="3">{{ old('create_offer') }}</textarea>
                            </div>
                        </div>

                        <div class="flex justify-end px-4 py-4">
                            <button type="button" id="next"
                                class="text-sm border border-teheme_third_black rounded-md p-2 hover:text-white duration-150 delay-75 transition-colors">
                                Devam Et
                            </button>
                        </div>
                    </div>
                </div>
                <div id="section_2" class="hidden">
                    <div class="flex flex-col justify-between h-[calc(100vh-100px)]">
                        <div>
                            <table class="w-full text-sm text-left text-gray-400">
                                <thead class="text-xs text-theme_white uppercase">
                                    <tr>
                                        <th scope="col" class="px-6 py-3 text-left w-1/4">
                                            Hizmet / Ürün
                                        </th>
                                        <th scope="col" class="px-6 py-3 text-left">
                                            Saatlik Ücret
                                        </th>
                                        <th scope="col" class="px-6 py-3 text-left">
                                            Günlük Ücret
                                        </th>
                                        <th scope="col" class="px-6 py-3 text-left">
                                            Aylık Ücret
                                        </th>
                                        {{-- <th scope="col" class="px-6 py-3 text-left">
                                            Min. Çalışma Saati
                                        </th> --}}
                                        {{-- <th scope="col" class="px-6 py-3 w-44 text-left">
                                            Vergi
                                        </th> --}}
                                        <th scope="col" class="px-6 py-3 w-12 text-left">
                                            İşlem
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="border-t border-teheme_third_black">
                                        <th class="px-6 py-4 whitespace-nowrap">
                                            <select type="text" name="category_id[]" required
                                                class="bg-theme_secondary_black border-teheme_third_black h-8 rounded-md w-full text-sm p-1 categories">
                                            </select>
                                        </th>
                                        <td class="px-6 py-4 text-center">
                                            <div class="relative">
                                                <input type="number" step="0.01" name="cost_hourly[]" readonly
                                                    placeholder="Saatlik anlaşmanız bulunmuyor"
                                                    class="hourlyInput cursor-not-allowed bg-theme_secondary_black pr-6 border-teheme_third_black h-8 rounded-md w-full text-sm p-1">
                                            </div>
                                        </td>
                                        <td class="px-6 py-4 text-center">
                                            <div class="relative">
                                                <input type="number" step="0.01" name="cost_daily[]" readonly
                                                    placeholder="Günlük anlaşmanız bulunmuyor"
                                                    class="dailyInput cursor-not-allowed bg-theme_secondary_black pr-6 border-teheme_third_black h-8 rounded-md w-full text-sm p-1">
                                            </div>
                                        </td>
                                        <td class="px-6 py-4 text-center">
                                            <div class="relative">
                                                <input type="number" step="0.01" name="cost_monthly[]" readonly
                                                    placeholder="Aylık anlaşmanız bulunmuyor"
                                                    class="monthlyInput cursor-not-allowed bg-theme_secondary_black pr-6 border-teheme_third_black h-8 rounded-md w-full text-sm p-1">
                                            </div>
                                        </td>
                                        {{-- <td class="px-6 py-4 text-center">
                                            <input type="text" name="product_amount[]" id=""
                                                class="bg-theme_secondary_black border-teheme_third_black h-8 rounded-md w-full text-sm p-1 product_amount">
                                        </td> --}}
                                        {{-- <td class="px-6 py-4 text-center">
                                            <select type="text" name="unit[]"
                                                class="bg-theme_secondary_black border-teheme_third_black h-8 rounded-md w-full text-sm p-1">
                                                <option selected disabled>Birim Seçiniz</option>
                                                <option value="hourly">Saatlik</option>
                                                <option value="daily">Günlük</option>
                                                <option value="monthly">Aylık</option>
                                            </select>
                                        </td> --}}
                                        {{-- <td class="px-6 py-4 text-center">
                                            <div class="relative">
                                                <input type="text" name="unit_amount[]"
                                                    class="bg-theme_secondary_black pr-6 border-teheme_third_black h-8 rounded-md w-full text-sm p-1 price">
                                                <div class="absolute top-[2px] right-2 text-lg">
                                                    ₺
                                                </div>
                                            </div>
                                        </td> --}}
                                        {{-- <td class="px-6 py-4 text-center">
                                            <div class="relative">
                                                <input type="number" name="min_working_hour[]"
                                                    class="bg-theme_secondary_black pr-6 border-teheme_third_black h-8 rounded-md w-full text-sm p-1 price">
                                                <div class="absolute top-[2px] right-2 text-lg">

                                                </div>
                                            </div>
                                        </td> --}}
                                        {{-- <td class="px-6 py-4 text-center">
                                            <div class="flex items-center w-full">
                                                <div
                                                    class="flex items-center text-xs px-1 bg-theme_black border-teheme_third_black border-t border-b border-l justify-center h-8 rounded-tl-md rounded-bl-md">
                                                    KDV
                                                </div>
                                                <select name="tax_rate[]" required
                                                    class="p-1 bg-theme_secondary_black border-teheme_third_black h-8 rounded-tr-md rounded-br-md w-full text-sm tax">
                                                    <option selected disabled>Oran Seçiniz</option>
                                                    <option value="0">%0</option>
                                                    <option value="1">%1</option>
                                                    <option value="8">%8</option>
                                                    <option value="10">%10</option>
                                                    <option value="18">%18</option>
                                                    <option value="20">%20</option>
                                                </select>
                                            </div>
                                        </td> --}}
                                        {{-- <td class="px-6 py-4 text-center">
                                            <div class="relative">
                                                <input type="text" name="total_amount[]"
                                                    class="bg-theme_secondary_black pr-6 border-teheme_third_black h-8 rounded-md w-full text-sm p-1 total_amount focus:ring-0"
                                                    readonly>
                                                <div class="absolute top-[2px] right-2 text-lg">
                                                    ₺
                                                </div>
                                            </div>
                                        </td> --}}
                                        <td class="px-6 py-4 text-center">
                                            <button type="button" class="bg-red-700 text-white p-1 rounded deleteRow">
                                                <i class="fa-regular fa-trash-can"></i>
                                            </button>
                                        </td>
                                        <input type="hidden" class="subTotal">
                                        <input type="hidden" name="tax_amount[]" class="rowTax">
                                    </tr>
                                </tbody>
                            </table>

                            <div class="flex justify-between px-4 py-4 border-t border-teheme_third_black">
                                <button type="button" id="addNewRow"
                                    class="text-sm border border-teheme_third_black rounded-md p-2 hover:text-white duration-150 delay-75 transition-colors">
                                    Yeni Satır Ekle
                                </button>
                            </div>
                        </div>
                        <div class="flex flex-col">
                            {{-- <div class="flex flex-col items-end p-4">
                                <div class="flex justify-between border-t border-teheme_third_black w-1/3 p-2">
                                    <h1 class="font-bold text-sm uppercase">Ara Toplam</h1>
                                    <span>
                                        <input
                                            class="bg-theme_secondary_black border-none text-right max-w-full focus:ring-0"
                                            readonly type="text" name="sub_total" value="0"> ₺
                                    </span>
                                </div>
                                <div class="flex justify-between border-t border-teheme_third_black w-1/3 p-2">
                                    <h1 class="font-bold text-sm uppercase">Toplam KDV</h1>
                                    <span>
                                        <input
                                            class="bg-theme_secondary_black border-none text-right max-w-full focus:ring-0"
                                            readonly type="text" name="tax" value="0"> ₺
                                    </span>
                                </div>
                                <div class="flex justify-between border-t border-teheme_third_black w-1/3 p-2">
                                    <h1 class="font-bold text-sm uppercase">Genel Toplam</h1>
                                    <span>
                                        <input
                                            class="bg-theme_secondary_black border-none text-right max-w-full focus:ring-0"
                                            readonly type="text" name="total" value="0"> ₺
                                    </span>
                                </div>
                            </div> --}}
                            <div class="flex justify-between px-4 py-4">
                                <button type="button" id="prev"
                                    class="text-sm border border-teheme_third_black rounded-md p-2 hover:text-white duration-150 delay-75 transition-colors">
                                    Geri Dön
                                </button>
                                <button
                                    class="text-sm border border-teheme_third_black rounded-md p-2 hover:text-white duration-150 delay-75 transition-colors">
                                    Kaydet
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    @if (session('createServicePricing'))
        <div id="serviceInfoPopup">
            <div tabindex="-1"
                class="fixed w-full flex items-center justify-center z-[100] 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 closePopupModal 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="serviceInfoPopup">
                            <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">
                                {{ session('createServicePricing') }}
                            </h3>
                            <div class="flex justify-center items-center gap-4 mt-4">
                                <a href="{{ session('url') }}#section_1"
                                    class="inline-flex justify-center gap-2 items-center w-full p-2 rounded text-gray-300 focus:ring-indigo-900 focus:ring-4 font-semibold bg-indigo-700 whitespace-nowrap">
                                    <i class="fa-solid fa-gear"></i>
                                    Hizmet Fiyatlandırmasına Git
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif
@endsection
@section('javascript')
    <script>
        $(document).ready(function() {
            var roles = {!! $roles !!};
            var customers = {!! $customers !!};
            var select = $('.categories');
            var customersSelect = $('#customers');
            var officeTaxNoElement = $('#officeTaxNo');
            var taxAdminElement = $('#taxAdmin');
            var addressElement = $('#address');

            var hourlyInput = $('.hourlyInput');
            var dailyInput = $('.dailyInput');
            var monthlyInput = $('.monthlyInput');

            $.each(customers, function(index, customer) {
                customersSelect.append('<option value="' + customer.id + '">' + customer.office_name +
                    '</option>');
            });

            $.each(roles, function(index, role) {
                select.append('<option value="' + role.id + '">' + role.title + '</option>');
            });

            customersSelect.change(function() {
                var selectedCustomerId = $(this).val();
                var selectedCustomer = customers.find(customer => customer.id == selectedCustomerId);

                var workingTypes = JSON.parse(selectedCustomer.working_types);

                workingTypes.forEach(function(item) {
                    if (item == 'hourly') {
                        hourlyInput.prop("readonly", false).prop("placeholder", '').removeClass(
                            'cursor-not-allowed');
                    } else if (item == 'daily') {
                        dailyInput.prop("readonly", false).prop("placeholder", '').removeClass(
                            'cursor-not-allowed');
                    } else if (item == 'monthly') {
                        monthlyInput.prop("readonly", false).prop("placeholder", '').removeClass(
                            'cursor-not-allowed');
                    }
                });

                if (selectedCustomer) {
                    officeTaxNoElement.text('Vergi Numarası : ' + selectedCustomer.office_tax_no);
                    taxAdminElement.text('Vergi Dairesi : ' + selectedCustomer.tax_admin);
                    addressElement.text('Adres : ' + selectedCustomer.address);
                } else {
                    officeTaxNoElement.text('');
                    taxAdminElement.text('');
                    addressElement.text('');
                }
            });
        });


        $('#next').click(function() {
            $('#section_1').slideUp();
            $('#section_2').slideDown();
        });
        $('#prev').click(function() {
            $('#section_2').slideUp();
            $('#section_1').slideDown();
        });

        $('#addNewRow').click(function() {
            var customersSelect = $('#customers');
            var customers = {!! $customers !!};
            var roles = {!! $roles !!};
            var existingOptions = $('tbody [name="category_id[]"]').find('option:selected');

            var selectedValues = existingOptions.map(function() {
                return $(this).val();
            }).get();

            var selectedRoles = roles.filter(role => !selectedValues.includes(String(role.id)));

            if (selectedRoles.length > 0) {
                var newOptionsHtml = selectedRoles.map(role => {
                    return `<option value="${role.id}">${role.title}</option>`;
                }).join('');
            }

            var newRow =
                `
                <tr class="border-t border-teheme_third_black">
                    <th class="px-6 py-4 whitespace-nowrap">
                        <select type="text" name="category_id[]" required
                            class="bg-theme_secondary_black border-teheme_third_black h-8 rounded-md w-full text-sm p-1">
                            ${newOptionsHtml}
                        </select> </th>
                        <td class="px-6 py-4 text-center">
                            <div class="relative">
                                <input type="number" step="0.01" name="cost_hourly[]" readonly placeholder="Saatlik anlaşmanız bulunmuyor"
                                    class="hourlyInput cursor-not-allowed bg-theme_secondary_black pr-6 border-teheme_third_black h-8 rounded-md w-full text-sm p-1">
                            </div>
                        </td>
                        <td class="px-6 py-4 text-center">
                            <div class="relative">
                                <input type="number" step="0.01" name="cost_daily[]" readonly placeholder="Günlük anlaşmanız bulunmuyor"
                                    class="dailyInput cursor-not-allowed bg-theme_secondary_black pr-6 border-teheme_third_black h-8 rounded-md w-full text-sm p-1">
                            </div>
                        </td>
                        <td class="px-6 py-4 text-center">
                            <div class="relative">
                                <input type="number" step="0.01" name="cost_monthly[]" readonly placeholder="Aylık anlaşmanız bulunmuyor"
                                    class="monthlyInput cursor-not-allowed bg-theme_secondary_black pr-6 border-teheme_third_black h-8 rounded-md w-full text-sm p-1">
                            </div>
                        </td>
                        <td class="px-6 py-4 text-center">
                            <button type="button" class="bg-red-700 text-white p-1 rounded deleteRow">
                                <i class="fa-regular fa-trash-can"></i>
                            </button>
                        </td>
                        <input type="hidden" class="subTotal">
                        <input type="hidden" name="tax_amount[]" class="rowTax">
                    </tr>
            `;
            var newRowHtml = $(newRow).hide();
            $('tbody').append(newRowHtml);
            $(newRowHtml).fadeIn(500);

            var selectedCustomerId = customersSelect.val();
            var selectedCustomer = customers.find(customer => customer.id == selectedCustomerId);

            var workingTypes = JSON.parse(selectedCustomer.working_types);

            workingTypes.forEach(function(item) {
                if (item == 'hourly') {
                    var hourlyInput = newRowHtml.find('.hourlyInput');
                    hourlyInput.prop("readonly", false).prop("placeholder", '').removeClass(
                        'cursor-not-allowed');
                } else if (item == 'daily') {
                    var dailyInput = newRowHtml.find('.dailyInput');
                    dailyInput.prop("readonly", false).prop("placeholder", '').removeClass(
                        'cursor-not-allowed');
                } else if (item == 'monthly') {
                    var monthlyInput = newRowHtml.find('.monthlyInput');
                    monthlyInput.prop("readonly", false).prop("placeholder", '').removeClass(
                        'cursor-not-allowed');
                }
            });
        });

        $('table').on('click', '.deleteRow', function() {
            var tr = $(this).closest('tr');
            tr.fadeOut(500, function() {
                tr.remove();
                // generalCalculate();
            });
        });

        $('#today').click(function() {
            var today = new Date();
            var dd = String(today.getDate()).padStart(2, '0');
            var mm = String(today.getMonth() + 1).padStart(2, '0');
            var yyyy = today.getFullYear();
            today = yyyy + '-' + mm + '-' + dd;
            $('#vade_date').val(today);
            $('#today').addClass('bg-gray-600');
            $('#afterSeven').removeClass('bg-gray-600');
            $('#afterFourteen').removeClass('bg-gray-600');
            $('#afterthirty').removeClass('bg-gray-600');
            $('#afterSixty').removeClass('bg-gray-600');
        });

        $('#afterSeven').on('click', function() {
            var today = new Date();
            var futureDate = new Date(today);
            futureDate.setDate(today.getDate() + 7);

            var dd = String(futureDate.getDate()).padStart(2, '0');
            var mm = String(futureDate.getMonth() + 1).padStart(2, '0'); // January is 0!
            var yyyy = futureDate.getFullYear();

            var formattedFutureDate = yyyy + '-' + mm + '-' + dd;
            $('#vade_date').val(formattedFutureDate);
            $('#today').removeClass('bg-gray-600');
            $('#afterSeven').addClass('bg-gray-600');
            $('#afterFourteen').removeClass('bg-gray-600');
            $('#afterthirty').removeClass('bg-gray-600');
            $('#afterSixty').removeClass('bg-gray-600');
        });

        $('#afterFourteen').on('click', function() {
            var today = new Date();
            var futureDate = new Date(today);
            futureDate.setDate(today.getDate() + 14);

            var dd = String(futureDate.getDate()).padStart(2, '0');
            var mm = String(futureDate.getMonth() + 1).padStart(2, '0'); // January is 0!
            var yyyy = futureDate.getFullYear();

            var formattedFutureDate = yyyy + '-' + mm + '-' + dd;
            $('#vade_date').val(formattedFutureDate);
            $('#today').removeClass('bg-gray-600');
            $('#afterSeven').removeClass('bg-gray-600');
            $('#afterFourteen').addClass('bg-gray-600');
            $('#afterthirty').removeClass('bg-gray-600');
            $('#afterSixty').removeClass('bg-gray-600');
        });

        $('#afterthirty').on('click', function() {
            var today = new Date();
            var futureDate = new Date(today);
            futureDate.setDate(today.getDate() + 30);

            var dd = String(futureDate.getDate()).padStart(2, '0');
            var mm = String(futureDate.getMonth() + 1).padStart(2, '0'); // January is 0!
            var yyyy = futureDate.getFullYear();

            var formattedFutureDate = yyyy + '-' + mm + '-' + dd;
            $('#vade_date').val(formattedFutureDate);
            $('#today').removeClass('bg-gray-600');
            $('#afterSeven').removeClass('bg-gray-600');
            $('#afterFourteen').removeClass('bg-gray-600');
            $('#afterthirty').addClass('bg-gray-600');
            $('#afterSixty').removeClass('bg-gray-600');
        });

        $('#afterSixty').on('click', function() {
            var today = new Date();
            var futureDate = new Date(today);
            futureDate.setDate(today.getDate() + 60);

            var dd = String(futureDate.getDate()).padStart(2, '0');
            var mm = String(futureDate.getMonth() + 1).padStart(2, '0'); // January is 0!
            var yyyy = futureDate.getFullYear();

            var formattedFutureDate = yyyy + '-' + mm + '-' + dd;
            $('#vade_date').val(formattedFutureDate);
            $('#today').removeClass('bg-gray-600');
            $('#afterSeven').removeClass('bg-gray-600');
            $('#afterFourteen').removeClass('bg-gray-600');
            $('#afterthirty').removeClass('bg-gray-600');
            $('#afterSixty').addClass('bg-gray-600');
        });

        // $(document).on('change', '.tax, .price, .product_amount', function() {
        //     var tr = $(this).closest('tr');
        //     var product_amount = parseInt(tr.find('.product_amount').val());
        //     var unit_amount = parseInt(tr.find('.unit_amount').val());
        //     var price = parseInt(tr.find('.price').val());
        //     var tax = parseInt(tr.find('.tax').val());
        //     var total_amount = tr.find('.total_amount');
        //     var rowSubTotal = tr.find('.subTotal');
        //     var rowTax = tr.find('.rowTax');

        //     var subTotal = (product_amount * price);
        //     // Toplam vergi
        //     var taxAmount = (subTotal * (tax / 100));
        //     // Toplam miktar
        //     var total = (subTotal + taxAmount);

        //     total_amount.val(total);

        //     rowSubTotal.val(subTotal);
        //     rowTax.val(taxAmount);
        //     generalCalculate()
        // });

        // function generalCalculate() {
        //     var totalSubTotal = 0;
        //     var totalRowTax = 0;

        //     // Her bir subTotal değerini topla
        //     $('.subTotal').each(function() {
        //         var value = parseFloat($(this).val()) || 0;
        //         totalSubTotal += value;
        //     });

        //     // Her bir rowTax değerini topla
        //     $('.rowTax').each(function() {
        //         var value = parseFloat($(this).val()) || 0;
        //         totalRowTax += value;
        //     });

        //     $('input[name="sub_total"]').val(totalSubTotal);
        //     $('input[name="tax"]').val(totalRowTax);
        //     $('input[name="total"]').val(totalRowTax + totalSubTotal);
        // }
    </script>
@endsection