{{-- @extends('layouts.masteruser') --}}
@extends('layouts.master')

@section('title', 'Express54')

@section('content')


    <!--links-->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

    <div class="row banner custom_dashboard">
        @if ($selectedCountry)
            <img src="{{ asset("/storage/banner/$selectedCountry->banner_image") }}" class="test"
                alt="{{ $selectedCountry->title }}" style="width: 100%;">
        @else
            <img src="{{ asset('/assets/image/bluebanner.png') }}" class="test" alt="bluebanner.png"
                style="width: 70%; height:350px;">
            <div class="col-4 coursel">
                @include('ads.adslider')
            </div>
        @endif
    </div> 


    {{-- <div class="row banner">

        <div class="user_section col-8">
        </div>

        <div class="col-4 coursel">
            @include('ads.adslider')
        </div>
    </div> --}}


    <!-- MultiStep Form -->
    <div class="stepper-body custom-multi-step-form" style="min-height: calc(100vh - 110px);">
        <div class="container-fluid">
            <div class="row justify-content-center">
                <div class="col-11 col-sm-9 col-md-8 col-lg-8  text-center p-0 mt-3 mb-2">
                    <div class="card px-0 pt-4 pb-0 mt-3 mb-3">

                        <form id="msform" method="POST" action="{{ route('applicationSubmit') }}"
                            enctype="multipart/form-data">
                            @csrf
                            <br>
                            <div class="container">
                                @if (session('success'))
                                    <div class="alert alert-success">
                                        {{ session('success') }}
                                    </div>
                                @endif

                                @if (session('error'))
                                    <div class="alert alert-danger">
                                        {{ session('error') }}
                                    </div>
                                @endif

                                <h2>@lang('messages.please_select_service')</h2>
                                <div class="" id="service-cards">
                                    <!-- <div class="row custom-row justify-content-center" id="parent-cards">
                                        @foreach ($services as $service)
                                            @if ($service->status === 'enable')
                                                <div class="col-md-4 servicecol" data-parent-id="{{ $service->id }}">
                                                    <div class="mb-5" style="background: {{ $colorCode }};"
                                                        onmouseover="this.style.background='{{ $hovercolor }}';"
                                                        onmouseout="this.style.background='{{ $colorCode }}';">
                                                        <a href="{{ url('#') }}" class="linkdecoration">
                                                            <img src="{{ asset('/assets/image/card.png') }}"
                                                                alt="{{ $service->name }}">
                                                            {{-- <h4 class="text-white mt-3">{{ $service->name }}</h4> --}}
                                            @php
                                                    $serviceName = $service->name;
                                            @endphp
    									

                                                            {{-- <h4 class="text-white mt-3 test">@lang('messages.' . $serviceName )</h4> --}}
								                            <h4 class="text-white mt-3 test">@lang($serviceName )</h4>
                                                        </a>
                                                    </div>
                                                </div>
                                            @endif
                                        @endforeach
                                    </div> -->
                                    <div class="row custom-row justify-content-center" id="parent-cards">
                                        @foreach ($services as $service)
                                            @if ($service->status === 'enable')
                                                {{-- Check if the service is "Passport Service" or "Travel Pass" and conditionally display them --}}


                                                @if ($service->name == 'Visa Service' && $selectedCountry->id == '24')
                                                    <div class="col-md-4 servicecol">
                                                        <div class="mb-5" style="background: {{ $colorCode }};"
                                                            onmouseover="this.style.background='{{ $hovercolor }}';"
                                                            onmouseout="this.style.background='{{ $colorCode }}';">
                                                            <a href="https://www.paf.gov.gn/visa" class="linkdecoration">
                                                                <img src="{{ asset('/assets/image/visa-service.png') }}" alt="{{ $service->name }}">
                                                                <h4 class="text-white mt-3 test">@lang($service->name)</h4>
                                                            </a>
                                                        </div>
                                                    </div>
                                                @elseif ($service->name == 'MESRS')
                                                    <div class="col-md-4 servicecol" data-parent-id="{{ $service->id }}">
                                                        <div class="mb-5" style="background: {{ $colorCode }};"
                                                            onmouseover="this.style.background='{{ $hovercolor }}';"
                                                            onmouseout="this.style.background='{{ $colorCode }}';">
                                                            <a href="{{ url('#') }}" class="linkdecoration">
                                                                <img src="{{ asset('/assets/image/consulate-card.png') }}" alt="{{ $service->name }}" width="49" height="46">
                                                                <h4 class="text-white mt-3 test">@lang($service->name)</h4>
                                                            </a>
                                                        </div>
                                                    </div>
                                                @elseif ($service->name == 'METFPA')
                                                    <div class="col-md-4 servicecol" data-parent-id="{{ $service->id }}">
                                                        <div class="mb-5" style="background: {{ $colorCode }};"
                                                            onmouseover="this.style.background='{{ $hovercolor }}';"
                                                            onmouseout="this.style.background='{{ $colorCode }}';">
                                                            <a href="{{ url('#') }}" class="linkdecoration">
                                                                <img src="{{ asset('/assets/image/consulate-card.png') }}" alt="{{ $service->name }}"  width="49" height="46">
                                                                <h4 class="text-white mt-3 test">@lang($service->name)</h4>
                                                            </a>
                                                        </div>
                                                    </div>
                                                @elseif ($service->name == 'Travel Pass' && $selectedCountry->id == '24')
                                                    <div class="col-md-4 servicecol" data-parent-id="{{ $service->id }}">
                                                        <div class="mb-5" style="background: {{ $colorCode }};"
                                                            onmouseover="this.style.background='{{ $hovercolor }}';"
                                                            onmouseout="this.style.background='{{ $colorCode }}';">
                                                            <a href="{{ url('#') }}" class="linkdecoration">
                                                                <img src="{{ asset('/assets/image/other-document.png') }}" alt="{{ $service->name }}">
                                                                <h4 class="text-white mt-3 test">@lang($service->name)</h4>
                                                            </a>
                                                        </div>
                                                    </div>
                                                @elseif ($service->name == 'Consulate Card')
                                                    <div class="col-md-4 servicecol" data-parent-id="{{ $service->id }}">
                                                        <div class="mb-5" style="background: {{ $colorCode }};"
                                                            onmouseover="this.style.background='{{ $hovercolor }}';"
                                                            onmouseout="this.style.background='{{ $colorCode }}';">
                                                            <a href="{{ url('#') }}" class="linkdecoration">
                                                                <img src="{{ asset('/assets/image/consulate-card.png') }}" alt="{{ $service->name }}">
                                                                <h4 class="text-white mt-3 test">@lang($service->name)</h4>
                                                            </a>
                                                        </div>
                                                    </div>
                                                @elseif ($service->name == 'Paiement de Bourse')
                                                    <div class="col-md-4 servicecol" data-parent-id="{{ $service->id }}">
                                                        <div class="mb-5" style="background: {{ $colorCode }};"
                                                            onmouseover="this.style.background='{{ $hovercolor }}';"
                                                            onmouseout="this.style.background='{{ $colorCode }}';">
                                                            <a href="{{ url('#') }}" class="linkdecoration">
                                                                <img src="{{ asset('/assets/image/demand-payment-3.png') }}" alt="{{ $service->name }}" width="49" height="46">
                                                                <h4 class="text-white mt-3 test">@lang($service->name)</h4>
                                                            </a>
                                                        </div>
                                                    </div>
                                                @elseif ($service->name == 'AUTRE')
                                                    <div class="col-md-4 servicecol" data-parent-id="{{ $service->id }}">
                                                        <div class="mb-5" style="background: {{ $colorCode }};"
                                                            onmouseover="this.style.background='{{ $hovercolor }}';"
                                                            onmouseout="this.style.background='{{ $colorCode }}';">
                                                            <a href="{{ url('#') }}" class="linkdecoration">
                                                                <img src="{{ asset('/assets/image/other-document.png') }}" alt="{{ $service->name }}"  width="49" height="46">
                                                                <h4 class="text-white mt-3 test">@lang($service->name)</h4>
                                                            </a>
                                                        </div>
                                                    </div>
                                                @elseif ($service->name == 'Civil Documents')
                                                    <div class="col-md-4 servicecol" data-parent-id="{{ $service->id }}">
                                                        <div class="mb-5" style="background: {{ $colorCode }};"
                                                            onmouseover="this.style.background='{{ $hovercolor }}';"
                                                            onmouseout="this.style.background='{{ $colorCode }}';">
                                                            <a href="{{ url('#') }}" class="linkdecoration">
                                                                <img src="{{ asset('/assets/image/civil-document.png') }}" alt="{{ $service->name }}">
                                                                <h4 class="text-white mt-3 test">@lang($service->name)</h4>
                                                            </a>
                                                        </div>
                                                    </div>
                                                @elseif (!in_array($service->name, ['Passport Service', 'Travel Pass']))
                                                    {{-- Display other services as usual --}}
                                                    <div class="col-md-4 servicecol" data-parent-id="{{ $service->id }}">
                                                        <div class="mb-5" style="background: {{ $colorCode }};"
                                                            onmouseover="this.style.background='{{ $hovercolor }}';"
                                                            onmouseout="this.style.background='{{ $colorCode }}';">
                                                            <a href="{{ url('#') }}" class="linkdecoration">
                                                                <img src="{{ asset('/assets/image/card.png') }}" alt="{{ $service->name }}">
                                                                <h4 class="text-white mt-3 test">@lang($service->name)</h4>
                                                            </a>
                                                        </div>
                                                    </div>
                                                @endif
                                            @endif
                                        @endforeach
                                    </div>

                                    <div class="row custom-subservices">
                                        <div class="col-md-12">
                                            <div id="child-service-cards" class="d-none">
                                                <h3>@lang('messages.subservice')</h3>
                                                <button type="button" class="btn rounded-pill btn-lg back"
                                                    id="service_back" style="background: {{ $colorCode }};"
                                                    onmouseover="this.style.background='{{ $hovercolor }}';"
                                                    onmouseout="this.style.background='{{ $colorCode }}';"><i
                                                        class="fas fa-thin fa-angle-left"></i>
                                                    @lang('messages.back')</button>
                                                <div class="row custom-row" id="child-service-cards-row">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div><button id="backToMainServices" class="btn btn-secondary" style="display: none;">Back to
                                Main Services</button>


                            <input type="hidden" id="selectedParentInput" name="selected-parent">
                            <input type="hidden" id="selectedChildInput" name="selected-child">

                            <script>
                                document.addEventListener("DOMContentLoaded", function() {
                                    const parentServiceCols = document.querySelectorAll('.servicecol[data-parent-id]');
                                    const childServicesContainer = document.getElementById('child-service-cards');
                                    const parentServicesRow = document.getElementById('parent-cards');
                                    const childServicesRow = document.getElementById('child-service-cards-row');
                                    const selectedParentInput = document.getElementById('selectedParentInput');
                                    const selectedChildInput = document.getElementById('selectedChildInput');
                                    const backToMainServicesButton = document.getElementById('backToMainServices');
                                    const backButtonId = document.getElementById('service_back');

                                    backButtonId.addEventListener('click', function() {
                                        childServicesContainer.classList.add('d-none')
                                        parentServicesRow.classList.remove('d-none')
                                    })

                                    function updateHiddenFields() {
                                        const selectedParent = document.querySelector('.servicecol.selected-parent');
                                        const selectedChild = document.querySelector('.servicecol.selected-child');

                                        if (selectedParent) {
                                            selectedParentInput.value = selectedParent.getAttribute('data-parent-id');
                                        } else {
                                            selectedParentInput.value = '';
                                        }

                                        if (selectedChild) {
                                            selectedChildInput.value = selectedChild.getAttribute('data-child-id');
                                        } else {
                                            selectedChildInput.value = '';
                                        }
                                    }

                                    function areCardsSelected() {
                                        const selectedParent = document.querySelector('.servicecol.selected-parent');
                                        const selectedChild = document.querySelector('.servicecol.selected-child');

                                        if (selectedParent && selectedChild) {
                                            const parentServiceId = selectedParent.getAttribute('data-parent-id');
                                            const childServiceId = selectedChild.getAttribute('data-child-id');
                                            let newURL;

                                            if ( (parentServiceId === '1' && (childServiceId === '25' || childServiceId === '27' || childServiceId === '28')) || (parentServiceId === '2' && (childServiceId === '23' || childServiceId === '26' || childServiceId === '29')) ) {
                                                newURL =
                                                    `/employee/selectservice?id=${parentServiceId}&childServiceId=${childServiceId}`;
                                            }else if ( (parentServiceId === '1' && childServiceId === '5') || (parentServiceId === '2' && childServiceId === '5') ) {
                                                newURL =
                                                    `/employee/resumesemp/${parentServiceId}&childServiceId=${childServiceId}`;
                                            }else if ( (parentServiceId === '2' && (childServiceId === '25' || childServiceId === '27' || childServiceId === '28')) || (parentServiceId === '2' && (childServiceId === '23' || childServiceId === '26' || childServiceId === '29')) ) {
                                                newURL =
                                                    `/employee/selectservice?id=${parentServiceId}&childServiceId=${childServiceId}`;
                                            }else if ( (parentServiceId === '2' && childServiceId === '6') || (parentServiceId === '2' && childServiceId === '6') ) {
                                                newURL =
                                                    `/employee/resumesemp/${parentServiceId}&childServiceId=${childServiceId}`;
                                            }else if ( (parentServiceId === '3' && childServiceId === '31') || (parentServiceId === '4' && childServiceId === '32') ) {
                                                newURL =
                                                    `#`;
                                            } else {
                                                newURL =
                                                    `/user/steper/collectdata?parentServiceId=${parentServiceId}&childServiceId=${childServiceId}`;
                                            }
                                            window.location.href = newURL;
                                        }
                                    }

                                    function updateNextButtonState() {
                                        if (areCardsSelected()) {
                                            nextButton1.disabled = false;
                                        }
                                    }

                                    var translations = @json(__('messages'));

                                    parentServiceCols.forEach((parentServiceCol) => {
                                        parentServiceCol.addEventListener('click', () => { 
                                            const parentServiceId = parentServiceCol.getAttribute('data-parent-id');

                                            parentServiceCols.forEach((col) => {
                                                col.classList.remove('selected-parent');
                                            });

                                            const childServiceCols = document.querySelectorAll(
                                                '.servicecol[data-child-id]');
                                            childServiceCols.forEach((col) => {
                                                col.classList.remove('selected-child');
                                            });
                                            
                                            fetch(`/employee/selectsousservice/${parentServiceId}`)
                                                .then(response => response.json())
                                                .then(data => {
                                                    const filteredChildServices = data.filter(child => child
                                                        .status ===
                                                        'enable');
                                                    if (parentServiceId == 1) {
                                                        // Generate HTML for child service cards
                                                        const childServicesHTML =
                                                            `<div class="col-md-4 servicecol childService mb-5" id="toggleServices" data-child-id="0">
                                                                    <div class="mb-5" style="background: {{ $colorCode }} !important;">	
                                                                        <img src="{{ asset('/assets/image/demand-payment-1.png') }}"
                                                                        alt="Paiement de Bourse" width="49" height="46">
                                                                        <h5 class="text-white mt-3">Bourse</h5>
                                                                    </div>
                                                                </div>

                                                                <div class="col-md-4 servicecol" data-parent-id="">
                                                                    <div class="mb-5" style="background: {{ $colorCode }};"
                                                                        onmouseover="this.style.background='{{ $hovercolor }}';"
                                                                        onmouseout="this.style.background='{{ $colorCode }}';">
                                                                        <a href="{{ route('employee.payment.chart') }}" class="linkdecoration">
                                                                            <img src="{{ asset('/assets/image/demand-payment-6.png') }}" alt="Statistiques des Paiement"  width="49" height="46">
                                                                            <h4 class="text-white mt-3 test">Statistiques</h4>
                                                                        </a>
                                                                    </div>
                                                                </div>
                                                                
                                                                <div class="col-md-4 servicecol childService mb-5" data-child-id="25">
                                                                    <div class="mb-5" style="background: {{ $colorCode }} !important;">
                                                                        <img src="{{ asset('/assets/image/demand-payment-3.png') }}"
                                                                        alt="{{ $service->name }}"  width="49" height="46">
                                                                        <h5 class="text-white mt-3 test">Secours Financiers</h5>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-4 servicecol childService mb-5" data-child-id="5">
                                                                    <div class="mb-5" style="background: {{ $colorCode }} !important;">
                                                                        <img src="{{ asset('/assets/image/demand-payment-6.png') }}"
                                                                        alt="{{ $service->name }}"  width="49" height="46">
                                                                        <h5 class="text-white mt-3 test">Résumé</h5>
                                                                    </div>
                                                                </div>
                                                                <div class="col-12 d-none text-center" id="official-child">
                                                                    <div class="row d-flex justify-content-center">
                                                                        <div class="col-md-4 servicecol childService mb-5" data-child-id="27">
                                                                            <div class="mb-5" style="background: {{ $colorCode }} !important;">
                                                                                <img src="{{ asset('/assets/image/demand-payment-1.png') }}"
                                                                                alt="{{ $service->name }}" width="49" height="46">
                                                                                <h5 class="text-white mt-3">Attribution</h5>
                                                                            </div>
                                                                        </div>
                                                                    <div class="col-md-4 servicecol childService mb-5" data-child-id="28">
                                                                        <div class="mb-5" style="background: {{ $colorCode }} !important;">
                                                                            <img src="{{ asset('/assets/image/demand-payment-1.png') }}"
                                                                            alt="{{ $service->name }}" width="49" height="46">
                                                                            <h5 class="text-white mt-3">Renouvellement</h5>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>`

                                                        childServicesRow.innerHTML = childServicesHTML;
                                                        parentServicesRow.classList.add('d-none')
                                                        childServicesContainer.classList.remove('d-none')

                                                        document.getElementById('toggleServices').onclick =
                                                            function(
                                                                event) {
                                                                if (document.getElementById('toggleServices')) {
                                                                    const officialChild = document.getElementById(
                                                                        'official-child');
                                                                    officialChild.classList.remove('d-none')
                                                                }
                                                            }

                                                        updateHiddenFields();
                                                        updateNextButtonState();
                                                    }else if(parentServiceId == 2){
                                                        const childServicesHTML =
                                                                `<div class="col-md-4 servicecol childService mb-5" id="toggleServices" data-child-id="0">
                                                                    <div class="mb-5" style="background: {{ $colorCode }} !important;">	
                                                                        <img src="{{ asset('/assets/image/demand-payment-1.png') }}"
                                                                        alt="Paiement de Bourse" width="49" height="46">
                                                                        <h5 class="text-white mt-3">Bourse</h5>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-4 servicecol" data-parent-id="">
                                                                    <div class="mb-5" style="background: {{ $colorCode }};"
                                                                        onmouseover="this.style.background='{{ $hovercolor }}';"
                                                                        onmouseout="this.style.background='{{ $colorCode }}';">
                                                                        <a href="{{ route('employee.payment.chart') }}" class="linkdecoration">
                                                                            <img src="{{ asset('/assets/image/demand-payment-6.png') }}" alt="Statistiques des Paiement"  width="49" height="46">
                                                                            <h4 class="text-white mt-3 test">Statistiques</h4>
                                                                        </a>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-4 servicecol childService mb-5" data-child-id="23">
                                                                    <div class="mb-5" style="background: {{ $colorCode }} !important;">
                                                                        <img src="{{ asset('/assets/image/demand-payment-3.png') }}"
                                                                        alt="{{ $service->name }}"  width="49" height="46">
                                                                        <h5 class="text-white mt-3 test">Secours Financiers</h5>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-4 servicecol childService mb-5" data-child-id="6">
                                                                    <div class="mb-5" style="background: {{ $colorCode }} !important;">
                                                                        <img src="{{ asset('/assets/image/demand-payment-6.png') }}"
                                                                        alt="{{ $service->name }}"  width="49" height="46">
                                                                        <h5 class="text-white mt-3 test">Statistiques</h5>
                                                                    </div>
                                                                </div>
                                                                <div class="col-12 d-none text-center" id="official-child">
                                                                    <div class="row d-flex justify-content-center">
                                                                        <div class="col-md-4 servicecol childService mb-5" data-child-id="26">
                                                                            <div class="mb-5" style="background: {{ $colorCode }} !important;">
                                                                                <img src="{{ asset('/assets/image/demand-payment-1.png') }}"
                                                                                alt="{{ $service->name }}" width="49" height="46">
                                                                                <h5 class="text-white mt-3">Attribution</h5>
                                                                            </div>
                                                                        </div>
                                                                    <div class="col-md-4 servicecol childService mb-5" data-child-id="29">
                                                                        <div class="mb-5" style="background: {{ $colorCode }} !important;">
                                                                            <img src="{{ asset('/assets/image/demand-payment-1.png') }}"
                                                                            alt="{{ $service->name }}" width="49" height="46">
                                                                            <h5 class="text-white mt-3">Renouvellement</h5>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>`

                                                        childServicesRow.innerHTML = childServicesHTML;
                                                        parentServicesRow.classList.add('d-none')
                                                        childServicesContainer.classList.remove('d-none')

                                                        document.getElementById('toggleServices').onclick =
                                                            function(
                                                                event) {
                                                                if (document.getElementById('toggleServices')) {
                                                                    const officialChild = document.getElementById(
                                                                        'official-child');
                                                                    officialChild.classList.remove('d-none')
                                                                }
                                                            }

                                                        updateHiddenFields();
                                                        updateNextButtonState();
                                                    }else if(parentServiceId == 3){
                                                        const childServicesHTML =
                                                                `
                                                                <div class="col-md-4 servicecol childService mb-5" data-child-id="31">
                                                                    <div class="mb-5" style="background: {{ $colorCode }} !important;">
                                                                        <img src="{{ asset('/assets/image/Profile.png') }}"
                                                                        alt="{{ $service->name }}"  width="49" height="46">
                                                                        <h5 class="text-white mt-3 test">Profil (CV en ligne)</h5>
                                                                    </div>
                                                                </div>
                                                                `

                                                        childServicesRow.innerHTML = childServicesHTML;
                                                        parentServicesRow.classList.add('d-none')
                                                        childServicesContainer.classList.remove('d-none')

                                                        document.getElementById('toggleServices').onclick =
                                                            function(
                                                                event) {
                                                                if (document.getElementById('toggleServices')) {
                                                                    const officialChild = document.getElementById(
                                                                        'official-child');
                                                                    officialChild.classList.remove('d-none')
                                                                }
                                                            }

                                                        updateHiddenFields();
                                                        updateNextButtonState();
                                                    } else if(parentServiceId == 4){
                                                        const childServicesHTML =
                                                                `<div class="col-md-4 servicecol childService mb-5"  data-child-id="32">
                                                                    <div class="mb-5" style="background: {{ $colorCode }} !important;">	
                                                                        <img src="{{ asset('/assets/image/other-document.png') }}"
                                                                        alt="Paiement de Bourse" width="49" height="46">
                                                                        <h5 class="text-white mt-3">Autre</h5>
                                                                    </div>
                                                                </div>
                                                                `

                                                        childServicesRow.innerHTML = childServicesHTML;
                                                        parentServicesRow.classList.add('d-none')
                                                        childServicesContainer.classList.remove('d-none')

                                                        document.getElementById('toggleServices').onclick =
                                                            function(
                                                                event) {
                                                                if (document.getElementById('toggleServices')) {
                                                                    const officialChild = document.getElementById(
                                                                        'official-child');
                                                                    officialChild.classList.remove('d-none')
                                                                }
                                                            }

                                                        updateHiddenFields();
                                                        updateNextButtonState();
                                                    } else if(parentServiceId == 5){
                                                        const childServicesHTML =
                                                                `<div class="col-md-4 servicecol childService mb-5"  data-child-id="13">
                                                                    <div class="mb-5" style="background: {{ $colorCode }} !important;">	
                                                                        <img src="{{ asset('/assets/image/other-document.png') }}"
                                                                        alt="{{ $service->name }}">
                                                                        <h5 class="text-white mt-3">@lang('messages.family_book')</h5>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-4 servicecol childService mb-5"  data-child-id="14">
                                                                    <div class="mb-5" style="background: {{ $colorCode }} !important;>	
                                                                        <img src="{{ asset('/assets/image/other-document.png') }}"
                                                                        alt="{{ $service->name }}">
                                                                        <h5 class="text-white mt-3">@lang('messages.life_certificate')</h5>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-4 servicecol childService mb-5"  data-child-id="15">
                                                                    <div class="mb-5" style="background: {{ $colorCode }} !important;">	
                                                                        <img src="{{ asset('/assets/image/other-document.png') }}"
                                                                        alt="{{ $service->name }}">
                                                                        <h5 class="text-white mt-3">@lang('messages.residence_certificate')</h5>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-4 servicecol childService mb-5"  data-child-id="16">
                                                                    <div class="mb-5" style="background: {{ $colorCode }} !important;">	
                                                                        <img src="{{ asset('/assets/image/other-document.png') }}"
                                                                        alt="{{ $service->name }}">
                                                                        <h5 class="text-white mt-3">@lang('messages.moving_certificate')</h5>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-4 servicecol childService mb-5"  data-child-id="17">
                                                                    <div class="mb-5" style="background: {{ $colorCode }} !important;">	
                                                                        <img src="{{ asset('/assets/image/other-document.png') }}"
                                                                        alt="{{ $service->name }}">
                                                                        <h5 class="text-white mt-3">@lang('messages.human_remains')</h5>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-4 servicecol childService mb-5"  data-child-id="18">
                                                                    <div class="mb-5" style="background: {{ $colorCode }} !important;">	
                                                                        <img src="{{ asset('/assets/image/other-document.png') }}"
                                                                        alt="{{ $service->name }}">
                                                                        <h5 class="text-white mt-3">@lang('messages.legalization')</h5>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-4 servicecol childService mb-5"  data-child-id="19">
                                                                    <div class="mb-5" style="background: {{ $colorCode }} !important;">	
                                                                        <img src="{{ asset('/assets/image/other-document.png') }}"
                                                                        alt="{{ $service->name }}">
                                                                        <h5 class="text-white mt-3">@lang('messages.non_remarriage_certificate')</h5>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-4 servicecol childService mb-5"  data-child-id="20">
                                                                    <div class="mb-5" style="background: {{ $colorCode }} !important;">	
                                                                        <img src="{{ asset('/assets/image/other-document.png') }}"
                                                                        alt="{{ $service->name }}">
                                                                        <h5 class="text-white mt-3">@lang('messages.retirement')</h5>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-4 servicecol childService mb-5"  data-child-id="21">
                                                                    <div class="mb-5" style="background: {{ $colorCode }} !important;">	
                                                                        <img src="{{ asset('/assets/image/other-document.png') }}"
                                                                        alt="{{ $service->name }}">
                                                                        <h5 class="text-white mt-3">@lang('messages.laisser_passer')</h5>
                                                                    </div>
                                                                </div>`

                                                        childServicesRow.innerHTML = childServicesHTML;
                                                        parentServicesRow.classList.add('d-none')
                                                        childServicesContainer.classList.remove('d-none')

                                                        document.getElementById('toggleServices').onclick =
                                                            function(
                                                                event) {
                                                                if (document.getElementById('toggleServices')) {
                                                                    const officialChild = document.getElementById(
                                                                        'official-child');
                                                                    officialChild.classList.remove('d-none')
                                                                }
                                                            }

                                                        updateHiddenFields();
                                                        updateNextButtonState();
                                                    } else if(parentServiceId == 6){
                                                        const childServicesHTML =
                                                            `<div class="col-md-4 servicecol childService mb-5"  data-child-id="7">
                                                                <div class="mb-5" style="background: {{ $colorCode }} !important;">	
                                                                    <img src="{{ asset('/assets/image/civil-document.png') }}"
                                                                    alt="{{ $service->name }}">
                                                                    <h5 class="text-white mt-3">@lang('messages.birth_transcript')</h5>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-4 servicecol childService mb-5"  data-child-id="8">
                                                                <div class="mb-5" style="background: {{ $colorCode }} !important;">	
                                                                    <img src="{{ asset('/assets/image/civil-document.png') }}"
                                                                    alt="{{ $service->name }}">
                                                                    <h5 class="text-white mt-3">@lang('messages.marriage_transcript')</h5>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-4 servicecol childService mb-5"  data-child-id="9">
                                                                <div class="mb-5" style="background: {{ $colorCode }} !important;">	
                                                                    <img src="{{ asset('/assets/image/civil-document.png') }}"
                                                                    alt="{{ $service->name }}">
                                                                    <h5 class="text-white mt-3">@lang('messages.death_transcript')</h5>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-4 servicecol childService mb-5"  data-child-id="10">
                                                                <div class="mb-5" style="background: {{ $colorCode }} !important;">	
                                                                    <img src="{{ asset('/assets/image/civil-document.png') }}"
                                                                    alt="{{ $service->name }}">
                                                                    <h5 class="text-white mt-3">@lang('messages.copy_birth_transcript')</h5>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-4 servicecol childService mb-5"  data-child-id="11">
                                                                <div class="mb-5" style="background: {{ $colorCode }} !important;">	
                                                                    <img src="{{ asset('/assets/image/civil-document.png') }}"
                                                                    alt="{{ $service->name }}">
                                                                    <h5 class="text-white mt-3">@lang('messages.copy_marriage_transcript')</h5>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-4 servicecol childService mb-5"  data-child-id="12">
                                                                <div class="mb-5" style="background: {{ $colorCode }} !important;">	
                                                                    <img src="{{ asset('/assets/image/civil-document.png') }}"
                                                                    alt="{{ $service->name }}">
                                                                    <h5 class="text-white mt-3">@lang('messages.copy_death_transcript')</h5>
                                                                </div>
                                                            </div>`

                                                            childServicesRow.innerHTML = childServicesHTML;
                                                            parentServicesRow.classList.add('d-none')
                                                            childServicesContainer.classList.remove('d-none')

                                                            document.getElementById('toggleServices').onclick =
                                                                function(
                                                                    event) {
                                                                    if (document.getElementById('toggleServices')) {
                                                                        const officialChild = document.getElementById(
                                                                            'official-child');
                                                                        officialChild.classList.remove('d-none')
                                                                    }
                                                                }

                                                            updateHiddenFields();
                                                            updateNextButtonState();
                                                    }else if(parentServiceId == 31){
                                                        const childServicesHTML =
                                                                `<div class="col-md-4 servicecol childService mb-5"  data-child-id="32">
                                                                    <div class="mb-5" style="background: {{ $colorCode }} !important;">	
                                                                        <img src="{{ asset('/assets/image/civil-document.png') }}"
                                                                        alt="{{ $service->name }}">
                                                                        <h5 class="text-white mt-3">@lang('messages.travel_pass')</h5>
                                                                    </div>
                                                                </div>`

                                                        childServicesRow.innerHTML = childServicesHTML;
                                                        parentServicesRow.classList.add('d-none')
                                                        childServicesContainer.classList.remove('d-none')

                                                        document.getElementById('toggleServices').onclick =
                                                            function(
                                                                event) {
                                                                if (document.getElementById('toggleServices')) {
                                                                    const officialChild = document.getElementById(
                                                                        'official-child');
                                                                    officialChild.classList.remove('d-none')
                                                                }
                                                            }

                                                        updateHiddenFields();
                                                        updateNextButtonState();
                                                    }else {
                                                        const childServicesHTML = filteredChildServices.map(child => `
                                                                <div class="col-md-4 servicecol childService mb-5 " data-child-id="${child.id}">
                                                                    <div class="mb-5 else" style="background: {{ $colorCode }} !important;">
                                                                        <img src="{{ asset('/assets/image/card.png') }}"
                                                                        alt="{{ $service->name }}">
                                                                        <h5 class="text-white mt-3"> ${translations[child.short_name]} </h5>
                                                                    </div>
                                                                </div>
                                                            `).join('');

                                                                childServicesRow.innerHTML = childServicesHTML;
                                                                parentServicesRow.classList.add('d-none')
                                                                childServicesContainer.classList.remove('d-none')

                                                                updateHiddenFields();
                                                                updateNextButtonState();
                                                            }
                                                        })
                                                        parentServiceCol.classList.add('selected-parent');
                                                    });
                                    });

                                    childServicesContainer.addEventListener('click', (event) => {
                                        const childServiceCol = event.target.closest('.servicecol[data-child-id]');

                                        if (childServiceCol) {
                                            const childId = childServiceCol.getAttribute('data-child-id');
                                            if (parseInt(childId) > 0) {
                                                const childServiceCols = document.querySelectorAll(
                                                    '.servicecol[data-child-id]');
                                                childServiceCols.forEach((col) => {
                                                    col.classList.remove('selected-child');
                                                });

                                                childServiceCol.classList.add('selected-child');
                                                updateHiddenFields();
                                                updateNextButtonState();
                                            }
                                        }
                                    });

                                    updateNextButtonState();
                                });
                            </script>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection