@extends('layouts.master')

@section('content')

<style>
    .wizard-step {
        display: none;
    }

    .wizard-step.active {
        display: block;
    }
</style>






<!-- start modal pop-up section -->

<section class="big-section " style="margin-top: 200px;">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-12 col-xl-8 col-md-10 text-center z-index-1">
                <!-- start contact popup -->
                <div id="" class="container p-0 contact-form-style-01 position-relative text-center">
                    <div class="row g-0">
                        <div class="col-lg-12">
                            <div class="p-5 lg-p-10 bg-white">
                                <!-- Step Numbers -->
                                <div class="row justify-content-center mb-4">
                                    @foreach (range(1, 6) as $step)
                                    <div
                                        class="col text-center last-paragraph-no-margin hover-box process-step-style-01 sm-mb-40px wizard-input-box">
                                        <div class="process-step-icon-box position-relative mb-25px">
                                            <span
                                                class="{{ $step != 6 ? 'progress-step-separator bg-base-color w-30 separator-line-2px opacity-2' : '' }}"></span>

                                            <div id="step-indicator-{{ $step }}"
                                                class="process-step-icon d-flex justify-content-center align-items-center mx-auto rounded-circle h-80px w-80px fs-20 box-shadow-large text-dark-gray fw-500 ">
                                                <span class="fw-600 number position-relative z-index-1">{{
                                                    sprintf('%02d', $step) }}</span>
                                                <div class="box-overlay bg-base-color rounded-circle"></div>
                                            </div>
                                        </div>
                                    </div>
                                    @endforeach
                                </div>

                                <form id="wizardForm">
                                    @csrf
                                    <!-- Gizli inputlar -->
                                    <input type="hidden" id="currentPaying" name="currentPaying" value="">
                                    <input type="hidden" id="occupation" name="occupation" value="">
                                    <input type="hidden" id="over55" name="over55" value="">
                                    <input type="hidden" id="incomeMonthly" name="incomeMonthly" value="">
                                    <input type="hidden" id="livesWithPartner" name="livesWithPartner" value="">
                                    <input type="hidden" id="subSidy" name="subSidy" value="">
                                    <input type="hidden" id="partnerIncome" name="partnerIncome" value="">
                                    <input type="hidden" id="partnerFirm" name="partnerFirm" value="">
                                    <input type="hidden" id="partnerBeamter" name="partnerBeamter" value="">
                                    <!-- Mevcut form içeriği -->
                                    <div class="row row-cols-1 row-cols-lg-12 row-cols-md-12 row-cols-sm-12 md-mt-50px">
                                        @foreach (range(1, 6) as $step)
                                        <div
                                            class="col text-center process-step-style-02 hover-box last-paragraph-no-margin md-mb-50px">
                                            <div class="wizard-step {{ $step == 1 ? 'active' : '' }}">
                                                <div
                                                    class="position-relative form-group mb-20px min-h-300px sm-min-h-100px">
                                                    @if ($step == 1)
                                                    <h4 class="d-inline-block fw-600 text-gray mb-50px ls-minus-1px">
                                                        Wie hoch ist ihr aktueller Krankenkassenbeitrag?</h4>
                                                    <div class="row justify-content-center">
                                                        <div class="col-md-6 xs-mb-30px">
                                                            <div class="position-relative form-group mb-25px xs-mb-0">
                                                                <input
                                                                    class="btn btn-large btn-switch-text btn-round-edge btn-transparent-light-gray d-table d-lg-inline-block lg-mb-15px md-mx-auto wizard-input-price"
                                                                    type="text" name="name" value="unter 300 €"
                                                                    data-value="1" readonly />
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6 xs-mb-30px">
                                                            <div class="position-relative form-group mb-25px xs-mb-0">
                                                                <input
                                                                    class="btn btn-large btn-switch-text btn-round-edge btn-transparent-light-gray d-table d-lg-inline-block lg-mb-15px md-mx-auto wizard-input-price"
                                                                    type="text" name="name" value="501€ - 1.000€"
                                                                    data-value="2" readonly />
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row justify-content-center">
                                                        <div class="col-md-6 xs-mb-30px">
                                                            <div class="position-relative form-group mb-25px xs-mb-0">
                                                                <input
                                                                    class="btn btn-large btn-switch-text btn-round-edge btn-transparent-light-gray d-table d-lg-inline-block lg-mb-15px md-mx-auto wizard-input-price"
                                                                    type="text" name="name" value="301€ - 500€"
                                                                    data-value="3" readonly />
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6 xs-mb-30px">
                                                            <div class="position-relative form-group mb-25px xs-mb-0">
                                                                <input
                                                                    class="btn btn-large btn-switch-text btn-round-edge btn-transparent-light-gray d-table d-lg-inline-block lg-mb-15px md-mx-auto wizard-input-price"
                                                                    type="text" name="name" value="über 1.000€"
                                                                    data-value="4" readonly />
                                                            </div>
                                                        </div>
                                                    </div>
                                                    @elseif ($step == 2)
                                                    <h4 class="d-inline-block fw-600 text-gray mb-50px ls-minus-1px">
                                                        Welchen beruflichen Status haben Sie?</h4>
                                                    <div class="row justify-content-center">
                                                        <div class="col-md-6 xs-mb-30px">
                                                            <div class="position-relative form-group mb-25px xs-mb-0">
                                                                <input
                                                                    class="btn btn-large btn-switch-text btn-round-edge btn-transparent-light-gray d-table d-lg-inline-block lg-mb-15px md-mx-auto wizard-input-job"
                                                                    type="text" name="name" value="angestellt"
                                                                    data-value="1" readonly />
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6 xs-mb-30px">
                                                            <div class="position-relative form-group mb-25px xs-mb-0">
                                                                <input
                                                                    class="btn btn-large btn-switch-text btn-round-edge btn-transparent-light-gray d-table d-lg-inline-block lg-mb-15px md-mx-auto wizard-input-job"
                                                                    type="text" name="name" value="selbstständig"
                                                                    data-value="2" readonly />
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row justify-content-center">
                                                        <div class="col-md-6 xs-mb-30px">
                                                            <div class="position-relative form-group mb-25px xs-mb-0">
                                                                <input
                                                                    class="btn btn-large btn-switch-text btn-round-edge btn-transparent-light-gray d-table d-lg-inline-block lg-mb-15px md-mx-auto wizard-input-job"
                                                                    type="text" name="name" value="in Rente"
                                                                    data-value="3" readonly />
                                                            </div>
                                                        </div>

                                                    </div>
                                                    <div id="rentWarning" class="row justify-content-center d-none">
                                                        <div class="row justify-content-center">
                                                            <h4
                                                                class="d-inline-block fw-600 text-gray mb-50px ls-minus-1px">
                                                                Erhalten Sie einen Zuschuss zur Kranken - und
                                                                Pflegeversicherung?</h4>
                                                            <div class="col-md-6 xs-mb-30px">
                                                                <div
                                                                    class="position-relative form-group mb-25px xs-mb-0">
                                                                    <input
                                                                        class="btn btn-large btn-switch-text btn-round-edge btn-transparent-light-gray d-table d-lg-inline-block lg-mb-15px md-mx-auto wizard-input-subsidy"
                                                                        type="text" name="" value="Ja" data-value="1"
                                                                        readonly />
                                                                </div>
                                                            </div>
                                                            <div class="col-md-6 xs-mb-30px">
                                                                <div
                                                                    class="position-relative form-group mb-25px xs-mb-0">
                                                                    <input
                                                                        class="btn btn-large btn-switch-text btn-round-edge btn-transparent-light-gray d-table d-lg-inline-block lg-mb-15px md-mx-auto wizard-input-subsidy"
                                                                        type="text" name="" value="Nein" data-value="2"
                                                                        readonly />
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="container d-none" id="wizard-second-contact">
                                                        <div class="row justify-content-center">
                                                            <div class="col-lg-12">
                                                                <div class=" h-100">
                                                                    <div
                                                                        class="row align-items-center justify-content-center">
                                                                        <p
                                                                            class="text-dark-gray fs-20 fw-600 ls-minus-1px sm-w-100 xs-w-100">
                                                                            <i
                                                                                class="line-icon-Depression text-red icon-large me-10px"></i>
                                                                            Wir haben keine Möglichkeit, Sie in die
                                                                            gesetzliche Krankenversicherung zu
                                                                            wechseln.
                                                                        </p>
                                                                        <p
                                                                            class="text-base-color fs-20 fw-600 ls-minus-1px sm-w-100 xs-w-100">
                                                                            <i
                                                                                class="line-icon-Happy text-cornflower-blue icon-large me-10px"></i>
                                                                            Aber keine Sorge, es besteht die Option
                                                                            der Familienversicherung oder einer
                                                                            Tarifoptimierung.
                                                                        </p>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-12">
                                                            <div class="row mt-10 md-mt-8">
                                                                <!-- start features box item -->
                                                                <div class="col-6 icon-with-text-style-08 mb-25px">
                                                                    <div
                                                                        class="feature-box feature-box-left-icon-middle border-bottom pb-25px border-color-extra-medium-gray">
                                                                        <div class="feature-box-icon me-25px lh-0px">
                                                                            <i
                                                                                class="bi bi-telephone-outbound icon-medium text-dark-gray"></i>
                                                                        </div>
                                                                        <div class="feature-box-content">
                                                                            <span>Zögern Sie nicht, uns zu
                                                                                kontaktieren!</span>
                                                                            <span class="d-block fw-500 fs-18"><a
                                                                                    href="tel:004961964997010"
                                                                                    class="text-dark-gray">06196 499
                                                                                    7010</a></span>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <!-- end features box item -->
                                                                <!-- start features box item -->
                                                                <div class="col-6 icon-with-text-style-08 mb-25px">
                                                                    <div
                                                                        class="feature-box feature-box-left-icon-middle border-bottom pb-25px border-color-extra-medium-gray">
                                                                        <div class="feature-box-icon me-25px lh-0px">
                                                                            <i
                                                                                class="bi bi-envelope-open icon-medium text-dark-gray"></i>
                                                                        </div>
                                                                        <div class="feature-box-content">
                                                                            <span>Wie können wir Ihnen
                                                                                helfen?</span>
                                                                            <span class="d-block fw-500 fs-18"><a
                                                                                    href="mailto:info@mc-con.de"
                                                                                    class="text-dark-gray">info@mc-con.de</a></span>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <!-- end features box item -->
                                                            </div>
                                                        </div>

                                                    </div>
                                                    @elseif ($step == 3)
                                                    <h4 class="d-inline-block fw-600 text-gray mb-50px ls-minus-1px">
                                                        Sind Sie älter als 55 Jahre?</h4>
                                                    <div class="row justify-content-center">
                                                        <div class="col-md-6 xs-mb-30px">
                                                            <div class="position-relative form-group mb-25px xs-mb-0">
                                                                <input
                                                                    class="btn btn-large btn-switch-text btn-round-edge btn-transparent-light-gray d-table d-lg-inline-block lg-mb-15px md-mx-auto wizard-input-age"
                                                                    type="text" name="name" value="Ja" data-value="1"
                                                                    readonly />
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6 xs-mb-30px">
                                                            <div class="position-relative form-group mb-25px xs-mb-0">
                                                                <input
                                                                    class="btn btn-large btn-switch-text btn-round-edge btn-transparent-light-gray d-table d-lg-inline-block lg-mb-15px md-mx-auto wizard-input-age"
                                                                    type="text" name="name" value="Nein" data-value="2"
                                                                    readonly />
                                                            </div>
                                                        </div>
                                                    </div>
                                                    @elseif ($step == 4)
                                                    <h4 class="d-inline-block fw-600 text-gray mb-50px ls-minus-1px">
                                                        Wie hoch ist Ihr monatlisches Einkommen?</h4>
                                                    <div class="row justify-content-center">
                                                        <div class="col-md-6 xs-mb-30px">
                                                            <div class="position-relative form-group mb-25px xs-mb-0">
                                                                <input
                                                                    class="btn btn-large btn-switch-text btn-round-edge btn-transparent-light-gray d-table d-lg-inline-block lg-mb-15px md-mx-auto wizard-input-mothly-income"
                                                                    type="text" name="name" value="Unter 505€"
                                                                    data-value="1" readonly />
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6 xs-mb-30px">
                                                            <div class="position-relative form-group mb-25px xs-mb-0">
                                                                <input
                                                                    class="btn btn-large btn-switch-text btn-round-edge btn-transparent-light-gray d-table d-lg-inline-block lg-mb-15px md-mx-auto wizard-input-mothly-income"
                                                                    type="text" name="name" value="506€ – 1178€"
                                                                    data-value="2" readonly />
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row justify-content-center">
                                                        <div class="col-md-6 xs-mb-30px">
                                                            <div class="position-relative form-group mb-25px xs-mb-0">
                                                                <input
                                                                    class="btn btn-large btn-switch-text btn-round-edge btn-transparent-light-gray d-table d-lg-inline-block lg-mb-15px md-mx-auto wizard-input-mothly-income"
                                                                    type="text" name="name" value="1179€ – 5175€"
                                                                    data-value="3" readonly />
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6 xs-mb-30px">
                                                            <div class="position-relative form-group mb-25px xs-mb-0">
                                                                <input
                                                                    class="btn btn-large btn-switch-text btn-round-edge btn-transparent-light-gray d-table d-lg-inline-block lg-mb-15px md-mx-auto wizard-input-mothly-income"
                                                                    type="text" name="name" value="Über 5175€"
                                                                    data-value="4" readonly />
                                                            </div>
                                                        </div>
                                                    </div>
                                                    {{-- <input type="hidden" name="redirect" value=""> --}}
                                                    @elseif ($step == 5)
                                                    <h4 class="d-inline-block fw-600 text-gray mb-20px ls-minus-1px">
                                                        Sind Sie verheiratet oder haben Sie einen Lebenspartner nach dem
                                                        Lebenspartnerschaftsgesetz?</h4>
                                                    <p
                                                        class="d-inline-block fw-500 text-light-gray mb-20px ls-minus-1px">
                                                        Sollten Sie verwittwet sein, antworten Sie bitte mit Nein.</p>
                                                    <div class="row justify-content-center">
                                                        <div class="col-md-6 xs-mb-30px">
                                                            <div class="position-relative form-group mb-25px xs-mb-0">
                                                                <input
                                                                    class="btn btn-large btn-switch-text btn-round-edge btn-transparent-light-gray d-table d-lg-inline-block lg-mb-15px md-mx-auto wizard-input-status"
                                                                    type="text" name="name" value="Ja" data-value="1"
                                                                    readonly />
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6 xs-mb-30px">
                                                            <div class="position-relative form-group mb-25px xs-mb-0">
                                                                <input
                                                                    class="btn btn-large btn-switch-text btn-round-edge btn-transparent-light-gray d-table d-lg-inline-block lg-mb-15px md-mx-auto wizard-input-status"
                                                                    type="text" name="name" value="Nein" data-value="2"
                                                                    readonly />
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div id="wizard-partner-box"
                                                        class="row justify-content-center d-none">
                                                        <p
                                                            class="d-inline-block fw-500 text-light-gray mb-20px ls-minus-1px">
                                                            Einkommen des Partners</p>
                                                        <div class="col-md-6 xs-mb-30px">
                                                            <div class="position-relative form-group mb-25px xs-mb-0">
                                                                <input
                                                                    class="btn btn-large btn-switch-text btn-round-edge btn-transparent-light-gray d-table d-lg-inline-block lg-mb-15px md-mx-auto wizard-input-partner-income"
                                                                    type="text" name="name" value="bis 450€"
                                                                    data-value="3" readonly />
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6 xs-mb-30px">
                                                            <div class="position-relative form-group mb-25px xs-mb-0">
                                                                <input
                                                                    class="btn btn-large btn-switch-text btn-round-edge btn-transparent-light-gray d-table d-lg-inline-block lg-mb-15px md-mx-auto wizard-input-partner-income"
                                                                    type="text" name="name" value="451€ - 1.500€"
                                                                    data-value="4" readonly />
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6 xs-mb-30px">
                                                            <div class="position-relative form-group mb-25px xs-mb-0">
                                                                <input
                                                                    class="btn btn-large btn-switch-text btn-round-edge btn-transparent-light-gray d-table d-lg-inline-block lg-mb-15px md-mx-auto wizard-input-partner-income"
                                                                    type="text" name="name" value="1.501€ - 3.000€"
                                                                    data-value="3" readonly />
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6 xs-mb-30px">
                                                            <div class="position-relative form-group mb-25px xs-mb-0">
                                                                <input
                                                                    class="btn btn-large btn-switch-text btn-round-edge btn-transparent-light-gray d-table d-lg-inline-block lg-mb-15px md-mx-auto wizard-input-partner-income"
                                                                    type="text" name="name" value="über 3.000€"
                                                                    data-value="4" readonly />
                                                            </div>
                                                        </div>
                                                        <p
                                                            class="d-inline-block fw-500 text-light-gray mb-20px ls-minus-1px">
                                                            Krankenkasse Ihrer Partnerin / Ihres Partners</p>
                                                        <div class="col-md-12 xs-mb-30px">
                                                            <div class="position-relative form-group mb-25px xs-mb-0">
                                                                <input class="form-control lg-mb-15px wizard-input-firm"
                                                                    type="text" name="name" value="" data-value="4" />
                                                                <small class="form-text text-muted">0 von 100 max.
                                                                    Zeichenanzahl</small>
                                                            </div>
                                                        </div>
                                                        <p
                                                            class="d-inline-block fw-500 text-light-gray mb-20px ls-minus-1px">
                                                            Ist Ihr(e) Partner/in Beamter/Beamtin?</p>
                                                        <div class="col-md-6 xs-mb-30px">
                                                            <div class="position-relative form-group mb-25px xs-mb-0">
                                                                <input
                                                                    class="btn btn-large btn-switch-text btn-round-edge btn-transparent-light-gray d-table d-lg-inline-block lg-mb-15px md-mx-auto wizard-input-beamter"
                                                                    type="text" name="name" value="Ja" data-value="4"
                                                                    readonly />
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6 xs-mb-30px">
                                                            <div class="position-relative form-group mb-25px xs-mb-0">
                                                                <input
                                                                    class="btn btn-large btn-switch-text btn-round-edge btn-transparent-light-gray d-table d-lg-inline-block lg-mb-15px md-mx-auto wizard-input-beamter"
                                                                    type="text" name="name" value="Nein" data-value="4"
                                                                    readonly />
                                                            </div>
                                                        </div>
                                                    </div>
                                                    @elseif ($step == 6)
                                                    <h4 class="d-inline-block fw-600 text-gray mb-50px ls-minus-1px">
                                                        Bitte geben Sie Ihre Kontaktdaten ein</h4>
                                                    <div class="position-relative form-group mb-20px">
                                                        <span class="form-icon"><i class="bi bi-emoji-smile"></i></span>
                                                        <input type="text" name="name" class="form-control required"
                                                            placeholder="Geben Sie Ihren Namen ein*" />
                                                    </div>
                                                    <div class="position-relative form-group mb-20px">
                                                        <span class="form-icon"><i class="bi bi-emoji-smile"></i></span>
                                                        <input type="text" name="surname" class="form-control required"
                                                            placeholder="Geben Sie Ihren Nachnamen ein*" />
                                                    </div>
                                                    <div class="position-relative form-group mb-20px">
                                                        <span class="form-icon"><i class="bi bi-envelope"></i></span>
                                                        <input type="email" name="email" class="form-control required"
                                                            placeholder="Geben Sie Ihre E-Mail-Adresse ein*" />
                                                    </div>
                                                    <div class="position-relative form-group mb-20px">
                                                        <span class="form-icon"><i
                                                                class="bi bi-telephone-outbound"></i></span>
                                                        <input type="tel" name="phone" class="form-control"
                                                            placeholder="Geben Sie Ihre Telefonnummer ein" />
                                                    </div>
                                                    <div class="position-relative form-group form-textarea">
                                                        <span class="form-icon"><i
                                                                class="bi bi-chat-square-dots"></i></span>
                                                        <textarea placeholder="Ihre Nachricht" name="comment"
                                                            class="form-control" rows="3"></textarea>
                                                        {{-- <button
                                                            class="btn btn-medium btn-dark-gray btn-box-shadow btn-round-edge w-100 mt-20px submit"
                                                            type="submit">Send message</button> --}}
                                                        <div class="form-results mt-20px d-none"></div>
                                                    </div>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                        @endforeach
                                    </div>
                                    <div id="wizard-btn-box" class="step-buttons text-center">
                                        <button id="wizard-btn"
                                            class="btn btn-medium btn-dark-gray mb-2 btn-box-shadow btn-round-edge w-100 mt-20px d-none"
                                            type="submit">Nachricht senden</button>
                                        <div id="wizard-step-buttons">
                                            <a href="#" id="prevBtn" onclick="nextPrev(-1); return false;"
                                                class="btn btn-large btn-base-color d-table d-lg-inline-block lg-mb-15px md-mx-auto">
                                                <i class="fa-solid fa-arrow-left"></i> Zurück
                                            </a>
                                            <a href="#" id="nextBtn" onclick="nextPrev(1); return false;"
                                                class="btn btn-large btn-base-color fw-600 d-table d-lg-inline-block lg-mb-15px md-mx-auto">
                                                Next <i class="fa-solid fa-arrow-right"></i>
                                            </a>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>


                <!-- end contact popup -->
            </div>
        </div>
    </div>
</section>

<div>@if (session('status'))
    {{session('status')}}
@endif</div>

<!-- end modal pop-up section -->
@endsection




@push('scripts')
<script>
    var currentStep = 0;
showStep(currentStep);

document.addEventListener("DOMContentLoaded", function() {
    const inputPrice = document.querySelectorAll('.wizard-input-price');
    const inputJob = document.querySelectorAll('.wizard-input-job');
    const inputAge = document.querySelectorAll('.wizard-input-age');
    const inputStatus = document.querySelectorAll('.wizard-input-status');
    const inputPartnerIncome = document.querySelectorAll('.wizard-input-partner-income');
    const inputFirm = document.querySelectorAll('.wizard-input-firm');
    const inputBeamter = document.querySelectorAll('.wizard-input-beamter');
    const inputSubsidy = document.querySelectorAll('.wizard-input-subsidy');
    const inputMothlyIncome = document.querySelectorAll('.wizard-input-mothly-income');

    function handleInputClick(event, inputClass, hiddenFieldId) {
    const inputs = document.querySelectorAll(inputClass);
    inputs.forEach(i => i.classList.remove('wizard-input-selected'));
    event.target.classList.add('wizard-input-selected');
    const selectedValue = event.target.value;
    document.getElementById(hiddenFieldId).value = selectedValue;
    console.log("Seçilen değer: "+ hiddenFieldId+ "=" + selectedValue);

    // Eğer seçilen değer "in Rente" ise rentWarning divini görünür yap
    if (inputClass === '.wizard-input-job' && selectedValue === 'in Rente') {
        document.getElementById('rentWarning').classList.remove('d-none');
    } else if (inputClass === '.wizard-input-job') {
        document.getElementById('rentWarning').classList.add('d-none');
        document.getElementById('wizard-second-contact').classList.add('d-none');
        var buttons = document.getElementById('rentWarning').getElementsByTagName('input');
        for (var i = 0; i < buttons.length; i++) {
            buttons[i].classList.remove('wizard-input-selected');
        }
        document.getElementById('wizard-btn-box').classList.remove('d-none');
    }

    // Eğer seçilen değer "Nein" ise second-contact divini görünür yap
    if (inputClass === '.wizard-input-subsidy' && selectedValue === 'Ja') {
        document.getElementById('wizard-second-contact').classList.remove('d-none');
        document.getElementById('wizard-btn-box').classList.add('d-none');
    } else if (inputClass === '.wizard-input-subsidy') {
        document.getElementById('wizard-second-contact').classList.add('d-none');
        document.getElementById('wizard-btn-box').classList.remove('d-none');
    }
}


    inputPrice.forEach(input => {
        input.addEventListener('click', function(event) {
            handleInputClick(event, '.wizard-input-price', 'currentPaying');
        });
    });

    inputJob.forEach(input => {
        input.addEventListener('click', function(event) {
            handleInputClick(event, '.wizard-input-job', 'occupation');
        });
    });

    inputAge.forEach(input => {
        input.addEventListener('click', function(event) {
            handleInputClick(event, '.wizard-input-age', 'over55');
        });
    });

    inputSubsidy.forEach(input => {
        input.addEventListener('click', function(event) {
            handleInputClick(event, '.wizard-input-subsidy', 'subSidy');
        });
    });

    inputMothlyIncome.forEach(input => {
        input.addEventListener('click', function(event) {
            handleInputClick(event, '.wizard-input-mothly-income', 'incomeMonthly');
        });
    });

    inputStatus.forEach(input => {
        input.addEventListener('click', function(event) {
            inputStatus.forEach(i => i.classList.remove('wizard-input-selected'));
            event.target.classList.add('wizard-input-selected');
            const selectedValue = event.target.value;
            document.getElementById('livesWithPartner').value = selectedValue;
            // Eğer tıklanan butonun değeri "Ja" ise, wizard-partner-box'ı görünür yap
            if (selectedValue === "Ja") {
                document.getElementById('wizard-partner-box').classList.remove('d-none');
            } else {
                document.getElementById('wizard-partner-box').classList.add('d-none');
            }
            console.log("Seçilen değer: " + selectedValue);
        });
    });

    inputPartnerIncome.forEach(input => {
        input.addEventListener('click', function(event) {
            handleInputClick(event, '.wizard-input-partner-income', 'partnerIncome');
        });
    });

    inputFirm.forEach(input => {
        input.addEventListener('input', function(event) {
            const selectedValue = event.target.value;
            document.getElementById('partnerFirm').value = selectedValue;
            console.log("Seçilen firma: " + selectedValue);
        });
    });

    inputBeamter.forEach(input => {
        input.addEventListener('click', function(event) {
            handleInputClick(event, '.wizard-input-beamter', 'partnerBeamter');
        });
    });

});

function validateStep(stepIndex) {
    var stepInputs = document.querySelectorAll('.wizard-step')[stepIndex].querySelectorAll('input');
    var isValid = false;

    stepInputs.forEach(input => {
        if (input.classList.contains('wizard-input-selected')) {
            isValid = true;
        }
    });

    return isValid;
}


function showStep(n) {
    var steps = document.getElementsByClassName("wizard-step");
    var prevBtn = document.getElementById("prevBtn");
    var nextBtn = document.getElementById("nextBtn");

    // Gizle tüm adımlar
    for (var i = 0; i < steps.length; i++) {
        steps[i].classList.remove("active");
    }

    // Mevcut adımı göster
    steps[n].classList.add("active");

    // Tüm adım göstergelerinden aktif sınıfını kaldır
    const indicators = document.querySelectorAll('.wizard-input-box .process-step-icon');
    indicators.forEach((indicator, index) => {
        if (index < steps.length) {
            indicator.classList.remove('wizard-icon-box-style-1');
        }
    });

    // Mevcut adım göstergesine aktif sınıfını ekle
    document.getElementById(`step-indicator-${n + 1}`).classList.add('wizard-icon-box-style-1');

    // İlk adımda Previous butonunun sınıflarını kaldır
    if (n == 0) {
        prevBtn.classList.remove("d-table", "d-lg-inline-block");
        prevBtn.classList.add("d-none");
    } else {
        prevBtn.classList.add("d-table", "d-lg-inline-block");
        prevBtn.classList.remove("d-none");
    }

    // Son adımda Next butonunun metnini Submit olarak değiştir
    if (n == (steps.length - 1)) {
        const wizardBtn = document.getElementById('wizard-btn');
        wizardBtn.classList.remove('d-none');

        nextBtn.classList.remove("d-table", "d-lg-inline-block");
        nextBtn.classList.add('d-none');

        // prevBtn.classList.remove("d-table", "d-lg-inline-block");
        // prevBtn.classList.add("d-none");

    }else if(n == (steps.length - 2)){
        const wizardBtn = document.getElementById('wizard-btn');
        wizardBtn.classList.add('d-none');

        nextBtn.classList.add("d-table", "d-lg-inline-block");
        nextBtn.classList.remove('d-none');

        prevBtn.classList.add("d-table", "d-lg-inline-block");
        prevBtn.classList.remove("d-none");
    } else {
        nextBtn.innerHTML = 'Weiter <i class="fa-solid fa-arrow-right"></i>';
        nextBtn.setAttribute('onclick', "nextPrev(1);");
    }
}

function nextPrev(n) {
    if (n == 1 && !validateStep(currentStep)) {
        alert("Bitte wählen Sie eine Option aus.");
        return false;
    }
    var steps = document.getElementsByClassName("wizard-step");

    // Geçerli adımı gizle
    steps[currentStep].classList.remove("active");
    // Adım değerini güncelle
    currentStep = currentStep + n;
    // Yeni adımı göster
    showStep(currentStep);
}


</script>

<script>
    $(document).ready(function() {
        $('#wizardForm').on('submit', function(event) {
            event.preventDefault(); // Formun normal submit işlemini engeller

            $.ajax({
                url: '{{ route('contact.sendbeginning') }}',
                method: 'POST',
                data: $(this).serialize(), // Form verilerini alır ve diziye dönüştürür
                success: function(response) {
                    console.log(response);
                    if (response.status === 'Success') {
                        Swal.fire({
                            title: 'Erfolg',
                            text: response.message,
                            icon: 'success'
                        }).then(() => {
                            window.location.href = '{{ route('homepage') }}';
                        });
                    } else {
                        Swal.fire({
                            title: 'Error',
                            text: response.message,
                            icon: 'error'
                        });
                    }
                },
                error: function(xhr) {
                    Swal.fire({
                        title: 'Error',
                        text: 'Bir hata oluştu.',
                        icon: 'error'
                    });
                }
            });
        });
    });
</script>


@endpush