


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    {{-- <title>Aphrodailymart - Premium Grocery Shopping</title> --}}
    <title>@yield('title') - Aphrodailymart Premium Grocery Shopping</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    {{-- <script src="https://js.paystack.co/v1/inline.js"></script> --}}
    <!-- PayPal -->
    <!-- <script src="https://www.paypal.com/sdk/js?client-id="></script> -->
    {{-- <script src="https://www.paypal.com/sdk/js?client-id=ASQ_M_AnItMd3yy1w8wR2ozOu76kvE2WWUO-0bUQo2A8cnEEPtW1Mp8PsxqffWwDk_3rKJfbg17Fqm1k&currency=USD"></script> --}}
    <!-- Stripe -->
    {{-- <script src="https://js.stripe.com/v3/"></script> --}}
    <!-- RazorPay -->
    {{-- <script type="text/javascript" src="https://jstest.authorize.net/v1/Accept.js"></script> --}}
    {{-- <script type="text/javascript" src="https://js.authorize.net/v1/Accept.js"></script> --}}
    <script src="sweetalert.min.js"></script>
    <!-- Add this in the head section -->
    <link href="{{ asset('css/shipping.css') }}" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="{{ asset('css/style.css') }}" rel="stylesheet">
    @yield('styles')
</head>
<body>
    <!-- Header -->
    @section('header')
        @include('partials.header')
    @show
    {{-- @include('partials.navigation') --}}

    <!-- Main Content -->
    <main>
        @if (session('success'))
        <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative" role="alert">
            {{ session('success') }}
            <button type="button" class="absolute top-0 right-0 mt-2 mr-2 text-green-700 hover:text-green-900" data-dismiss="alert" aria-label="Close">&times;</button>
        </div>
    @endif
        @yield('content')
    </main>

    <!-- Footer -->
    @section('footer')
        @include('partials.footer')
    @show

    <!-- Scripts -->
    {{-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> --}}
    {{-- <script src="{{ asset('js/app.js') }}"></script>  --}}
    <!-- Before closing body tag -->
    <script src="{{ asset('js/cart.js') }}"></script>
    @yield('scripts') 
   <script>
    // Replace the existing addToCart function with this
    window.addToCart = function(event) {
    if (event) {
        event.preventDefault();
    }
    const form = event instanceof Event ? event.target : event;
    const submitBtn = form.querySelector('button[type="submit"]');
    
    submitBtn.disabled = true;
    
    fetch(form.action, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            'Accept': 'application/json'
        },
        body: new FormData(form)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            updateCartCounters(data.cartCount);
            showToast(data.message || 'Product added to cart successfully!');
        } else {
            showToast(data.message || 'Failed to add item to cart', 'error');
        }
    })
    .catch(error => {
        showToast('Failed to add item to cart', 'error');
        console.error('Error:', error);
    })
    .finally(() => {
        submitBtn.disabled = false;
    });
};

// Update cart counters function
function updateCartCounters(count) {
    document.querySelectorAll('[data-cart-count]').forEach(counter => {
        counter.textContent = count;
    });
}

// Add this new showToast function
window.showToast = function(message, type = 'success') {
    const toast = document.createElement('div');
    toast.className = 'toast-notification';
    
    // Set background color based on message type
    const bgColor = message.toLowerCase().includes('remove') ? '#dc3545' : 
                   message.toLowerCase().includes('update') ? '#0d6efd' : 
                   '#4CAF50';
    
    toast.style.cssText = `
        position: fixed;
        top: 20px;
        right: 20px;
        background: ${bgColor};
        color: white;
        padding: 16px 24px;
        border-radius: 10px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
        z-index: 99999;
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 15px;
        font-weight: 500;
        min-width: 280px;
        transform: translateX(120%);
        transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    `;

    // Set icon based on message type
    const icon = message.toLowerCase().includes('remove') ? 'trash-alt' : 
                message.toLowerCase().includes('update') ? 'sync-alt' : 
                'check-circle';
    
    toast.innerHTML = `
        <i class="fas fa-${icon}" style="font-size: 20px;"></i>
        <span style="flex: 1;">${message}</span>
        <button onclick="this.parentElement.remove()" style="
            background: transparent;
            border: none;
            color: white;
            opacity: 0.8;
            cursor: pointer;
            padding: 4px;
            margin: -4px;
            font-size: 20px;
            line-height: 1;
        ">×</button>
    `;

    document.body.appendChild(toast);

    // Rest of the animation code remains the same
    requestAnimationFrame(() => {
        toast.style.transform = 'translateX(0)';
    });

    const timeout = setTimeout(() => {
        toast.style.transform = 'translateX(120%)';
        setTimeout(() => toast.remove(), 500);
    }, 3000);

    toast.addEventListener('mouseenter', () => clearTimeout(timeout));
    toast.addEventListener('mouseleave', () => {
        setTimeout(() => {
            toast.style.transform = 'translateX(120%)';
            setTimeout(() => toast.remove(), 500);
        }, 1000);
    });
};
   </script>
</body>
</html>