@extends('layouts.app')
@section('urlContent')
    {!! view('components.breadcrumbs', [
        'b_items' => [
            'Tekliflerim' => '/root/offers',
            'Teklif Detayı' => '/root/offer/show/' . $offer->id,
            'Düzenle' => '/root/offer/edit/' . $offer->id,
        ],
    ]) !!}
@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.update', $offer->id) }}" 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">
                <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="{{ $offer->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">
                                </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="{{ $offer->update_date }}">
                            </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="{{ $offer->start_date }}">
                                    <input type="date" name="end_date"
                                        class="bg-theme_secondary_black rounded-md w-1/2 lg:w-full text-sm"
                                        value="{{ $offer->end_date }}">
                                </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 hover:text-white 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 hover:text-white 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 hover:text-white 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 hover:text-white p-1 duration-150 delay-75 transition-colors">30
                                            Gün</button>
                                        <button type="button" id="afterSixty" class="w-full p-1 hover:text-white">60
                                            Gün</button>
                                    </div>
                                    <input type="date" name="vade_date" id="vade_date" value="{{ $offer->vade_date }}"
                                        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">{{ $offer->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 w-44 text-left">
                                            Vergi
                                        </th> --}}
                                        <th scope="col" class="px-6 py-3 w-12 text-left">
                                            İşlem
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                </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="{{ $offer->sub_total }}"> ₺
                                    </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="{{ $offer->tax }}"> ₺
                                    </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="{{ $offer->total }}"> ₺
                                    </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>
@endsection
@section('javascript')
    <script>
        $(document).ready(function() {
            var roles = {!! $roles !!};
            var offer = {!! $offer !!};
            var customers = {!! $customers !!};
            var select = $('.categories');
            var customersSelect = $('#customers');
            var officeTaxNoElement = $('#officeTaxNo');
            var taxAdminElement = $('#taxAdmin');
            var addressElement = $('#address');

            customersSelect.empty();

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

            // databaseden gelen musteri bilgilerinin secili olmasi
            var selectedCustomerId = offer.customer_id;
            var selectedCustomer = customers.find(customer => customer.id == selectedCustomerId);

            if (selectedCustomerId) {
                customersSelect.find('option').each(function() {
                    if ($(this).val() == selectedCustomerId) {
                        $(this).prop('selected', true);
                        officeTaxNoElement.text('Vergi Numarası : ' + selectedCustomer.office_tax_no);
                        taxAdminElement.text('Vergi Dairesi : ' + selectedCustomer.tax_admin);
                        addressElement.text('Adres : ' + selectedCustomer.address);
                    }
                });
            }

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

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

            // databaseden gelen verilerin listelenmesi ve tabloya eklenmesi
            offer.offer_products.forEach(element => {

                var optionsHtml = roles.map(role => {
                    var isSelected = element.category_id == role.id ? 'selected' : '';
                    return `<option value="${role.id}" ${isSelected}>${role.title}</option>`;
                }).join('');

                var customersSelect = $('#customers');
                var customers = {!! $customers !!};

                var dataRow = `
                    <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">
                                ${optionsHtml}
                            </select>
                        </th>
                        <td class="px-6 py-4 text-center">
                            <div class="relative">
                                <input type="number" step="0.01" name="cost_hourly[]" value="${element.cost_hourly != 0 ? element.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[]" value="${element.cost_daily != 0 ? element.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[]" value="${element.cost_monthly != 0 ? element.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>
                    </tr>
            `;
                var newRowHtml = $(dataRow);
                $('tbody').append(newRowHtml);

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

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

        // ! VERGİ İÇİN GEREKLİ KOD
        // <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">
        //             ${taxOptionsHtml}
        //         </select>
        //     </div>
        // </td>

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

        $('#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);
        });
        $('#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);
        });
        $('#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);
        });
        $('#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);
        });
        $('#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);
        });
    </script>
@endsection