@extends('frontend.mediknode.layout.mainlayout')
@section('content')
    @component('frontend.mediknode.components.breadcrumb')
        @slot('title')
            Demande de Pré-inscription
        @endslot
        @slot('li_1')
            Demande de Pré-inscription
        @endslot
    @endcomponent
    <div class="dashboard-content">
        <div class="container">
            <div class="dashboard-details">
                <div class="row dashboard-info">
                    <div class="col-lg-12">
                        <div class="card dash-cards">
                            <div class="card-body">
                                <div class="profile-form">
                                    <form method="POST" id="form1" name="form1"
                                        action="{{ url('/event/' . $event->slug . '/participate/step4') }}"
                                        class="needs-validation" novalidate>
                                        @csrf

                                        @php
                                            $is_resident = $request->is_resident ?? 0;
                                            $is_adherent = $request->isAd ?? 0;
                                            $is_fee = $request->isFee ?? 0;
                                            $isBDC = $request->isBDC ?? 0;
                                            $preferentiel = $request->is_before_date ?? 0;

                                            $ateliers = $workshops->where('groupe', 'W')->where('visible_fe', 1);
                                        @endphp

                                        {{-- Report des choix des étapes précédentes --}}
                                        @foreach ($request->input('workshop', []) as $key => $item)
                                            @if ($item)
                                                <input type="hidden" name="workshop[{{ $key }}]"
                                                    value="{{ $item }}">
                                            @endif
                                        @endforeach
                                        <input type="hidden" name="is_resident" value="{{ $is_resident }}">
                                        <input type="hidden" name="isAd" value="{{ $is_adherent }}">
                                        <input type="hidden" name="isFee" value="{{ $is_fee }}">
                                        <input type="hidden" name="isBDC" value="{{ $isBDC }}">
                                        <input type="hidden" name="is_before_date" value="{{ $preferentiel }}">
                                        <input type="hidden" name="is_congressiste" value="1">

                                        <script>
                                            const object = {
                                                @foreach ($ateliers as $workshop)
                                                    {{ $workshop->id }}: {
                                                        price: {{ $workshop->prix }},
                                                        price_bdc: {{ $workshop->price_bdc }},
                                                        discount_is_resident: {{ $workshop->discount_is_resident }},
                                                        discount_is_adherent: {{ $workshop->discount_is_adherent }},
                                                        discount_before_date: {{ $workshop->discount_before_date }}
                                                    }
                                                    @if (!$loop->last)
                                                        ,
                                                    @endif
                                                @endforeach
                                            };
                                            const isFee = !!{{ $is_fee ? $is_fee : 0 }};
                                            const isAd = !!{{ $is_adherent ? $is_adherent : 0 }};
                                            const isBeforeDate = !!({{ $preferentiel ? $preferentiel : 0 }});
                                            const isBDC = !!{{ $isBDC ? $isBDC : 0 }};
                                            const isResident = !!{{ $is_resident ? $is_resident : 0 }};

                                            function updatePrices(isFee, isAd, isBeforeDate, isBDC, isResident) {
                                                const workshops = document.querySelectorAll('.workshop-item');
                                                workshops.forEach(item => {
                                                    const workshopId = item.getAttribute('data-id');
                                                    const priceObj = object[workshopId];
                                                    let price = priceObj.price;
                                                    if (isFee || isAd) {
                                                        price = price - priceObj.discount_is_adherent;
                                                    }
                                                    if (isResident) {
                                                        price = price - priceObj.discount_is_resident;
                                                    }
                                                    if (isBeforeDate) {
                                                        price = price - priceObj.discount_before_date;
                                                    }
                                                    if (isBDC) {
                                                        price = priceObj.price_bdc;
                                                    }
                                                    document.getElementById('price_' + workshopId).textContent = price;
                                                    item.value = workshopId + "|" + (price);
                                                });
                                            }
                                            window.addEventListener('load', function() {
                                                updatePrices(isFee, isAd, isBeforeDate, isBDC, isResident);
                                            });
                                        </script>

                                        <div class="row justify-content-md-center">
                                            <div class="col-md-8 col-lg-8">
                                                <table class="table workshops-choice event-{{ $event->slug }}">
                                                    <tr style="background-color: {{ $ateliers->first()?->accent_color }}"
                                                        class="group-title">
                                                        <th colspan="2">
                                                            {{ $ateliers->first()?->label }}
                                                        </th>
                                                    </tr>
                                                    @foreach ($ateliers as $workshop)
                                                        <tr class="workshop-row row-{{ $workshop->f2 }}">
                                                            <td class="workshop-title"
                                                                style="background-color: {{ $workshop->background_color ? $workshop->background_color : '#f0f0f0' }}; color: {{ $workshop->text_color ? $workshop->text_color : '#5b626b' }}">
                                                                <div class="form-check">
                                                                    <input value=""
                                                                        class="form-check-input workshop-item {{ $workshop->f2 }} {{ $workshop->capacity - $workshop->participants_count > 0 ? 'workshop-available' : 'workshop-disabled' }}"
                                                                        type="radio"
                                                                        name="workshop[{{ $workshop->groupe }}]"
                                                                        id="workshop[{{ $workshop->id }}]"
                                                                        data-id="{{ $workshop->id }}"
                                                                        {{ $workshop->capacity - $workshop->participants_count > 0 ? '' : 'disabled' }}
                                                                        required>
                                                                    <label class="form-check-label"
                                                                        for="workshop[{{ $workshop->id }}]">
                                                                        {{ $workshop->titre }}
                                                                    </label>
                                                                    @if ($workshop->description)
                                                                        <div class="workshop-description">
                                                                            {!! $workshop->description !!}
                                                                        </div>
                                                                    @endif
                                                                    @if ($workshop->intervenant)
                                                                        <div class="workshop-thema-speaker">
                                                                            Intervenant : {!! $workshop->intervenant !!}
                                                                        </div>
                                                                    @endif
                                                                    @if ($workshop->salle)
                                                                        <div class="workshop-salle">
                                                                            <span>Salle : </span>{!! $workshop->salle !!}
                                                                        </div>
                                                                    @endif
                                                                </div>
                                                            </td>
                                                            <td class="workshop-price text-end">
                                                                <span id="price_{{ $workshop->id }}"></span>
                                                                TND
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                    <tr class="not-participate">
                                                        <td class="workshop-title" colspan="2">
                                                            <div class="form-check">
                                                                <input value="" class="form-check-input" type="radio"
                                                                    name="workshop[{{ $ateliers->first()?->groupe }}]"
                                                                    id="workshop-no-atelier" required>
                                                                <label class="form-check-label" for="workshop-no-atelier">
                                                                    Ne pas participer
                                                                </label>
                                                                <div class="invalid-feedback">Choisir une option pour
                                                                    passer à l'étape suivante
                                                                </div>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </div>

                                        <div class="row justify-content-md-center mt-3">
                                            <div class="col-lg-3 col-md-4 col-md-auto">
                                                <button class="btn btn-success w-100 login-btn"
                                                    type="submit">Suivant</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @component('frontend.mediknode.components.scrolltotop')
    @endcomponent
@endsection