@extends('layouts.app')
@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('salesMarketing.createOffer') }}" 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-100px)] 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="{{ 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">
                                </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-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">
                                            Miktar
                                        </th>
                                        <th scope="col" class="px-6 py-3 w-44 text-left">
                                            Birim
                                        </th>
                                        <th scope="col" class="px-6 py-3 text-left">
                                            Br. Fiyat
                                        </th>
                                        <th scope="col" class="px-6 py-3 w-44 text-left">
                                            Vergi
                                        </th>
                                        <th scope="col" class="px-6 py-3 text-left">
                                            Toplam
                                        </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[]"
                                                class="bg-theme_secondary_black border-teheme_third_black h-8 rounded-md w-full text-sm p-1 categories">
                                                <option selected disabled>Hizmet Seçiniz</option>
                                            </select>
                                        </th>
                                        <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="piece">Adet</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="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[]"
                                                    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>
@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');

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

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

        $(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 roles = {!! $roles !!};
            var optionsHtml = roles.map(role => `<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[]"
                            class="bg-theme_secondary_black border-teheme_third_black h-8 rounded-md w-full text-sm p-1">
                            ${optionsHtml}
                        </select> </th>
                        <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=""
                                class="bg-theme_secondary_black border-teheme_third_black h-8 rounded-md w-full text-sm p-1 unit_amount">
                                <option selected disabled>Birim Seçiniz</option>
                                <option value="piece">Adet</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="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[]"
                                    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ç</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>
            `;
            var newRowHtml = $(newRow).hide();
            $('tbody').append(newRowHtml);
            $(newRowHtml).fadeIn(500);
        });

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