@extends('layouts.app')

@section('title', 'Contact Us - CakeShop')

@section('head')
    <style>
        .contact-hero {
            background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 50%, #45b7d1 100%);
            color: white;
            padding: 120px 0;
            position: relative;
            overflow: hidden;
        }

        .contact-hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" fill="white" opacity="0.1"><path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z"/></svg>');
            background-size: cover;
            background-position: bottom;
        }

        .hero-content {
            position: relative;
            z-index: 2;
        }

        .contact-card {
            background: white;
            border-radius: 25px;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.08);
            padding: 50px;
            margin-top: -100px;
            position: relative;
            z-index: 3;
            transition: all 0.4s ease;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .contact-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 35px 70px rgba(0, 0, 0, 0.12);
        }

        .contact-info-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 20px;
            padding: 35px;
            margin-bottom: 25px;
            text-align: center;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .contact-info-card::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
            transform: scale(0);
            transition: transform 0.5s ease;
        }

        .contact-info-card:hover::before {
            transform: scale(1);
        }

        .contact-info-card:hover {
            transform: translateY(-5px) scale(1.02);
            box-shadow: 0 20px 40px rgba(102, 126, 234, 0.3);
        }

        .contact-info-icon {
            width: 70px;
            height: 70px;
            background: rgba(255, 255, 255, 0.15);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 25px;
            font-size: 28px;
            transition: all 0.3s ease;
            position: relative;
            z-index: 1;
        }

        .contact-info-card:hover .contact-info-icon {
            background: rgba(255, 255, 255, 0.25);
            transform: scale(1.1);
        }

        .form-floating > .form-control {
            border: 2px solid #e9ecef;
            border-radius: 15px;
            padding: 25px 15px;
            transition: all 0.3s ease;
            font-size: 16px;
        }

        .form-floating > .form-control:focus {
            border-color: #ff6b6b;
            box-shadow: 0 0 0 0.2rem rgba(255, 107, 107, 0.25);
            transform: translateY(-2px);
        }

        .form-floating > label {
            color: #6c757d;
            font-weight: 500;
            padding-left: 15px;
        }

        .btn-contact {
            background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 100%);
            border: none;
            border-radius: 15px;
            padding: 18px 45px;
            font-weight: 600;
            color: white;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .btn-contact:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 35px rgba(255, 107, 107, 0.4);
            color: white;
        }

        .btn-contact::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transition: left 0.6s;
        }

        .btn-contact:hover::before {
            left: 100%;
        }

        .map-container {
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
            height: 450px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 18px;
            position: relative;
        }

        .map-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="white" opacity="0.05"><circle cx="20" cy="20" r="2"/><circle cx="80" cy="20" r="2"/><circle cx="50" cy="50" r="2"/><circle cx="20" cy="80" r="2"/><circle cx="80" cy="80" r="2"/></svg>');
            background-size: 50px 50px;
        }

        .section-title {
            font-family: 'Playfair Display', serif;
            font-weight: 700;
            color: #2c3e50;
            margin-bottom: 30px;
            position: relative;
            font-size: 2.5rem;
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 100%);
            border-radius: 2px;
        }

        .contact-feature {
            text-align: center;
            padding: 30px;
            margin-bottom: 30px;
            transition: all 0.3s ease;
        }

        .contact-feature:hover {
            transform: translateY(-5px);
        }

        .contact-feature-icon {
            width: 90px;
            height: 90px;
            background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 100%);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 25px;
            font-size: 35px;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .contact-feature-icon::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: all 0.3s ease;
        }

        .contact-feature:hover .contact-feature-icon::before {
            width: 100%;
            height: 100%;
        }

        .contact-feature:hover .contact-feature-icon {
            transform: scale(1.15) rotate(5deg);
        }

        .floating-shapes {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            pointer-events: none;
        }

        .floating-shape {
            position: absolute;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            animation: float 8s ease-in-out infinite;
        }

        .floating-shape:nth-child(1) {
            width: 100px;
            height: 100px;
            top: 15%;
            left: 10%;
            animation-delay: 0s;
        }

        .floating-shape:nth-child(2) {
            width: 80px;
            height: 80px;
            top: 60%;
            right: 15%;
            animation-delay: 2s;
        }

        .floating-shape:nth-child(3) {
            width: 60px;
            height: 60px;
            bottom: 25%;
            left: 25%;
            animation-delay: 4s;
        }

        .floating-shape:nth-child(4) {
            width: 40px;
            height: 40px;
            top: 40%;
            right: 40%;
            animation-delay: 6s;
        }

        @keyframes float {
            0%, 100% {
                transform: translateY(0px) rotate(0deg);
            }
            25% {
                transform: translateY(-20px) rotate(90deg);
            }
            50% {
                transform: translateY(-40px) rotate(180deg);
            }
            75% {
                transform: translateY(-20px) rotate(270deg);
            }
        }

        .contact-stats {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 80px 0;
            margin: 100px 0;
            position: relative;
            overflow: hidden;
        }

        .contact-stats::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" fill="white" opacity="0.05"><path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z"/></svg>');
            background-size: cover;
        }

        .stat-item {
            text-align: center;
            padding: 25px;
            position: relative;
            z-index: 1;
        }

        .stat-number {
            font-size: 3.5rem;
            font-weight: 700;
            margin-bottom: 15px;
            display: block;
            background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .stat-label {
            font-size: 1.2rem;
            opacity: 0.9;
            font-weight: 500;
        }

        .social-btn {
            width: 70px;
            height: 70px;
            border: 2px solid;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .social-btn::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: all 0.3s ease;
        }

        .social-btn:hover::before {
            width: 100%;
            height: 100%;
        }

        .social-btn:hover {
            transform: translateY(-5px);
            color: white !important;
        }

        .social-btn.facebook:hover::before {
            background: #3b5998;
        }

        .social-btn.instagram:hover::before {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }

        .social-btn.whatsapp:hover::before {
            background: #25d366;
        }

        .social-btn.twitter:hover::before {
            background: #1da1f2;
        }

        .hero-animation {
            animation: fadeInUp 1s ease-out;
        }

        .contact-info-card {
            animation: slideInLeft 0.8s ease-out;
        }

        .contact-info-card:nth-child(2) {
            animation-delay: 0.2s;
        }

        .contact-info-card:nth-child(3) {
            animation-delay: 0.4s;
        }

        .contact-info-card:nth-child(4) {
            animation-delay: 0.6s;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes slideInLeft {
            from {
                opacity: 0;
                transform: translateX(-30px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @media (max-width: 768px) {
            .contact-hero {
                padding: 80px 0;
            }

            .contact-card {
                padding: 30px 20px;
                margin-top: -60px;
            }

            .contact-info-card {
                padding: 25px;
            }

            .map-container {
                height: 350px;
            }

            .section-title {
                font-size: 2rem;
            }

            .stat-number {
                font-size: 2.5rem;
            }

            .contact-feature-icon {
                width: 70px;
                height: 70px;
                font-size: 28px;
            }
        }
    </style>
@endsection

@section('content')
    <!-- Hero Section -->
    <section class="contact-hero">
        <div class="floating-shapes">
            <div class="floating-shape"></div>
            <div class="floating-shape"></div>
            <div class="floating-shape"></div>
            <div class="floating-shape"></div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-12 text-center hero-content hero-animation">
                    <h1 class="display-3 fw-bold mb-4">Hubungi Kami</h1>
                    <p class="lead mb-0 fs-4">Kami siap membantu Anda dengan layanan terbaik untuk kebutuhan kue dan dessert impian Anda</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Form & Info -->
    <section class="py-5">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-6">
                    <div class="contact-info-card">
                        <div class="contact-info-icon">
                            <i class="fas fa-map-marker-alt"></i>
                        </div>
                        <h5 class="mb-3 fw-bold">Alamat Toko</h5>
                        <p class="mb-0">Jl. Prumpung Sawah RT009/004<br>Kelurahan Cipinang Besar Utara<br>Jakarta Timur, 13410</p>
                    </div>

                    <div class="contact-info-card">
                        <div class="contact-info-icon">
                            <i class="fas fa-phone"></i>
                        </div>
                        <h5 class="mb-3 fw-bold">Telepon</h5>
                        <p class="mb-2">+62 856 9362 6761</p>
                        <p class="mb-0">+62 857 7601 3242</p>
                    </div>

                    <div class="contact-info-card">
                        <div class="contact-info-icon">
                            <i class="fas fa-envelope"></i>
                        </div>
                        <h5 class="mb-3 fw-bold">Email</h5>
                        <p class="mb-2">Azelyncakeshop@gamil.com</p>
                    </div>

                    <div class="contact-info-card">
                        <div class="contact-info-icon">
                            <i class="fas fa-clock"></i>
                        </div>
                        <h5 class="mb-3 fw-bold">Jam Buka</h5>
                        <p class="mb-2">Senin - Jumat: 08:00 - 21:00</p>
                        <p class="mb-2">Sabtu: 08:00 - 22:00</p>
                        <p class="mb-0">Minggu: 09:00 - 20:00</p>
                    </div>
                </div>


            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section class="py-5 bg-light">
        <div class="container">
            <h2 class="section-title text-center mb-5">Mengapa Memilih CakeShop?</h2>
            <div class="row">
                <div class="col-md-4">
                    <div class="contact-feature">
                        <div class="contact-feature-icon">
                            <i class="fas fa-shipping-fast"></i>
                        </div>
                        <h5 class="mb-3 fw-bold">Pengiriman Cepat</h5>
                        <p class="text-muted">Kami menjamin pengiriman cepat dan aman ke seluruh Jakarta dalam 24 jam dengan sistem tracking real-time</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="contact-feature">
                        <div class="contact-feature-icon">
                            <i class="fas fa-award"></i>
                        </div>
                        <h5 class="mb-3 fw-bold">Kualitas Terbaik</h5>
                        <p class="text-muted">Menggunakan bahan-bahan premium dan resep rahasia keluarga yang turun temurun selama puluhan tahun</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="contact-feature">
                        <div class="contact-feature-icon">
                            <i class="fas fa-headset"></i>
                        </div>
                        <h5 class="mb-3 fw-bold">Layanan 24/7</h5>
                        <p class="text-muted">Tim customer service profesional kami siap membantu Anda kapan saja via WhatsApp, email, atau telepon</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Statistics Section -->
    <section class="contact-stats">
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <div class="stat-item">
                        <span class="stat-number">2500+</span>
                        <span class="stat-label">Pelanggan Puas</span>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="stat-item">
                        <span class="stat-number">75+</span>
                        <span class="stat-label">Varian Kue</span>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="stat-item">
                        <span class="stat-number">8+</span>
                        <span class="stat-label">Tahun Berpengalaman</span>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="stat-item">
                        <span class="stat-number">24/7</span>
                        <span class="stat-label">Layanan Pelanggan</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Map Section -->
    <section class="py-5">
        <div class="container">
            <h2 class="section-title text-center mb-5">Lokasi Toko</h2>
            <div class="row">
                <div class="col-12">
                    <div class="map-container">
                        <div class="text-center">
                            <i class="fas fa-map-marker-alt fa-4x mb-4"></i>
                            <h4 class="mb-3">Temukan Kami di Sini</h4>
                            <p class="mb-0 fs-5">Jl. Mawar No. 123, Kelurahan Sukajaya<br>Jakarta Selatan, 12345</p>
                            <small class="opacity-75">Mudah diakses dengan transportasi umum</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Social Media Section -->
    <section class="py-5 bg-light">
        <div class="container">
            <h2 class="section-title text-center mb-5">Ikuti Kami</h2>
            <div class="row justify-content-center">
                <div class="col-md-8 text-center">
                    <p class="text-muted mb-4 fs-5">Dapatkan update terbaru tentang produk dan promo menarik dari CakeShop. Jangan lewatkan penawaran spesial!</p>
                    <div class="d-flex justify-content-center gap-4">
                        <a href="#" class="btn social-btn facebook rounded-circle d-flex align-items-center justify-content-center">
                            <i class="fab fa-facebook-f fs-4"></i>
                        </a>
                        <a href="#" class="btn social-btn instagram rounded-circle d-flex align-items-center justify-content-center">
                            <i class="fab fa-instagram fs-4"></i>
                        </a>
                        <a href="#" class="btn social-btn whatsapp rounded-circle d-flex align-items-center justify-content-center">
                            <i class="fab fa-whatsapp fs-4"></i>
                        </a>
                        <a href="#" class="btn social-btn twitter rounded-circle d-flex align-items-center justify-content-center">
                            <i class="fab fa-twitter fs-4"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('script')
    <script>
        // Enhanced animations and interactions
        $(document).ready(function() {
            // Smooth scrolling for anchor links
            $('a[href^="#"]').on('click', function(event) {
                var target = $(this.getAttribute('href'));
                if (target.length) {
                    event.preventDefault();
                    $('html, body').stop().animate({
                        scrollTop: target.offset().top - 80
                    }, 1000);
                }
            });

            // Enhanced form validation with visual feedback
            $('.form-control').on('focus', function() {
                $(this).parent().addClass('focused');
            }).on('blur', function() {
                if (!$(this).val()) {
                    $(this).parent().removeClass('focused');
                }
            });

            // Parallax effect for floating shapes
            $(window).on('scroll', function() {
                const scrolled = $(window).scrollTop();
                const parallax = scrolled * 0.5;

                $('.floating-shape').each(function(index) {
                    const speed = (index + 1) * 0.3;
                    $(this).css('transform', `translateY(${parallax * speed}px)`);
                });
            });

            // Counter animation for statistics
            function animateCounter() {
                $('.stat-number').each(function() {
                    const $this = $(this);
                    const target = parseInt($this.text().replace(/[^0-9]/g, ''));

                    if (target) {
                        $this.prop('Counter', 0).animate({
                            Counter: target
                        }, {
                            duration: 2000,
                            easing: 'swing',
                            step: function(now) {
                                const display = Math.ceil(now);
                                if ($this.text().includes('+')) {
                                    $this.text(display + '+');
                                } else if ($this.text().includes('/')) {
                                    $this.text('24/7');
                                } else {
                                    $this.text(display);
                                }
                            }
                        });
                    }
                });
            }

            // Trigger counter animation when section is visible
            $(window).on('scroll', function() {
                const statsSection = $('.contact-stats');
                const windowHeight = $(window).height();
                const scrollTop = $(window).scrollTop();
                const statsTop = statsSection.offset().top;

                if (scrollTop + windowHeight > statsTop + 100 && !statsSection.hasClass('animated')) {
                    statsSection.addClass('animated');
                    animateCounter();
                }
            });

            // Enhanced hover effects for contact info cards
            $('.contact-info-card').hover(
                function() {
                    $(this).css({
                        'transform': 'translateY(-8px) scale(1.03)',
                        'transition': 'all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)'
                    });
                },
                function() {
                    $(this).css({
                        'transform': 'translateY(0) scale(1)',
                        'transition': 'all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)'
                    });
                }
            );

            // Add ripple effect to buttons
            $('.btn-contact, .social-btn').on('click', function(e) {
                const button = $(this);
                const ripple = $('<span class="ripple"></span>');

                const rect = this.getBoundingClientRect();
                const size = Math.max(rect.width, rect.height);
                const x = e.clientX - rect.left - size / 2;
                const y = e.clientY - rect.top - size / 2;

                ripple.css({
                    width: size,
                    height: size,
                    left: x,
                    top: y,
                    position: 'absolute',
                    background: 'rgba(255, 255, 255, 0.5)',
                    borderRadius: '50%',
                    transform: 'scale(0)',
                    animation: 'ripple 0.6s linear',
                    pointerEvents: 'none'
                });

                button.css('position', 'relative').css('overflow', 'hidden');
                button.append(ripple);

                setTimeout(() => {
                    ripple.remove();
                }, 600);
            });

            // Add CSS for ripple animation
            $('<style>').prop('type', 'text/css').html(`
                @keyframes ripple {
                    to {
                        transform: scale(4);
                        opacity: 0;
                    }
                }
            `).appendTo('head');

            // Intersection Observer for animations
            const observerOptions = {
                threshold: 0.1,
                rootMargin: '0px 0px -50px 0px'
            };

            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('animate-in');
                    }
                });
            }, observerOptions);

            // Observe elements for animation
            $('.contact-feature, .contact-info-card').each(function() {
                observer.observe(this);
            });

            // Enhanced form interactions
            $('.form-control').on('focus', function() {
                $(this).parent().addClass('focused');
            }).on('blur', function() {
                if (!$(this).val()) {
                    $(this).parent().removeClass('focused');
                }
            });

            // Social media button enhanced effects
            $('.social-btn').each(function() {
                const $btn = $(this);
                $btn.on('mouseenter', function() {
                    $btn.find('i').css('transform', 'scale(1.2) rotate(360deg)');
                }).on('mouseleave', function() {
                    $btn.find('i').css('transform', 'scale(1) rotate(0deg)');
                });
            });

            // Add floating animation to hero elements
            $('.hero-content h1').css('animation', 'fadeInUp 1s ease-out');
            $('.hero-content p').css('animation', 'fadeInUp 1s ease-out 0.3s both');

            // Add stagger animation to contact info cards
            $('.contact-info-card').each(function(index) {
                $(this).css({
                    'animation': `slideInLeft 0.8s ease-out ${index * 0.2}s both`,
                    'opacity': '0'
                });
            });

            // Enhanced scroll-triggered animations
            $(window).on('scroll', function() {
                $('.contact-feature').each(function() {
                    const elementTop = $(this).offset().top;
                    const elementBottom = elementTop + $(this).outerHeight();
                    const viewportTop = $(window).scrollTop();
                    const viewportBottom = viewportTop + $(window).height();

                    if (elementBottom > viewportTop && elementTop < viewportBottom) {
                        $(this).addClass('animate-in');
                    }
                });
            });

            // Add CSS for enhanced animations
            $('<style>').prop('type', 'text/css').html(`
                .animate-in {
                    animation: slideInUp 0.8s ease-out forwards;
                }

                @keyframes slideInUp {
                    from {
                        opacity: 0;
                        transform: translateY(30px);
                    }
                    to {
                        opacity: 1;
                        transform: translateY(0);
                    }
                }

                .focused {
                    transform: translateY(-2px);
                    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
                }

                .social-btn i {
                    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
                }

                .contact-feature {
                    opacity: 0;
                    transform: translateY(30px);
                    transition: all 0.6s ease-out;
                }

                .contact-feature.animate-in {
                    opacity: 1;
                    transform: translateY(0);
                }
            `).appendTo('head');

            // Initialize AOS-like animations
            setTimeout(() => {
                $('.contact-info-card').css('opacity', '1');
            }, 100);
        });
    </script>
@endsection