@extends('layouts.app')

@section('title', __('accounting-reports::lang.module_name'))

@section('content')
<!-- Content Header -->
<section class="content-header" style="background: #ffffff; padding: 40px 20px 30px 20px; margin: -20px -15px 30px -15px; border-bottom: 1px solid #e9ecef;">
    <div class="container-fluid">
        <div class="row align-items-center">
            <div class="col-md-10">
                <h1 style="color: #2c3e50; font-size: 32px; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 15px;">
                    <div style="width: 50px; height: 50px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center;">
                        <i class="fa fa-file-invoice-dollar" style="font-size: 24px; color: white;"></i>
                    </div>
                    @lang('accounting-reports::lang.module_name')
                </h1>
                <p style="color: #6c757d; font-size: 15px; margin: 12px 0 0 60px;">
                    View and manage your Accounting Reports module license information
                </p>
            </div>
        </div>
    </div>
</section>

<!-- Main Content -->
<section class="content" style="background: #f8f9fa; padding: 20px;">
    <div class="row">
        @if($has_license)
            <!-- License Status Card -->
            <div class="col-md-12" style="margin-bottom: 25px;">
                <div style="background: white; border-radius: 16px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); border: 1px solid #e9ecef; overflow: hidden;">
                    <div style="background: 
                        @if($license_status == 'Active') linear-gradient(135deg, #10b981 0%, #059669 100%)
                        @elseif($license_status == 'Expired' || $license_status == 'Revoked') linear-gradient(135deg, #ef4444 0%, #dc2626 100%)
                        @elseif($license_status == 'Suspended') linear-gradient(135deg, #f59e0b 0%, #d97706 100%)
                        @else linear-gradient(135deg, #6b7280 0%, #4b5563 100%)
                        @endif; 
                        padding: 30px; color: white;">
                        <div class="row align-items-center">
                            <div class="col-md-8">
                                <div style="display: flex; align-items: center; gap: 20px; margin-bottom: 15px;">
                                    <div style="width: 60px; height: 60px; background: rgba(255,255,255,0.2); border-radius: 14px; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(10px);">
                                        <i class="fa fa-{{ $license_status == 'Active' ? 'check-circle' : ($license_status == 'Expired' || $license_status == 'Revoked' ? 'exclamation-circle' : ($license_status == 'Suspended' ? 'pause-circle' : 'question-circle')) }}" style="font-size: 32px;"></i>
                                    </div>
                                    <div>
                                        <div style="font-size: 14px; opacity: 0.9; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 1px;">License Status</div>
                                        <h2 style="color: white; font-size: 28px; font-weight: 700; margin: 0;">{{ $license_status }}</h2>
                                    </div>
                                </div>
                                @if($expiry_date && $expiry_date !== '0000-00-00')
                                    <div style="display: flex; align-items: center; gap: 10px; font-size: 15px; opacity: 0.95;">
                                        <i class="fa fa-calendar-alt"></i>
                                        @if($is_expired)
                                            <span>Expired on {{ \Carbon\Carbon::parse($expiry_date)->format('M d, Y') }}</span>
                                        @elseif($days_until_expiry !== null)
                                            @if($days_until_expiry <= 30)
                                                <span>Expires in {{ $days_until_expiry }} days ({{ \Carbon\Carbon::parse($expiry_date)->format('M d, Y') }})</span>
                                            @else
                                                <span>Valid until {{ \Carbon\Carbon::parse($expiry_date)->format('M d, Y') }} ({{ $days_until_expiry }} days remaining)</span>
                                            @endif
                                        @endif
                                    </div>
                                @endif
                            </div>
                            <div class="col-md-4 text-right">
                                <div style="background: rgba(255,255,255,0.15); border-radius: 12px; padding: 20px; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2);">
                                    <div style="font-size: 12px; opacity: 0.9; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1px;">License Type</div>
                                    <div style="font-size: 24px; font-weight: 700;">{{ $license_type }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Expiry Warnings -->
            @if($is_expired)
                <div class="col-md-12" style="margin-bottom: 25px;">
                    <div style="background: white; border-left: 4px solid #ef4444; border-radius: 12px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.06);">
                        <div style="display: flex; align-items: start; gap: 15px;">
                            <div style="width: 40px; height: 40px; background: #fee2e2; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                                <i class="fa fa-exclamation-triangle" style="font-size: 20px; color: #dc2626;"></i>
                            </div>
                            <div style="flex: 1;">
                                <strong style="font-size: 16px; color: #991b1b; display: block; margin-bottom: 5px;">License Expired</strong>
                                <p style="margin: 0; color: #7f1d1d; font-size: 14px;">Your license has expired. Please renew your license to continue using the Accounting Reports module.</p>
                            </div>
                        </div>
                    </div>
                </div>
            @elseif($days_until_expiry !== null && $days_until_expiry <= 30)
                <div class="col-md-12" style="margin-bottom: 25px;">
                    <div style="background: white; border-left: 4px solid #f59e0b; border-radius: 12px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.06);">
                        <div style="display: flex; align-items: start; gap: 15px;">
                            <div style="width: 40px; height: 40px; background: #fef3c7; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                                <i class="fa fa-exclamation-circle" style="font-size: 20px; color: #d97706;"></i>
                            </div>
                            <div style="flex: 1;">
                                <strong style="font-size: 16px; color: #92400e; display: block; margin-bottom: 5px;">License Expiring Soon</strong>
                                <p style="margin: 0; color: #78350f; font-size: 14px;">Your license will expire in {{ $days_until_expiry }} days. Please renew your license to avoid service interruption.</p>
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            <!-- License Information Cards -->
            <div class="col-md-6" style="margin-bottom: 25px;">
                <div style="background: white; border-radius: 16px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); border: 1px solid #e9ecef; height: 100%;">
                    <div style="padding: 25px; border-bottom: 1px solid #f1f3f5;">
                        <h3 style="color: #1f2937; font-size: 18px; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 12px;">
                            <div style="width: 36px; height: 36px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 10px; display: flex; align-items: center; justify-content: center;">
                                <i class="fa fa-info-circle" style="color: white; font-size: 16px;"></i>
                            </div>
                            Module Information
                        </h3>
                    </div>
                    <div style="padding: 25px;">
                        <div class="info-item-modern" style="margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid #f1f3f5;">
                            <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 10px;">
                                <div style="width: 32px; height: 32px; background: #f0f4ff; border-radius: 8px; display: flex; align-items: center; justify-content: center;">
                                    <i class="fa fa-cube" style="color: #667eea; font-size: 14px;"></i>
                                </div>
                                <label style="font-weight: 600; color: #6b7280; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; margin: 0;">
                                    Module Name
                                </label>
                            </div>
                            <div style="font-size: 16px; font-weight: 600; color: #111827; padding-left: 44px;">
                                {{ $module_name }}
                            </div>
                        </div>

                        <div class="info-item-modern" style="margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid #f1f3f5;">
                            <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 10px;">
                                <div style="width: 32px; height: 32px; background: #ecfeff; border-radius: 8px; display: flex; align-items: center; justify-content: center;">
                                    <i class="fa fa-tag" style="color: #06b6d4; font-size: 14px;"></i>
                                </div>
                                <label style="font-weight: 600; color: #6b7280; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; margin: 0;">
                                    Module Version
                                </label>
                            </div>
                            <div style="padding-left: 44px;">
                                <span style="background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%); color: white; padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; display: inline-block;">
                                    v{{ $module_version }}
                                </span>
                            </div>
                        </div>

                        <div class="info-item-modern" style="margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid #f1f3f5;">
                            <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 10px;">
                                <div style="width: 32px; height: 32px; background: #f0fdf4; border-radius: 8px; display: flex; align-items: center; justify-content: center;">
                                    <i class="fa fa-key" style="color: #10b981; font-size: 14px;"></i>
                                </div>
                                <label style="font-weight: 600; color: #6b7280; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; margin: 0;">
                                    License Code
                                </label>
                            </div>
                            <div style="padding-left: 44px;">
                                <div style="display: flex; align-items: center; gap: 10px; flex-wrap: wrap;">
                                    <code style="background: #f9fafb; padding: 10px 16px; border-radius: 10px; font-size: 14px; font-weight: 600; color: #374151; border: 1px solid #e5e7eb; font-family: 'Courier New', monospace; letter-spacing: 0.5px; flex: 1; min-width: 200px;">
                                        {{ $license_code }}
                                    </code>
                                    <button type="button" 
                                            class="btn btn-sm" 
                                            onclick="copyToClipboard('{{ $license_code }}')" 
                                            title="Copy License Code"
                                            style="background: #f3f4f6; color: #374151; border: 1px solid #e5e7eb; border-radius: 8px; padding: 8px 16px; font-weight: 600; transition: all 0.2s;">
                                        <i class="fa fa-copy"></i> Copy
                                    </button>
                                </div>
                            </div>
                        </div>

                        <div class="info-item-modern" style="margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid #f1f3f5;">
                            <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 10px;">
                                <div style="width: 32px; height: 32px; background: #faf5ff; border-radius: 8px; display: flex; align-items: center; justify-content: center;">
                                    <i class="fa fa-user" style="color: #8b5cf6; font-size: 14px;"></i>
                                </div>
                                <label style="font-weight: 600; color: #6b7280; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; margin: 0;">
                                    License Username
                                </label>
                            </div>
                            <div style="font-size: 15px; color: #111827; padding-left: 44px;">
                                {{ $license_username ?? 'Not Available' }}
                            </div>
                        </div>

                        <div class="info-item-modern">
                            <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 10px;">
                                <div style="width: 32px; height: 32px; background: #fdf2f8; border-radius: 8px; display: flex; align-items: center; justify-content: center;">
                                    <i class="fa fa-envelope" style="color: #ec4899; font-size: 14px;"></i>
                                </div>
                                <label style="font-weight: 600; color: #6b7280; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; margin: 0;">
                                    License Email
                                </label>
                            </div>
                            <div style="font-size: 15px; color: #111827; padding-left: 44px;">
                                {{ $license_email }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-6" style="margin-bottom: 25px;">
                <div style="background: white; border-radius: 16px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); border: 1px solid #e9ecef; height: 100%;">
                    <div style="padding: 25px; border-bottom: 1px solid #f1f3f5;">
                        <h3 style="color: #1f2937; font-size: 18px; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 12px;">
                            <div style="width: 36px; height: 36px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 10px; display: flex; align-items: center; justify-content: center;">
                                <i class="fa fa-server" style="color: white; font-size: 16px;"></i>
                            </div>
                            Installation Details
                        </h3>
                    </div>
                    <div style="padding: 25px;">
                        <div class="info-item-modern" style="margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid #f1f3f5;">
                            <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 10px;">
                                <div style="width: 32px; height: 32px; background: #ecfdf5; border-radius: 8px; display: flex; align-items: center; justify-content: center;">
                                    <i class="fa fa-globe" style="color: #10b981; font-size: 14px;"></i>
                                </div>
                                <label style="font-weight: 600; color: #6b7280; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; margin: 0;">
                                    Install Domain
                                </label>
                            </div>
                            <div style="font-size: 15px; color: #111827; padding-left: 44px;">
                                {{ $install_domain ?? 'Not Available' }}
                            </div>
                        </div>

                        <div class="info-item-modern" style="margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid #f1f3f5;">
                            <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 10px;">
                                <div style="width: 32px; height: 32px; background: #fff7ed; border-radius: 8px; display: flex; align-items: center; justify-content: center;">
                                    <i class="fa fa-link" style="color: #f97316; font-size: 14px;"></i>
                                </div>
                                <label style="font-weight: 600; color: #6b7280; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; margin: 0;">
                                    Install URL
                                </label>
                            </div>
                            <div style="font-size: 15px; color: #111827; padding-left: 44px;">
                                @if($install_url)
                                    <a href="{{ $install_url }}" target="_blank" style="color: #667eea; text-decoration: none; word-break: break-all; font-weight: 500;">
                                        <i class="fa fa-external-link-alt" style="margin-right: 6px; font-size: 12px;"></i>{{ $install_url }}
                                    </a>
                                @else
                                    Not Available
                                @endif
                            </div>
                        </div>

                        <div class="info-item-modern" style="margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid #f1f3f5;">
                            <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 10px;">
                                <div style="width: 32px; height: 32px; background: #faf5ff; border-radius: 8px; display: flex; align-items: center; justify-content: center;">
                                    <i class="fa fa-calendar-check" style="color: #8b5cf6; font-size: 14px;"></i>
                                </div>
                                <label style="font-weight: 600; color: #6b7280; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; margin: 0;">
                                    License Validated At
                                </label>
                            </div>
                            <div style="font-size: 15px; color: #111827; padding-left: 44px;">
                                @if($license_validated_at)
                                    <i class="fa fa-clock" style="color: #9ca3af; margin-right: 6px; font-size: 12px;"></i>
                                    {{ \Carbon\Carbon::parse($license_validated_at)->format('M d, Y h:i A') }}
                                @else
                                    Not Available
                                @endif
                            </div>
                        </div>

                        @if($expiry_date && $expiry_date !== '0000-00-00')
                            <div class="info-item-modern" style="margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid #f1f3f5;">
                                <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 10px;">
                                    <div style="width: 32px; height: 32px; background: {{ $is_expired ? '#fee2e2' : ($days_until_expiry <= 30 ? '#fef3c7' : '#ecfdf5') }}; border-radius: 8px; display: flex; align-items: center; justify-content: center;">
                                        <i class="fa fa-calendar-times" style="color: {{ $is_expired ? '#dc2626' : ($days_until_expiry <= 30 ? '#d97706' : '#10b981') }}; font-size: 14px;"></i>
                                    </div>
                                    <label style="font-weight: 600; color: #6b7280; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; margin: 0;">
                                        Expiry Date
                                    </label>
                                </div>
                                <div style="padding-left: 44px;">
                                    <div style="display: flex; align-items: center; gap: 10px; flex-wrap: wrap;">
                                        <span style="font-size: 15px; color: #111827; font-weight: 600;">
                                            {{ \Carbon\Carbon::parse($expiry_date)->format('M d, Y') }}
                                        </span>
                                        @if($is_expired)
                                            <span style="background: #fee2e2; color: #991b1b; padding: 4px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; border: 1px solid #fecaca;">
                                                <i class="fa fa-exclamation-triangle"></i> Expired
                                            </span>
                                        @elseif($days_until_expiry !== null)
                                            <span style="background: {{ $days_until_expiry <= 30 ? '#fef3c7' : '#ecfdf5' }}; color: {{ $days_until_expiry <= 30 ? '#92400e' : '#065f46' }}; padding: 4px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; border: 1px solid {{ $days_until_expiry <= 30 ? '#fde68a' : '#d1fae5' }};">
                                                <i class="fa fa-{{ $days_until_expiry <= 30 ? 'exclamation-circle' : 'check-circle' }}"></i> 
                                                Expires in {{ $days_until_expiry }} days
                                            </span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endif

                        @if($license_details && isset($license_details->updated_at))
                            <div class="info-item-modern">
                                <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 10px;">
                                    <div style="width: 32px; height: 32px; background: #ecfeff; border-radius: 8px; display: flex; align-items: center; justify-content: center;">
                                        <i class="fa fa-sync-alt" style="color: #06b6d4; font-size: 14px;"></i>
                                    </div>
                                    <label style="font-weight: 600; color: #6b7280; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; margin: 0;">
                                        Last Updated
                                    </label>
                                </div>
                                <div style="font-size: 15px; color: #111827; padding-left: 44px;">
                                    <i class="fa fa-clock" style="color: #9ca3af; margin-right: 6px; font-size: 12px;"></i>
                                    {{ \Carbon\Carbon::parse($license_details->updated_at)->format('M d, Y h:i A') }}
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        @endif

        <!-- Reports Section -->
        <div class="col-md-12">
            <div class="box box-solid">
                <div class="box-header with-border">
                    <h3 class="box-title">@lang('accounting-reports::lang.reports')</h3>
                </div>
                <div class="box-body">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="small-box bg-aqua">
                                <div class="inner">
                                    <h3>Trial Balance</h3>
                                    <p>Periodic Trial Balance Report</p>
                                </div>
                                <a href="{{ route('accounting-reports.trial-balance.index') }}" class="small-box-footer">
                                    View Report <i class="fa fa-arrow-circle-right"></i>
                                </a>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="small-box bg-green">
                                <div class="inner">
                                    <h3>Balance Sheet</h3>
                                    <p>Assets, Liabilities & Equity</p>
                                </div>
                                <a href="{{ route('accounting-reports.balance-sheet.index') }}" class="small-box-footer">
                                    View Report <i class="fa fa-arrow-circle-right"></i>
                                </a>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="small-box bg-yellow">
                                <div class="inner">
                                    <h3>Profit & Loss</h3>
                                    <p>Income Statement</p>
                                </div>
                                <a href="{{ route('accounting-reports.profit-loss.index') }}" class="small-box-footer">
                                    View Report <i class="fa fa-arrow-circle-right"></i>
                                </a>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="small-box bg-red">
                                <div class="inner">
                                    <h3>Cash Flow</h3>
                                    <p>Cash Flow Statement</p>
                                </div>
                                <a href="{{ route('accounting-reports.cash-flow.index') }}" class="small-box-footer">
                                    View Report <i class="fa fa-arrow-circle-right"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="small-box bg-purple">
                                <div class="inner">
                                    <h3>Receivables</h3>
                                    <p>AR Aging & Statements</p>
                                </div>
                                <a href="{{ route('accounting-reports.receivables.index') }}" class="small-box-footer">
                                    View Report <i class="fa fa-arrow-circle-right"></i>
                                </a>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="small-box bg-maroon">
                                <div class="inner">
                                    <h3>Payables</h3>
                                    <p>AP Aging & Statements</p>
                                </div>
                                <a href="{{ route('accounting-reports.payables.index') }}" class="small-box-footer">
                                    View Report <i class="fa fa-arrow-circle-right"></i>
                                </a>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="small-box bg-teal">
                                <div class="inner">
                                    <h3>Day Book</h3>
                                    <p>Chronological Vouchers</p>
                                </div>
                                <a href="{{ route('accounting-reports.day-book.index') }}" class="small-box-footer">
                                    View Report <i class="fa fa-arrow-circle-right"></i>
                                </a>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="small-box bg-olive">
                                <div class="inner">
                                    <h3>Ratio Analysis</h3>
                                    <p>Financial Ratios</p>
                                </div>
                                <a href="{{ route('accounting-reports.ratio-analysis.index') }}" class="small-box-footer">
                                    View Report <i class="fa fa-arrow-circle-right"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<style>
/* Modern Card Hover Effects */
.info-item-modern {
    transition: all 0.2s ease;
}

.info-item-modern:hover {
    background: #f9fafb;
    border-radius: 12px;
    padding: 20px !important;
    margin-left: -20px;
    margin-right: -20px;
}

/* Button Hover Effects */
button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}

/* Link Hover Effects */
a:hover {
    color: #764ba2 !important;
    text-decoration: underline !important;
}

/* Copy Button Hover */
.btn:hover {
    background: #e5e7eb !important;
    border-color: #d1d5db !important;
}

/* Card Shadow on Hover */
div[style*="background: white"][style*="border-radius: 16px"]:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.12) !important;
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

/* Smooth Transitions */
* {
    transition: all 0.2s ease;
}

/* Responsive Design */
@media (max-width: 768px) {
    .content-header h1 {
        font-size: 24px !important;
    }
    
    .content-header p {
        font-size: 13px !important;
        margin-left: 0 !important;
    }
    
    .info-item-modern {
        padding-bottom: 20px !important;
        margin-bottom: 20px !important;
    }
}
</style>
@endsection

@section('javascript')
<script>
    // Copy to clipboard function
    function copyToClipboard(text) {
        var textarea = document.createElement('textarea');
        textarea.value = text;
        textarea.style.position = 'fixed';
        textarea.style.opacity = '0';
        document.body.appendChild(textarea);
        textarea.select();
        try {
            document.execCommand('copy');
            toastr.success('Copied to clipboard!', '', {
                timeOut: 2000,
                progressBar: true
            });
        } catch (err) {
            toastr.error('Failed to copy to clipboard');
        }
        document.body.removeChild(textarea);
    }
</script>
@endsection