@extends('layouts.base')
@section('content')
                    <!--begin::Stepper-->
                    <div class="stepper stepper-pills stepper-column d-flex flex-column flex-xl-row flex-row-fluid gap-10" id="kt_create_account_stepper">
                        <!--begin::کناری-->
                        <div style="display: none!important;" class="card d-flex justify-content-center justify-content-xl-start flex-row-auto w-100 w-xl-300px w-xxl-300px">
                            <!--begin::Wrapper-->
                            <div class="card-body px-6 px-lg-10 px-xxl-15 py-20">
                                <!--begin::Nav-->
                                <div class="stepper-nav">
                                    <!--begin::مرحله 1-->
                                    <div class="stepper-item current" data-kt-stepper-element="nav">
                                        <!--begin::Wrapper-->
                                        <div class="stepper-wrapper">
                                            <!--begin::Icon-->
                                            <div class="stepper-icon w-40px h-40px">
                                                <i class="ki-duotone ki-check fs-2 stepper-check"></i>
                                                <span class="stepper-number">1</span>
                                            </div>
                                            <!--end::Icon-->
                                            <!--begin::Tags-->
                                            <div class="stepper-label">
                                                <h3 class="stepper-title">اپراتور</h3>
{{--                                                <div class="stepper-desc fw-semibold">جزییات اکانت</div>--}}
                                            </div>
                                            <!--end::Tags-->
                                        </div>
                                        <!--end::Wrapper-->
                                        <!--begin::Line-->
                                        <div class="stepper-line h-40px"></div>
                                        <!--end::Line-->
                                    </div>
                                    <!--end::مرحله 1-->
                                    <!--begin::مرحله 2-->
                                    <div class="stepper-item" data-kt-stepper-element="nav">
                                        <!--begin::Wrapper-->
                                        <div class="stepper-wrapper">
                                            <!--begin::Icon-->
                                            <div class="stepper-icon w-40px h-40px">
                                                <i class="ki-duotone ki-check fs-2 stepper-check"></i>
                                                <span class="stepper-number">2</span>
                                            </div>
                                            <!--end::Icon-->
                                            <!--begin::Tags-->
                                            <div class="stepper-label">
                                                <h3 class="stepper-title">پروتکل‌ها</h3>
{{--                                                <div class="stepper-desc fw-semibold">اکانت تنظیمات</div>--}}
                                            </div>
                                            <!--end::Tags-->
                                        </div>
                                        <!--end::Wrapper-->
                                        <!--begin::Line-->
                                        <div class="stepper-line h-40px"></div>
                                        <!--end::Line-->
                                    </div>
                                    <!--end::مرحله 2-->
                                    <!--begin::مرحله 3-->
                                    <div class="stepper-item" data-kt-stepper-element="nav">
                                        <!--begin::Wrapper-->
                                        <div class="stepper-wrapper">
                                            <!--begin::Icon-->
                                            <div class="stepper-icon w-40px h-40px">
                                                <i class="ki-duotone ki-check fs-2 stepper-check"></i>
                                                <span class="stepper-number">3</span>
                                            </div>
                                            <!--end::Icon-->
                                            <!--begin::Tags-->
                                            <div class="stepper-label">
                                                <h3 class="stepper-title">مختل کننده</h3>
{{--                                                <div class="stepper-desc fw-semibold">شما اطلاعات مربوط به تجارت</div>--}}
                                            </div>
                                            <!--end::Tags-->
                                        </div>
                                        <!--end::Wrapper-->
                                        <!--begin::Line-->
                                        <div class="stepper-line h-40px"></div>
                                        <!--end::Line-->
                                    </div>
                                    <!--end::مرحله 3-->
                                    <!--begin::مرحله 4-->
                                    <div class="stepper-item" data-kt-stepper-element="nav">
                                        <!--begin::Wrapper-->
                                        <div class="stepper-wrapper">
                                            <!--begin::Icon-->
                                            <div class="stepper-icon w-40px h-40px">
                                                <i class="ki-duotone ki-check fs-2 stepper-check"></i>
                                                <span class="stepper-number">4</span>
                                            </div>
                                            <!--end::Icon-->
                                            <!--begin::Tags-->
                                            <div class="stepper-label">
                                                <h3 class="stepper-title">پروتوکل‌ها و دستورها</h3>
{{--                                                <div class="stepper-desc fw-semibold">پروتوکل‌ها و دستورهای عملیاتی</div>--}}
                                            </div>
                                            <!--end::Tags-->
                                        </div>
                                        <!--end::Wrapper-->
                                        <!--begin::Line-->
                                        <div class="stepper-line h-40px"></div>
                                        <!--end::Line-->
                                    </div>
                                    <!--end::مرحله 4-->
                                    <!--begin::مرحله 5-->
                                    <div class="stepper-item" data-kt-stepper-element="nav">
                                        <!--begin::Wrapper-->
                                        <div class="stepper-wrapper">
                                            <!--begin::Icon-->
                                            <div class="stepper-icon w-40px h-40px">
                                                <i class="ki-duotone ki-check fs-2 stepper-check"></i>
                                                <span class="stepper-number">۵</span>
                                            </div>
                                            <!--end::Icon-->
                                            <!--begin::Tags-->
                                            <div class="stepper-label">
                                                <h3 class="stepper-title">مختصات جغرافیایی</h3>
{{--                                                <div class="stepper-desc fw-semibold">روش پرداخت</div>--}}
                                            </div>
                                            <!--end::Tags-->
                                        </div>
                                        <!--end::Wrapper-->
                                        <!--begin::Line-->
                                        <div class="stepper-line h-40px"></div>
                                        <!--end::Line-->
                                    </div>
                                    <!--end::مرحله 5-->
                                    <!--begin::مرحله 6-->
                                    <div class="stepper-item" data-kt-stepper-element="nav">
                                        <!--begin::Wrapper-->
                                        <div class="stepper-wrapper">
                                            <!--begin::Icon-->
                                            <div class="stepper-icon w-40px h-40px">
                                                <i class="ki-duotone ki-check fs-2 stepper-check"></i>
                                                <span class="stepper-number">۶</span>
                                            </div>
                                            <!--end::Icon-->
                                            <!--begin::Tags-->
                                            <div class="stepper-label">
                                                <h3 class="stepper-title">اعصاب مغزی</h3>
{{--                                                <div class="stepper-desc fw-semibold">روش پرداخت</div>--}}
                                            </div>
                                            <!--end::Tags-->
                                        </div>
                                        <!--end::Wrapper-->
                                        <!--begin::Line-->
                                        <div class="stepper-line h-40px"></div>
                                        <!--end::Line-->
                                    </div>
                                    <!--end::مرحله 6-->
                                    <!--begin::مرحله 7-->
                                    <div class="stepper-item" data-kt-stepper-element="nav">
                                        <!--begin::Wrapper-->
                                        <div class="stepper-wrapper">
                                            <!--begin::Icon-->
                                            <div class="stepper-icon w-40px h-40px">
                                                <i class="ki-duotone ki-check fs-2 stepper-check"></i>
                                                <span class="stepper-number">۷</span>
                                            </div>
                                            <!--end::Icon-->
                                            <!--begin::Tags-->
                                            <div class="stepper-label">
                                                <h3 class="stepper-title">تله پورت</h3>
{{--                                                <div class="stepper-desc fw-semibold">روش پرداخت</div>--}}
                                            </div>
                                            <!--end::Tags-->
                                        </div>
                                        <!--end::Wrapper-->
                                        <!--begin::Line-->
                                        <div class="stepper-line h-40px"></div>
                                        <!--end::Line-->
                                    </div>
                                    <!--end::مرحله 7-->
                                    <!--begin::مرحله 8-->
                                    <div class="stepper-item" data-kt-stepper-element="nav">
                                        <!--begin::Wrapper-->
                                        <div class="stepper-wrapper">
                                            <!--begin::Icon-->
                                            <div class="stepper-icon w-40px h-40px">
                                                <i class="ki-duotone ki-check fs-2 stepper-check"></i>
                                                <span class="stepper-number">۸</span>
                                            </div>
                                            <!--end::Icon-->
                                            <!--begin::Tags-->
                                            <div class="stepper-label">
                                                <h3 class="stepper-title">چاکرا</h3>
{{--                                                <div class="stepper-desc fw-semibold">روش پرداخت</div>--}}
                                            </div>
                                            <!--end::Tags-->
                                        </div>
                                        <!--end::Wrapper-->
                                        <!--begin::Line-->
                                        <div class="stepper-line h-40px"></div>
                                        <!--end::Line-->
                                    </div>
                                    <!--end::مرحله 8-->
                                    <!--begin::مرحله 9-->
                                    <div class="stepper-item" data-kt-stepper-element="nav">
                                        <!--begin::Wrapper-->
                                        <div class="stepper-wrapper">
                                            <!--begin::Icon-->
                                            <div class="stepper-icon w-40px h-40px">
                                                <i class="ki-duotone ki-check fs-2 stepper-check"></i>
                                                <span class="stepper-number">۹</span>
                                            </div>
                                            <!--end::Icon-->
                                            <!--begin::Tags-->
                                            <div class="stepper-label">
                                                <h3 class="stepper-title">قلب</h3>
{{--                                                <div class="stepper-desc fw-semibold">روش پرداخت</div>--}}
                                            </div>
                                            <!--end::Tags-->
                                        </div>
                                        <!--end::Wrapper-->
                                        <!--begin::Line-->
                                        <div class="stepper-line h-40px"></div>
                                        <!--end::Line-->
                                    </div>
                                    <!--end::مرحله 9-->
                                    <!--begin::مرحله 10-->
                                    <div class="stepper-item" data-kt-stepper-element="nav">
                                        <!--begin::Wrapper-->
                                        <div class="stepper-wrapper">
                                            <!--begin::Icon-->
                                            <div class="stepper-icon w-40px h-40px">
                                                <i class="ki-duotone ki-check fs-2 stepper-check"></i>
                                                <span class="stepper-number">۱۰</span>
                                            </div>
                                            <!--end::Icon-->
                                            <!--begin::Tags-->
                                            <div class="stepper-label">
                                                <h3 class="stepper-title">درگیری ذرات</h3>
                                                {{--                                                <div class="stepper-desc fw-semibold">روش پرداخت</div>--}}
                                            </div>
                                            <!--end::Tags-->
                                        </div>
                                        <!--end::Wrapper-->
                                        <!--begin::Line-->
                                        <div class="stepper-line h-40px"></div>
                                        <!--end::Line-->
                                    </div>
                                    <!--end::مرحله 10-->
                                    <!--begin::مرحله 11-->
                                    <div class="stepper-item" data-kt-stepper-element="nav">
                                        <!--begin::Wrapper-->
                                        <div class="stepper-wrapper">
                                            <!--begin::Icon-->
                                            <div class="stepper-icon w-40px h-40px">
                                                <i class="ki-duotone ki-check fs-2 stepper-check"></i>
                                                <span class="stepper-number">۱۱</span>
                                            </div>
                                            <!--end::Icon-->
                                            <!--begin::Tags-->
                                            <div class="stepper-label">
                                                <h3 class="stepper-title">قدرت</h3>
                                                {{--                                                <div class="stepper-desc fw-semibold">روش پرداخت</div>--}}
                                            </div>
                                            <!--end::Tags-->
                                        </div>
                                        <!--end::Wrapper-->
                                        <!--begin::Line-->
                                        <div class="stepper-line h-40px"></div>
                                        <!--end::Line-->
                                    </div>
                                    <!--end::مرحله 11-->
                                    <!--begin::مرحله 12-->
                                    <div class="stepper-item" data-kt-stepper-element="nav">
                                        <!--begin::Wrapper-->
                                        <div class="stepper-wrapper">
                                            <!--begin::Icon-->
                                            <div class="stepper-icon w-40px h-40px">
                                                <i class="ki-duotone ki-check fs-2 stepper-check"></i>
                                                <span class="stepper-number">۱۲</span>
                                            </div>
                                            <!--end::Icon-->
                                            <!--begin::Tags-->
                                            <div class="stepper-label">
                                                <h3 class="stepper-title">نوار قلب</h3>
                                                {{--                                                <div class="stepper-desc fw-semibold">روش پرداخت</div>--}}
                                            </div>
                                            <!--end::Tags-->
                                        </div>
                                        <!--end::Wrapper-->
                                        <!--begin::Line-->
                                        <div class="stepper-line h-40px"></div>
                                        <!--end::Line-->
                                    </div>
                                    <!--end::مرحله 12-->
                                    <!--begin::مرحله 13-->
                                    <div class="stepper-item mark-completed" data-kt-stepper-element="nav">
                                        <!--begin::Wrapper-->
                                        <div class="stepper-wrapper">
                                            <!--begin::Icon-->
                                            <div class="stepper-icon w-40px h-40px">
                                                <i class="ki-duotone ki-check fs-2 stepper-check"></i>
                                                <span class="stepper-number">۱۳</span>
                                            </div>
                                            <!--end::Icon-->
                                            <!--begin::Tags-->
                                            <div class="stepper-label">
                                                <h3 class="stepper-title">اتصال به شبکه شعور کیهانی</h3>
{{--                                                <div class="stepper-desc fw-semibold">واو ، ما اینجا هستیم</div>--}}
                                            </div>
                                            <!--end::Tags-->
                                        </div>
                                        <!--end::Wrapper-->
                                    </div>
                                    <!--end::مرحله 13-->
                                    <!--begin::مرحله 14-->
                                    <div class="stepper-item mark-completed" data-kt-stepper-element="nav">
                                        <!--begin::Wrapper-->
                                        <div class="stepper-wrapper">
                                            <!--begin::Icon-->
                                            <div class="stepper-icon w-40px h-40px">
                                                <i class="ki-duotone ki-check fs-2 stepper-check"></i>
                                                <span class="stepper-number">۱۴</span>
                                            </div>
                                            <!--end::Icon-->
                                            <!--begin::Tags-->
                                            <div class="stepper-label">
                                                <h3 class="stepper-title">اجرا</h3>
{{--                                                <div class="stepper-desc fw-semibold">واو ، ما اینجا هستیم</div>--}}
                                            </div>
                                            <!--end::Tags-->
                                        </div>
                                        <!--end::Wrapper-->
                                    </div>
                                    <!--end::مرحله 14-->
                                </div>
                                <!--end::Nav-->
                            </div>
                            <!--end::Wrapper-->
                        </div>
                        <!--begin::کناری-->
                        <!--begin::Content-->
                        <div class="card d-flex flex-row-fluid flex-center">
                            <!--begin::form-->
                            <form class="card-body py-20 w-100 px-9" novalidate="novalidate" id="kt_create_account_form" data-action="{{route('operations.store')}}">

                                <!--begin::مرحله 1-->
                                <div class="current" data-kt-stepper-element="content">
                                    <!--begin::Wrapper-->
                                    <div class="w-100">
                                        <!--begin::Heading-->
                                        <div class="pb-10 pb-lg-15">
                                            <!--begin::Title-->
                                            <h2 class="fw-bold d-flex align-items-center text-gray-900">انتخاب اپراتور</h2>
                                            <!--end::Title-->
                                            <!--begin::Notice-->
{{--                                            <div class="text-muted fw-semibold fs-6">اگر به اطلاعات بیشتری نیاز دارید ، لطفاً این مورد را بررسی کنید--}}
{{--                                                <a href="#" class="link-primary fw-bold">صفحه راهنما</a>.</div>--}}
                                            <!--end::Notice-->
                                        </div>
                                        <!--end::Heading-->
                                        <!--begin::Input group-->
                                        <div class="fv-row">
                                            @foreach($users as $user)


                                                <!--begin:Option-->
                                                <label class="d-flex flex-stack mb-5 cursor-pointer">
                                                    <!--begin:برچسب-->
                                                    <span class="d-flex align-items-center me-2">
															<!--begin:Icon-->
															<span class="symbol symbol-75px me-6">
																<img src="{{asset('storage/'.$user->profile_photo_path)}}" class="" alt="">
															</span>
                                                        <!--end:Icon-->
                                                        <!--begin:Info-->
															<span class="d-flex flex-column">
																<span class="fw-bold fs-6">{{$user->firstname . ' ' . $user->lastname }}</span>
																<span class="fs-7 text-muted">{{$user->code . ' - سن: ' . $user->age }}</span>
															</span>
                                                        <!--end:Info-->
														</span>
                                                    <!--end:برچسب-->
                                                    <!--begin:Input-->
                                                    <span class="form-check form-check-custom form-check-solid">
															<input class="form-check-input" type="radio" name="user" value="{{$user->id}}" />
														</span>
                                                    <!--end:Input-->
                                                </label>
                                                <!--end::Option-->
                                            @endforeach

                                        </div>
                                        <!--end::Input group-->
                                    </div>
                                    <!--end::Wrapper-->
                                </div>
                                <!--end::مرحله 1-->
                                <!--begin::مرحله 2-->
                                <div class="pending"  data-kt-stepper-element="content">
                                    <!--begin::Wrapper-->
                                    <div class="w-100">
                                        <!--begin::Heading-->
                                        <div class="pb-10 pb-lg-15">
                                            <!--begin::Title-->
                                            <h2 class="fw-bold text-gray-900">پروتوکل های آماده سازی دستگاه</h2>
                                            <!--end::Title-->
                                            <!--begin::Notice-->
{{--                                            <div class="text-muted fw-semibold fs-6">اگر به اطلاعات بیشتری نیاز دارید ، لطفاً این مورد را بررسی کنید--}}
{{--                                                <a href="#" class="link-primary fw-bold">صفحه راهنما</a>.</div>--}}
                                            <!--end::Notice-->
                                        </div>
                                        <!--end::Heading-->
                                        <!--begin::Input group-->
                                        <div class="mb-10 fv-row">
                                            {!! html_entity_decode($settings->protocols) !!}
                                        </div>
                                        <!--end::Input group-->
                                    </div>
                                    <!--end::Wrapper-->
                                </div>
                                <!--end::مرحله 2-->
                                <!--begin::مرحله 3-->
                                <div class="pending" data-kt-stepper-element="content">
                                    <!--begin::Wrapper-->
                                    <div class="w-100">
                                        <!--begin::Heading-->
                                        <div class="pb-10 pb-lg-12">
                                            <!--begin::Title-->
                                            <h2 class="fw-bold text-gray-900">مختل کننده نظام خلقت تعیین نفر</h2>
                                            <!--end::Title-->
                                            <!--begin::Notice-->
{{--                                            <div class="text-muted fw-semibold fs-6">اگر به اطلاعات بیشتری نیاز دارید ، لطفاً این مورد را بررسی کنید--}}
{{--                                                <a href="#" class="link-primary fw-bold">صفحه راهنما</a>.</div>--}}
                                            <!--end::Notice-->
                                        </div>
                                        <!--end::Heading-->
                                        <!--begin::Input group-->
                                        <div class="fv-row">
                                            <table class="table align-middle gs-0 gy-3">
                                                <!--begin::Table head-->
                                                <thead>
                                                <tr>
                                                    <th class="p-0 w-75px"></th>
                                                    <th class="p-0 min-w-100px"></th>
                                                    <th class="p-0 min-w-100px"></th>
                                                    <th class="p-0 min-w-100px"></th>
                                                    <th class="p-0 min-w-100px"></th>
                                                </tr>
                                                </thead>
                                                <!--end::Table head-->
                                                <!--begin::Table body-->
                                                <tbody>
                                                @foreach($patients as $patient)


                                                    <tr>
                                                        <td>
                                                            <div class="symbol symbol-75px me-2">
                                                                <img id="patient-image-{{$patient->id}}" src="{{asset('storage/'.$patient->image)}}" class="" alt="">
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <a href="#" class="text-gray-900 fw-bold text-hover-primary mb-1 fs-6">{{$patient->firstname . ' ' . $patient->lastname }}</a>
                                                        </td>
                                                        <td class="text-muted fw-bold">{{$patient->country }}</td>
                                                        <td class="text-muted fw-bold">{{$patient->city }}</td>
                                                        <td class="text-muted fw-bold">{{$patient->location }}</td>
                                                        <td class="text-gray-900 fw-bold fs-6 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>
                                                <!--end::Table body-->
                                            </table>


                                        </div>
                                        <!--end::Input group-->
                                    </div>
                                    <!--end::Wrapper-->
                                </div>
                                <!--end::مرحله 3-->
                                <!--begin::مرحله 4-->
                                <div class="pending" data-kt-stepper-element="content">
                                    <!--begin::Wrapper-->
                                    <div class="w-100">
                                        <!--begin::Heading-->
                                        <div class="pb-10 pb-lg-15">
                                            <!--begin::Title-->
                                            <h2 class="fw-bold text-gray-900">پروتکل ها و دستورهای عملیاتی دستگاه</h2>
                                            <!--end::Title-->
                                            <!--begin::Notice-->
{{--                                            <div class="text-muted fw-semibold fs-6">اگر به اطلاعات بیشتری نیاز دارید ، لطفاً این مورد را بررسی کنید--}}
{{--                                                <a href="#" class="text-primary fw-bold">صفحه راهنما</a>.</div>--}}
                                            <!--end::Notice-->
                                        </div>
                                        <!--end::Heading-->
                                        <!--begin::Input group-->
                                        <div class="row mb-10">
                                            {!! html_entity_decode($settings->manuals) !!}
                                        </div>
                                        <!--end::Input group-->
                                    </div>
                                    <!--end::Wrapper-->
                                </div>
                                <!--end::مرحله 4-->
                                <!--begin::مرحله 5-->
                                <div class="pending" data-kt-stepper-element="content">
                                    <div class="w-100">
                                        <!--begin::Heading-->
                                        <div class="pb-10 pb-lg-12">
                                            <!--begin::Title-->
                                            <h2 class="fw-bold text-gray-900">مختصات جغرافیایی</h2>
                                            <!--end::Title-->
                                            <!--begin::Notice-->
                                            {{--                                            <div class="text-muted fw-semibold fs-6">اگر به اطلاعات بیشتری نیاز دارید ، لطفاً این مورد را بررسی کنید--}}
                                            {{--                                                <a href="#" class="link-primary fw-bold">صفحه راهنما</a>.</div>--}}
                                            <!--end::Notice-->
                                        </div>
                                        <!--end::Heading-->
                                        <div class="row mb-10">

                                            <!--begin::Col-->
                                            <div class="col-md-8 fv-row">
                                                <!--begin::Tags-->
                                                <label class="required fs-6 fw-semibold form-label mb-2">جستجو موقعیت</label>
                                                <!--end::Tags-->
                                                <!--begin::Row-->
                                                <div class="row fv-row">
                                                    <!--begin::Col-->
                                                    <div class="col-6">
                                                        <input id="query" type="text" class="form-control form-control-solid" placeholder="شهر" name="query" value="">
                                                    </div>
                                                    <!--end::Col-->
                                                </div>
                                                <!--end::Row-->
                                            </div>
                                            <!--end::Col-->
                                            <!--begin::Col-->
                                            <div class="col-md-4 fv-row align-content-end">
                                                <button onclick="findAddress()" type="button" id="find_location" class="btn btn-primary">
                                                    <span class="indicator-label">جستجو</span>
                                                </button>
                                            </div>
                                            <!--end::Col-->
                                        </div>
                                        <!--end::Heading-->
                                        <div class="row mb-10">

                                            <!--begin::Col-->
                                            <div class="col-md-8 fv-row">
                                                <!--begin::Tags-->
                                                <label class="required fs-6 fw-semibold form-label mb-2">جستجو موقعیت</label>
                                                <!--end::Tags-->
                                                <!--begin::Row-->
                                                <div class="row fv-row">
                                                    <!--begin::Col-->
                                                    <div class="col-6">
                                                        <input id="lat" type="text" class="form-control form-control-solid" placeholder="عرض جغرافیایی" name="lat" value="">
                                                    </div>
                                                    <!--end::Col-->
                                                    <!--begin::Col-->
                                                    <div class="col-6">
                                                        <input id="lng" type="text" class="form-control form-control-solid" placeholder="طول جغرافیایی" name="lng" value="">
                                                    </div>
                                                    <!--end::Col-->
                                                </div>
                                                <!--end::Row-->
                                            </div>
                                            <!--end::Col-->
                                            <!--begin::Col-->
                                            <div class="col-md-4 fv-row align-content-end">
                                                <button onclick="updateCenter()" type="button" id="find_location" class="btn btn-primary">
                                                    <span class="indicator-label">ثبت</span>
                                                </button>
                                            </div>
                                            <!--end::Col-->
                                        </div>
                                        <div class="row mb-10">
                                            <input id="latlng" name="location" type="hidden">
                                            <div style="height: 768px;" id="kt_modal_select_location_map"></div>
                                        </div>
                                    </div>
                                </div>
                                <!--end::مرحله 5-->
                                <!--begin::مرحله 6-->
                                <div class="pending" data-kt-stepper-element="content">
                                    <!--begin::Wrapper-->
                                    <div class="w-100">
                                        <!--begin::Heading-->
                                        <div class="pb-10 pb-lg-15">
                                            <!--begin::Title-->
                                            <h2 class="fw-bold text-gray-900">اعصاب مغزی</h2>
                                            <!--end::Title-->
                                            <!--begin::Notice-->
{{--                                            <div class="text-muted fw-semibold fs-6">اگر به اطلاعات بیشتری نیاز دارید ، لطفاً این مورد را بررسی کنید--}}
{{--                                                <a href="#" class="text-primary fw-bold">صفحه راهنما</a>.</div>--}}
                                            <!--end::Notice-->
                                        </div>
                                        <!--end::Heading-->
                                        <!--begin::Input group-->
                                        <div class="row mb-10">
                                            <!--begin::Col-->
                                            <div class="col-md-6 fv-row">
                                                @foreach($neuros as $id => $neuro)
                                                <div class="form-check mb-5">
                                                    <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>
                                            <!--end::Col-->
                                            <!--begin::Col-->
                                            <div class="col-md-6 fv-row">
                                                <div id="interactive-brain-svg" style="width: 100%; height: auto; cursor: pointer;">
                                                    <!-- SVG will be loaded here -->
                                                </div>
                                            </div>
                                            <!--end::Col-->
                                        </div>
                                        <!--end::Input group-->
                                    </div>
                                    <!--end::Wrapper-->
                                </div>
                                <!--end::مرحله 6-->
                                <!--begin::مرحله 7-->
                                <div class="pending" data-kt-stepper-element="content">
                                    <!--begin::Wrapper-->
                                    <div class="w-100">
                                        <!--begin::Heading-->
                                        <div class="pb-10 pb-lg-15">
                                            <!--begin::Title-->
                                            <h2 class="fw-bold text-gray-900">تله پورت</h2>
                                            <!--end::Title-->
                                            <!--begin::Notice-->
{{--                                            <div class="text-muted fw-semibold fs-6">اگر به اطلاعات بیشتری نیاز دارید ، لطفاً این مورد را بررسی کنید--}}
{{--                                                <a href="#" class="text-primary fw-bold">صفحه راهنما</a>.</div>--}}
                                            <!--end::Notice-->
                                        </div>
                                        <!--end::Heading-->

                                        <!--begin::Row-->
                                        <div class="row g-6 mb-6 g-xl-9 mb-xl-9">
                                            <!--begin::Col-->
                                            <div class="col-md-12">
                                                <!--begin::????-->
                                                <div class="card">
                                                    <!--begin::???? body-->
                                                    <div class="card-body d-flex flex-center flex-column py-9 px-5">

                                                        <div class="row mb-10">
                                                            <div class="col-md-12 fv-row">
                                                                <img src="{{asset('assets/media/tele.jpg')}}"  alt="image" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!--begin::???? body-->
                                                </div>
                                                <!--begin::????-->
                                            </div>
                                            <!--end::Col-->
                                        </div>
                                        <!--end::Row-->
                                        <!--begin::Input group-->
                                        <div class="d-flex flex-stack">
                                            <!--begin::Tags-->
                                            <div class="me-5">
                                                <label class="fs-6 fw-semibold form-label">ضربات پیوسته (انرژی تاریک) با تمام قدرت کیهانی به ۱۷ نقطه تعیین شده شریان های مغزی وارد گردد.</label>
{{--                                                <div class="fs-7 fw-semibold text-muted">اگر به اطلاعات بیشتری نیاز دارید ، لطفا برنامه ریزی بودجه را بررسی کنید</div>--}}
                                            </div>
                                            <!--end::Tags-->
                                            <!--begin::Switch-->
                                            <label class="form-check form-switch form-check-custom form-check-solid">
                                                <input name="teleport" class="form-check-input" type="checkbox" value="1"  />
{{--                                                <span class="form-check-label fw-semibold text-muted">تله پورت</span>--}}
                                            </label>
                                            <!--end::Switch-->
                                        </div>
                                        <!--end::Input group-->
                                    </div>
                                    <!--end::Wrapper-->
                                </div>
                                <!--end::مرحله 7-->
                                <!--begin::مرحله 8-->
                                <div class="pending" data-kt-stepper-element="content">
                                    <!--begin::Wrapper-->
                                    <div class="w-100">
                                        <!--begin::Heading-->
                                        <div class="pb-10 pb-lg-15">
                                            <!--begin::Title-->
                                            <h2 class="fw-bold text-gray-900">چاکرا</h2>
                                            <!--end::Title-->
                                            <!--begin::Notice-->
                                            {{--                                            <div class="text-muted fw-semibold fs-6">اگر به اطلاعات بیشتری نیاز دارید ، لطفاً این مورد را بررسی کنید--}}
                                            {{--                                                <a href="#" class="text-primary fw-bold">صفحه راهنما</a>.</div>--}}
                                            <!--end::Notice-->
                                        </div>
                                        <!--end::Heading-->
                                        <!--begin::Input group-->
                                        <div class="row mb-10">
                                            <!--begin::Col-->
                                            <div class="col-md-6 fv-row">
                                                @foreach($chakras as $id => $chakra)
                                                    <div class="form-check mb-5">
                                                        <input class="form-check-input" type="checkbox" value="{{$id}}" id="flexCheckDefault" name="chakra[]" />
                                                        <label class="form-check-label text-gray-800" for="flexCheckDefault">
                                                            {{$chakra}}
                                                        </label>
                                                    </div>
                                                @endforeach
                                            </div>
                                            <!--end::Col-->
                                            <!--begin::Col-->
                                            <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>
                                            <!--end::Col-->
                                        </div>
                                        <!--end::Input group-->
                                    </div>
                                    <!--end::Wrapper-->
                                </div>
                                <!--end::مرحله 8-->
                                <!--begin::مرحله 9-->
                                <div class="pending" data-kt-stepper-element="content">
                                    <!--begin::Wrapper-->
                                    <div class="w-100">
                                        <!--begin::Heading-->
                                        <div class="pb-10 pb-lg-15">
                                            <!--begin::Title-->
                                            <h2 class="fw-bold text-gray-900">قلب</h2>
                                            <!--end::Title-->
                                            <!--begin::Notice-->
                                            {{--                                            <div class="text-muted fw-semibold fs-6">اگر به اطلاعات بیشتری نیاز دارید ، لطفاً این مورد را بررسی کنید--}}
                                            {{--                                                <a href="#" class="text-primary fw-bold">صفحه راهنما</a>.</div>--}}
                                            <!--end::Notice-->
                                        </div>
                                        <!--end::Heading-->
                                        <!--begin::Input group-->
                                        <div class="row mb-10">
                                            <!--begin::Col-->
                                            <div class="col-md-3 fv-row">
                                                @foreach($heart as $id => $h)
                                                    <div class="form-check mb-5">
                                                        <input class="form-check-input" type="checkbox" value="{{$id}}" name="heart[]" id="flexCheckDefault" />
                                                        <label class="form-check-label text-gray-800" for="flexCheckDefault">
                                                            {{$h}}
                                                        </label>
                                                    </div>
                                                @endforeach
                                            </div>
                                            <!--end::Col-->
                                            <!--begin::Col-->
                                            <div id="heart-svg-container" class="col-md-9 fv-row">
                                                <img id="heart-svg" style="width: 100%">
                                            </div>
                                            <!--end::Col-->
                                        </div>
                                        <!--end::Input group-->
                                    </div>
                                    <!--end::Wrapper-->
                                </div>
                                <!--end::مرحله 9-->
                                <!--begin::مرحله 10-->
                                <div class="pending" data-kt-stepper-element="content">
                                    <!--begin::Wrapper-->
                                    <div class="w-100">
                                        <!--begin::Heading-->
                                        <div class="pb-10 pb-lg-15">
                                            <!--begin::Title-->
                                            <h2 class="fw-bold text-gray-900">نوع درگیری</h2>
                                            <!--end::Title-->
                                            <!--begin::Notice-->
                                            {{--                                            <div class="text-muted fw-semibold fs-6">اگر به اطلاعات بیشتری نیاز دارید ، لطفاً این مورد را بررسی کنید--}}
                                            {{--                                                <a href="#" class="text-primary fw-bold">صفحه راهنما</a>.</div>--}}
                                            <!--end::Notice-->
                                        </div>
                                        <!--end::Heading-->

                                        <!--begin::Input group-->
                                        <div class="row mb-10">
                                            <!--begin::Col-->
                                            <div class="col-md-6 fv-row">
                                                @foreach($interaction as $id => $i)
                                                    <div class="form-check mb-5">
                                                        <input class="form-check-input" type="checkbox" value="{{$id}}" name="interaction[]" id="flexCheckDefault" />
                                                        <label class="form-check-label text-gray-800" for="flexCheckDefault">
                                                            {{$i}}
                                                        </label>
                                                    </div>
                                                @endforeach
                                            </div>
                                            <!--end::Col-->
                                            <!--begin::Col-->
                                            <div class="col-md-6 fv-row">
                                                <img style="width: 100%;" src="{{asset('assets/media/inter.jpg')}}">
                                            </div>
                                            <!--end::Col-->
                                        </div>
                                        <!--end::Input group-->
                                    </div>
                                    <!--end::Wrapper-->
                                </div>
                                <!--end::مرحله 10-->
                                <!--begin::مرحله 11-->
                                <div class="pending" data-kt-stepper-element="content">
                                    <!--begin::Wrapper-->
                                    <div class="w-100">
                                        <!--begin::Heading-->
                                        <div class="pb-10 pb-lg-15">
                                            <!--begin::Title-->
                                            <h2 class="fw-bold text-gray-900">قدرت عملیت</h2>
                                            <!--end::Title-->
                                            <!--begin::Notice-->
                                            {{--                                            <div class="text-muted fw-semibold fs-6">اگر به اطلاعات بیشتری نیاز دارید ، لطفاً این مورد را بررسی کنید--}}
                                            {{--                                                <a href="#" class="text-primary fw-bold">صفحه راهنما</a>.</div>--}}
                                            <!--end::Notice-->
                                        </div>
                                        <!--end::Heading-->
                                        <!--begin::Input group-->
                                        <div class="row mb-10">
                                                <label for="exampleFormControlInput1" class="required form-label">قدرت عملیات</label>
                                                <input name="power" value="10" type="number" min="10" max="100" class="form-control form-control-solid" placeholder="">

                                        </div>
                                        <!--end::Input group-->
                                    </div>
                                    <!--end::Wrapper-->
                                </div>
                                <!--end::مرحله 11-->
                                <!--begin::مرحله 12-->
                                <div class="pending" data-kt-stepper-element="content">
                                    <!--begin::Wrapper-->
                                    <div class="w-100">
                                        <!--begin::Heading-->
                                        <div class="pb-10 pb-lg-15">
                                            <!--begin::Title-->
                                            <h2 class="fw-bold text-gray-900">نوار قلبی</h2>
                                            <!--end::Title-->
                                            <!--begin::Notice-->
                                            {{--                                            <div class="text-muted fw-semibold fs-6">اگر به اطلاعات بیشتری نیاز دارید ، لطفاً این مورد را بررسی کنید--}}
                                            {{--                                                <a href="#" class="text-primary fw-bold">صفحه راهنما</a>.</div>--}}
                                            <!--end::Notice-->
                                        </div>
                                        <!--end::Heading-->
                                        <!--begin::Input group-->
                                        <div class="row mb-10" id="heart-video">
                                            <video controls muted autoplay loop>
                                                <source  src="{{asset('assets/media/heart-beat.mp4')}}" type="video/mp4">
                                                Your browser does not support the video tag.
                                            </video>
                                        </div>
                                        <!--end::Input group-->

                                        <!--begin::Input group-->
                                        <div class="d-flex flex-stack">
                                            <!--begin::Tags-->
                                            <div class="me-5">
                                                <label class="fs-6 fw-semibold form-label">ضربات پیوسته (انرژی تاریک) با تمام قدرت کیهانی به ۱۷ نقطه تعیین شده شریان های مغزی وارد گردد.</label>
{{--                                                <div class="fs-7 fw-semibold text-muted">اگر به اطلاعات بیشتری نیاز دارید ، لطفا برنامه ریزی بودجه را بررسی کنید</div>--}}
                                            </div>
                                            <!--end::Tags-->
                                            <!--begin::Switch-->
                                            <label class="form-check form-switch form-check-custom form-check-solid">
                                                <input name="teleport" class="form-check-input" type="checkbox" value="1"  />
{{--                                                <span class="form-check-label fw-semibold text-muted">تله پورت</span>--}}
                                            </label>
                                            <!--end::Switch-->
                                        </div>
                                        <!--end::Input group-->
                                    </div>
                                    <!--end::Wrapper-->
                                </div>
                                <!--end::مرحله 12-->
                                <!--begin::مرحله 13-->
                                <div class="pending" data-kt-stepper-element="content">
                                    <!--begin::Wrapper-->
                                    <div class="w-100">
                                        <!--begin::Heading-->
                                        <div class="pb-10 pb-lg-15">
                                            <!--begin::Title-->
                                            <h2 class="fw-bold text-gray-900">اتصال به شبکه شعور کیهانی</h2>
                                            <!--end::Title-->
                                            <!--begin::Notice-->
                                            {{--                                            <div class="text-muted fw-semibold fs-6">اگر به اطلاعات بیشتری نیاز دارید ، لطفاً این مورد را بررسی کنید--}}
                                            {{--                                                <a href="#" class="text-primary fw-bold">صفحه راهنما</a>.</div>--}}
                                            <!--end::Notice-->
                                        </div>
                                        <!--end::Heading-->
                                        <!--begin::Input group-->
                                        <div class="row mb-10" id="heart-video">
                                            <video controls muted autoplay loop>
                                                <source  src="{{asset('assets/media/milk-way.mp4')}}" type="video/mp4">
                                                Your browser does not support the video tag.
                                            </video>
                                        </div>
                                        <!--end::Input group-->

                                        <!--begin::Input group-->
                                        <div class="d-flex flex-stack">
                                            <!--begin::Tags-->
                                            <div class="me-5">
                                                <label class="fs-6 fw-semibold form-label">ضربات  تمام پروتکل های دستوری و عملیاتی اتصال به شبکه شعور کیهانی</label>
{{--                                                <div class="fs-7 fw-semibold text-muted">اگر به اطلاعات بیشتری نیاز دارید ، لطفا برنامه ریزی بودجه را بررسی کنید</div>--}}
                                            </div>
                                            <!--end::Tags-->
                                            <!--begin::Switch-->
                                            <label class="form-check form-switch form-check-custom form-check-solid">
                                                <input name="teleport" class="form-check-input" type="checkbox" value="1"  />
{{--                                                <span class="form-check-label fw-semibold text-muted">تله پورت</span>--}}
                                            </label>
                                            <!--end::Switch-->
                                        </div>
                                        <!--end::Input group-->
                                    </div>
                                    <!--end::Wrapper-->
                                </div>
                                <!--end::مرحله 13-->

                                <!--begin::مرحله 14-->
                                <div class="pending" data-kt-stepper-element="content">
                                    <!--begin::Wrapper-->
                                    <div class="w-100">
                                        <!--begin::Heading-->
                                        <div class="pb-10 pb-lg-15">
                                            <!--begin::Title-->
                                            <h2 class="fw-bold text-gray-900">اجرا</h2>
                                            <!--end::Title-->
                                            <!--begin::Notice-->
                                            {{--                                            <div class="text-muted fw-semibold fs-6">اگر به اطلاعات بیشتری نیاز دارید ، لطفاً این مورد را بررسی کنید--}}
                                            {{--                                                <a href="#" class="text-primary fw-bold">صفحه راهنما</a>.</div>--}}
                                            <!--end::Notice-->
                                        </div>
                                        <!--end::Heading-->

                                        <!--begin::Row-->
                                        <div class="row g-6 mb-6 g-xl-9 mb-xl-9">
                                            <!--begin::????????-->
                                            <!--begin::Col-->
                                            <div class="col-md-6">
                                                <div class="card">
                                                    <!--begin::???? body-->
                                                    <div class="card-body d-flex flex-center flex-column py-9 px-5">
                                                        <!--begin::Avatar-->
                                                        <div class="symbol  symbol-circle mb-5">
                                                            <img id="final-image" src="" style="width: 100%;height: 100%;max-width: 385px;" alt="image" />
                                                            {{--                                                            <div class="bg-success position-absolute rounded-circle translate-middle start-100 top-100 border border-4 border-body h-15px w-15px ms-n3 mt-n3"></div>--}}
                                                        </div>
                                                        <!--end::Avatar-->
                                                        <!--begin::???-->
                                                        <a href="#" class="fs-4 text-gray-800 text-hover-primary fw-bold mb-0"></a>
                                                        <!--end::???-->
                                                        <!--begin::??????-->
                                                        <!--end::??????-->
                                                    </div>
                                                    <!--begin::???? body-->
                                                </div>
                                                <!--begin::????-->

                                                <div class="card">
                                                    <!--begin::???? body-->
                                                    <div class="card-body d-flex flex-center flex-column py-9 px-5" id="last-heart-video">

                                                            <video controls muted autoplay loop>
                                                                <source  src="{{asset('assets/media/heart-beat.mp4')}}" type="video/mp4">
                                                                Your browser does not support the video tag.
                                                            </video>
                                                        <!--end::??????-->
                                                    </div>
                                                    <!--begin::???? body-->
                                                </div>
                                                <!--begin::????-->

                                            </div>
                                            <!--end::Col-->
                                            <!--end::????????-->

                                            <!--begin::Col-->
                                            <div class="col-md-6">
                                                <div class="card">
                                                    <!--begin::???? body-->
                                                    <div class="card-body d-flex flex-center flex-column py-9 px-5">
                                                        <div id="last-map" style="    height: 300px; width: 100%;"></div>
                                                    </div>
                                                </div>
                                                <!--begin::????-->
                                                <!--begin::????-->
                                                <div class="card">
                                                    <!--begin::???? body-->
                                                    <div class="card-body d-flex flex-center flex-column py-9 px-5">

                                                        <div class="row mb-10">
                                                            <div class="col-md-12 fv-row text-center">
                                                                <video controls muted autoplay loop style="width:50%">
                                                                    <source  src="{{asset('assets/media/body.mp4')}}" type="video/mp4">
                                                                    Your browser does not support the video tag.
                                                                </video>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!--begin::???? body-->
                                                </div>
                                                <!--begin::????-->
                                            </div>
                                            <!--end::Col-->
                                        </div>
                                        <!--end::Row-->
                                        <!--begin::Input group-->
                                        <div class="row mb-10">
                                            <label for="exampleFormControlInput1" class="required form-label">مدت زمان درگیری</label>
                                            <input id="execution" name="execution" value="1" type="number" min="1" max="30" class="form-control form-control-solid" placeholder="">

                                        </div>
                                        <!--end::Input group-->

                                        <div class="d-flex align-items-center flex-column mt-3">
                                            <div class="d-flex justify-content-between w-100 mt-auto mb-2">
                                                <span class="fw-semibold fs-6 text-gray-500">تکمیل عملیات</span>
                                                <span id="run-percent" class="fw-bold fs-6">0%</span>
                                            </div>
                                            <div class="h-5px mx-3 w-100 bg-light mb-3">
                                                <div id="run-progress" class="bg-success rounded h-5px" role="progressbar" style="width: 0%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                        </div>


                                        <audio id="audio-noise" loop style="display:none">
                                            <source src="{{asset('assets/media/noise.mp3')}}" type="audio/mpeg">
                                            Your browser does not support the audio element.
                                        </audio>
                                    </div>
                                    <!--end::Wrapper-->
                                </div>
                                <!--end::مرحله 14-->
                                <!--begin::مرحله 12-->
                                <div class="pending" data-kt-stepper-element="content">
                                    <!--begin::Wrapper-->
                                    <div class="w-100">
                                        <!--begin::Heading-->
                                        <div class="pb-10 pb-lg-15">
                                            <!--begin::Title-->
                                            <h2 class="fw-bold text-gray-900">اجرا۲</h2>
                                            <!--end::Title-->
                                            <!--begin::Notice-->
                                            {{--                                            <div class="text-muted fw-semibold fs-6">اگر به اطلاعات بیشتری نیاز دارید ، لطفاً این مورد را بررسی کنید--}}
                                            {{--                                                <a href="#" class="text-primary fw-bold">صفحه راهنما</a>.</div>--}}
                                            <!--end::Notice-->
                                        </div>
                                        <!--end::Heading-->

                                        <!--begin::Row-->
                                        <div class="row g-6 mb-6 g-xl-9 mb-xl-9">
                                            <!--begin::????????-->
                                            <!--begin::Col-->
                                            <div class="col-md-6">
                                                <!--begin::????-->
                                                <div class="card">
                                                    <!--begin::???? body-->
                                                    <div class="card-body d-flex flex-center flex-column py-9 px-5">
                                                        <!--begin::Avatar-->
                                                        <div class="symbol  symbol-circle mb-5">
                                                            <img src="" style="width: 100%;height: 100%" alt="image" />
                                                            {{--                                                            <div class="bg-success position-absolute rounded-circle translate-middle start-100 top-100 border border-4 border-body h-15px w-15px ms-n3 mt-n3"></div>--}}
                                                        </div>
                                                        <!--end::Avatar-->
                                                        <!--begin::???-->
                                                        <a href="#" class="fs-4 text-gray-800 text-hover-primary fw-bold mb-0"></a>
                                                        <!--end::???-->
                                                        <!--begin::??????-->
                                                        <!--end::??????-->
                                                    </div>
                                                    <!--begin::???? body-->
                                                </div>
                                                <!--begin::????-->
                                            </div>
                                            <!--end::Col-->
                                            <!--end::????????-->

                                            <!--begin::Col-->
                                            <div class="col-md-6">
                                                <!--begin::????-->
                                                <div class="card">
                                                    <!--begin::???? body-->
                                                    <div class="card-body d-flex flex-center flex-column py-9 px-5">

                                                        <div class="row mb-10">
                                                            <div class="col-md-12 fv-row">
                                                                <img src="{{asset('assets/media/svg/pages/brain.svg')}}"  alt="image" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!--begin::???? body-->
                                                </div>
                                                <!--begin::????-->
                                            </div>
                                            <!--end::Col-->
                                        </div>
                                        <!--end::Row-->
                                        <!--begin::Input group-->
                                        <div class="row mb-10">
                                            <label for="exampleFormControlInput1" class="required form-label">مدت زمان درگیری</label>
                                            <input id="execution2" name="execution2" value="1" type="number" min="1" max="30" class="form-control form-control-solid" placeholder="">

                                        </div>
                                        <!--end::Input group-->
                                    </div>
                                    <!--end::Wrapper-->
                                </div>
                                <!--end::مرحله 12-->
                                <!--begin::Actions-->
                                <div class="d-flex flex-stack pt-10">
                                    <!--begin::Wrapper-->
                                    <div class="mr-2">
                                        <button type="button" class="btn btn-lg btn-light-primary me-3" data-kt-stepper-action="previous">
                                            <i class="ki-duotone ki-arrow-rightstyle.bun fs-4 me-1">
                                                <span class="path1"></span>
                                                <span class="path2"></span>
                                            </i>برگشت</button>
                                    </div>
                                    <!--end::Wrapper-->
                                    <!--begin::Wrapper-->
                                    <div>
                                        <button type="button" class="btn btn-lg btn-primary me-3" data-kt-stepper-action="submit">
															<span class="indicator-label">اجرا
															<i class="ki-duotone ki-arrow-left fs-3 ms-2 me-0">
																<span class="path1"></span>
																<span class="path2"></span>
															</i></span>
                                            <span class="indicator-progress">در حال اجرا...
															<span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                                        </button>
                                        <button type="button" class="btn btn-lg btn-primary" data-kt-stepper-action="next">تایید
                                            <i class="ki-duotone ki-arrow-left fs-4 ms-1 me-0">
                                                <span class="path1"></span>
                                                <span class="path2"></span>
                                            </i></button>
                                    </div>
                                    <!--end::Wrapper-->
                                </div>
                                <!--end::Actions-->
                                @csrf
                            </form>
                            <!--end::form-->
                        </div>
                        <!--end::Content-->
                    </div>
                    <!--end::Stepper-->
@endsection
@section('script')

    <script src="{{asset('assets/plugins/custom/leaflet/leaflet.bundle.js')}}"></script>
    <script src="{{asset('assets/js/custom/utilities/modals/select-location.js')}}"></script>
    <script src="{{asset('assets/js/custom/utilities/modals/select-location2.js')}}"></script>
    <script >
        function updateCenter()
        {
            var lat = document.getElementById('lat').value;
            var lng = document.getElementById('lng').value;
            console.log(lat, lng);
            leafletmap.setView([lat, lng], 16)
        }
        function findAddress()
        {
            var query = document.getElementById('query').value;
            console.log(query);
            var url = 'https://geocode.maps.co/search?q=' + query + '&api_key=67855c2bd32d3655128755xeu04857e';
            $.getJSON(url, function(data) {
                // JSON result in `data` variable
                console.log(data[0]);
                console.log(data[0].lat);
                console.log(data[0].lon);
                leafletmap.setView([data[0].lat, data[0].lon], 13)
            });
        }

        function goToHome(){
            window.location = "{{route('home')}}"
        }



        // var nerves = [2,4,5,6,7,8,9,10,11,12,13,14];
        var nerves = [11,12,13,14,4,5,6,7,8,9,10,2];

        // Interactive Brain SVG functionality
        document.addEventListener('DOMContentLoaded', function() {
            loadInteractiveBrainSVG();
            jQuery('.neuros').click(function(){
                let id = jQuery(this).attr('id').split('-')[1];
                let selected = jQuery(this).prop('checked');

                let paths = document.querySelectorAll('#g3879 path[style*="fill:"]');
                let path = paths[nerves[id]];

                if (selected) {
                    jQuery('#neuro-'+id).prop("checked",true);
                    // Select
                    path.classList.add('selected');
                    path.style.fill = '#ff6b6b'; // Red color for selection
                    path.style.stroke = '#d63031';
                    path.style.strokeWidth = '2';
                } else {
                    // Unselect
                    path.classList.remove('selected');
                    path.style.fill = '#' + path.getAttribute('data-original-fill');
                    path.style.stroke = 'none';
                    path.style.strokeWidth = '0';
                    jQuery('#neuro-'+id).prop("checked",false);
                }
            });
            initializeChakraSVG();
            initializeHeartSVG();

            // Add event listeners to checkboxes for bidirectional sync
            document.addEventListener('change', function(e) {
                if (e.target.name === 'chakra[]') {
                    syncCheckboxToSVG();
                }
                else if (e.target.name === 'heart[]') {
                    syncCheckboxToSVG();
                }


            });
        });

        function loadInteractiveBrainSVG() {
            fetch('{{asset('assets/media/svg/pages/brain.svg')}}')
                .then(response => response.text())
                .then(svgText => {
                    // Create a div to hold the SVG
                    const container = document.getElementById('interactive-brain-svg');
                    container.innerHTML = svgText;

                    // Get all path elements with fill colors (excluding black/gray paths)
                    const paths = container.querySelectorAll('path[style*="fill:"]');

                    // Add click event listeners to each colored path
                    paths.forEach((path, index) => {
                        const fillColor = path.getAttribute('style').match(/fill:#([^;"]+)/);
                        // if (fillColor && !fillColor[1].includes('5a514c') ) { // Exclude black/gray paths
                        if (nerves.includes(index) ) { // Exclude black/gray paths
                            // Store original fill color
                            path.setAttribute('data-original-fill', fillColor[1]);

                            // Add CSS classes for styling
                            path.classList.add('brain-path');
                            path.style.cursor = 'pointer';
                            path.style.transition = 'all 0.3s ease';

                            // Add click event listener
                            path.addEventListener('click', function(e) {
                                e.preventDefault();
                                e.stopPropagation();
                                let id = nerves.indexOf(index);

                                if (path.classList.contains('selected')) {
                                    // Unselect
                                    path.classList.remove('selected');
                                    path.style.fill = '#' + path.getAttribute('data-original-fill');
                                    path.style.stroke = 'none';
                                    path.style.strokeWidth = '0';
                                    jQuery('#neuro-'+id).prop("checked",false);
                                } else {
                                    // Select
                                    path.classList.add('selected');
                                    path.style.fill = '#ff6b6b'; // Red color for selection
                                    path.style.stroke = '#d63031';
                                    path.style.strokeWidth = '2';
                                    jQuery('#neuro-'+id).prop("checked",true);
                                }

                                // Log selection for debugging
                                console.log('Path clicked:', index, 'Selected:', path.classList.contains('selected'));
                            });

                            // Add hover effects
                            path.addEventListener('mouseenter', function() {
                                if (!path.classList.contains('selected')) {
                                    path.style.opacity = '0.8';
                                }
                            });

                            path.addEventListener('mouseleave', function() {
                                if (!path.classList.contains('selected')) {
                                    path.style.opacity = '1';
                                }
                            });
                        }
                    });
                })
                .catch(error => {
                    console.error('Error loading SVG:', error);
                    // Fallback to regular image if SVG loading fails
                    document.getElementById('interactive-brain-svg').innerHTML =
                        '<img src="{{asset('assets/media/svg/pages/brain.svg')}}" style="width: 100%; height: auto;">';
                });
        }
        let chakraIndexes = [0,6,7,8,9,10,11];
        // Chakra SVG functionality
        function initializeChakraSVG() {
            const chakraSvgContainer = document.getElementById('chakra-svg-container');
            const chakraSvg = document.getElementById('chakra-svg');
            console.log(chakraSvg);
            // if (!chakraSvgContainer || !chakraSvg) return;

            console.log(chakraSvg);
            // Load the SVG content
            fetch('{{asset('assets/media/svg/pages/chakra.svg')}}')
                .then(response => response.text())
                .then(svgContent => {
                    console.log(22);
                    // Replace the img with inline SVG
                    chakraSvgContainer.innerHTML = svgContent;

                    // Get all colored paths (chakra elements)
                    const chakraPaths = chakraSvgContainer.querySelectorAll('path[id*="path"], circle[id*="path"');

                    // Add click functionality to each chakra path
                    chakraPaths.forEach((path, index) => {
                        if(chakraIndexes.includes(index)){
                            path.classList.add('chakra-path');
                            path.style.cursor = 'pointer';
                            // Add click event listener
                            path.addEventListener('click', function() {
                                toggleChakraSelection(this, chakraIndexes.indexOf(index));
                            console.log(index);

                            });
                        }
                    });
                })
                .catch(error => {
                    console.error('Error loading chakra SVG:', error);
                    document.getElementById('interactive-brain-svg').innerHTML =
                        '<img src="{{asset('assets/media/svg/pages/chakra.svg')}}" style="width: 100%; height: auto;">';
                });
        }

        function toggleChakraSelection(element, index) {
            // Toggle selected class
            element.classList.toggle('selected');

            // Get corresponding checkbox
            const checkboxes = document.querySelectorAll('input[name="chakra[]"]');
            if (checkboxes[index]) {
                checkboxes[index].checked = element.classList.contains('selected');
            }
        }

        function syncCheckboxToSVG() {
            const checkboxes = document.querySelectorAll('input[name="chakra[]"]');
            const chakraPaths = document.querySelectorAll('.chakra-path');

            checkboxes.forEach((checkbox, index) => {
                if (chakraPaths[index]) {
                    if (checkbox.checked) {
                        chakraPaths[index].classList.add('selected');
                    } else {
                        chakraPaths[index].classList.remove('selected');
                    }
                }
            });
        }

        let heartIndexes = [32,62,13,10,26,82,23,53,42,50];
        // Chakra SVG functionality
        function initializeHeartSVG() {
            const heartSvgContainer = document.getElementById('heart-svg-container');
            const heartSvg = document.getElementById('heart-svg');
            console.log("heartSvgContainer")
            console.log(heartSvgContainer)
            // if (!chakraSvgContainer || !chakraSvg) return;

            // Load the SVG content
            fetch('{{asset('assets/media/svg/pages/heart.svg')}}')
                .then(response => response.text())
                .then(svgContent => {
                    // Replace the img with inline SVG
                    heartSvgContainer.innerHTML = svgContent;

                    // Get all colored paths (chakra elements)
                    const heartPaths = heartSvgContainer.querySelectorAll('#layer1 path[style*="fill:"]');

                    // Add click functionality to each chakra path
                    heartPaths.forEach((path, index) => {
                        console.log(index);
                        if(heartIndexes.includes(index)){
                            path.classList.add('heart-path');
                            path.style.cursor = 'pointer';
                            // Add click event listener
                            path.addEventListener('click', function() {
                                toggleHeartSelection(this, heartIndexes.indexOf(index));
                            console.log(index);

                            });
                        }
                    });
                })
                .catch(error => {
                    console.error('Error loading heart SVG:', error);
                });
        }

        function toggleHeartSelection(element, index) {
            // Toggle selected class
            element.classList.toggle('selected');

            // Get corresponding checkbox
            const heartCheckboxes = document.querySelectorAll('input[name="heart[]"]');
            if (heartCheckboxes[index]) {
                heartCheckboxes[index].checked = element.classList.contains('selected');
            }
        }

        function syncHeartCheckboxToSVG() {
            const heartCheckboxes = document.querySelectorAll('input[name="heart[]"]');
            const heartPaths = document.querySelectorAll('.chakra-path');

            heartCheckboxes.forEach((checkbox, index) => {
                if (heartPaths[index]) {
                    if (checkbox.checked) {
                        heartPaths[index].classList.add('selected');
                    } else {
                        heartPaths[index].classList.remove('selected');
                    }
                }
            });
        }

    </script>

    <style>
        .brain-path {
            transition: all 0.3s ease;
        }

        .brain-path:hover {
            transform: scale(1.02);
        }

        .brain-path.selected {
            filter: drop-shadow(0 0 8px rgba(255, 107, 107, 0.6));
        }
        /* .heart-path:hover {
            filter: drop-shadow(0 0 8px rgba(0, 0, 107, 0.6));
        }

        .heart-path.selected {
            filter: drop-shadow(0 0 8px rgba(0, 0, 107, 0.6));
        } */

        /* Chakra SVG styles */
        .chakra-path {
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .chakra-path:hover {
            filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.8)) brightness(1.2);
        }

        .chakra-path.selected {
            filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.8)) brightness(1.2);
            /* transform: scale(1.1); */
        }

        #chakra-svg-container {
            position: relative;
        }

        .chakra-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }
    </style>

@endsection