@extends('client.layout.master')
@section('page-title', 'Client')
@section('breadcrumb')
    <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
    <li class="breadcrumb-item f-w-500 active">Client</li>
@endsection
@section('title','Client')

@push('css')
    <style>
        .reminders-container {
            max-height: 400px;
            overflow-y: auto;
        }

        .reminder-item {
            padding: 12px 15px;
            border-radius: 8px;
            background-color: #f8f9fa;
            border-left: 3px solid transparent;
        }

        .reminder-item.high-priority {
            border-left-color: #dc3545;
            background-color: #fff5f5;
        }

        .reminder-item.medium-priority {
            border-left-color: #ffc107;
            background-color: #fffbf0;
        }

        .reminder-item.low-priority {
            border-left-color: #0dcaf0;
            background-color: #f0fafc;
        }

        .priority-badge {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-right: 8px;
            display: inline-block;
        }

        .reminder-date {
            font-size: 11px;
            color: #6c757d;
        }

        .reminder-desc {
            font-size: 12px;
            color: #495057;
        }
    </style>
@endpush

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-9">
                <div class="card title-line sales-details mb-4">
                    <div class="card-header card-no-border sales-bg">
                        <div class="header-top">
                            <div>
                                <h2>Sales Overview </h2>
                            </div>
                        </div>
                    </div>
                    <div class="card-body pt-0 custom-scrollbar mt-2">
                        <div class="row row-cols-4 row-cols-xl-iii row-cols-md-iii">
                            <div class="col-12 col-md-6 col-lg-3">
                                <div class="sales-overview widget-1 mb-4">
                                    <div class="common-box">
                                        <div class="rounded-circle2 warning">
                                            <div class="sales-icon">
                                                <!-- Today appointments icon -->
                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-calendar-event" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                                    <path d="M4 5m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z" />
                                                    <path d="M16 3l0 4" />
                                                    <path d="M8 3l0 4" />
                                                    <path d="M4 11l16 0" />
                                                    <path d="M8 15h2v2h-2z" />
                                                </svg>
                                            </div>
                                        </div>
                                        <div>
                                            <h3 class="f-w-600">45</h3>
                                            <div class="sale-content"><span class="f-w-500 f-light f-12">Today Appointments</span></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-md-6 col-lg-3">
                                <div class="sales-overview widget-1 mb-4">
                                    <div class="common-box">
                                        <div class="rounded-circle2 success">
                                            <div class="sales-icon">
                                                <!-- Total appointments icon -->
                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-calendar-stats" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                                    <path d="M11.795 21h-6.795a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v4" />
                                                    <path d="M18 14v4h4" />
                                                    <path d="M18 18m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" />
                                                    <path d="M15 3v4" />
                                                    <path d="M7 3v4" />
                                                    <path d="M3 11h16" />
                                                </svg>
                                            </div>
                                        </div>
                                        <div>
                                            <h3 class="f-w-600">9,453</h3>
                                            <div class="sale-content"><span class="f-w-500 f-light f-12">Total Appointments</span></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-md-6 col-lg-3">
                                <div class="sales-overview widget-1 mb-4">
                                    <div class="common-box">
                                        <div class="rounded-circle2 primary">
                                            <div class="sales-icon">
                                                <!-- This month income icon -->
                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-cash" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                                    <path d="M7 9m0 2a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2z" />
                                                    <path d="M14 14m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
                                                    <path d="M17 9v-2a2 2 0 0 0 -2 -2h-10a2 2 0 0 0 -2 2v6a2 2 0 0 0 2 2h2" />
                                                </svg>
                                            </div>
                                        </div>
                                        <div>
                                            <h3 class="f-w-600">$1,786</h3>
                                            <div class="sale-content"><span class="f-w-500 f-light f-12">This Month Income</span></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-md-6 col-lg-3 sales-transaction">
                                <div class="sales-overview widget-1 mb-4">
                                    <div class="common-box">
                                        <div class="rounded-circle2 secondary">
                                            <div class="sales-icon">
                                                <!-- Total patients icon -->
                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-users" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                                    <path d="M9 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" />
                                                    <path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
                                                    <path d="M16 3.13a4 4 0 0 1 0 7.75" />
                                                    <path d="M21 21v-2a4 4 0 0 0 -3 -3.85" />
                                                </svg>
                                            </div>
                                        </div>
                                        <div>
                                            <h3 class="f-w-600">3,542</h3>
                                            <div class="sale-content"><span class="f-w-500 f-light f-12">Total Patients</span></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card title-line sales-details mb-4">
                    <div class="card-header card-no-border sales-bg">
                        <div class="header-top">
                            <div>
                                <h2>Latest Visits </h2>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        @foreach($visits as $visit)
                            <div class="col-12 mb-2">
                                <div class="card border border-light-subtle shadow-none">
                                    <div class="card-body p-2 fs-12"
                                         wire:click.prevent="$dispatch('show_doctor_clinic', { id: {{ $visit->id }} })">
                                        <!-- Header with flex layout for columns -->
                                        <div class="d-flex">
                                            <!-- Column 1: Image, name, code, date and time -->
                                            <div class="d-flex card-col-1">
                                                <!-- Avatar -->
                                                <div class="me-2 avatar-container">
                                                    @if($visit->patient && $visit->patient->image)
                                                        <img src="{{ asset('storage/' . $visit->patient->image) }}" alt="{{ $visit->patient?->name }}"
                                                             class="rounded-circle img-fluid avatar-img">
                                                    @else
                                                        <img src="{{ asset('client/v2/img/user.png') }}" alt="Default User"
                                                             class="rounded-circle img-fluid avatar-img-default">
                                                    @endif
                                                </div>

                                                <!-- Name, code, date, time -->
                                                <div>
                                                    <h6 class="mb-0 fw-bold patient-name">Code: {{ $visit->code }}</h6>
                                                    <p class="mb-0">{{ $visit->patient?->name ?? '---' }}</p>
                                                    <div class="d-flex align-items-center">
                                                        <svg xmlns="http://www.w3.org/2000/svg" class="text-primary me-1" width="12" height="12" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 5m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-14z"/><path d="M16 3l0 4"/><path d="M8 3l0 4"/><path d="M4 11l16 0"/><path d="M11 15l1 0"/><path d="M12 15l0 3"/></svg>
                                                        <span class="icon-text">{{ \Carbon\Carbon::parse($visit->date)->format('d M Y') }}</span>
                                                        <span class="mx-1">•</span>
                                                        <svg xmlns="http://www.w3.org/2000/svg" class="text-primary me-1" width="12" height="12" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path>
                                                            <path d="M12 7v5l3 3"/></svg>
                                                        <span class="icon-text">{{ \Carbon\Carbon::parse($visit->time)->format('h:i A') }}</span>
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- Column 2: Clinic and service -->
                                            <div class="d-flex flex-column justify-content-center card-col-2">
                                                <div class="d-flex align-items-center mb-1">
                                                    <svg xmlns="http://www.w3.org/2000/svg" class="text-primary me-1" width="12" height="12" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 21l18 0"/><path d="M5 21v-16a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v16"/><path d="M9 21v-4a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v4"/><path d="M10 9l4 0"/><path d="M12 7l0 4"/></svg>
                                                    <span class="icon-text">{{ $visit->clinic?->name ?? '---' }}</span>
                                                </div>

                                                <div class="d-flex align-items-center">
                                                    <svg xmlns="http://www.w3.org/2000/svg" class="text-primary me-1" width="12" height="12" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M6 4h-1a2 2 0 0 0 -2 2v3.5h0a5.5 5.5 0 0 0 11 0v-3.5a2 2 0 0 0 -2 -2h-1"/><path d="M8 15a6 6 0 1 0 12 0v-3"/><path d="M11 3v2"/><path d="M6 3v2"/><path d="M20 10m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"/></svg>
                                                    <span class="icon-text">{{ $visit->clinic_service?->service }}</span>
                                                </div>
                                            </div>

                                            <!-- Column 3: Amount and status -->
                                            <div class="d-flex flex-column justify-content-center card-col-3">
                                                <div class="d-flex align-items-center mb-1">
                                                    <svg xmlns="http://www.w3.org/2000/svg" class="text-primary me-1" width="12" height="12" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"/><path d="M14.8 9a2 2 0 0 0 -1.8 -1h-2a2 2 0 1 0 0 4h2a2 2 0 1 1 0 4h-2a2 2 0 0 1 -1.8 -1"/><path d="M12 7v10"/></svg>
                                                    <span class="icon-text">{{ $visit->amount_paid }}</span>
                                                </div>


                                                <span class="badge bg-{{ $visit?->status?->getBadgeColor() }} py-1 px-2 align-self-start fw-normal">
                                            {{ $visit->status }}
                                        </span>
                                            </div>

                                            <!-- Column 4: Action icons -->
                                            <div class="d-flex align-items-center  justify-content-end card-col-4 actions-gap">
                                                @php
                                                    $isCanceledByPatient = $visit->status == \App\Support\Enum\AppointmentStatus::CANCEL_BY_PATIENT;
                                                    $hasChildren = $visit->children()->count() > 0;
                                                    $isCompleted = $visit->status == \App\Support\Enum\AppointmentStatus::COMPLETED;
                                                @endphp

                                                <a href="#" wire:click.prevent="$dispatch('show_visit_clinic', { id: {{ $visit->id }} })" class="text-primary">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"/><path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6"/></svg>
                                                </a>

                                                @if(!$isCanceledByPatient || !($hasChildren && $isCompleted))
                                                    <a href="#" wire:click.prevent="$dispatch('update_appointment', { id: {{ $visit->id }} })" class="text-success">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1"/><path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z"/><path d="M16 5l3 3"/></svg>
                                                    </a>
                                                @endif

                                                @if($visit->status!=\App\Support\Enum\AppointmentStatus::COMPLETED)
                                                    <a href="#" wire:click.prevent="$dispatch('delete_visit_clinic', { id: {{ $visit->id }} })" class="text-danger">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7l16 0"/><path d="M10 11l0 6"/><path d="M14 11l0 6"/><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"/><path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"/></svg>
                                                    </a>
                                                @endif

                                                <!-- Home icon 1 -->
                                                <a href="#" data-bs-toggle="offcanvas" data-bs-target="#manage_appointment_vertical" class="text-danger">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l-2 0l9 -9l9 9l-2 0"/><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"/><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6"/></svg>
                                                </a>

                                                <!-- Home icon 2 -->
                                                <a href="#" data-bs-toggle="offcanvas" wire:click.prevent="$dispatch('manage_vertical_visit_clinic2', { id: {{ $visit->id }} })" class="text-danger">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l-2 0l9 -9l9 9l-2 0"/><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"/><path d="M10 12h4v4h-4z"/></svg>
                                                </a>

                                                <!-- Prescription icon -->
                                                <a href="#" class="text-primary">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2"/><path d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"/><path d="M9 12h6"/><path d="M9 16h6"/></svg>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="card title-line sales-details mb-4">
                                <div class="card-header card-no-border sales-bg">
                                    <div class="header-top">
                                        <div>
                                            <h2>Patient Analytics</h2>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body pt-0">
                                    <div id="pieChart" style="height: 300px;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card title-line sales-details mb-4">
                                <div class="card-header card-no-border sales-bg">
                                    <div class="header-top">
                                        <div>
                                            <h2>Monthly Revenue</h2>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body pt-0">
                                    <div id="lineChart" style="height: 300px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>


            </div>
            <div class="col-md-3">
                <div class="card title-line reminder">
                    <div class="card-header card-no-border mb-4">
                        <div class="header-top">
                            <div>
                                <h2>Daily Task</h2>
                            </div>
                        </div>
                    </div>
                    <div class="card-body notification daily-task pt-0">
                        <ul>
                            <li class="d-flex align-items-center">
                                <div class="activity-dot-primary"></div>
                                <div class="task-content ms-2">
                                    <div class="d-flex align-items-center">
                                        <div>
                                            <h6>iOS App UI/UX Meet..</h6>
                                            <span class="f-light f-w-500 f-12">
                                                  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                                    <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"/>
                                                    <path d="M12 7v5l3 3"/>
                                                  </svg>
                                                <span>9:00 am</span>
                                            </span>
                                        </div>
                                        <a class="btn btn-lighten-primary" href="https://larathemes.pixelstrap.com/yuri/admin/to-do">Remind Me</a>
                                    </div>
                                </div>
                            </li>
                            <li class="d-flex align-items-center">
                                <div class="activity-dot-warning"></div>
                                <div class="task-content ms-2">
                                    <div class="d-flex align-items-center">
                                        <div>
                                            <h6>Start Web developing..</h6><span class="f-light f-w-500 f-12">
                      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                        <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"/>
                        <path d="M12 7v5l3 3"/>
                      </svg><span>10:00 am</span></span>
                                        </div><a class="btn btn-lighten-primary" href="https://larathemes.pixelstrap.com/yuri/admin/to-do">Remind Me</a>
                                    </div>
                                </div>
                            </li>
                            <li class="d-flex align-items-center">
                                <div class="activity-dot-success"></div>
                                <div class="task-content ms-2">
                                    <div class="d-flex align-items-center">
                                        <div>
                                            <h6>IOS App ui</h6><span class="f-light f-w-500 f-12">
                      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                        <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"/>
                        <path d="M12 7v5l3 3"/>
                      </svg><span>10:00 am</span></span>
                                        </div><a class="btn btn-lighten-primary" href="https://larathemes.pixelstrap.com/yuri/admin/to-do">Remind Me</a>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')
    <!-- ApexCharts Library -->
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // Patient Analytics Polar Area Chart
            var options = {
                series: [44, 55, 13, 33],
                chart: {
                    width: '100%',
                    height: 300,
                    type: 'polarArea',
                },
                labels: ['New Patients', 'Returning Patients', 'Referred Patients', 'Walk-ins'],
                colors: ['#4099ff', '#0e9e4a', '#f1b44c', '#ff5370'],
                stroke: {
                    width: 1
                },
                fill: {
                    opacity: 0.8
                },
                legend: {
                    position: 'bottom'
                },
                responsive: [{
                    breakpoint: 480,
                    options: {
                        chart: {
                            width: 300
                        },
                        legend: {
                            position: 'bottom'
                        }
                    }
                }]
            };

            var chart = new ApexCharts(document.querySelector("#pieChart"), options);
            chart.render();

            // Monthly Revenue Line Chart
            var optionsLine = {
                series: [{
                    name: "Revenue",
                    data: [300, 400, 450, 500, 600, 700, 800, 900, 1000, 1100, 1200, 1300]
                }],
                chart: {
                    height: 300,
                    type: 'line',
                    zoom: {
                        enabled: false
                    }
                },
                dataLabels: {
                    enabled: false
                },
                stroke: {
                    curve: 'smooth',
                    width: 2
                },
                xaxis: {
                    categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                    title: {
                        text: 'Months'
                    }
                },
                yaxis: {
                    title: {
                        text: 'Revenue ($)'
                    }
                },
                tooltip: {
                    shared: true,
                    intersect: false
                }
            };

            var chartLine = new ApexCharts(document.querySelector("#lineChart"), optionsLine);
            chartLine.render();
        });
    </script>
@endpush