@extends('layouts.base')
@section('content')
                    <div class="card d-flex flex-row-fluid flex-center">
                        <form class="card-body py-20 w-100 px-9" id="kt_create_account_form_parallel" data-action="{{ $action }}">
                            <div class="w-100">
                                <div class="pb-10 pb-lg-15">
                                    <h2 class="fw-bold d-flex align-items-center text-gray-900">نمای موازی عملیات</h2>
                                </div>
                                <div class="row mb-10">
                                    <div class="col-md-6 fv-row">
                                        <label class="fs-6 fw-semibold form-label mb-2">اپراتور</label>
                                        @foreach($users as $user)
                                            <label class="d-flex flex-stack mb-5 cursor-pointer">
                                                <span class="d-flex align-items-center me-2">
                                                    <span class="symbol symbol-45px me-4">
                                                        <img src="{{asset('storage/'.$user->profile_photo_path)}}" alt="">
                                                    </span>
                                                    <span class="d-flex flex-column">
                                                        <span class="fw-bold fs-7">{{$user->firstname . ' ' . $user->lastname }}</span>
                                                        <span class="fs-8 text-muted">{{$user->code . ' - سن: ' . $user->age }}</span>
                                                    </span>
                                                </span>
                                                <span class="form-check form-check-custom form-check-solid">
                                                    <input class="form-check-input" type="radio" name="user" value="{{$user->id}}" />
                                                </span>
                                            </label>
                                        @endforeach
                                    </div>
                                    <div class="col-md-6 fv-row">
                                        <label class="fs-6 fw-semibold form-label mb-2">بیمار</label>
                                        <table class="table align-middle gs-0 gy-3">
                                            <tbody>
                                            @foreach($patients as $patient)
                                                <tr>
                                                    <td>
                                                        <div class="symbol symbol-55px me-2">
                                                            <img id="patient-image-{{$patient->id}}" src="{{asset('storage/'.$patient->image)}}" alt="">
                                                        </div>
                                                    </td>
                                                    <td class="text-gray-900 fw-bold fs-7">{{$patient->firstname . ' ' . $patient->lastname }}</td>
                                                    <td class="text-gray-700 fw-semibold fs-8">{{$patient->country }} - {{$patient->city }}</td>
                                                    <td class="text-gray-700 fw-semibold fs-8">{{$patient->location }}</td>
                                                    <td class="text-gray-900 fw-bold fs-7 pe-0">
                                                        <span class="form-check form-check-custom form-check-solid">
                                                            <input class="form-check-input patient" type="radio" name="patient" value="{{$patient->id}}" />
                                                        </span>
                                                    </td>
                                                </tr>
                                            @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                                <div class="row mb-10">
                                    <div class="col-md-6 fv-row">
                                        <label class="fs-6 fw-semibold form-label mb-2">اعصاب مغزی</label>
                                        @foreach($neuros as $id => $neuro)
                                            <div class="form-check mb-3">
                                                <input class="form-check-input neuros" type="checkbox" value="{{$id}}" id="neuro-{{ $id }}" name="neuros[]" />
                                                <label class="form-check-label text-gray-800" for="neuro-{{ $id }}">{{$neuro}}</label>
                                            </div>
                                        @endforeach
                                    </div>
                                    <div class="col-md-6 fv-row">
                                        <div id="interactive-brain-svg" style="width: 100%; height: auto; cursor: pointer;"></div>
                                    </div>
                                </div>

                                <div class="row mb-10">
                                    <div class="col-md-6 fv-row">
                                        <label class="fs-6 fw-semibold form-label mb-2">چاکرا</label>
                                        @foreach($chakras as $id => $chakra)
                                            <div class="form-check mb-3">
                                                <input class="form-check-input" type="checkbox" value="{{$id}}"  name="chakra[]" />
                                                <label class="form-check-label text-gray-800">{{$chakra}}</label>
                                            </div>
                                        @endforeach
                                    </div>
                                    <div class="col-md-6 fv-row">
                                        <div id="chakra-svg-container" style="position: relative; display: inline-block;">
                                            <img  id="chakra-svg" style="max-width: 100%; height: auto;">
                                        </div>
                                    </div>
                                </div>

                                <div class="row mb-10">
                                    <div class="col-md-4 fv-row">
                                        <label class="fs-6 fw-semibold form-label mb-2">قلب</label>
                                        @foreach($heart as $id => $h)
                                            <div class="form-check mb-3">
                                                <input class="form-check-input" type="checkbox" value="{{$id}}" name="heart[]" id="heartCheck{{$id}}" />
                                                <label class="form-check-label text-gray-800" for="heartCheck{{$id}}">{{$h}}</label>
                                            </div>
                                        @endforeach
                                    </div>
                                    <div class="col-md-8 fv-row" id="heart-svg-container">
                                        <img id="heart-svg" style="width: 100%">
                                    </div>
                                </div>

                                <div class="row mb-10">
                                    <div class="col-md-8 fv-row">
                                        <label class="fs-6 fw-semibold form-label mb-2">مختصات</label>
                                        <input id="lat" type="text" class="form-control form-control-solid mb-3" placeholder="عرض جغرافیایی" name="lat" value="">
                                        <input id="lng" type="text" class="form-control form-control-solid mb-3" placeholder="طول جغرافیایی" name="lng" value="">
                                        <input id="latlng" name="location" type="hidden">
                                    </div>
                                    <div class="col-md-4 fv-row align-content-end">
                                        <div id="last-map" style="height: 280px; width: 100%;"></div>
                                    </div>
                                </div>

                                <div class="row mb-10">
                                    <label class="form-label">قدرت عملیات</label>
                                    <input type="text" class="form-control form-control-solid" name="power" readonly value="10" />
                                </div>

                                <div class="d-flex flex-stack">
                                    <div class="me-5">
                                        <label class="fs-6 fw-semibold form-label">تله پورت</label>
                                    </div>
                                    <label class="form-check form-switch form-check-custom form-check-solid">
                                        <input name="teleport" class="form-check-input" type="checkbox" value="1"  />
                                    </label>
                                </div>
                            </div>
                            @csrf
                        </form>
                    </div>
@endsection
@section('script')

    <script src="{{asset('assets/plugins/custom/leaflet/leaflet.bundle.js')}}"></script>
    <script>
        var leafletmapParallel;
        var nerves = [11,12,13,14,4,5,6,7,8,9,10,2];
        let chakraIndexes = [0,6,7,8,9,10,11];
        let heartIndexes = [32,62,13,10,26,49,23,53,42,50];

        document.addEventListener('DOMContentLoaded', function() {
            loadInteractiveBrainSVG();
            initializeChakraSVG();
            initializeHeartSVG();
            initLeaflet();
            initReceiver();
        });

        function initLeaflet(){
            try {
                leafletmapParallel = L.map('last-map').setView([35.6892, 51.3890], 5);
                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                    maxZoom: 19,
                }).addTo(leafletmapParallel);
            } catch (e) { console.error(e); }
        }

        function loadInteractiveBrainSVG() {
            fetch('{{asset('assets/media/svg/pages/brain.svg')}}')
                .then(response => response.text())
                .then(svgText => {
                    const container = document.getElementById('interactive-brain-svg');
                    container.innerHTML = svgText;
                    const paths = container.querySelectorAll('path[style*="fill:"]');
                    paths.forEach((path, index) => {
                        const fillColor = path.getAttribute('style').match(/fill:#([^;"]+)/);
                        if (nerves.includes(index)) {
                            path.setAttribute('data-original-fill', fillColor ? fillColor[1] : 'ffffff');
                            path.classList.add('brain-path');
                            path.style.cursor = 'pointer';
                            path.addEventListener('click', function(e) {
                                e.preventDefault();
                                e.stopPropagation();
                                let id = nerves.indexOf(index);
                                path.classList.toggle('selected');
                                const checked = path.classList.contains('selected');
                                if (checked) {
                                    path.style.fill = '#ff6b6b';
                                    path.style.stroke = '#d63031';
                                    path.style.strokeWidth = '2';
                                } else {
                                    path.style.fill = '#' + path.getAttribute('data-original-fill');
                                    path.style.stroke = 'none';
                                    path.style.strokeWidth = '0';
                                }
                                document.getElementById('neuro-'+id)?.setAttribute('checked', checked);
                            });
                        }
                    });
                })
        }

        function initializeChakraSVG() {
            const chakraSvgContainer = document.getElementById('chakra-svg-container');
            fetch('{{asset('assets/media/svg/pages/chakra.svg')}}')
                .then(response => response.text())
                .then(svgContent => {
                    chakraSvgContainer.innerHTML = svgContent;
                    const chakraPaths = chakraSvgContainer.querySelectorAll('path[id*="path"], circle[id*="path"');
                    chakraPaths.forEach((path, index) => {
                        if(chakraIndexes.includes(index)){
                            path.classList.add('chakra-path');
                            path.style.cursor = 'pointer';
                            path.addEventListener('click', function() {
                                const checkboxes = document.querySelectorAll('input[name="chakra[]"]');
                                const i = chakraIndexes.indexOf(index);
                                if (checkboxes[i]) {
                                    const newVal = !checkboxes[i].checked;
                                    checkboxes[i].checked = newVal;
                                    path.classList.toggle('selected', newVal);
                                }
                            });
                        }
                    });
                })
        }

        function initializeHeartSVG() {
            const heartSvgContainer = document.getElementById('heart-svg-container');
            fetch('{{asset('assets/media/svg/pages/heart.svg')}}')
                .then(response => response.text())
                .then(svgContent => {
                    heartSvgContainer.innerHTML = svgContent;
                    const heartPaths = heartSvgContainer.querySelectorAll('#layer1 path[style*="fill:"]');
                    heartPaths.forEach((path, index) => {
                        if(heartIndexes.includes(index)){
                            path.classList.add('heart-path');
                            path.style.cursor = 'pointer';
                            path.addEventListener('click', function() {
                                const heartCheckboxes = document.querySelectorAll('input[name="heart[]"]');
                                const i = heartIndexes.indexOf(index);
                                if (heartCheckboxes[i]) {
                                    const newVal = !heartCheckboxes[i].checked;
                                    heartCheckboxes[i].checked = newVal;
                                    path.classList.toggle('selected', newVal);
                                }
                            });
                        }
                    });
                })
        }

        function initReceiver(){
            const form = document.getElementById('kt_create_account_form_parallel');
            if (!form) return;

            let lastState = null;
            let pollingInterval = null;

            function pollForUpdates() {
                fetch('{{route("operation-sync.get")}}?session_id=operation_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9))
                    .then(response => response.json())
                    .then(data => {
                        if (data.state && JSON.stringify(data.state) !== JSON.stringify(lastState)) {
                            lastState = data.state;
                            applyStateToForm(data.state);
                        }
                    })
                    .catch(e => console.error('Polling failed:', e));
            }

            function applyStateToForm(s) {
                if (!s) return;

                // user
                if (s.user != null) {
                    const u = form.querySelector('input[name="user"][value="'+s.user+'"]');
                    if (u) u.checked = true;
                }

                // patient
                if (s.patient != null) {
                    const p = form.querySelector('input[name="patient"][value="'+s.patient+'"]');
                    if (p) p.checked = true;
                }

                // arrays
                const setChecked = (selector, values) => {
                    const inputs = form.querySelectorAll(selector);
                    inputs.forEach(inp => { inp.checked = values?.includes(inp.value); });
                };
                setChecked('input[name="neuros[]"]', s.neuros);
                setChecked('input[name="chakra[]"]', s.chakras);
                setChecked('input[name="heart[]"]', s.heart);
                setChecked('input[name="interaction[]"]', s.interaction);

                // teleport
                const tp = form.querySelector('input[name="teleport"]');
                if (tp) tp.checked = !!s.teleport;

                // power
                const power = form.querySelector('input[name="power"]');
                if (power && s.power != null) power.value = s.power;

                // durations
                if (form.querySelector('input[name="execution"]') && s.execution != null) {
                    form.querySelector('input[name="execution"]').value = s.execution;
                }
                if (form.querySelector('input[name="execution2"]') && s.execution2 != null) {
                    form.querySelector('input[name="execution2"]').value = s.execution2;
                }

                // location and map
                if (s.lat != null) document.getElementById('lat').value = s.lat;
                if (s.lng != null) document.getElementById('lng').value = s.lng;
                if (s.location != null) document.getElementById('latlng').value = s.location;
                if (leafletmapParallel && s.lat && s.lng) {
                    leafletmapParallel.setView([s.lat, s.lng], 13);
                }

                // mirror patient image in a visible place if desired
                if (s.patient && s.patientImage) {
                    const img = document.getElementById('patient-image-'+s.patient);
                    if (img) img.src = s.patientImage;
                }

                // sync SVG visual state to checkboxes
                try { syncCheckboxToSVG(); } catch(e){}
                try { syncHeartCheckboxToSVG(); } catch(e){}

                // sync stepper step
                if (s.currentStep) {
                    syncStepperStep(s.currentStep);
                }
            }

            // Start polling every 2 seconds
            pollingInterval = setInterval(pollForUpdates, 2000);

            // Initial poll
            setTimeout(pollForUpdates, 1000);

            // Cleanup on page unload
            window.addEventListener('beforeunload', () => {
                if (pollingInterval) clearInterval(pollingInterval);
            });
        }

        function syncCheckboxToSVG() {
            const checkboxes = document.querySelectorAll('input[name="chakra[]"]');
            const chakraPaths = document.querySelectorAll('.chakra-path');
            checkboxes.forEach((checkbox, idx) => {
                if (chakraPaths[idx]) {
                    if (checkbox.checked) {
                        chakraPaths[idx].classList.add('selected');
                    } else {
                        chakraPaths[idx].classList.remove('selected');
                    }
                }
            });
        }
        function syncHeartCheckboxToSVG() {
            const heartCheckboxes = document.querySelectorAll('input[name="heart[]"]');
            const heartPaths = document.querySelectorAll('.heart-path');
            const correctIndexs = [4, 9,1,0,3,6,2,8,5,7];
            heartCheckboxes.forEach((checkbox, index) => {
                if (heartPaths[correctIndexs[index]]) {
                    heartPaths[correctIndexs[index]].classList.toggle('selected', checkbox.checked);
                }
            });
        }

        function syncStepperStep(stepNumber) {
            // Create a simple stepper indicator in the parallel page
            const stepperIndicator = document.getElementById('stepper-indicator');
            if (!stepperIndicator) {
                // Create stepper indicator if it doesn't exist
                const indicator = document.createElement('div');
                indicator.id = 'stepper-indicator';
                indicator.className = 'alert alert-info mb-10';
                indicator.innerHTML = '<i class="ki-duotone ki-information-5 fs-2 me-2"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i>مرحله فعلی: <span id="current-step-display">1</span>';

                const form = document.getElementById('kt_create_account_form_parallel');
                if (form) {
                    form.insertBefore(indicator, form.firstChild);
                }
            }

            // Update the step display
            const stepDisplay = document.getElementById('current-step-display');
            if (stepDisplay) {
                stepDisplay.textContent = stepNumber;
            }

            // Add visual feedback for current step
            const stepNames = [
                'اپراتور', 'پروتکل‌ها', 'بیمار', 'پروتوکل‌ها و دستورها',
                'مختصات جغرافیایی', 'اعصاب مغزی', 'تله پورت', 'چاکرا',
                'قلب', 'درگیری ذرات', 'قدرت', 'نوار قلب',
                'اتصال به شبکه شعور کیهانی', 'اجرا'
            ];

            const stepName = stepNames[stepNumber - 1] || 'نامشخص';
            const indicator = document.getElementById('stepper-indicator');
            if (indicator) {
                indicator.innerHTML = `<i class="ki-duotone ki-information-5 fs-2 me-2"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i>مرحله فعلی: <span id="current-step-display">${stepNumber}</span> - ${stepName}`;
            }
        }
    </script>

    <style>
        .brain-path { transition: all 0.3s ease; }
        .brain-path.selected { filter: drop-shadow(0 0 8px rgba(255, 107, 107, 0.6)); fill: #ff6b6b !important; stroke: #d63031 !important; stroke-width: 2 !important; }
        .chakra-path { cursor: pointer; transition: all 0.3s ease; }
        .chakra-path.selected { filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.8)) brightness(1.2); }
        .heart-path.selected { fill: rgb(13 79 51) !important; cursor: pointer; transition: 0.3s; opacity: 0.8; stroke: rgb(48 214 147) !important; stroke-width: 2 !important; }
        #heart-svg-container svg { max-width: 100%; margin-top: -125px; }
    </style>
@endsection