@extends('layouts.user')
@section('title', __('accounts.title'))

@section('content')
@php
    $money = fn($v) => number_format((float)$v, 2);

    $typeLabel = function($type){
        return match($type){
            'bank' => __('accounts.bank'),
            'mfs'  => __('accounts.mfs'),
            'cash' => __('accounts.cash'),
            default => ucfirst($type),
        };
    };

    $typeBadge = function($type){
        return match($type){
            'bank' => 'bg-blue-50 text-blue-700 border-blue-200',
            'mfs'  => 'bg-violet-50 text-violet-700 border-violet-200',
            'cash' => 'bg-amber-50 text-amber-700 border-amber-200',
            default => 'bg-slate-50 text-slate-700 border-slate-200',
        };
    };

    $statusBadge = function($status){
        return $status === 'active'
            ? 'bg-emerald-50 text-emerald-700 border-emerald-200'
            : 'bg-rose-50 text-rose-700 border-rose-200';
    };
@endphp

<div class="space-y-4 text-xs">

    {{-- Header --}}
    <div class="relative overflow-hidden border border-slate-200 bg-gradient-to-br from-slate-50 via-white to-slate-100/80 p-4 shadow-sm">
        <div class="pointer-events-none absolute inset-0">
            <div class="absolute -right-10 -top-10 h-28 w-28 rounded-full bg-slate-200/50 blur-3xl"></div>
            <div class="absolute bottom-0 left-16 h-16 w-16 rounded-full bg-slate-300/30 blur-2xl"></div>
            <div class="absolute inset-x-0 bottom-0 h-14 bg-gradient-to-r from-slate-200/40 via-slate-100/30 to-transparent"></div>
            <div class="absolute -bottom-8 left-1/2 h-20 w-[140%] -translate-x-1/2 rounded-[100%] border border-slate-300/40"></div>
            <div class="absolute -bottom-12 left-1/2 h-20 w-[120%] -translate-x-1/2 rounded-[100%] border border-slate-300/30"></div>
        </div>

        <div class="relative z-10 flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
            <div>
                <div class="text-[11px] text-slate-500">{{ __('accounts.title') }}</div>
                <div class="text-lg font-extrabold text-slate-900">{{ __('accounts.title') }}</div>
            </div>

            <div class="flex flex-wrap gap-2">
                <a href="{{ route('user.account_transfers.index') }}"
                   class="inline-flex items-center justify-center border border-slate-200 bg-white/90 px-3 py-2 text-xs font-semibold text-slate-700 backdrop-blur hover:bg-white">
                    {{ __('accounts.transfers') }}
                </a>

                <a href="{{ route('user.accounts.create') }}"
                   class="inline-flex items-center justify-center bg-slate-900 px-3 py-2 text-xs font-semibold text-white hover:bg-slate-800">
                    + {{ __('accounts.add_account') }}
                </a>
            </div>
        </div>
    </div>

    @if(session('ok'))
        <div class="border border-emerald-200 bg-emerald-50 px-3 py-2 text-xs text-emerald-700">
            {{ session('ok') }}
        </div>
    @endif

    @if(session('err'))
        <div class="border border-rose-200 bg-rose-50 px-3 py-2 text-xs text-rose-700">
            {{ session('err') }}
        </div>
    @endif

    {{-- Summary Cards --}}
    <div class="grid grid-cols-2 gap-2 xl:grid-cols-4">

        <div class="relative overflow-hidden rounded-2xl border border-blue-200 bg-gradient-to-br from-blue-50 via-white to-sky-100/80 p-3 shadow-sm transition duration-300 hover:-translate-y-0.5 hover:shadow-lg">
            <div class="pointer-events-none absolute inset-0">
                <div class="absolute -right-6 -top-6 h-16 w-16 rounded-full bg-blue-200/50 blur-2xl"></div>
                <div class="absolute bottom-0 left-8 h-14 w-14 rounded-full bg-sky-200/40 blur-2xl"></div>
                <div class="absolute inset-x-0 bottom-0 h-10 bg-gradient-to-r from-blue-200/40 via-sky-100/30 to-transparent"></div>
                <div class="absolute -bottom-6 left-1/2 h-16 w-[140%] -translate-x-1/2 rounded-[100%] border border-blue-300/40"></div>
            </div>

            <div class="relative z-10 flex items-start justify-between gap-2">
                <div class="min-w-0">
                    <div class="text-[10px] text-slate-500">{{ __('accounts.total_accounts') }}</div>
                    <div class="mt-1 text-xl font-extrabold leading-none">{{ $summary['total_accounts'] }}</div>
                    <div class="mt-1 text-[10px] leading-4 text-slate-500">
                        {{ __('accounts.active') }}: {{ $summary['active_accounts'] }} | {{ __('accounts.inactive') }}: {{ $summary['inactive_accounts'] }}
                    </div>
                </div>

                <div class="rounded-xl bg-blue-500/10 p-2 text-blue-700">
                    <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                        <rect x="3" y="5" width="18" height="14" rx="2"/>
                        <path d="M3 10h18"/>
                        <path d="M8 15h3M14 15h2"/>
                    </svg>
                </div>
            </div>
        </div>

        <div class="relative overflow-hidden rounded-2xl border border-blue-200 bg-gradient-to-br from-blue-50 via-white to-sky-100/80 p-3 shadow-sm transition duration-300 hover:-translate-y-0.5 hover:shadow-lg">
            <div class="pointer-events-none absolute inset-0">
                <div class="absolute -right-6 -top-6 h-16 w-16 rounded-full bg-blue-200/50 blur-2xl"></div>
                <div class="absolute bottom-0 right-8 h-14 w-14 rounded-full bg-sky-200/40 blur-2xl"></div>
                <div class="absolute inset-x-0 bottom-0 h-10 bg-gradient-to-r from-blue-200/40 via-sky-100/30 to-transparent"></div>
                <div class="absolute -bottom-6 left-1/2 h-16 w-[140%] -translate-x-1/2 rounded-[100%] border border-blue-300/40"></div>
            </div>

            <div class="relative z-10 flex items-start justify-between gap-2">
                <div class="min-w-0">
                    <div class="text-[10px] text-slate-500">{{ __('accounts.bank_balance') }}</div>
                    <div class="mt-1 text-lg font-extrabold leading-tight text-blue-700 break-words">{{ $money($summary['bank_balance']) }}</div>
                </div>

                <div class="rounded-xl bg-blue-500/10 p-2 text-blue-700">
                    <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                        <path d="M3 10h18"/>
                        <path d="M5 10V7l7-4 7 4v3"/>
                        <path d="M5 10v8M9 10v8M15 10v8M19 10v8"/>
                        <path d="M3 18h18"/>
                    </svg>
                </div>
            </div>
        </div>

        <div class="relative overflow-hidden rounded-2xl border border-violet-200 bg-gradient-to-br from-violet-50 via-white to-purple-100/80 p-3 shadow-sm transition duration-300 hover:-translate-y-0.5 hover:shadow-lg">
            <div class="pointer-events-none absolute inset-0">
                <div class="absolute -right-6 -top-6 h-16 w-16 rounded-full bg-violet-200/50 blur-2xl"></div>
                <div class="absolute bottom-0 left-8 h-14 w-14 rounded-full bg-purple-200/40 blur-2xl"></div>
                <div class="absolute inset-x-0 bottom-0 h-10 bg-gradient-to-r from-violet-200/40 via-purple-100/30 to-transparent"></div>
                <div class="absolute -bottom-6 left-1/2 h-16 w-[140%] -translate-x-1/2 rounded-[100%] border border-violet-300/40"></div>
            </div>

            <div class="relative z-10 flex items-start justify-between gap-2">
                <div class="min-w-0">
                    <div class="text-[10px] text-slate-500">{{ __('accounts.mfs_balance') }}</div>
                    <div class="mt-1 text-lg font-extrabold leading-tight text-violet-700 break-words">{{ $money($summary['mfs_balance']) }}</div>
                </div>

                <div class="rounded-xl bg-violet-500/10 p-2 text-violet-700">
                    <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                        <rect x="7" y="2.5" width="10" height="19" rx="2"/>
                        <path d="M10 5.5h4"/>
                        <path d="M11 18.5h2"/>
                    </svg>
                </div>
            </div>
        </div>

        <div class="relative overflow-hidden rounded-2xl border p-3 shadow-sm transition duration-300 hover:-translate-y-0.5 hover:shadow-lg {{ $summary['total_balance'] >= 0 ? 'border-emerald-200 bg-gradient-to-br from-emerald-50 via-white to-lime-100/80' : 'border-rose-200 bg-gradient-to-br from-rose-50 via-white to-pink-100/80' }}">
            <div class="pointer-events-none absolute inset-0">
                <div class="absolute -right-6 -top-6 h-16 w-16 rounded-full {{ $summary['total_balance'] >= 0 ? 'bg-emerald-200/50' : 'bg-rose-200/50' }} blur-2xl"></div>
                <div class="absolute bottom-0 right-8 h-14 w-14 rounded-full {{ $summary['total_balance'] >= 0 ? 'bg-lime-200/40' : 'bg-pink-200/40' }} blur-2xl"></div>
                <div class="absolute inset-x-0 bottom-0 h-10 bg-gradient-to-r {{ $summary['total_balance'] >= 0 ? 'from-emerald-200/40 via-lime-100/30 to-transparent' : 'from-rose-200/40 via-pink-100/30 to-transparent' }}"></div>
                <div class="absolute -bottom-6 left-1/2 h-16 w-[140%] -translate-x-1/2 rounded-[100%] border {{ $summary['total_balance'] >= 0 ? 'border-emerald-300/40' : 'border-rose-300/40' }}"></div>
            </div>

            <div class="relative z-10 flex items-start justify-between gap-2">
                <div class="min-w-0">
                    <div class="text-[10px] {{ $summary['total_balance'] >= 0 ? 'text-emerald-700' : 'text-rose-700' }}">{{ __('accounts.total_balance') }}</div>
                    <div class="mt-1 text-lg font-extrabold leading-tight break-words {{ $summary['total_balance'] >= 0 ? 'text-emerald-700' : 'text-rose-700' }}">
                        {{ $money($summary['total_balance']) }}
                    </div>
                    <div class="mt-1 text-[10px] leading-4 {{ $summary['total_balance'] >= 0 ? 'text-emerald-700' : 'text-rose-700' }}">
                        {{ __('accounts.cash') }}: {{ $money($summary['cash_balance']) }}
                    </div>
                </div>

                <div class="rounded-xl p-2 {{ $summary['total_balance'] >= 0 ? 'bg-emerald-500/10 text-emerald-700' : 'bg-rose-500/10 text-rose-700' }}">
                    <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                        <path d="M3 17l6-6 4 4 7-8"/>
                        <path d="M14 7h6v6"/>
                        <path d="M3 21h18"/>
                    </svg>
                </div>
            </div>
        </div>
    </div>

    {{-- Account Balance Cards --}}
    @if($allAccounts->count())
        <div class="border bg-white p-4 shadow-sm">
            <div>
                <div class="text-base font-extrabold">{{ __('accounts.account_balance_cards') }}</div>
            </div>

            <div class="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
                @foreach($allAccounts as $account)

                    @php
                        $cardClass = 'border-slate-200 bg-gradient-to-br from-slate-50 via-white to-slate-100/80';
                        $orb1 = 'bg-slate-200/50';
                        $orb2 = 'bg-slate-300/30';
                        $wave = 'from-slate-200/40 via-slate-100/30 to-transparent';
                        $line = 'border-slate-300/40';
                        $iconClass = 'bg-slate-500/10 text-slate-700';

                        if ($account->type === 'bank') {
                            $cardClass = 'border-blue-200 bg-gradient-to-br from-blue-50 via-white to-sky-100/80';
                            $orb1 = 'bg-blue-200/50';
                            $orb2 = 'bg-sky-200/40';
                            $wave = 'from-blue-200/40 via-sky-100/30 to-transparent';
                            $line = 'border-blue-300/40';
                            $iconClass = 'bg-blue-500/10 text-blue-700';
                        } elseif ($account->type === 'mfs') {
                            $cardClass = 'border-violet-200 bg-gradient-to-br from-violet-50 via-white to-purple-100/80';
                            $orb1 = 'bg-violet-200/50';
                            $orb2 = 'bg-purple-200/40';
                            $wave = 'from-violet-200/40 via-purple-100/30 to-transparent';
                            $line = 'border-violet-300/40';
                            $iconClass = 'bg-violet-500/10 text-violet-700';
                        } elseif ($account->type === 'cash') {
                            $cardClass = 'border-amber-200 bg-gradient-to-br from-amber-50 via-white to-orange-100/80';
                            $orb1 = 'bg-amber-200/50';
                            $orb2 = 'bg-orange-200/40';
                            $wave = 'from-amber-200/40 via-orange-100/30 to-transparent';
                            $line = 'border-amber-300/40';
                            $iconClass = 'bg-amber-500/10 text-amber-700';
                        }

                        if ($account->current_balance_calc < 0) {
                            $cardClass = 'border-rose-200 bg-gradient-to-br from-rose-50 via-white to-pink-100/80';
                            $orb1 = 'bg-rose-200/50';
                            $orb2 = 'bg-pink-200/40';
                            $wave = 'from-rose-200/40 via-pink-100/30 to-transparent';
                            $line = 'border-rose-300/40';
                            $iconClass = 'bg-rose-500/10 text-rose-700';
                        }
                    @endphp

                    <div class="relative overflow-hidden rounded-2xl border p-3 shadow-sm transition duration-300 hover:-translate-y-0.5 hover:shadow-lg {{ $cardClass }}">
                        <div class="pointer-events-none absolute inset-0">
                            <div class="absolute -right-6 -top-6 h-16 w-16 rounded-full {{ $orb1 }} blur-2xl"></div>
                            <div class="absolute bottom-0 left-8 h-14 w-14 rounded-full {{ $orb2 }} blur-2xl"></div>
                            <div class="absolute inset-x-0 bottom-0 h-10 bg-gradient-to-r {{ $wave }}"></div>
                            <div class="absolute -bottom-6 left-1/2 h-16 w-[140%] -translate-x-1/2 rounded-[100%] border {{ $line }}"></div>
                            <div class="absolute -bottom-10 left-1/2 h-16 w-[120%] -translate-x-1/2 rounded-[100%] border {{ $line }}"></div>
                        </div>

                        <div class="relative z-10">
                            <div class="flex items-start justify-between gap-2">
                                <div class="min-w-0">
                                    <div class="truncate text-sm font-extrabold">{{ $account->name }}</div>
                                    <div class="mt-0.5 text-[11px] text-slate-500 truncate">
                                        {{ $typeLabel($account->type) }}
                                        @if($account->account_number)
                                            • {{ $account->account_number }}
                                        @endif
                                    </div>
                                </div>

                                <span class="rounded-full border px-2 py-0.5 text-[10px] font-semibold whitespace-nowrap {{ $statusBadge($account->status) }}">
                                    {{ $account->status === 'active' ? __('accounts.active_upper') : __('accounts.inactive_upper') }}
                                </span>
                            </div>

                            <div class="mt-3 flex items-start justify-between gap-2">
                                <div class="min-w-0">
                                    <div class="text-[10px] text-slate-500">{{ __('accounts.current_balance') }}</div>
                                    <div class="mt-1 text-base font-extrabold leading-tight break-words {{ $account->current_balance_calc >= 0 ? 'text-slate-900' : 'text-rose-700' }}">
                                        {{ $money($account->current_balance_calc) }}
                                    </div>
                                </div>

                                <div class="rounded-xl p-2 {{ $iconClass }}">
                                    @if($account->type === 'bank')
                                        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                                            <path d="M3 10h18"/>
                                            <path d="M5 10V7l7-4 7 4v3"/>
                                            <path d="M5 10v8M9 10v8M15 10v8M19 10v8"/>
                                            <path d="M3 18h18"/>
                                        </svg>
                                    @elseif($account->type === 'mfs')
                                        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                                            <rect x="7" y="2.5" width="10" height="19" rx="2"/>
                                            <path d="M10 5.5h4"/>
                                            <path d="M11 18.5h2"/>
                                        </svg>
                                    @elseif($account->type === 'cash')
                                        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                                            <rect x="3" y="6" width="18" height="12" rx="2"/>
                                            <path d="M3 10h18"/>
                                            <circle cx="12" cy="12" r="2.5"/>
                                        </svg>
                                    @else
                                        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                                            <rect x="3" y="5" width="18" height="14" rx="2"/>
                                            <path d="M3 10h18"/>
                                        </svg>
                                    @endif
                                </div>
                            </div>

                            <div class="mt-2 grid grid-cols-2 gap-2 text-[11px]">
                                <div class="rounded-xl border bg-white/90 p-2 backdrop-blur">
                                    <div class="text-[10px] text-slate-500">{{ __('accounts.opening') }}</div>
                                    <div class="mt-0.5 font-bold break-words">{{ $money($account->opening_balance) }}</div>
                                </div>
                                <div class="rounded-xl border bg-white/90 p-2 backdrop-blur">
                                    <div class="text-[10px] text-slate-500">{{ __('accounts.type') }}</div>
                                    <div class="mt-0.5 font-bold">{{ $typeLabel($account->type) }}</div>
                                </div>
                            </div>

                            <div class="mt-2 flex gap-2">
                                <a href="{{ route('user.accounts.ledger.index', $account) }}"
                                   class="flex-1 rounded-xl border bg-white/90 px-2 py-1.5 text-center text-[11px] font-semibold backdrop-blur hover:bg-white">
                                    {{ __('accounts.ledger') }}
                                </a>
                                <a href="{{ route('user.accounts.edit', $account) }}"
                                   class="flex-1 rounded-xl border bg-white/90 px-2 py-1.5 text-center text-[11px] font-semibold backdrop-blur hover:bg-white">
                                    {{ __('accounts.edit') }}
                                </a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    @endif

    {{-- Filter --}}
    <div class="relative overflow-hidden border bg-white p-4 shadow-sm">
        <div class="pointer-events-none absolute inset-x-0 bottom-0 h-16 bg-gradient-to-r from-slate-100/50 via-white to-slate-100/50"></div>

        <form class="relative z-10 grid grid-cols-1 gap-2 text-xs md:grid-cols-5" method="GET">
            <input
                class="border border-slate-200 px-3 py-2 focus:border-slate-400 focus:outline-none"
                name="search"
                value="{{ request('search') }}"
                placeholder="{{ __('accounts.search_name_account_number') }}"
            >

            <select class="border border-slate-200 px-3 py-2 focus:border-slate-400 focus:outline-none" name="type">
                <option value="">{{ __('accounts.all_types') }}</option>
                <option value="bank" @selected(request('type')==='bank')>{{ __('accounts.bank') }}</option>
                <option value="mfs" @selected(request('type')==='mfs')>{{ __('accounts.mfs') }}</option>
                <option value="cash" @selected(request('type')==='cash')>{{ __('accounts.cash') }}</option>
            </select>

            <select class="border border-slate-200 px-3 py-2 focus:border-slate-400 focus:outline-none" name="status">
                <option value="">{{ __('accounts.all_status') }}</option>
                <option value="active" @selected(request('status')==='active')>{{ __('accounts.active') }}</option>
                <option value="inactive" @selected(request('status')==='inactive')>{{ __('accounts.inactive') }}</option>
            </select>

            <button class="bg-slate-900 px-3 py-2 font-semibold text-white hover:bg-slate-800">
                {{ __('accounts.filter') }}
            </button>

            <a href="{{ route('user.accounts.index') }}"
               class="border border-slate-200 bg-white px-3 py-2 text-center font-semibold hover:bg-slate-50">
                {{ __('accounts.reset') }}
            </a>
        </form>
    </div>

    {{-- Table --}}
    <div class="border bg-white p-4 shadow-sm">
        <div class="overflow-x-auto">
            <table class="min-w-full text-xs">
                <thead>
                    <tr class="border-b text-left text-slate-500">
                        <th class="py-2.5">{{ __('accounts.name') }}</th>
                        <th class="py-2.5">{{ __('accounts.account_no') }}</th>
                        <th class="py-2.5">{{ __('accounts.type') }}</th>
                        <th class="py-2.5">{{ __('accounts.status') }}</th>
                        <th class="py-2.5">{{ __('accounts.opening') }}</th>
                        <th class="py-2.5">{{ __('accounts.current_balance') }}</th>
                        <th class="py-2.5 text-right">{{ __('accounts.action') }}</th>
                    </tr>
                </thead>

                <tbody>
                    @forelse($accounts as $account)
                        <tr class="border-b last:border-0">
                            <td class="py-3">
                                <div class="font-extrabold text-slate-900">{{ $account->name }}</div>
                                <div class="mt-1 text-[11px] text-slate-500">
                                    {{ __('accounts.created') }}: {{ optional($account->created_at)->format('d M Y') }}
                                </div>
                            </td>

                            <td class="text-slate-700">
                                {{ $account->account_number ?: '-' }}
                            </td>

                            <td>
                                <span class="rounded-full border px-2 py-0.5 text-[10px] font-semibold {{ $typeBadge($account->type) }}">
                                    {{ $typeLabel($account->type) }}
                                </span>
                            </td>

                            <td>
                                <span class="rounded-full border px-2 py-0.5 text-[10px] font-semibold {{ $statusBadge($account->status) }}">
                                    {{ $account->status === 'active' ? __('accounts.active_upper') : __('accounts.inactive_upper') }}
                                </span>
                            </td>

                            <td class="font-semibold">
                                {{ $money($account->opening_balance) }}
                            </td>

                            <td class="font-extrabold {{ $account->current_balance_calc >= 0 ? 'text-emerald-700' : 'text-rose-700' }}">
                                {{ $money($account->current_balance_calc) }}
                            </td>

                            <td class="text-right">
                                <div class="flex flex-wrap justify-end gap-1.5">
                                    <a href="{{ route('user.accounts.ledger.index', $account) }}"
                                       class="border px-2.5 py-1 text-[11px] font-semibold hover:bg-slate-50">
                                        {{ __('accounts.ledger') }}
                                    </a>

                                    <a href="{{ route('user.accounts.edit', $account) }}"
                                       class="border px-2.5 py-1 text-[11px] font-semibold hover:bg-slate-50">
                                        {{ __('accounts.edit') }}
                                    </a>

                                    <form method="POST"
                                          action="{{ route('user.accounts.destroy', $account) }}"
                                          class="inline js-delete-account">
                                        @csrf
                                        @method('DELETE')
                                        <button class="border border-rose-200 bg-rose-50 px-2.5 py-1 text-[11px] font-semibold text-rose-700 hover:bg-rose-100">
                                            {{ __('accounts.delete') }}
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="py-8 text-center text-slate-500">
                                {{ __('accounts.no_accounts_found') }}
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="mt-4">
            {{ $accounts->links() }}
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('form.js-delete-account').forEach(form => {
        form.addEventListener('submit', function(e){
            e.preventDefault();

            if (typeof Swal === 'undefined') {
                form.submit();
                return;
            }

            Swal.fire({
                title: @json(__('accounts.delete_account_confirm_title')),
                text: @json(__('accounts.delete_account_warning')),
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: @json(__('accounts.yes_delete')),
                cancelButtonText: @json(__('accounts.cancel'))
            }).then((result) => {
                if(result.isConfirmed){
                    form.submit();
                }
            });
        });
    });
});
</script>
@endsection