@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 Çubuk -->
                    <div class="tab-pane fade in active show" id="tab_sec1">
                        <div class="tab-container" style="align-items: center; gap: 20px;">
                            <div class="col-12">
                                <div class="form-group mb-2">
                                    <label for="CapSilindir">Çap (mm)</label>
                                    <input type="number" id="CapSilindir" required oninput="calculateWeight('silindir')" />
                                </div>

                                <div class="input-group mb-2">
                                    <label for="UzunlukSilindir" class="d-block w-100">Uzunluk</label>
                                    <input class="form-control" type="number" id="UzunlukSilindir" required oninput="calculateWeight('silindir')" />
                                    <select class="form-control" id="UzunlukBirimiSilindir" onchange="calculateWeight('silindir')">
                                        <option value="mm">mm</option>
                                    </select>
                                </div>

                                <div class="input-group mb-2">
                                    <label class="d-block w-100" for="MalzemeSilindir">Malzeme</label>
                                    <select class="form-control" id="MalzemeSilindir" onchange="updateDensity('silindir')">
                                    </select>
                                    <span class="input-group-append mt-1 ps-3" id="DensityLabelSilindir">Yoğunluk: - g/cm³</span>
                                </div>

                                <div class="form-group mb-2">
                                    <label for="talasSilindir">Talaş(%)</label>
                                    <input type="number" id="talasSilindir" value="0" min="0" required oninput="calculateWeight('silindir')" />
                                </div>

                                <div class="form-group mb-2">
                                    <label for="AdetSilindir">Adet</label>
                                    <input type="number" id="AdetSilindir" value="1" min="1" required oninput="calculateWeight('silindir')" />
                                </div>

                                <div class="form-group mb-2">
                                    <label for="FiyatSilindir">Fiyat</label>
                                    <input type="number" id="FiyatSilindir" value="1" min="1" required oninput="calculateWeight('silindir')" />
                                </div>

                                <div class="form-group mb-2">
                                    <h4>Ağırlık: <span id="CalculatedWeightSilindir">0</span> kg</h4>
                                    <h4>Adet Fiyat: <span id="BirimFiyatSilindir">0</span> ₺</h4>
                                    <h4>Toplam Fiyat: <span id="ToplamFiyatSilindir">0</span> ₺</h4>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Lama Demir -->
                    <div class="tab-pane fade in" id="tab_sec2">
                        <div class="tab-container" style="align-items: center; gap: 20px;">
                            <div class="col-12">

                                <div class="form-group mb-2">
                                    <label for="GenislikLama">Genişlik (mm):</label>
                                    <input type="number" id="GenislikLama" required oninput="calculateWeight('lama')" />
                                </div>

                                <div class="form-group mb-2">
                                    <label for="KalinlikLama">Kalınlık (mm):</label>
                                    <input type="number" id="KalinlikLama" required oninput="calculateWeight('lama')" />
                                </div>

                                <div class="input-group mb-2">
                                    <label for="UzunlukLama" class="d-block w-100">Uzunluk:</label>
                                    <input class="form-control" type="number" id="UzunlukLama" required oninput="calculateWeight('lama')" />
                                    <select class="form-control" id="UzunlukBirimiLama" onchange="calculateWeight('lama')">
                                        <option value="mm">mm</option>
                                    </select>
                                </div>

                                <div class="input-group mb-2">
                                    <label class="d-block w-100" for="MalzemeLama">Malzeme</label>
                                    <select class="form-control" id="MalzemeLama" onchange="updateDensity('lama')">
                                    </select>
                                    <span class="input-group-append mt-1 ps-3" id="DensityLabelLama">Yoğunluk: - g/cm³</span>
                                </div>

                                <div class="form-group mb-2">
                                    <label for="talasLama">Talaş(%)</label>
                                    <input type="number" id="talasLama" value="0" min="0" required oninput="calculateWeight('lama')" />
                                </div>

                                <div class="form-group mb-2">
                                    <label for="AdetLama">Adet:</label>
                                    <input type="number" id="AdetLama" value="1" min="1" required oninput="calculateWeight('lama')" />
                                </div>

                                <div class="form-group mb-2">
                                    <label for="FiyatLama">Fiyat</label>
                                    <input type="number" id="FiyatLama" value="1" min="1" required oninput="calculateWeight('lama')" />
                                </div>

                                <div class="form-group mb-2">
                                    <h4>Ağırlık: <span id="CalculatedWeightLama">0</span> kg</h4>
                                    <h4>Adet Fiyat: <span id="BirimFiyatLama">0</span> ₺</h4>
                                    <h4>Toplam Fiyat: <span id="ToplamFiyatLama">0</span> ₺</h4>
                                </div>

                            </div>
                        </div>
                    </div>

                    <!-- Levha Demir -->
                    <div class="tab-pane fade in" id="tab_sec3">
                        <div class="tab-container" style="align-items: center; gap: 20px;">
                            <div class="col-12">

                                <div class="form-group mb-2">
                                    <label for="GenislikLevha">Genişlik (mm):</label>
                                    <input type="number" id="GenislikLevha" required oninput="calculateWeight('levha')" />
                                </div>

                                <div class="input-group mb-2">
                                    <label class="d-block w-100" for="UzunlukLevha">Uzunluk:</label>
                                    <input class="form-control" type="number" id="UzunlukLevha" required oninput="calculateWeight('levha')" />
                                    <select class="form-control" id="UzunlukBirimiLevha" onchange="calculateWeight('levha')">
                                        <option value="mm">mm</option>
                                    </select>
                                </div>

                                <div class="form-group mb-2">
                                    <label for="KalinlikLevha">Kalınlık (mm):</label>
                                    <input type="number" id="KalinlikLevha" required oninput="calculateWeight('levha')" />
                                </div>

                                <div class="input-group mb-2">
                                    <label class="d-block w-100" for="MalzemeLevha">Malzeme</label>
                                    <select class="form-control" id="MalzemeLevha" onchange="updateDensity('levha')">
                                    </select>
                                    <span class="input-group-append mt-1 ps-3" id="DensityLabelLevha">Yoğunluk: - g/cm³</span>
                                </div>

                                <div class="form-group mb-2">
                                    <label for="talasLevha">Talaş(%)</label>
                                    <input type="number" id="talasLevha" value="0" min="0" required oninput="calculateWeight('levha')" />
                                </div>

                                <div class="form-group mb-2">
                                    <label for="AdetLevha">Adet:</label>
                                    <input type="number" id="AdetLevha" value="1" min="1" required oninput="calculateWeight('levha')" />
                                </div>

                                <div class="form-group mb-2">
                                    <label for="FiyatLevha">Fiyat</label>
                                    <input type="number" id="FiyatLevha" value="1" min="1" required oninput="calculateWeight('levha')" />
                                </div>

                                <div class="form-group mb-2">
                                    <h4>Ağırlık: <span id="CalculatedWeightLevha">0</span> kg</h4>
                                    <h4>Adet Fiyat: <span id="BirimFiyatLevha">0</span> ₺</h4>
                                    <h4>Toplam Fiyat: <span id="ToplamFiyatLevha">0</span> ₺</h4>
                                </div>

                            </div>
                        </div>
                    </div>

                    <!-- Boru Demir -->
                    <div class="tab-pane fade in" id="tab_sec4">
                        <div class="tab-container" style="align-items: center; gap: 20px;">
                            <div class="col-12">

                                <div class="form-group mb-2">
                                    <label for="DisCapBoru">Dış Çap (mm):</label>
                                    <input type="number" id="DisCapBoru" required oninput="calculateWeight('boru')" />
                                </div>

                                <div class="form-group mb-2">
                                    <label for="KalinlikBoru">Et Kalınlığı (mm):</label>
                                    <input type="number" id="KalinlikBoru" required oninput="calculateWeight('boru')" />
                                </div>

                                <div class="input-group mb-2">
                                    <label class="d-block w-100" for="UzunlukBoru">Uzunluk:</label>
                                    <input class="form-control" type="number" id="UzunlukBoru" required oninput="calculateWeight('boru')" />
                                    <select class="form-control" id="UzunlukBirimiBoru" onchange="calculateWeight('boru')">
                                        <option value="mm">mm</option>
                                    </select>
                                </div>

                                <div class="input-group mb-2">
                                    <label class="d-block w-100" for="MalzemeBoru">Malzeme</label>
                                    <select class="form-control" id="MalzemeBoru" onchange="updateDensity('boru')">
                                    </select>
                                    <span class="input-group-append mt-1 ps-3" id="DensityLabelBoru">Yoğunluk: - g/cm³</span>
                                </div>

                                <div class="form-group mb-2">
                                    <label for="talasBoru">Talaş(%)</label>
                                    <input type="number" id="talasBoru" value="0" min="0" required oninput="calculateWeight('boru')" />
                                </div>

                                <div class="form-group mb-2">
                                    <label for="AdetBoru">Adet:</label>
                                    <input type="number" id="AdetBoru" value="1" min="1" required oninput="calculateWeight('boru')" />
                                </div>

                                <div class="form-group mb-2">
                                    <label for="FiyatBoru">Fiyat</label>
                                    <input type="number" id="FiyatBoru" value="1" min="1" required oninput="calculateWeight('boru')" />
                                </div>

                                <div class="form-group mb-2">
                                    <h4>Ağırlık: <span id="CalculatedWeightBoru">0</span> kg</h4>
                                    <h4>Adet Fiyat: <span id="BirimFiyatBoru">0</span> ₺</h4>
                                    <h4>Toplam Fiyat: <span id="ToplamFiyatBoru">0</span> ₺</h4>
                                </div>

                            </div>
                        </div>
                    </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>
    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
    };

    function updateMaterialOptions() {
        var silindirSelect = document.getElementById('MalzemeSilindir');
        var profilLama = document.getElementById('MalzemeLama');
        var levhaSelect = document.getElementById('MalzemeLevha');
        var boruSelect = document.getElementById('MalzemeBoru');

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

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

            var optionLevha = document.createElement('option');
            optionLevha.value = malzeme;
            optionLevha.textContent = malzeme;
            levhaSelect.appendChild(optionLevha);

            var optionBoru = document.createElement('option');
            optionBoru.value = malzeme;
            optionBoru.textContent = malzeme;
            boruSelect.appendChild(optionBoru);
        }
    }

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

        if (tabType === 'boru') {
            selectedMaterial = document.getElementById('MalzemeBoru').value;
            densityLabel = document.getElementById("DensityLabelBoru");
        } else if (tabType === 'levha') {
            selectedMaterial = document.getElementById('MalzemeLevha').value;
            densityLabel = document.getElementById("DensityLabelLevha");
        } else if (tabType === 'silindir') {
            selectedMaterial = document.getElementById('MalzemeSilindir').value;
            densityLabel = document.getElementById("DensityLabelSilindir");
        } 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);
        } else {
            densityLabel.textContent = "Yoğunluk bilgisi mevcut değil!";
        }
    }

    function calculateWeight(tabType) {
        var material = document.querySelector(`#${tabType === 'silindir' ? 'MalzemeSilindir' :
            (tabType === 'lama' ? 'MalzemeLama' :
            (tabType === 'levha' ? 'MalzemeLevha' :
            (tabType === 'boru' ? 'MalzemeBoru' : '0')))}`).value;

        var quantity = parseInt(document.getElementById(tabType === 'silindir' ? 'AdetSilindir' :
            (tabType === 'lama' ? 'AdetLama' :
            (tabType === 'levha' ? 'AdetLevha' :
            (tabType === 'boru' ? 'AdetBoru' : '0')))).value);

        var density = malzemeYoğunlukları[material];
        var result = 0;
        var birimresult = 0;
        var talas = parseFloat(document.getElementById(tabType === 'silindir' ? 'talasSilindir' :
            (tabType === 'lama' ? 'talasLama' :
            (tabType === 'levha' ? 'talasLevha' :
            (tabType === 'boru' ? 'talasBoru' : '0')))).value);
        var birimfiyat = 0;
        var toplamfiyat = 0;
        var fiyat = 0;

        if (tabType === 'silindir') {
            var length = parseFloat(document.getElementById('UzunlukSilindir').value);
            var diameter = parseFloat(document.getElementById('CapSilindir').value);
            fiyat = parseFloat(document.getElementById('FiyatSilindir').value);
            result = (Math.PI * Math.pow(diameter / 2, 2) * length * density / 1_000_000) * quantity;
        } 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);
            fiyat = parseFloat(document.getElementById('FiyatLama').value);
            result = ((width * thickness * length * density) / 1_000_000) * quantity;
        } else if (tabType === 'levha') {
            var width = parseFloat(document.getElementById('GenislikLevha').value);
            var thickness = parseFloat(document.getElementById('KalinlikLevha').value);
            var length = parseFloat(document.getElementById('UzunlukLevha').value);
            fiyat = parseFloat(document.getElementById('FiyatLevha').value);
            result = ((width * length * thickness * density) / 1_000_000) * quantity;
        } else if (tabType === 'boru') {
            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);
            fiyat = parseFloat(document.getElementById('FiyatBoru').value);
            result = (Math.PI * ((Math.pow(outerDiameter / 2, 2)) - (Math.pow(innerDiameter / 2, 2))) * length * density / 1_000_000) * quantity;
        }

        result += result * (parseFloat(talas) / 100);
        birimresult = result / quantity;
        birimfiyat = fiyat * birimresult;
        toplamfiyat = result * fiyat;

        result = result.toFixed(2);
        birimfiyat = birimfiyat.toFixed(2);
        toplamfiyat = toplamfiyat.toFixed(2);

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

        document.getElementById(
            tabType === 'silindir' ? 'BirimFiyatSilindir' :
            tabType === 'lama' ? 'BirimFiyatLama' :
            tabType === 'levha' ? 'BirimFiyatLevha' :
            tabType === 'boru' ? 'BirimFiyatBoru' : '0'
        ).textContent = birimfiyat;

        document.getElementById(
            tabType === 'silindir' ? 'ToplamFiyatSilindir' :
            tabType === 'lama' ? 'ToplamFiyatLama' :
            tabType === 'levha' ? 'ToplamFiyatLevha' :
            tabType === 'boru' ? 'ToplamFiyatBoru' : '0'
        ).textContent = toplamfiyat;
    }

    document.addEventListener('DOMContentLoaded', function () {
        updateMaterialOptions();
    });
</script>
@endsection