@extends('layouts.app')


@section('header_h')
<h1 class="d-none font-weight-bold  d-md-block text-light" style="font-family: 'Oxanium', cursive; font-size: 64px;">
    Dodatkowe opcje</h1>
<h3 class="d-block font-weight-bold  d-md-none text-light" style="font-family: 'Oxanium', cursive; font-size: 38px;">
    Dodatkowe opcje</h3>
@endsection

@section('content')

<div class="container justify-content-center py-3">

    <div class="row" id="step3_row">
        <div class="col border-danger border-bottom" style="border-width: 3px !important;">
            <p class="text-danger m-0 d-block d-md-none" style="font-family: 'Oxanium', cursive; font-size: 10px;">
                Zawodnik
            </p>
            <p class="text-danger m-0 d-none d-md-block" style="font-family: 'Oxanium', cursive; font-size: 14px;">
                Wybierz zawodnika</p>
        </div>
        <div class="col border-bottom border-danger" style="border-width: 3px !important;">
            <p class="text-danger d-block d-md-none" style="font-family: 'Oxanium', cursive; font-size: 10px;">
                Konkurencja</p>
            <p class="text-danger d-none d-md-block" style="font-family: 'Oxanium', cursive; font-size: 14px;">Wybierz
                kategorię</p>
        </div>
        <div class="col border-bottom border-danger" style="border-width: 3px !important;">
            <p class="text-danger d-block d-md-none" style="font-family: 'Oxanium', cursive; font-size: 10px;">Opcje</p>
            <p class="text-danger d-none d-md-block" style="font-family: 'Oxanium', cursive; font-size: 14px;">Dodatkowe
                opcje
            </p>
        </div>
        <div class="col border-bottom border-black-50" style="border-width: 3px !important;">
            <p class="text-black-50 d-block d-md-none" style="font-family: 'Oxanium', cursive; font-size: 10px;">
                Podsumowanie</p>
            <p class="text-black-50 d-none d-md-block" style="font-family: 'Oxanium', cursive; font-size: 14px;">
                Podsumowanie</p>
        </div>
    </div>

    <div class="row">
        <div class="col-md-8">
            <div class="card mt-4">
                <h4 class="card-header" style="font-family: 'Oxanium', cursive;">Dodatkowe opcje</h4>
                <div class="card-body">

                    <h5 class="text-black-50">Zawody</h5>
                    <h3 class="ml-3">{{ $competition->name }}</h3>
                    <h5 class="text-black-50">Zawodnik</h5>
                    <h3 class="ml-3">{{ $member->name }} {{ $member->surname }}</h3>
                    <h5 class="text-black-50">Konkurencja</h5>
                    <h3 class="ml-3">{{ $category->name }}</h3>

                    @if($errors->any())
                    <div class="alert alert-danger mt-3">
                        <strong>Błąd walidacji — popraw poniższe pola:</strong>
                        <ul class="mb-0 mt-1">
                            @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                    @endif

                    <form class="was-validated" method="POST"
                        action="{{ $competition->path() }}/addMember3#summary_row"
                        id="step3form"
                        x-data="insuranceApp(
                            '{{ $member->date_of_birth }}',
                            '{{ array_search($member->nationality, config('countries')) ?: 'PL' }}',
                            {{ $competition->id }},
                            {{ $category->id }},
                            {{ $competition->insurance_enabled ? 'true' : 'false' }}
                        )"
                        @submit="handleSubmit">
                        @csrf

                        @foreach ($competition->ayn as $ayn)
                        @if($loop->first)
                        <div class="ml-3">
                            @else
                            <div class="ml-3 pt-3">
                                @endif

                                <span
                                    class="h5 d-block font-weight-bolder">{{ $ayn->question}}{{ preg_match('/\?/', $ayn->question) ? '' : '?' }}</span>
                                <div class="custom-control custom-radio custom-control-inline">
                                    <input class="custom-control-input" type="radio" name="ayn[{{$ayn->id}}]"
                                        id="yesInlineRadio{{$loop->index}}" value="1" required>
                                    <label class="custom-control-label font-weight-bolder ml-3"
                                        for="yesInlineRadio{{$loop->index}}">TAK</label>
                                </div>
                                <div class="custom-control custom-radio custom-control-inline">
                                    <input class="custom-control-input" type="radio" name="ayn[{{$ayn->id}}]"
                                        id="noInlineRadio{{$loop->index}}" value="0">
                                    <label class="custom-control-label font-weight-bolder ml-3"
                                        for="noInlineRadio{{$loop->index}}">NIE</label>
                                </div>
                            </div>
                            @endforeach


                            @foreach ($competition->atf as $atf)
                            <div class="ml-3 pt-3">
                                <span class="h5 d-block font-weight-bolder">{{ $atf->text_field}}</span>
                                <input class="form-control" type="text" placeholder="{{ $atf->text_field}}"
                                    name="atf[{{$atf->id}}]" {{ $atf->atf_required ? 'required' : '' }}>
                            </div>
                            @endforeach

                            {{-- ===================== UBEZPIECZENIE UDAO ===================== --}}
                            @if($competition->insurance_enabled)
                            <div class="ml-3 pt-4 border-top mt-3">
                                <h5 class="text-black-50 pt-1">Ubezpieczenie <span class="badge badge-info badge-sm">UDAO</span></h5>

                                <span class="h5 d-block font-weight-bolder mb-3">Czy chcesz skorzystać z ubezpieczenia?</span>

                                <div class="custom-control custom-radio custom-control-inline">
                                    <input class="custom-control-input" type="radio"
                                        name="insurance_choice" id="insuranceYes" value="yes"
                                        x-model="choice" required>
                                    <label class="custom-control-label font-weight-bolder ml-3" for="insuranceYes">TAK</label>
                                </div>
                                <div class="custom-control custom-radio custom-control-inline">
                                    <input class="custom-control-input" type="radio"
                                        name="insurance_choice" id="insuranceNo" value="no"
                                        x-model="choice">
                                    <label class="custom-control-label font-weight-bolder ml-3" for="insuranceNo">NIE</label>
                                </div>

                                {{-- Formularz ubezpieczenia (widoczny po wyborze TAK) --}}
                                <div x-show="choice === 'yes'" style="display:none;" class="mt-4">

                                    {{-- Ładowanie oferty --}}
                                    <div x-show="loadingQuota" class="text-center py-3">
                                        <div class="spinner-border text-info" role="status"></div>
                                        <p class="text-black-50 mt-2">Pobieranie oferty ubezpieczenia...</p>
                                    </div>

                                    <div x-show="quotaError" class="alert alert-danger" x-text="quotaError"></div>

                                    {{-- ---- Sekcja 1: dane do wyceny (data ur. + obywatelstwo) ---- --}}
                                    <div class="card border-info mb-3">
                                        <div class="card-header bg-info text-white font-weight-bold">
                                            Dane do wyceny ubezpieczenia
                                        </div>
                                        <div class="card-body">
                                            <div class="form-row">
                                                <div class="col-md-6 mb-3">
                                                    <label class="font-weight-bold">Data urodzenia *</label>
                                                    <input type="date" class="form-control"
                                                        name="insurance_birth_date"
                                                        x-model="birthDate"
                                                        @change="onBirthDataChange">
                                                </div>
                                                <div class="col-md-6 mb-3">
                                                    <label class="font-weight-bold">Kraj obywatelstwa *</label>
                                                    <select class="form-control" name="insurance_citizenship_code"
                                                        x-model="citizenshipCode"
                                                        @change="onBirthDataChange">
                                                        @foreach(config('countries') as $code => $name)
                                                        <option value="{{ $code }}">{{ $name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    {{-- ---- Sekcja 2: wybór pakietów (dynamicznie z API) ---- --}}
                                    <div x-show="quotaProducts.length > 0 && !loadingQuota" style="display:none;">
                                        <div class="card border-info mb-3">
                                            <div class="card-header bg-info text-white font-weight-bold">
                                                Wybierz pakiety ubezpieczenia
                                            </div>
                                            <div class="card-body">
                                                <template x-for="product in quotaProducts" :key="product.id">
                                                    <div class="mb-3">
                                                        <span class="h6 font-weight-bolder d-block mb-2" x-text="product.name"></span>
                                                        <div class="row">
                                                            <template x-for="pkg in product.packages" :key="pkg.id">
                                                                <div class="col-12 col-md-6 mb-2">
                                                                    <div class="card h-100"
                                                                        :class="isSelected(pkg.id) ? 'border-info bg-light' : 'border-secondary'"
                                                                        style="cursor:pointer"
                                                                        @click="togglePackage(pkg.id, product.packages.map(p => p.id))">
                                                                        <div class="card-body p-3">
                                                                            <div class="d-flex justify-content-between align-items-center">
                                                                                <div>
                                                                                    <span class="font-weight-bold" x-text="pkg.name"></span>
                                                                                    <br>
                                                                                    <small class="text-muted" x-text="packageDescription(pkg)"></small>
                                                                                </div>
                                                                                <div class="text-right ml-2">
                                                                                    <span class="h5 font-weight-bold text-info" x-text="pkg.price + ' zł'"></span>
                                                                                    <br>
                                                                                    <i x-show="isSelected(pkg.id)" class="fas fa-check-circle text-info fa-lg"></i>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </template>
                                                        </div>
                                                    </div>
                                                </template>

                                                {{-- Suma ubezpieczenia --}}
                                                <div x-show="selectedPackages.length > 0" class="alert alert-info mt-3">
                                                    <div class="d-flex justify-content-between align-items-center">
                                                        <span class="font-weight-bold">Koszt ubezpieczenia:</span>
                                                        <span x-show="loadingCalc" class="spinner-border spinner-border-sm text-info"></span>
                                                        <span x-show="!loadingCalc" class="h5 font-weight-bold mb-0" x-text="insuranceTotal + ' zł'"></span>
                                                    </div>
                                                </div>

                                                {{-- Hidden inputs dla wybranych pakietów --}}
                                                <template x-for="pkgId in selectedPackages" :key="pkgId">
                                                    <input type="hidden" name="insurance_packages[]" :value="pkgId">
                                                </template>
                                                <template x-for="(pkgName, idx) in selectedPackageNames" :key="idx">
                                                    <input type="hidden" name="insurance_package_names[]" :value="pkgName">
                                                </template>
                                                <input type="hidden" name="insurance_total" :value="insuranceTotal">
                                            </div>
                                        </div>
                                    </div>

                                    {{-- ---- Sekcja 3: Dane osobowe ubezpieczonego ---- --}}
                                    <div x-show="quotaProducts.length > 0 && !loadingQuota" style="display:none;">
                                        <div class="card border-info mb-3">
                                            <div class="card-header bg-info text-white font-weight-bold">
                                                Dane osobowe ubezpieczonego
                                            </div>
                                            <div class="card-body">
                                                <p class="text-muted small">Prosimy o potwierdzenie lub aktualizację danych — polisa zostanie wystawiona na podstawie podanych informacji.</p>
                                                <div class="form-row">
                                                    <div class="col-md-6 mb-3">
                                                        <label class="font-weight-bold">Imię *</label>
                                                        <input type="text" class="form-control"
                                                            name="insurance_name"
                                                            value="{{ $member->name }}"
                                                            maxlength="32">
                                                    </div>
                                                    <div class="col-md-6 mb-3">
                                                        <label class="font-weight-bold">Nazwisko *</label>
                                                        <input type="text" class="form-control"
                                                            name="insurance_surname"
                                                            value="{{ $member->surname }}"
                                                            maxlength="32">
                                                    </div>
                                                    <div class="col-md-6 mb-3">
                                                        <label class="font-weight-bold">Telefon *</label>
                                                        <input type="tel" class="form-control"
                                                            name="insurance_phone"
                                                            value="{{ $member->telephone }}"
                                                            minlength="7" maxlength="24"
                                                            placeholder="+48 500 600 700">
                                                    </div>
                                                    <div class="col-md-6 mb-3">
                                                        <label class="font-weight-bold">E-mail *</label>
                                                        <input type="email" class="form-control"
                                                            name="insurance_email"
                                                            value="{{ auth()->user()->email }}"
                                                            maxlength="48">
                                                    </div>
                                                    <div class="col-md-6 mb-3">
                                                        <label class="font-weight-bold">Kraj urodzenia *</label>
                                                        <select class="form-control" name="insurance_birth_country_code">
                                                            @foreach(config('countries') as $code => $name)
                                                            <option value="{{ $code }}" {{ strtoupper(substr($member->nationality, 0, 2)) === $code ? 'selected' : '' }}>{{ $name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="col-md-6 mb-3">
                                                        <label class="font-weight-bold">Kod pocztowy *</label>
                                                        <input type="text" class="form-control"
                                                            name="insurance_postal_code"
                                                            maxlength="10"
                                                            placeholder="00-000">
                                                    </div>
                                                    <div class="col-md-6 mb-3">
                                                        <label class="font-weight-bold">Miasto *</label>
                                                        <input type="text" class="form-control"
                                                            name="insurance_city"
                                                            value="{{ $member->city }}"
                                                            maxlength="32">
                                                    </div>
                                                    <div class="col-md-6 mb-3">
                                                        <label class="font-weight-bold">Ulica *</label>
                                                        <input type="text" class="form-control"
                                                            name="insurance_street"
                                                            maxlength="128"
                                                            placeholder="ul. Kwiatowa">
                                                    </div>
                                                    <div class="col-md-4 mb-3">
                                                        <label class="font-weight-bold">Numer domu *</label>
                                                        <input type="text" class="form-control"
                                                            name="insurance_house_number"
                                                            maxlength="15"
                                                            placeholder="17B">
                                                    </div>
                                                    <div class="col-md-4 mb-3">
                                                        <label class="font-weight-bold">Numer mieszkania</label>
                                                        <input type="text" class="form-control"
                                                            name="insurance_flat_number"
                                                            maxlength="15"
                                                            placeholder="opcjonalnie">
                                                    </div>
                                                </div>

                                                <div class="form-check mt-2">
                                                    <input class="form-check-input" type="checkbox"
                                                        name="insurance_agreement_marketing"
                                                        id="insuranceMarketingAgreement" value="1">
                                                    <label class="form-check-label" for="insuranceMarketingAgreement">
                                                        Wyrażam zgodę na kontakt marketingowy
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    {{-- ---- Sekcja 4: Dane opiekuna (jeśli niepełnoletni) ---- --}}
                                    <div x-show="isMinor && quotaProducts.length > 0" style="display:none;">
                                        <div class="card border-warning mb-3">
                                            <div class="card-header bg-warning font-weight-bold">
                                                Dane opiekuna prawnego (uczestnik niepełnoletni)
                                            </div>
                                            <div class="card-body">
                                                <p class="text-muted small">Uczestnik jest niepełnoletni — wymagane są dane opiekuna prawnego.</p>
                                                <div class="form-row">
                                                    <div class="col-md-6 mb-3">
                                                        <label class="font-weight-bold">Imię opiekuna *</label>
                                                        <input type="text" class="form-control" name="insurer_name" maxlength="32">
                                                    </div>
                                                    <div class="col-md-6 mb-3">
                                                        <label class="font-weight-bold">Nazwisko opiekuna *</label>
                                                        <input type="text" class="form-control" name="insurer_surname" maxlength="32">
                                                    </div>
                                                    <div class="col-md-6 mb-3">
                                                        <label class="font-weight-bold">E-mail opiekuna *</label>
                                                        <input type="email" class="form-control" name="insurer_email" maxlength="48">
                                                    </div>
                                                    <div class="col-md-6 mb-3">
                                                        <label class="font-weight-bold">Telefon opiekuna</label>
                                                        <input type="tel" class="form-control" name="insurer_phone" maxlength="24">
                                                    </div>
                                                    <div class="col-md-6 mb-3">
                                                        <label class="font-weight-bold">Data urodzenia opiekuna</label>
                                                        <input type="date" class="form-control" name="insurer_birth_date">
                                                    </div>
                                                    <div class="col-md-6 mb-3">
                                                        <label class="font-weight-bold">Kraj urodzenia opiekuna</label>
                                                        <select class="form-control" name="insurer_birth_country_code">
                                                            @foreach(config('countries') as $code => $name)
                                                            <option value="{{ $code }}" {{ $code === 'PL' ? 'selected' : '' }}>{{ $name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="col-md-6 mb-3">
                                                        <label class="font-weight-bold">Kraj obywatelstwa opiekuna</label>
                                                        <select class="form-control" name="insurer_citizenship_code">
                                                            @foreach(config('countries') as $code => $name)
                                                            <option value="{{ $code }}" {{ $code === 'PL' ? 'selected' : '' }}>{{ $name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="col-md-6 mb-3">
                                                        <label class="font-weight-bold">Kod pocztowy opiekuna</label>
                                                        <input type="text" class="form-control" name="insurer_postal_code" maxlength="10">
                                                    </div>
                                                    <div class="col-md-6 mb-3">
                                                        <label class="font-weight-bold">Miasto opiekuna</label>
                                                        <input type="text" class="form-control" name="insurer_city" maxlength="32">
                                                    </div>
                                                    <div class="col-md-6 mb-3">
                                                        <label class="font-weight-bold">Ulica opiekuna</label>
                                                        <input type="text" class="form-control" name="insurer_street" maxlength="128">
                                                    </div>
                                                    <div class="col-md-4 mb-3">
                                                        <label class="font-weight-bold">Nr domu opiekuna</label>
                                                        <input type="text" class="form-control" name="insurer_house_number" maxlength="15">
                                                    </div>
                                                    <div class="col-md-4 mb-3">
                                                        <label class="font-weight-bold">Nr mieszkania opiekuna</label>
                                                        <input type="text" class="form-control" name="insurer_flat_number" maxlength="15">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>{{-- end x-show choice === yes --}}
                            </div>
                            @endif
                            {{-- ===================== KONIEC UBEZPIECZENIA ===================== --}}

                            <h5 class="text-black-50  pt-3">Klub - opcjonalnie</h5>
                            <div class="container">
                                @forelse ($competition->clubs as $club)
                                @if($loop->first)
                                <div class="row">
                                    <div class="col">
                                        <span class="h5 d-block font-weight-bolder">Wybierz z listy, wpisz nowy lub
                                            pozostaw puste jeśli nie dotyczy</span>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12 col-md-6">
                                        <select class="custom-select" name="club">
                                            <option selected value="">Wybierz klub z listy</option>
                                            @endif
                                            <option value="{{$club->id}}">{{$club->name}}</option>
                                            @if($loop->last)
                                        </select>
                                    </div>

                                    <div class="col-12 col-md-6 mt-3 mt-md-0">
                                        <input class="form-control" type="text"
                                            placeholder="lub wprowadź nową nazwę klubu" name="club_text_field">
                                    </div>
                                    @endif
                                    @empty
                                    <div class="row">
                                        <div class="col">
                                            <span class="h5 d-block font-weight-bolder">Wprowadź nazwę klubu lub
                                                pozostaw puste jeśli nie dotyczy</span>
                                            <input class="form-control" type="text" placeholder="Wprowadź nazwę klubu"
                                                name="club_text_field">
                                        </div>
                                        @endforelse
                                    </div>
                                </div>



                                @forelse ($competition->lst as $lst)

                                <h5 class="text-black-50  pt-3">{{$lst->name}}</h5>
                                <div class="container">
                                    <div class="row">
                                        <div class="col">
                                            <select class="custom-select" name="lst[{{$lst->id}}]" required>
                                                @if($loop->first)
                                                <option selected value="">Wybierz element z listy</option>
                                                @endif

                                                @forelse ($lst->elements as $element)
                                                <option value="{{$element->id}}">{{$element->name}}</option>
                                                @empty
                                                @endforelse

                                            </select>
                                        </div>
                                    </div>
                                </div>
                                @empty
                                @endforelse


                                <div class="mt-4">
                                    <button type="submit" class="btn btn-info float-right" id="step3submit">Podsumowanie <i
                                            class="fas fa-angle-double-right"></i></button>

                                    <a class="btn btn-outline-info " href="addMember2#step2_row" role="button"><i
                                            class="fas fa-angle-double-left"></i>
                                        Wstecz</a>
                                </div>
                    </form>

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

            @if (count($competition->categories) > 0)
            <div class="card w-100 mt-4">

                <div class="card-header" style="font-family: 'Oxanium', cursive;">

                    <div class="container p-0">
                        <div class="row no-gutters">
                            <div class="col">
                                <h4 class="m-0">Koszt uczestnictwa</h4>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card-body">
                    @foreach ($competition->categories as $category)
                    <div class="row no-gutters">
                        <div class="col">
                            <h6 class="font-weight-bolder">{{ $category->name }}</h6>
                        </div>
                        <div class="col text-right">
                            @if (($category->members->count() >= $category->limit) AND ($category->limit > 0))
                            <h6 class="text-danger text-right font-weight-bolder ">Brak miejsc</h6>
                            @else
                            @if ($category->promoCost->count() > 0)

                            @if ($category->promoCost->first()->cost == 0)
                            <h6 class="text-danger text-right font-weight-bolder">Bezpłatnie</h6>
                            @else
                            <div>
                                <h6 class="text-muted d-inline"><del>{{ $category->default_cost() }} zł</del></h6>
                                <h6 class="font-weight-bolder text-danger text-right d-inline" data-toggle="popover"
                                    title="Promocyjna cena" data-content="
                            Ta cena obowiązuje do dnia<br /> {{ $category->promoCost->first()->end_date }}
                            ">{{ ($category->promoCost->first()->cost) }} zł
                                </h6>
                            </div>

                            @endif

                            @elseif ($category->default_cost() == 0)
                            <h6 class="text-danger text-right font-weight-bolder ">Bezpłatnie</h6>
                            @else
                            <h6 class="text-secondary text-right font-weight-bolder ">{{ ($category->default_cost()) }}
                                zł</h6>
                            @endif
                            @endif
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
            @endif

            @if (count(auth()->user()->addedMembers($competition->id)) > 0)
            <div class="card mt-4">
                <h4 class="card-header" style="font-family: 'Oxanium', cursive;">
                    Twoi zawodnicy zgłoszeni do zawodów
                </h4>
                <ul class="list-group list-group-flush">
                    @foreach (auth()->user()->addedMembers($competition->id) as $userMember)
                    @if (isset($userMember->category()->where('competition_id', $competition->id)->first()->name))
                    <li class="list-group-item">
                        {{ $userMember->name }} {{ $userMember->surname }} -
                        <span
                            class="font-weight-bolder">{{ ($userMember->category()->where('competition_id', $competition->id)->firstOrFail()->name) }}</span>
                    </li>
                    @endif
                    @endforeach
                </ul>
            </div>
            @endif

        </div>
    </div>

</div>

<script>
function insuranceApp(memberBirthDate, memberNationality, competitionId, categoryId, insuranceEnabled) {
    return {
        choice: null,
        insuranceEnabled: insuranceEnabled,
        birthDate: memberBirthDate,
        citizenshipCode: memberNationality || 'PL',
        quotaProducts: [],
        loadingQuota: false,
        quotaError: null,
        selectedPackages: [],
        selectedPackageNames: [],
        insuranceTotal: 0,
        loadingCalc: false,
        calcTimer: null,

        get isMinor() {
            if (!this.birthDate) return false;
            const birth = new Date(this.birthDate);
            const now = new Date();
            let age = now.getFullYear() - birth.getFullYear();
            const m = now.getMonth() - birth.getMonth();
            if (m < 0 || (m === 0 && now.getDate() < birth.getDate())) age--;
            return age < 18;
        },

        init() {
            this.$watch('choice', (val) => {
                if (val === 'yes' && this.birthDate && this.citizenshipCode) {
                    this.fetchQuota();
                }
            });
        },

        onBirthDataChange() {
            if (this.birthDate && this.citizenshipCode && this.choice === 'yes') {
                this.fetchQuota();
            }
        },

        fetchQuota() {
            this.loadingQuota = true;
            this.quotaError = null;
            this.quotaProducts = [];
            this.selectedPackages = [];
            this.selectedPackageNames = [];
            this.insuranceTotal = 0;

            fetch('/insurance/' + competitionId + '/' + categoryId + '/quota', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    'Accept': 'application/json',
                },
                body: JSON.stringify({
                    birth_date: this.birthDate,
                    citizenship_code: this.citizenshipCode,
                })
            })
            .then(r => r.json())
            .then(data => {
                this.loadingQuota = false;
                if (data.error) {
                    this.quotaError = data.error;
                    return;
                }
                this.quotaProducts = data.products || [];
            })
            .catch(() => {
                this.loadingQuota = false;
                this.quotaError = 'Błąd połączenia z serwisem ubezpieczeniowym.';
            });
        },

        togglePackage(packageId, productPackageIds) {
            // Jeśli pakiet już zaznaczony — odznacz; jeśli nie — usuń inne z tej grupy i zaznacz
            if (this.selectedPackages.includes(packageId)) {
                this.selectedPackages = this.selectedPackages.filter(id => id !== packageId);
            } else {
                this.selectedPackages = this.selectedPackages.filter(id => !productPackageIds.includes(id));
                this.selectedPackages.push(packageId);
            }
            // Przebuduj nazwy wybranych pakietów
            this.selectedPackageNames = [];
            this.quotaProducts.forEach(p => {
                p.packages.forEach(pkg => {
                    if (this.selectedPackages.includes(pkg.id)) {
                        this.selectedPackageNames.push(pkg.name + ' – ' + pkg.price + ' zł');
                    }
                });
            });
            this.fetchCalculation();
        },

        isSelected(packageId) {
            return this.selectedPackages.includes(packageId);
        },

        packageDescription(pkg) {
            const parts = [];
            if (pkg.max_refund) parts.push('Maks. zwrot: ' + pkg.max_refund + ' zł');
            if (pkg.max_death_refund) parts.push('Śmierć: ' + pkg.max_death_refund + ' zł');
            if (pkg.max_resignation_refund) parts.push('Rezygnacja: ' + pkg.max_resignation_refund + ' zł');
            return parts.join(' | ');
        },

        fetchCalculation() {
            if (this.selectedPackages.length === 0) {
                this.insuranceTotal = 0;
                return;
            }
            clearTimeout(this.calcTimer);
            this.loadingCalc = true;
            this.calcTimer = setTimeout(() => {
                fetch('/insurance/' + competitionId + '/' + categoryId + '/calculation', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                        'Accept': 'application/json',
                    },
                    body: JSON.stringify({
                        birth_date: this.birthDate,
                        citizenship_code: this.citizenshipCode,
                        packages: this.selectedPackages,
                    })
                })
                .then(r => r.json())
                .then(data => {
                    this.loadingCalc = false;
                    if (!data.error) {
                        this.insuranceTotal = data.total || 0;
                    }
                })
                .catch(() => { this.loadingCalc = false; });
            }, 400);
        },

        handleSubmit(e) {
            // Walidacja: jeśli ubezpieczenie włączone, musi być wybrane TAK lub NIE
            if (this.insuranceEnabled && this.choice === null) {
                e.preventDefault();
                alert('Proszę wybrać czy chcesz skorzystać z ubezpieczenia (TAK lub NIE).');
                return;
            }
            // Walidacja: jeśli TAK, musi być wybrany przynajmniej jeden pakiet
            if (this.choice === 'yes' && this.selectedPackages.length === 0) {
                e.preventDefault();
                alert('Proszę wybrać przynajmniej jeden pakiet ubezpieczenia lub wybrać NIE.');
                return;
            }
            // Walidacja OK — formularz składa się naturalnie
        },
    };
}
</script>

@endsection