{{-- @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 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" onclick="event.preventDefault();">
                                                            <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
                                        @endforeach
                                    </div>

                                    <!-- Enfants -->
                                    <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>

                                    <!-- Petits-enfants -->
                                    <div class="row custom-subservices">
                                        <div class="col-md-12">
                                            <div id="grandchild-service-cards" class="d-none">
                                                <h3>Sous-service</h3>
                                                <button type="button" class="btn rounded-pill btn-lg back" id="child_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="grandchild-service-cards-row"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

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

                            <script>
                                document.addEventListener("DOMContentLoaded", function() {
                                    const parentServiceCols = document.querySelectorAll('.servicecol[data-parent-id]');
                                    const parentServicesRow = document.getElementById('parent-cards');
                                    const childServicesContainer = document.getElementById('child-service-cards');
                                    const childServicesRow = document.getElementById('child-service-cards-row');
                                    const grandchildServicesContainer = document.getElementById('grandchild-service-cards');
                                    const grandchildServicesRow = document.getElementById('grandchild-service-cards-row');

                                    const selectedParentInput = document.getElementById('selectedParentInput');
                                    const selectedChildInput = document.getElementById('selectedChildInput');
                                    const selectedGrandChildInput = document.getElementById('selectedGrandChildInput');

                                    const backButtonId = document.getElementById('service_back');
                                    const childBackButtonId = document.getElementById('child_service_back');

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

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

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

                                        selectedParentInput.value = selectedParent ? selectedParent.getAttribute('data-parent-id') : '';
                                        selectedChildInput.value = selectedChild ? selectedChild.getAttribute('data-child-id') : '';
                                        selectedGrandChildInput.value = selectedGrandChild ? selectedGrandChild.getAttribute('data-grandchild-id') : '';
                                    }

                                    // Config : parent → enfants → petits-enfants
                                    const servicesConfig = {
                                        1: [
                                            {
                                                id: 24,
                                                label: "Paiement de Bourse",
                                                icon: "/assets/image/demand-payment-1.png",
                                                grandchildren: [
                                                    { id: 27, label: "Attribution", icon: "/assets/image/other-document.png" },
                                                    { id: 28, label: "Renouvellement", icon: "/assets/image/other-document.png" }
                                                ]
                                            },
                                            { id: 25, label: "Secours Financiers", icon: "/assets/image/demand-payment-3.png" },
                                            { id: 32, label: "Autre", icon: "/assets/image/demand-payment-3.png" },
                                        ],
                                        2: [
                                            { 
                                                id: 22, 
                                                label: "Paiement de Bourse", 
                                                icon: "/assets/image/demand-payment-1.png", 
                                                grandchildren: [
                                                    { id: 26, label: "Attribution", icon: "/assets/image/other-document.png" },
                                                    { id: 29, label: "Renouvellement", icon: "/assets/image/other-document.png" }
                                                ]
                                            },
                                            { id: 23, label: "Secours Financiers", icon: "/assets/image/demand-payment-3.png" },
                                            { id: 19, label: "Autre", icon: "/assets/image/demand-payment-3.png" },
                                        ],
                                        3: [
                                            // { id: 31, label: "Profil (CV en ligne)", icon: "/assets/image/Profile.png" },
                                            { id: 34, label: "Liste des CV", icon: "/assets/image/civil-document.png" }

                                        ],
                                        /*4: [
                                            { id: 32, label: "Autre", icon: "/assets/image/other-document.png" }
                                        ],*/
                                        4: [
                                            { id: 20, label: "Liste Ivoiriens de l'Extrérieur", icon: "/assets/image/other-document.png" }
                                        ],
                                        6: [
                                            { id: 13, label: "Déclarer une Entreprise", icon: "/assets/image/other-document.png" }
                                        ],
                                        7: [
                                            { id: 30, label: "Liste des Entreprises", icon: "/assets/image/civil-document.png" }
                                        ],
                                        5: [
                                            { id: 33, label: "Soumettre", icon: "/assets/image/civil-document.png" },
                                            { id: 34, label: "Liste des Opportunités", icon: "/assets/image/other-document.png" }
                                        ]
                                    };

                                    // Sélection d’un parent
                                    parentServiceCols.forEach((parentServiceCol) => {
                                        parentServiceCol.addEventListener("click", () => {
                                            const parentServiceId = parentServiceCol.getAttribute("data-parent-id");

                                            // 🔹 Met à jour l'input caché du parent
                                            selectedParentInput.value = parentServiceId;
                                            selectedChildInput.value = ""; // reset
                                            selectedGrandChildInput.value = ""; // reset

                                            parentServiceCols.forEach((col) => col.classList.remove("selected-parent"));
                                            parentServiceCol.classList.add("selected-parent");

                                            const childList = servicesConfig[parentServiceId];

                                            if (childList) {
                                                const childServicesHTML = childList.map(child => `
                                                    <div class="col-md-4 servicecol childService mb-5" data-child-id="${child.id}">
                                                        <div class="mb-5" style="background: {{ $colorCode }} !important;">	
                                                            <img src="${child.icon}" alt="${child.label}" width="49" height="46">
                                                            <h5 class="text-white mt-3">${child.label}</h5>
                                                        </div>
                                                    </div>
                                                `).join("");

                                                childServicesRow.innerHTML = childServicesHTML;
                                            }

                                            parentServicesRow.classList.add("d-none");
                                            childServicesContainer.classList.remove("d-none");
                                        });
                                    });

// Sélection d’un enfant
childServicesContainer.addEventListener("click", (event) => {
    const childServiceCol = event.target.closest(".servicecol[data-child-id]");

    if (childServiceCol) {
        const childId = childServiceCol.getAttribute("data-child-id");

        // 🔹 Met à jour l'input caché de l'enfant
        selectedChildInput.value = childId;
        selectedGrandChildInput.value = ""; // reset

        document.querySelectorAll(".servicecol[data-child-id]").forEach((col) =>
            col.classList.remove("selected-child")
        );
        childServiceCol.classList.add("selected-child");

        // Vérifier si cet enfant a des petits-enfants
        const parentServiceId = selectedParentInput.value;
        const childConfig = servicesConfig[parentServiceId]?.find(c => c.id == childId);

        if (childConfig && childConfig.grandchildren) {
            const grandchildHTML = childConfig.grandchildren.map(gc => `
                <div class="col-md-4 servicecol grandChildService mb-5" data-grandchild-id="${gc.id}">
                    <div class="mb-5" style="background: {{ $colorCode }} !important;">	
                        <img src="${gc.icon}" alt="${gc.label}" width="49" height="46">
                        <h5 class="text-white mt-3">${gc.label}</h5>
                    </div>
                </div>
            `).join("");

            grandchildServicesRow.innerHTML = grandchildHTML;
            childServicesContainer.classList.add("d-none");
            grandchildServicesContainer.classList.remove("d-none");
        } else {
            // 🔹 Si pas de petits-enfants, redirection directe
            const parentId = selectedParentInput.value;


            if (parentId == 3) {
                // Pour le service Curriculum Vitae
                if (childId == 31) {
                    // Profil (CV en ligne)
                    window.location.href = "{{ url(route('entreprise_ivoirienne.cvData')) }}" + "?parentServiceId=" + parentId + "&childServiceId=" + childId;
                } else if (childId == 34) {
                    // Liste des CV
                    window.location.href = "{{ url(route('entreprise_ivoirienne.listeCVs')) }}" + "?parentServiceId=" + parentId + "&childServiceId=" + childId;
                }
            }

            else if (parentId == 4) {
                // Pour le service Profil, redirection vers la page de CV
                window.location.href = "{{ url(route('entreprise_ivoirienne.listeIvoiriensExterieurs')) }}" + "?parentServiceId=" + parentId + "&childServiceId=" + childId;
            } else if (parentId == 6) {
                // Pour le service Déclaration d'entreprise
                window.location.href = "{{ url(route('entreprise_ivoirienne.EntreprisesData')) }}" + "?parentServiceId=" + parentId + "&childServiceId=" + childId;
            } else if (parentId == 5) {
                // Pour le service Opportunités
                if (childId == 33) {
                    // Soumettre des opportunités
                    window.location.href = "{{ url(route('entreprise_ivoirienne.OpportunitesData')) }}" + "?parentServiceId=" + parentId + "&childServiceId=" + childId;
                } else if (childId == 34) {
                    // Liste des opportunités
                    window.location.href = "{{ url(route('entreprise_ivoirienne.listeOpportunites')) }}" + "?parentServiceId=" + parentId + "&childServiceId=" + childId;
                }
            } else if (parentId == 7) {
                // Pour le service Entreprises
                window.location.href = "{{ url(route('entreprise_ivoirienne.listeEntreprises')) }}" + "?parentServiceId=" + parentId + "&childServiceId=" + childId;
            } else {
                // Pour les autres services, redirection vers la page de données de livraison
                window.location.href = "/user/steper/deliverydata?parentServiceId=" + parentId + "&childServiceId=" + childId;
            }
            //window.location.href = `/user/steper/deliverydata?parentServiceId=${parentId}&childServiceId=${childId}`;
        }
    }
});

// Sélection d’un petit-enfant
grandchildServicesContainer.addEventListener("click", (event) => {
    const gcServiceCol = event.target.closest(".servicecol[data-grandchild-id]");

    if (gcServiceCol) {
        const grandChildId = gcServiceCol.getAttribute("data-grandchild-id");

        // 🔹 Met à jour l'input caché du petit-enfant
        selectedGrandChildInput.value = grandChildId;

        document.querySelectorAll(".servicecol[data-grandchild-id]").forEach((col) =>
            col.classList.remove("selected-grandchild")
        );
        gcServiceCol.classList.add("selected-grandchild");

        // Redirection finale
        const parentId = selectedParentInput.value;
        const childId = selectedChildInput.value;

        // si grandChildId existe, on l'utilise sinon on garde childId
        const finalChildId = grandChildId ? grandChildId : childId;

        window.location.href = `/user/steper/deliverydata?parentServiceId=${parentId}&childServiceId=${finalChildId}`;
    }
});

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