@extends('layouts.app', ['title' => 'Angbot | neue'])
@section('content')

    <!-- modals -->
    {{-- new Item --}}

    <!-- main content -->

    <div class="row">
        <div class="col">
            APP > {{ strtoupper(Request::segment(1)) }} > NEUE
        </div>

        <div class="col float-end text-end">

            {{-- <button type="button" class="btn btn-success shadow" data-bs-toggle="modal" data-bs-target="#new-item">
                <i class="bi bi-plus-square"></i> neue
            </button> --}}

        </div>
    </div>
    <br>
    <div class=" bg-white mb-5 container-fluid bg-white   border ">
        @if (session('msg'))
            <div class="alert alert-success alert-dismissible" id="success-alert">
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>

                <p class="text-center"> {{ session('msg') }}</p>

            </div>
            <script>
                $("#success-alert").fadeTo(2000, 500).slideUp(500, function() {
                    $("#success-alert").slideUp(1000);
                });
            </script>
        @endif
        <div class="container-fluid px-3 ">
            {{-- <div class="row border py-3">
                <div class="col">Anfragedatum: {{ date('d.m.Y', time()) }}</div>

            </div> --}}
            <br>
            <h5 class="text-center"> Neues Angebot</h5>

            <form action="{{ route('offer.direct.store') }}" method="POST" class="needs-validation" novalidate>
                @csrf

                <div class="row card">
                    <br>
                    <h4 class="text-secondary">Bauvorhabensdaten:</h4>



                    <div class="row px-3">
                        <p class="">Ist das Bauvorhaben bereits im System eingetragen?</p>
                        <div class="col">
                            <div class="row justify-content-center align-items-center g-2">
                                <div class="col">
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="pro_location"
                                            id="newlocationr1" checked onchange="project_location_change();" value="old">
                                        <label class="form-check-label" for="flexRadioDefault1">
                                            Ja, es ist im System eingetragen:
                                        </label>
                                    </div>
                                </div>

                            </div>

                            <div class="row justify-content-center align-items-center g-2" id="old_l">
                                <div class="col-12">
                                    @if (!empty($project_location))
                                        <div class="mt-3">
                                            <select class="  select-search" id="bauvorhaben" name="bauvorhaben"
                                                placeholder="bitte auswählen..." data-live-search="true">

                                                <option value="" selected hidden class="text-danger">bitte
                                                    auswählen...</option>
                                                @foreach ($project_location->sortByDesc('id') as $itemc)
                                                    <option value="{{ $itemc->id }}">
                                                        {{ $itemc->name }}
                                                    </option>
                                                @endforeach

                                            </select>
                                        </div>
                                    @endif
                                </div>


                            </div>

                        </div>
                        <div class="col">

                            <div class="form-check col">
                                <input class="form-check-input" type="radio" name="pro_location" id="newlocationr2"
                                    value="new">
                                <label class="form-check-label" for="newlocationr2" onchange="project_location_change();">
                                    Nein, neues Bauvorhaben erstellen:
                                </label>
                            </div>

                            <div class="row justify-content-center align-items-center g-2" id="new_l">
                                <div class="col-12">
                                    Bauvorhaben - Name:
                                    <div class="col form-group">
                                        <input type="text" name="bauvorhaben_name" class="form-control form-control-sm"
                                            id="bauvorhaben_name" placeholder="Name, Nummer" />
                                    </div>
                                </div>
                                <div class="col-12">
                                    Bauvorhaben - Adresse:
                                    <div class="col form-group">
                                        <input type="text" name="bauvorhaben_adresse"
                                            class="form-control form-control-sm" id="bauvorhaben_adresse"
                                            placeholder="Musterstrasse 1, 12345 Musterstadt" />
                                    </div>
                                </div>

                            </div>
                        </div>

                    </div>
                    <div class="row py-3">



                    </div>


                </div>
                <br>
                <div class="row  py-3  border rounded">

                    <div class="col-6">

                        <label class="form-label">Angebot-Title</label>
                        <div class="col ">
                            <input type="text" name="project_title" class="form-control form-control-sm"
                                id="project_title" placeholder="Title, Name" required />
                        </div>
                    </div>
                    <div class="col">

                        <label class="form-label"> Kategorie </label>
                        <div class="col">
                            @if (!empty($project_category))
                                <select class="form-select form-select-sm" id="projektskategorie " name="projektskategorie"
                                    required>
                                    @foreach ($project_category as $item)
                                        <option value="{{ $item->project_category_id }}">
                                            {{ $item->name }}
                                        </option>
                                    @endforeach
                                </select>
                            @endif
                        </div>
                    </div>
                    <div class="col">

                        <label class="form-label"> Anfrageursprung </label>
                        <div class="col">
                            @if (!empty($request_origin))
                                <select class="form-select form-select-sm" id="anfrageursprung" name="anfrageursprung"
                                    required>
                                    @foreach ($request_origin as $item)
                                        <option value="{{ $item->request_origin_id }}">
                                            {{ $item->name }}
                                        </option>
                                    @endforeach
                                </select>
                            @endif
                        </div>
                    </div>
                </div>
                <br>
                <div class="row card py-3">
                    <div class="row">




                        {{-- <div class="col ">
                            <label class="form-label">Kunde/Firma: </label>
                            @if (!empty($customers))
                                <div>
                                    <select class=" select-search " id="kunde" name="kunde"
                                        placeholder="bitte auswählen..." required>
                                        <option value="0" selected>
                                            ** Keine Info
                                        </option>

                                        @foreach ($customers as $itemc)
                                            <option value="{{ $itemc->customer_id }}">
                                                {{ $itemc->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            @endif
                        </div>
                        <div class="col">
                            <label class="form-label">Planner: </label>
                            @if (!empty($customers))
                                <select class="select-search " id="planner" name="planner"
                                    placeholder="bitte auswählen..." required>
                                    <option value="0">
                                        ** Keine Info
                                    </option>

                                    @foreach ($customers as $itemc)
                                        <option value="{{ $itemc->customer_id }}">
                                            {{ $itemc->name }}
                                        </option>
                                    @endforeach
                                </select>
                            @endif

                        </div> --}}
                    </div>

                    <div class="row py-3">
                        <div class="col ">
                            <label class="form-label">Kunde/Firma: </label>
                            @if (!empty($customers))
                                <div>
                                    <select class=" select-search " id="kunde" name="kunde"
                                        placeholder="bitte auswählen..." onchange="get_customer_persons(this);" required>

                                        <option value="0" selected>
                                            ** Keine Info
                                        </option>
                                        @foreach ($customers as $itemc)
                                            <option value="{{ $itemc->customer_id }}">
                                                {{ $itemc->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            @endif
                        </div>
                        <div class="col-2 ">
                            <label class="form-label">Ansprechpartner: </label>
                            @if (!empty($customers))
                                <div>
                                    <select class="form-select " id="kundeperson" name="kundeperson"
                                        placeholder="bitte auswählen...">
                                        <option value="0" selected>
                                            ** Keine
                                        </option>


                                    </select>
                                </div>
                            @endif
                        </div>
                        <div class="col">
                            <label class="form-label">Planer: </label>
                            @if (!empty($customers))
                                <select class="select-search " id="planner" name="planner"
                                    placeholder="bitte auswählen..." onchange="get_planner_persons(this);">

                                    <option value="0" selected>
                                        ** Keine Info
                                    </option>
                                    @foreach ($customers as $itemc)
                                        <option value="{{ $itemc->customer_id }}">
                                            {{ $itemc->name }}
                                        </option>
                                    @endforeach
                                </select>
                            @endif

                        </div>
                        <div class="col-2">
                            <label class="form-label">Ansprechpartner: </label>
                            @if (!empty($customers))
                                <select class=" form-select" id="plannerperson" name="plannerperson"
                                    placeholder="bitte auswählen..." required>

                                    <option value="0" selected>
                                        ** Keine
                                    </option>
                                    @foreach ($customers as $itemc)
                                    @endforeach
                                </select>
                            @endif

                        </div>
                        {{-- <div class="col">
                            Anfrageursprung:
                            <div class="col">
                                @if (!empty($request_origin))
                                    <select class="form-select " id="anfrageursprung" name="anfrageursprung" required>
                                        @foreach ($request_origin as $item)
                                            <option value="{{ $item->request_origin_id }}">
                                                {{ $item->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                @endif
                            </div>
                        </div>
                        <div class="col">
                            Produkte Art:
                            <div class="col">
                                @if (!empty($productstype))
                                    <select class="form-select " id="produkte_art" name="produkte_art" required>
                                        @foreach ($productstype as $item)
                                            <option value="{{ $item->productstype_id }}">
                                                {{ $item->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                @endif
                            </div>
                        </div>
                        <div class="col">
                            Kategorie:
                            <div class="col">
                                @if (!empty($project_category))
                                    <select class="form-select " id="projektskategorie " name="projektskategorie" required>
                                        @foreach ($project_category as $item)
                                            <option value="{{ $item->project_category_id }}">
                                                {{ $item->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                @endif
                            </div>
                        </div> --}}
                    </div>
                </div>
                <br>
                <div class="row card pt-3">
                    <h4>Projektdaten</h4>
                    {{-- <div class="row py-3">

                        <div class="col">
                            Bauvorhaben - Name:
                            <div class="col form-group">
                                <input type="text" name="bauvorhaben_name" class="form-control form-control-sm"
                                    id="bauvorhaben_name" placeholder="Name, Nummer" required />
                            </div>
                        </div>
                        <div class="col">
                            Bauvorhaben - Adresse:
                            <div class="col form-group">
                                <input type="text" name="bauvorhaben_adresse" class="form-control form-control-sm"
                                    id="bauvorhaben_adresse" placeholder="asdasdasd-Str. 210 , 44801 Stadt" required />
                            </div>
                        </div>

                    </div> --}}
                    <div class="row py-3">
                        {{-- <div class="col-1">
                            Priorität:
                            <div class="col form-group mt-1">
                                <input type="text" name="priority" class="form-control form-control-sm"
                                    id="priority" placeholder="Nr./leer" />
                            </div>
                        </div> --}}
                        <div class="col">

                            geplanter Baubeginn
                            <div class="col form-group mt-1">
                                <input type="date" name="bauzeitbeginn" class="form-control form-control-sm"
                                    id="bauzeitbeginn" placeholder="" />
                            </div>
                        </div>
                        <div class="col">
                            geplantes Bauende
                            <div class="col form-group mt-1">
                                <input type="date" name="bauzeitende" class="form-control form-control-sm"
                                    id="bauzeitende" placeholder="" />
                            </div>
                        </div>
                        <div class="col">
                            * Angebot - Gültig bis
                            <div class="col form-group mt-1">
                                <input type="date" name="projekt_deadline" class="form-control form-control-sm"
                                    id="projekt_deadline" required />
                            </div>
                        </div>

                        <script>
                            function getValidDateOneMonthFromToday() {
                                const today = new Date();
                                const result = new Date(today);
                                result.setMonth(result.getMonth() + 1);

                                // Wenn es Samstag (6) oder Sonntag (0) ist, auf nächsten Montag schieben
                                const dayOfWeek = result.getDay();
                                if (dayOfWeek === 6) {
                                    result.setDate(result.getDate() + 2); // Samstag → Montag
                                } else if (dayOfWeek === 0) {
                                    result.setDate(result.getDate() + 1); // Sonntag → Montag
                                }

                                return result.toISOString().split('T')[0]; // YYYY-MM-DD
                            }

                            document.addEventListener("DOMContentLoaded", function() {
                                const deadlineInput = document.getElementById("projekt_deadline");
                                deadlineInput.value = getValidDateOneMonthFromToday();
                            });
                        </script>

                    </div>

                    <hr>



                    <div class="row py-3">
                        <div class="col">


                        </div>
                        {{-- <div id="product-container">
                            <div class="row ">
                                <div class="col">
                                    <h4>Spielgeräte </h4>
                                </div>
                                <div class="col"></div>
                                <div class="col text-end"><button type="button" id="add-product"
                                        class="btn btn-success">+
                                        Produkt hinzufügen</button></div>
                            </div>
                            <br>
                            <div class="product-row row mb-2">
                                <div class="col">
                                    <select name="products[0][product_id]" class="form-control">
                                        @foreach ($products as $product)
                                            <option value="{{ $product->id }}">{{ $product->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col">
                                    <input type="number" name="products[0][quantity]" class="form-control"
                                        placeholder="Menge">
                                </div>
                                <div class="col">
                                    <input type="number" name="products[0][price]" step="0.01" class="form-control"
                                        placeholder="Preis">
                                </div>
                                <div class="col">
                                    <button type="button" class="btn btn-danger remove-row">−</button>
                                </div>
                            </div>
                        </div> --}}
                        <div class="row ">
                            <div class="col">
                                <h4>Spielgeräte </h4>
                            </div>
                            <div class="col"></div>
                            <div class="col text-end"><button type="button" id="add-product"
                                    class="btn btn-success mb-3">+ Produkt hinzufügen</button></div>
                        </div>
                        <div id="product-container2" class="px-5">
                            <div class="product-row1 row mb-2">
                                <div class="col-auto d-flex align-items-center">
                                    {{-- <button type="button" class="btn btn-sm btn-danger remove-row me-2"> - </button> --}}
                                    <span class="me-2"></span>
                                    <span class="product-index badge bg-secondary">Pos.</span>
                                </div>
                                <div class="col-4">
                                    <span class="product-index badge bg-secondary">Spielgerät</span>
                                </div>
                                <div class="col">
                                    <span class="product-index badge bg-secondary">Menge</span>
                                </div>
                                <div class="col">
                                    <span class="product-index badge bg-secondary">Einzelpreis</span>
                                </div>
                                <div class="col">
                                    <span class="product-index badge bg-secondary">Gesamtpreis</span>
                                </div>

                            </div>
                        </div>
                        <div id="product-container" class="px-5">

                            {{-- <div class="product-row1 row mb-2">
                                <div class="col-auto d-flex align-items-center">
                                    <span class="product-index badge bg-secondary" data-index="0">1</span>
                                </div>
                                <div class="col-4">
                                    <select class="form-control product-select" name="products[0][product_id]"
                                        data-index="0">
                                        <option value="">Produkt wählen...</option>
                                        @foreach ($products as $product)
                                            <option value="{{ $product->id }}" data-price="{{ $product->net_price }}">
                                                {{ $product->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col">
                                    <input type="number" name="products[0][quantity]" class="form-control quantity"
                                        data-index="0" placeholder="Menge" value="1">
                                </div>
                                <div class="col">
                                    <input type="text" name="products[0][net_price]"
                                        class="form-control price text-end" data-index="0" readonly>
                                </div>
                                <div class="col">
                                    <input type="text" class="form-control total text-end" data-index="0" readonly>
                                </div>
                                <div class="col">
                                    <button type="button" class="btn btn-danger remove-row">−</button>
                                </div>
                            </div> --}}

                        </div>


                        <hr>
                        <div class="row justify-content-center align-items-center g-2">
                            <div class="col"></div>
                            <div class="col"></div>
                            <div class="col text-end">
                                <h5>Spielgeräte-Summe(Netto): <span id="grand-total">0.00</span> €</h5>
                            </div>
                        </div>



                    </div>
                    <hr>
                    <div class="row py-3">
                        <div class="col-8 border-end">
                            <div class="row ">
                                <div class="col-2 ">
                                    <h5>Budget (netto) in €:</h5>
                                    <input type="number" name="budget" class="form-control form-control-sm"
                                        id="budget" placeholder="0 €" step="0.01" readonly />
                                </div>
                                {{--  <div class="col-6">
                                </div> --}}
                                <div class="col-2 ">
                                    <label>Steuer %:</label>
                                    <input type="number" name="tax" class="form-control form-control-sm"
                                        id="tax" placeholder="19 %" step="0.01" value="19"
                                        onkeyup="calc()" />
                                </div>
                                <div class="col">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="additional_delivery_excluded"
                                            name="additional_delivery_excluded" onchange="fun_lieferung()" />
                                        <label class="form-check-label" for="additional_delivery_excluded">Lieferung
                                            €</label>
                                        <input type="number" name="additional_delivery_cost"
                                            class="form-control form-control-sm" id="additional_delivery_cost"
                                            placeholder="€" style="display: none" onkeyup="calc()" value="0"
                                            step="0.01" />
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="additional_mounting_excluded"
                                            name="additional_mounting_excluded" onchange="fun_montage()" />
                                        <label class="form-check-label" for="additional_mounting_excluded">Montage €
                                        </label>
                                        <input type="number" name="additional_mounting_cost"
                                            class="form-control form-control-sm" id="additional_mounting_cost"
                                            placeholder="€" style="display: none" value="0" onkeyup="calc()"
                                            step="0.01" />
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="additional_gala_excluded"
                                            name="additional_gala_excluded" onchange="fun_gala()" />
                                        <label class="form-check-label"
                                            for="additional_gala_excluded">Sicherheitabnahme</label>
                                        <input type="number" name="additional_gala_cost"
                                            class="form-control form-control-sm" id="additional_gala_cost"
                                            placeholder="€" style="display: none" onkeyup="calc()" value="0"
                                            step="0.01" />
                                    </div>
                                </div>
                                <div class="col-2 d-none">
                                    <label>
                                        Brutto in €: </label>
                                    <input type="number" class="form-control form-control-sm" id="brutto"
                                        name="brutto" value="0" readonly>

                                </div>
                            </div>
                            <br>
                            {{-- <div class="rowss ">

                                <div class="row px-4 py-3 border">

                                    <div class="col-2">
                                        <h5> Inklusive Leistungen</h5>
                                    </div>
                                    <div class="col">

                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" id="mit_lieferung"
                                                name="mit_lieferung" onchange="fun_lieferung()" />
                                            <label class="form-check-label">
                                                Lieferung €
                                            </label>
                                            <input type="number" name="lieferung" class="form-control form-control-sm"
                                                id="lieferung" placeholder="€" style="display: none" onkeyup="calc()"
                                                value="0" step="0.01" />
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" id="mit_montage"
                                                name="mit_montage" onchange="fun_montage()" />
                                            <label class="form-check-label">
                                                Montage %
                                            </label>
                                            <input type="number" name="montage" class="form-control form-control-sm"
                                                id="montage" placeholder="%" style="display: none" value="0"
                                                onkeyup="calc()" step="0.01" />
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" id="mit_gala"
                                                name="mit_gala" onchange="fun_gala()" />
                                            <label class="form-check-label">
                                                Gala €</label><input type="number" name="gala"
                                                class="form-control form-control-sm" id="gala" placeholder="€"
                                                style="display: none" onkeyup="calc()" value="0" step="0.01" />
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                für Entwurf Verfügbar noch €: </label>
                                            <input type="number" class="form-control form-control-sm" id="budget_rest"
                                                name="budget_rest" value="0" readonly>
                                           
                                        </div>
                                    </div>
                                </div>
                            </div> --}}
                            {{-- <div class="rowss">
                                <div class="row px-4 py-3 border">
                                    <div class="col-2">
                                        <h5>Zusätzliche </h5>
                                    </div>
                                    <div class="col">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox"
                                                id="additional_delivery_excluded" name="additional_delivery_excluded"
                                                onchange="fun_lieferung()" />
                                            <label class="form-check-label" for="additional_delivery_excluded">Lieferung
                                                €</label>
                                            <input type="number" name="additional_delivery_cost"
                                                class="form-control form-control-sm" id="additional_delivery_cost"
                                                placeholder="€" style="display: none" onkeyup="calc()" value="0"
                                                step="0.01" />
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox"
                                                id="additional_mounting_excluded" name="additional_mounting_excluded"
                                                onchange="fun_montage()" />
                                            <label class="form-check-label" for="additional_mounting_excluded">Montage €
                                            </label>
                                            <input type="number" name="additional_mounting_cost"
                                                class="form-control form-control-sm" id="additional_mounting_cost"
                                                placeholder="€" style="display: none" value="0" onkeyup="calc()"
                                                step="0.01" />
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" id="additional_gala_excluded"
                                                name="additional_gala_excluded" onchange="fun_gala()" />
                                            <label class="form-check-label"
                                                for="additional_gala_excluded">Sicherheitabnahme</label>
                                            <input type="number" name="additional_gala_cost"
                                                class="form-control form-control-sm" id="additional_gala_cost"
                                                placeholder="€" style="display: none" onkeyup="calc()" value="0"
                                                step="0.01" />
                                        </div>
                                    </div>
                                    <div class="col">
                                    </div>

                                </div>
                            </div> --}}
                        </div>
                        <div class="col-4">
                            <div class="row justify-content-end align-items-end ">
                                <h5 class="col">Angebotssumme netto </h5>
                                <div class="col  text-end">
                                    <span id="snetto" class="h4"></span> €
                                </div>

                            </div>
                            <div class="row justify-content-end align-items-end ">
                                <h5 class="col ">zzgl. <span id="ptax"></span>% MwSt.
                                </h5>
                                <div class="col text-end">
                                    <span id="stax" class="h4"></span> €
                                </div>

                            </div>
                            <hr>
                            <div class="row justify-content-end align-items-end ">
                                <h5 class="col">Angebotssumme brutto </h5>
                                <div class="col  text-end">
                                    <span id="sbrutto" class="h4"></span> €
                                </div>

                            </div>

                        </div>
                    </div>

                    <hr>
                    <div class="row py-3">
                        <div class="col">
                            <label for="exampleFormControlTextarea1">Projektinformationen: </label>
                            <textarea class="form-control" id="projekt_infos" name="projekt_infos" rows="3"></textarea>
                        </div>
                    </div>
                    <hr>
                    <div class="row py-3">

                        <div class="col">
                            <label for="">Budget - Hinweise: </label>
                            <textarea class="form-control" id="budget_hinweise" name="budget_hinweise" rows="3"></textarea>
                        </div>
                    </div>
                    <hr>

                    {{-- <div class="row py-3 w-100">
                        <div class="col">
                            <label for="">AGB & Zahlungskonditionen </label>
                            <textarea class="form-control ckeditor col" id="agb" name="agb" rows="10">                asdsad 
                            <br>        </textarea>
                        </div>

                    </div> --}}
                    <div class="row py-3 w-100">
                        <div class="col-md-12 mb-3">
                            <label for="template_select">AGB-Vorlage wählen</label>
                            <select id="template_select" class="form-select">
                                <option value="">-- Vorlage wählen --</option>
                                @foreach ($terms_templates as $template)
                                    <option value="{{ $template->id }}" @selected($template->is_default)>
                                        {{ $template->title }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-12">
                            <label for="agb">AGB & Zahlungskonditionen</label>
                            <textarea class="form-control ckeditor" id="agb" name="agb" rows="10"></textarea>
                        </div>
                    </div>

                    <hr>
                    <div class="row py-3">
                        <div class="col">
                            Fläche in m²/Pläne:
                            <textarea class="form-control" id="flaeche_beschreibung" name="flaeche_beschreibung" rows="3"></textarea>

                        </div>
                    </div>
                    <hr>
                    <div class="row  py-3">
                        <div class="col">
                            <h5> Material:</h5>
                        </div>
                        <div class="col">
                            <div class="form-check ">
                                <input class="form-check-input" type="checkbox" id="material_holz"
                                    name="material_holz" />
                                <label class="form-check-label">
                                    Holz
                                </label>
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="material_stahl"
                                    name="material_stahl" />
                                <label class="form-check-label">
                                    Stahl
                                </label>
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="material_netz"
                                    name="material_netz" />
                                <label class="form-check-label">
                                    Netz
                                </label>
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="material_naturfelsen"
                                    name="material_naturfelsen" />
                                <label class="form-check-label">
                                    Naturfelsen
                                </label>
                            </div>
                        </div>

                    </div>

                    <div class="row  py-3 ">
                        <div class="col-3">
                            <div class="row">
                                <div class="col">
                                    <h5 class="form-check-label">
                                        Zukaufteile:
                                    </h5>
                                </div>
                                <div class="col">
                                    <div class="form-check form-switch ">
                                        <input class="form-check-input" type="checkbox" id="mit_zukaufteile"
                                            name="mit_zukaufteile" onchange="myFunction()" />
                                    </div>
                                </div>
                            </div>


                        </div>
                        <div class="col-9">
                            <textarea class="form-control " id="zukaufteile" name="zukaufteile" rows="3" style="display: none"></textarea>

                        </div>

                    </div>
                    <hr>
                    <div class="row py-3">
                        <div class="col">

                            Zielgruppe:
                            <textarea class="form-control" id="zielgruppe" name="zielgruppe" rows="3"></textarea>
                            <br>
                            Idee Kunde/Planer:
                            <textarea class="form-control" id="idee_planer" name="idee_planer" rows="3"></textarea>
                        </div>
                    </div>
                    <hr>
                    <div class="row py-3">
                        <div class="col-2">
                            Anzahl der Bereiche:
                        </div>
                        <div class="col-2">
                            <select class="form-select form-select-sm" name="bereichen_anzahl" id="bereichen_anzahl">
                                <option value="0" selected>0</option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                                <option value="6">6</option>
                                <option value="7">7</option>
                                <option value="8">8</option>
                                <option value="9">9</option>
                                <option value="10">10</option>
                            </select>
                        </div>
                        <div class="col">
                        </div>
                        <div class="col">
                        </div>
                        <div class="col">
                        </div>
                    </div>

                    <div id="areas">

                    </div>
                    <hr>

                    <div class="row py-3">
                        <div class="col">
                            <label for="exampleFormControlTextarea1">Besonderheiten: </label>
                            <textarea class="form-control" id="besonderheiten" name="besonderheiten" rows="3"></textarea>
                        </div>
                    </div>
                    <hr>
                    <div class="row px-4 py-3">
                        Planungsgrundlage:
                        <div class="col">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="planungsgrundlage_dwg"
                                    name="planungsgrundlage_dwg" />
                                <label class="form-check-label">
                                    DWG
                                </label>
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="planungsgrundlage_pdf"
                                    name="planungsgrundlage_pdf" />
                                <label class="form-check-label">
                                    PDF
                                </label>
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="planungsgrundlage_fotos"
                                    name="planungsgrundlage_fotos" />
                                <label class="form-check-label">
                                    Fotos
                                </label>
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="planungsgrundlage_zeichnung"
                                    name="planungsgrundlage_zeichnung" />
                                <label class="form-check-label">
                                    Zeichnungen
                                </label>
                            </div>
                        </div>
                    </div>
                </div>

                <br>
                <div class="row py-4">
                    <div class="col float-start">
                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <ul>
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                    </div>
                    <div class="col float-end">
                        <button type="submit" class="btn btn-success float-end"><i class="bi bi-plus-square"></i>
                            Speichern</button>
                    </div>

                </div>

            </form>

        </div>




    </div>

    <script type="text/javascript">
        $(document).ready(function() {

            project_location_change();

            $('#newlocationr1').click(function() {
                if ($(this).is(':checked')) {
                    project_location_change();
                }
            });

            $('#newlocationr2').click(function() {
                if ($(this).is(':checked')) {
                    project_location_change();
                }
            });
        });

        function project_location_change() {
            if (document.getElementById('newlocationr1').checked) {
                document.getElementById("old_l").style.display = "block";

                document.getElementById("bauvorhaben").required = true;
                // document.getElementById("bauvorhaben-selectized").required = true;

                document.getElementById("bauvorhaben_name").required = false;
                document.getElementById("bauvorhaben_adresse").required = false;
                document.getElementById("new_l").style.display = "none";


            } else {
                document.getElementById("bauvorhaben").required = false;
                document.getElementById("bauvorhaben-selectized").required = false;
                document.getElementById("old_l").style.display = "none";



                document.getElementById("bauvorhaben_name").required = true;
                document.getElementById("bauvorhaben_adresse").required = true;
                document.getElementById("new_l").style.display = "block";


            }
        }
        // function editItem(id) {
        //     $.get('/crm/kunden/' + id, function(item) {
        //         $("#id-edit").val(item.customer_id);
        //         $("#customer_category_id-edit").val(item.fk_customer_category_id);
        //         $("#name-edit").val(item.name);
        //         $("#address-edit").val(item.address);
        //         $("#tel-edit").val(item.tel);
        //         $("#mobile-edit").val(item.mobile);
        //         $("#fax-edit").val(item.fax);
        //         $("#email-edit").val(item.email);
        //         $("#website-edit").val(item.website);
        //         $("#edit-modal").modal('toggle');
        //     })
        // }
        // $(document).ready(function() {
        //     $('#flexCheckDefault1').on('switch-change', function(e, data) {

        //         var $el = $(data.el),
        //             value = data.value;
        //         if (value) { //this is true if the switch is on
        //             $(this).next('.name-number-form').show();
        //         } else {
        //             $(this).next('.name-number-form').hide();
        //         }
        //     });
        // });

        function myFunction() {
            var x = document.getElementById("zukaufteile");
            if (document.getElementById('mit_zukaufteile').checked) {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
        }

        // Generic function to toggle visibility of input fields based on checkbox status
        function toggleInputField(checkboxId, inputId) {
            var x = document.getElementById(inputId);
            if (document.getElementById(checkboxId).checked) {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
            calc(); // Recalculate when a checkbox is toggled
        }

        // Function to handle Inklusive Leistungen (delivery, montage, gala) visibility
        function fun_lieferung() {
            // toggleInputField("mit_lieferung", "lieferung");
            toggleInputField("additional_delivery_excluded", "additional_delivery_cost");
        }

        // Function to handle Inklusive Leistungen (montage) visibility
        function fun_montage() {
            // toggleInputField("mit_montage", "montage");
            toggleInputField("additional_mounting_excluded", "additional_mounting_cost");
        }

        // Function to handle Inklusive Leistungen (gala) visibility
        function fun_gala() {
            // toggleInputField("mit_gala", "gala");
            toggleInputField("additional_gala_excluded", "additional_gala_cost");
        }


        // const source = document.getElementById('budget');
        // source.addEventListener('input', calc);

        function calc() {
            var bg = parseFloat(document.getElementById('budget').value);
            var tax = parseFloat(document.getElementById('tax').value) / 100;
            // var r = 0;
            var total = 0;
            // r = r + parseFloat(bg);
            // if (document.getElementById('mit_lieferung').checked) {
            //     r = r - parseFloat(document.getElementById('lieferung').value);

            // }
            // if (document.getElementById('mit_montage').checked) {
            //     r = r - ((parseFloat(document.getElementById('montage').value) / 100) * parseFloat(document.getElementById(
            //         'budget').value));

            // }
            // if (document.getElementById('mit_gala').checked) {
            //     r = r - parseFloat(document.getElementById('gala').value);
            // }

            // Add delivery cost if applicable
            if (document.getElementById('additional_delivery_excluded').checked) {
                total += parseFloat(document.getElementById('additional_delivery_cost').value);
            }

            // Add mounting cost if applicable
            if (document.getElementById('additional_mounting_excluded').checked) {
                // total += (parseFloat(document.getElementById('additional_mounting_cost').value) / 100) * bg;
                total += parseFloat(document.getElementById('additional_mounting_cost').value);
            }

            // Add gala cost if applicable
            if (document.getElementById('additional_gala_excluded').checked) {
                total += parseFloat(document.getElementById('additional_gala_cost').value);
            }
            // document.getElementById('rest').setAttribute('value', r + ' €');
            // document.getElementById('rest').innerHTML = " " + r + " €";
            // document.getElementById("budget_rest").value = r;
            // document.getElementById("budget_rest").setAttribute('value', r);

            // document.getElementById('brutto').setAttribute('value', (parseFloat(document.getElementById('budget').value) *
            //     parseFloat(document.getElementById('tax').value / 100)) + parseFloat(document.getElementById(
            //         'budget')
            //     .value));
            // Calculate and update brutto value (gross amount)
            total = total + bg;
            var brutto = total + (total * tax); // Budget + Tax

            // document.getElementById('budget').value = total;
            document.getElementById('brutto').value = brutto.toFixed(2);
            document.getElementById('snetto').innerText = formatPriceDE(total);
            document.getElementById('ptax').innerText = document.getElementById('tax').value;
            document.getElementById('stax').innerText = formatPriceDE(total * tax);
            document.getElementById('sbrutto').innerText = formatPriceDE(brutto);

        }
        // var areas = document.getElementById('areas');

        document.getElementById('bereichen_anzahl').addEventListener('change', function(e) {
            var n = this.value;
            var divs = "";
            if (n == 0) {
                document.getElementById('areas').innerHTML = " ";
            } else {
                for (var i = 1; i <= n; i++) {
                    divs = divs + "      <div class=\"row my-3 \">   ";
                    divs = divs + "           <div class=\"col-3 form-group\">   ";
                    divs = divs + "              <label > Bereich " + i + " - Name:</label>   ";
                    divs = divs +
                        "              <input class=\"form-control\" type=\"text\" name=\"bereich_" + i +
                        "_name\" id=\"bereich_" + i + "_name\">   ";
                    divs = divs + "           </div>   ";
                    divs = divs + "           <div class=\"col-9 form-group\">   ";
                    divs = divs + "              <label >Bereich " + i + " - Beschreibung:</label>   ";
                    divs = divs +
                        "              <textarea class=\"form-control\" id=\"bereich_" + i +
                        "_desc\" name=\"bereich_" +
                        i + "_desc\" rows=\"3\"></textarea>   ";
                    divs = divs + "           </div>   ";
                    divs = divs + "      </div>   ";



                }
            }
            document.getElementById('areas').innerHTML = divs;

        });

        function get_customer_persons(obj) {



            document.getElementById("kundeperson").innerHTML = "";
            var option = "<option value=\"0\"> Alle</option>";
            $("#kundeperson").append(option);


            $.ajax({

                url: '/crm/kunden-kontakt/alle/' + obj.value,

                type: 'GET',

                dataType: 'json',

                success: function(data) {

                    i = 0;
                    data.forEach(function(item, index) {

                        var option = "<option value='" + item.employee_id + "'>" + item.name +
                            "</option>";

                        $("#kundeperson").append(option);

                        i = i + 1;

                    });
                    if (i == 0) {
                        document.getElementById("kundeperson").innerHTML = "";
                        var option = "<option value='0'> keine</option>";
                        $("#kundeperson").append(option);
                    }


                },
                error: function() {
                    alert('data');
                }

            });

        }

        function get_planner_persons(obj) {
            document.getElementById("plannerperson").innerHTML = "";
            var option = "<option value=\"0\"> Alle</option>";
            $("#plannerperson").append(option);


            $.ajax({

                url: '/crm/kunden-kontakt/alle/' + obj.value,

                type: 'GET',

                dataType: 'json',

                success: function(data) {

                    i = 0;
                    data.forEach(function(item, index) {

                        var option = "<option value='" + item.employee_id + "'>" + item.name +
                            "</option>";

                        $("#plannerperson").append(option);

                        i = i + 1;

                    });
                    if (i == 0) {
                        document.getElementById("plannerperson").innerHTML = "";
                        var option = "<option value='0'> keine</option>";
                        $("#plannerperson").append(option);
                    }


                },
                error: function() {
                    alert('data');
                }

            });



        }
    </script>

    <script>
        function updateProductIndexes() {
            $('.product-row').each(function(index) {
                $(this).find('.product-index').text(index + 1);
            });
        }

        function formatPriceDE(num) {
            if (isNaN(num)) return '0,00';
            return num
                .toFixed(2) // 2 Nachkommastellen
                .replace('.', ',') // Dezimalpunkt zu Komma
                .replace(/\B(?=(\d{3})+(?!\d))/g, '.'); // Tausenderpunkte
        }

        function parsePriceDE(str) {
            if (typeof str !== 'string') return 0;
            return parseFloat(str.replace(/\./g, '').replace(',', '.')) || 0;
        }



        /**
         * Updates the total price for a specific item row and recalculates the grand total.
         *
         * @param {number} index - The index of the item row to update.
         */
        function updateTotal(index) {
            const quantity = parseFloat($(`input.quantity[data-index="${index}"]`).val()) || 0;
            const priceStr = $(`input.price[data-index="${index}"]`).val() || '0,00';
            const price = parsePriceDE(priceStr);
            const total = quantity * price;
            $(`input.total[data-index="${index}"]`).val(formatPriceDE(total));
            updateGrandTotal();
        }

        function updateGrandTotal() {
            let grandTotal = 0;
            $('input.total').each(function() {
                const val = $(this).val() || '0,00';
                grandTotal += parsePriceDE(val);
            });
            $('#grand-total').text(formatPriceDE(grandTotal));
            $('#budget').val(grandTotal);
            calc();

        }

        function getNextIndex() {
            let index = 0;
            while ($(`[data-index="${index}"]`).length > 0) {
                index++;
            }
            return index;
        }

        // Selectize Setup für ein Select-Element
        const productList = @json($products);

        // Produkt-Map id → price (float) vorbereiten
        const productPriceMap = {};
        productList.forEach(p => {
            productPriceMap[p.id] = parseFloat(p.net_price) || 0;
        });

        function initSelectizeFor(selector) {
            $(selector).selectize({
                create: false,
                sortField: 'text',
                placeholder: 'Produkt wählen...',
                onChange: function(value) {
                    const index = $(this.$input).data('index');
                    // Preis aus Map holen, nicht aus options
                    const price = productPriceMap[value] || 0;

                    $(`input.price[data-index="${index}"]`).val(formatPriceDE(price));
                    updateTotal(index);
                }
            });
        }


        $(document).ready(function() {
            // Initial Selectize für alle vorhandenen Selects
            $('.product-select').each(function() {
                initSelectizeFor(this);
            });

            // Menge geändert → Summe neu berechnen
            $(document).on('input', '.quantity', function() {
                const index = $(this).data('index');
                updateTotal(index);
            });

            // Neue Zeile hinzufügen
            $('#add-product').click(function() {
                const index = getNextIndex();

                let productOptions = '<option value="">Produkt wählen...</option>';
                productList.forEach(product => {
                    productOptions +=
                        `<option value="${product.id}" data-price="${product.net_price}">${product.name}</option>`;
                });

                const newRow = `
    <div class="product-row row mb-2">
         
        <div class="col-auto d-flex align-items-center">
           <button type="button" class="btn btn-sm btn-danger remove-row me-2">−</button> <span class="product-index badge bg-secondary" data-index="${index}">${index + 1}</span>
        </div>
        <div class="col-4">
            <select class="form-control product-select select-search" name="products[${index}][product_id]" data-index="${index}">
                ${productOptions}
            </select>
        </div>
        <div class="col">
            <input type="number" name="products[${index}][quantity]" class="form-control quantity" data-index="${index}" value="1" min="1">
        </div>
        <div class="col">
            <input type="text" name="products[${index}][net_price]" class="form-control price text-end" data-index="${index}" readonly>
        </div>
        <div class="col">
            <input type="text" class="form-control total text-end" data-index="${index}" readonly>
        </div>
      
    </div>`;


                $('#product-container').append(newRow);
                initSelectizeFor($(`select[name="products[${index}][product_id]"]`));
                updateProductIndexes();

            });

            // Zeile entfernen
            $(document).on('click', '.remove-row', function() {
                $(this).closest('.product-row').remove();
                updateProductIndexes();
                updateGrandTotal();
            });

        });
    </script>

    <script src="{{ asset('assets/vendor/ckeditor5/ckeditor.js') }}"></script>
    {{-- <script src="{{ asset('assets/vendor/ckeditor/adapters/jquery.js') }}"></script> --}}
    <script>
        const getTermsTemplateUrl = "{{ route('terms_templates.show', ['id' => 'TEMPLATE_ID']) }}";
        document.addEventListener('DOMContentLoaded', function() {
            // Direkt initialisieren, falls außerhalb Modal

            // ClassicEditor
            //     .create(document.querySelector('#agb'), {
            //         toolbar: ['bold', 'italic', 'link', 'undo', 'redo', 'bulletedList', 'numberedList']
            //     });
            let agbEditor;

            ClassicEditor
                .create(document.querySelector('#agb'), {
                    toolbar: ['bold', 'italic', 'link', 'undo', 'redo', 'bulletedList', 'numberedList']
                })
                .then(editor => {
                    agbEditor = editor;
                    const select = document.querySelector('#template_select');
                    const selectedId = select.value;

                    if (selectedId) {
                        const url = getTermsTemplateUrl.replace('TEMPLATE_ID', selectedId);

                        fetch(url)
                            .then(response => response.json())
                            .then(data => {
                                agbEditor.setData(data.terms_text);
                            })
                            .catch(error => {
                                console.error('Fehler beim Laden des Default-Templates:', error);
                            });
                    }
                    // Event: Select change
                    document.querySelector('#template_select').addEventListener('change', function() {
                        const id = this.value;
                        if (id) {
                            const url = getTermsTemplateUrl.replace('TEMPLATE_ID', id);
                            fetch(url)
                                .then(response => response.json())
                                .then(data => {
                                    agbEditor.setData(data.terms_text);
                                })
                                .catch(error => {
                                    console.error('Fehler beim Laden des Templates:', error);
                                });
                        } else {
                            agbEditor.setData(''); // Leeren, wenn "keine Auswahl"
                        }
                    });
                })
                .catch(error => {
                    console.error('Editor-Fehler:', error);
                });

        });
    </script>

    <script></script>

@endsection