@extends('layouts.app')

@section('title', $title)

@section('content')

<br />
<div class="container">
    <section class="bg-gradient-very-light-gray position-relative">

        <div class="row">
            <div class="col-12 tab-style-01">
                <ul class="nav nav-tabs justify-content-center border-0 text-center fs-18 alt-font fw-600 mb-3">
                    <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#tab_sec1">{{ __('Yuvarlak') }}</a></li>
                    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab_sec2">{{ __('Lama') }}</a></li>
                    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab_sec3">{{ __('Levha') }}</a></li>
                    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab_sec4">{{ __('Boru') }}</a></li>
                </ul>
            </div>

            <div class="col-12">
                <div class="tab-content">

                    <!-- SILINDIR -->
                    <div class="tab-pane fade show active" id="tab_sec1">

                        <div class="row bg-white">
                            <div class="col-md-3"></div>
                            <div class="col-md-6 text-center">
                                <img src="/images/hesaplama/yuvarlak.jpg" style="max-width:300px; border:1px solid #ddd;">
                            </div>
                        </div>

                        <div class="mt-3">
                            <label>Çap (mm)</label>
                            <input type="number" id="CapSilindir" oninput="calculateWeight('silindir')">

                            <label>Uzunluk</label>
                            <input type="number" id="UzunlukSilindir" oninput="calculateWeight('silindir')">

                            <label>Malzeme</label>
                            <select id="MalzemeSilindir" onchange="updateDensity('silindir')"></select>
                            <span id="DensityLabelSilindir">Yoğunluk: -</span>

                            <label>Adet</label>
                            <input type="number" id="AdetSilindir" value="1" oninput="calculateWeight('silindir')">

                            <h4>Ağırlık: <span id="CalculatedWeightSilindir">0</span> kg</h4>
                        </div>

                    </div>

                    <!-- LAMA -->
                    <div class="tab-pane fade" id="tab_sec2">

                        <label>Genişlik</label>
                        <input type="number" id="GenislikLama" oninput="calculateWeight('lama')">

                        <label>Kalınlık</label>
                        <input type="number" id="KalinlikLama" oninput="calculateWeight('lama')">

                        <label>Uzunluk</label>
                        <input type="number" id="UzunlukLama" oninput="calculateWeight('lama')">

                        <select id="MalzemeLama" onchange="updateDensity('lama')"></select>
                        <span id="DensityLabelLama"></span>

                        <input type="number" id="AdetLama" value="1" oninput="calculateWeight('lama')">

                        <h4>Ağırlık: <span id="CalculatedWeightLama">0</span> kg</h4>

                    </div>

                    <!-- LEVHA -->
                    <div class="tab-pane fade" id="tab_sec3">

                        <input type="number" id="GenislikLevha" placeholder="Genişlik">
                        <input type="number" id="KalinlikLevha" placeholder="Kalınlık">
                        <input type="number" id="UzunlukLevha" placeholder="Uzunluk">

                        <select id="MalzemeLevha" onchange="updateDensity('levha')"></select>
                        <span id="DensityLabelLevha"></span>

                        <input type="number" id="AdetLevha" value="1">

                        <h4>Ağırlık: <span id="CalculatedWeightLevha">0</span> kg</h4>

                    </div>

                    <!-- BORU -->
                    <div class="tab-pane fade" id="tab_sec4">

                        <input type="number" id="DisCapBoru" placeholder="Dış Çap">
                        <input type="number" id="KalinlikBoru" placeholder="Kalınlık">
                        <input type="number" id="UzunlukBoru" placeholder="Uzunluk">

                        <select id="MalzemeBoru" onchange="updateDensity('boru')"></select>
                        <span id="DensityLabelBoru"></span>

                        <input type="number" id="AdetBoru" value="1">

                        <h4>Ağırlık: <span id="CalculatedWeightBoru">0</span> kg</h4>

                    </div>

                </div>
            </div>
        </div>
    </section>
</div>
<style>
    .tab-container {
        background: white;
        border-radius: 10px;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
        padding: 20px;
        margin-top: 20px !important;
    }

</style>

<script>
         // Malzeme yoğunluklarını tutan veri yapısı
    var malzemeYoğunlukları = {
            Demir: 7.86,
    "DKP Sac": 8,
    "Paslanmaz Çelik": 7.95,
    "Bakır": 8.96,
    "Pirinç": 8.55,
    "Döküm Çelik": 7.2,
    "Alüminyum": 2.72,
    "6061 Alüminyum (AlMg1SiCu)": 2.72,
    "7005 Alüminyum (AlZn4.5Mg1.5Mn)": 2.8,
    "7020 Alüminyum (AlZn4.5Mg1)": 2.8,
    "7075 Alüminyum (AlZn5.5MgCu)": 2.8,
    "Bronz": 8.8,
    "Krom": 7.1,
    "Altın": 19.36,
    "Gümüş": 10.5,
    "Alüminyum Bronzu": 7.7,
    "Çinko": 7.1,
    "Kalsiyum": 1.54,
    "Delrin": 1.42,
    "Polioksimetilen": 1.41,
    "Fiber": 1.4,
    "Poliasetal - pom": 1.35,
    "Tekstolit": 1.35,
    "Kestamid": 1.2,
    "Poliyamid": 1.2,
    "Polietilen": 1.2,
    "Poliemit": 1.2,
    "Kaprolon (PA 6)": 1.15,
    "Alpolen": 0.96

        };

    // Dinamik malzeme listesi güncellenmesi
        function updateMaterialOptions() {
        var silindirSelect = document.getElementById('MalzemeSilindir');
        var profilLama = document.getElementById('MalzemeLama');
        var levhaSelect = document.getElementById('MalzemeLevha'); // Boru select
        var boruSelect = document.getElementById('MalzemeBoru'); // MilBoru için ekleme


        for (var malzeme in malzemeYoğunlukları) {
            //Silindir için
            var optionsilindir = document.createElement('option');
            optionsilindir.value = malzeme;
            optionsilindir.textContent = malzeme;
            silindirSelect.appendChild(optionsilindir);

            //Lama
            var optionLama = document.createElement('option');
            optionLama.value = malzeme;
            optionLama.textContent = malzeme;
            profilLama.appendChild(optionLama);

            //Levha Demir
            var optionLevha = document.createElement('option'); // Levha için malzeme ekle
            optionLevha.value = malzeme;
            optionLevha.textContent = malzeme;
            levhaSelect.appendChild(optionLevha); // Levha select'e ekle

            //Boru Demir
            var optionBoru = document.createElement('option'); // Boru için
            optionBoru.value = malzeme;
            optionBoru.textContent = malzeme;
            boruSelect.appendChild(optionBoru);
        }
    }


        function updateDensity(tabType) {
        var selectedMaterial;
        var densityLabel;

        // Boru için malzeme ve yoğunluk işlemi
        if (tabType === 'boru')
        {
            selectedMaterial = document.getElementById('MalzemeBoru').value;
            densityLabel = document.getElementById("DensityLabelBoru");
        }

        //Levha
        else if (tabType === 'levha') {
            selectedMaterial = document.getElementById('MalzemeLevha').value;
            densityLabel = document.getElementById("DensityLabelLevha");
        }

        //Silindir
        else if (tabType === 'silindir')
        {
            selectedMaterial = document.getElementById('MalzemeSilindir').value;
            densityLabel = document.getElementById("DensityLabelSilindir");
        }

        //Lama
        else if (tabType === 'lama')
        {
                selectedMaterial = document.getElementById('MalzemeLama').value;
                densityLabel = document.getElementById("DensityLabelLama");
        }


        if (malzemeYoğunlukları[selectedMaterial]) {
            densityLabel.textContent = "Yoğunluk: " + malzemeYoğunlukları[selectedMaterial] + " g/cm³";
            calculateWeight(tabType); // Yoğunluk değiştiği için ağırlığı tekrar hesapla
        }
        else {
            densityLabel.textContent = "Yoğunluk bilgisi mevcut değil!";
        }
    }


    // Ağırlığı hesaplama fonksiyonu
        function calculateWeight(tabType) {
        var material = document.querySelector(`#${tabType === 'silindir' ? 'MalzemeSilindir' : (tabType === 'lama' ? 'MalzemeLama' :(tabType==='levha' ? 'MalzemeLevha':'MalzemeBoru'))}`).value;
        var quantity = parseInt(document.getElementById(tabType === 'silindir' ? 'AdetSilindir' : (tabType === 'lama' ? 'AdetLama' :(tabType==='levha'? 'AdetLevha':'AdetBoru'))).value);
        var density = malzemeYoğunlukları[material];
        var result = 0;

        //Silindir
        if (tabType === 'silindir') {
            var length = parseFloat(document.getElementById('UzunlukSilindir').value);
            var diameter = parseFloat(document.getElementById('CapSilindir').value);  //Çap
            result = (Math.PI * Math.pow(diameter / 2, 2) * length * density / 1_000_000) * quantity;
        }

        //Lama için hesaplama
        else if (tabType === 'lama') {
            var width = parseFloat(document.getElementById('GenislikLama').value);
            var thickness = parseFloat(document.getElementById('KalinlikLama').value);
            var length = parseFloat(document.getElementById('UzunlukLama').value);
            result = ((width * thickness * length * density) / 1_000_000) * quantity;
        }


        // Levha için hesaplama
        else if (tabType === 'levha') {
            var width = parseFloat(document.getElementById('GenislikLevha').value); // Boru dış çapı
            var thickness = parseFloat(document.getElementById('KalinlikLevha').value); // Et kalınlığı
            var length = parseFloat(document.getElementById('UzunlukLevha').value); // Uzunluk
            result = ((width * length * thickness * density) / 1_000_000) * quantity;
        }

        else if (tabType === 'boru')
        { // MilBoru için hesaplama
        var outerDiameter = parseFloat(document.getElementById('DisCapBoru').value);
        var thickness = parseFloat(document.getElementById('KalinlikBoru').value);
        var innerDiameter = outerDiameter - 2 * thickness;
        var length = parseFloat(document.getElementById('UzunlukBoru').value);
        var result = (Math.PI * ((Math.pow(outerDiameter / 2, 2)) - (Math.pow(innerDiameter / 2, 2))) * length * density / 1_000_000)* quantity;

            }

        result = result.toFixed(1); // Sonucu 2 ondalık basamağa yuvarla

        document.getElementById(tabType === 'silindir' ? 'CalculatedWeightSilindir' :
                                (tabType === 'lama' ? 'CalculatedWeightLama' :
                                (tabType === 'levha' ? 'CalculatedWeightLevha' : 'CalculatedWeightBoru'))).textContent = result;
        }


    // Sayfa yüklendiğinde malzeme seçeneklerini güncelle
    document.addEventListener('DOMContentLoaded', function () {
        updateMaterialOptions();
    });


</script>
@endsection