@extends('layouts.app')

@section('content')
<style>
    * {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }

    :root {
        --primary: #3B82F6;
        --secondary: #8B5CF6;
        --success: #10B981;
        --warning: #F59E0B;
        --danger: #EF4444;
    }

    body {
        background: linear-gradient(135deg, #f0fdf4 0%, #f0f9ff 100%);
    }

    .navbar {
        background: white;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        padding: 1rem 0;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .container-stock {
        max-width: 1400px;
        margin: 0 auto;
        padding: 2rem 1rem;
    }

    .navbar-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .navbar-brand {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .navbar-logo {
        background: linear-gradient(135deg, var(--success) 0%, #059669 100%);
        color: white;
        width: 50px;
        height: 50px;
        border-radius: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    }

    .navbar-title {
        font-size: 1.5rem;
        font-weight: 700;
        color: #111827;
    }

    .navbar-subtitle {
        font-size: 0.85rem;
        color: #6b7280;
    }

    .btn {
        padding: 0.625rem 1rem;
        border: none;
        border-radius: 0.5rem;
        cursor: pointer;
        font-weight: 500;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        text-decoration: none;
    }

    .btn-primary {
        background-color: var(--primary);
        color: white;
    }

    .btn-primary:hover {
        background-color: #2563eb;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
    }

    .btn-success {
        background-color: var(--success);
        color: white;
    }

    .btn-success:hover {
        background-color: #059669;
    }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.5rem;
        margin-bottom: 2rem;
    }

    .stat-card {
        background: white;
        border-radius: 1rem;
        padding: 1.5rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        border: 1px solid #e5e7eb;
        transition: all 0.3s ease;
    }

    .stat-card:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
    }

    .stat-value {
        font-size: 2.5rem;
        font-weight: 700;
        margin: 0.5rem 0;
    }

    .stat-label {
        font-size: 0.9rem;
        color: #6b7280;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .whatsapp-card {
        background: linear-gradient(135deg, #dcfce7 0%, #d1fae5 100%);
        border: 2px solid #10b981;
        border-radius: 1rem;
        padding: 1.5rem;
        margin-bottom: 2rem;
        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
    }

    .whatsapp-status {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        border-radius: 9999px;
        font-weight: 600;
        font-size: 0.9rem;
    }

    .whatsapp-enabled {
        background: #dcfce7;
        color: #166534;
    }

    .whatsapp-disabled {
        background: #fee2e2;
        color: #991b1b;
    }

    .btn-whatsapp {
        background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
        color: white;
        padding: 0.75rem 1.5rem;
        border: none;
        border-radius: 0.5rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
    }

    .btn-whatsapp:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(37, 211, 102, 0.4);
    }

    .btn-whatsapp-small {
        background: #dcfce7;
        color: #25D366;
        padding: 0.5rem;
        border: none;
        border-radius: 0.5rem;
        cursor: pointer;
        font-size: 1rem;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .btn-whatsapp-small:hover {
        background: #bbf7d0;
        transform: scale(1.1);
    }

    .phone-input-group {
        position: relative;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .phone-input {
        flex: 1;
        padding: 0.75rem 1rem 0.75rem 3rem;
        border: 2px solid #10b981;
        border-radius: 0.5rem;
        font-size: 1rem;
        font-weight: 600;
        transition: all 0.3s ease;
    }

    .phone-input:focus {
        outline: none;
        border-color: #059669;
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
    }

    .phone-prefix {
        position: absolute;
        left: 1rem;
        font-weight: 700;
        color: #059669;
    }

    .whatsapp-info-box {
        background: white;
        border-radius: 0.75rem;
        padding: 1rem;
        margin-top: 1rem;
        border-left: 4px solid #10b981;
    }

    .alert-section {
        background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
        border-left: 4px solid var(--danger);
        border-radius: 1rem;
        padding: 1.5rem;
        margin-bottom: 2rem;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .alert-badge {
        display: inline-block;
        animation: pulse 2s infinite;
    }

    @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.6; }
    }

    .form-card {
        background: white;
        border-radius: 1rem;
        padding: 2rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        border: 1px solid #e5e7eb;
        margin-bottom: 2rem;
    }

    .form-label {
        display: block;
        font-weight: 600;
        color: #374151;
        margin-bottom: 0.5rem;
        font-size: 0.95rem;
    }

    .form-input,
    .form-select,
    .form-textarea {
        width: 100%;
        padding: 0.75rem 1rem;
        border: 2px solid #d1d5db;
        border-radius: 0.5rem;
        font-size: 0.95rem;
        transition: border-color 0.3s ease;
    }

    .form-input:focus,
    .form-select:focus,
    .form-textarea:focus {
        outline: none;
        border-color: var(--success);
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
    }

    .form-group {
        margin-bottom: 1.5rem;
    }

    .table-card {
        background: white;
        border-radius: 1rem;
        padding: 1.5rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        border: 1px solid #e5e7eb;
        overflow-x: auto;
    }

    table {
        width: 100%;
        border-collapse: collapse;
    }

    th {
        background: #f9fafb;
        padding: 1rem;
        text-align: left;
        font-weight: 600;
        color: #374151;
        border-bottom: 2px solid #e5e7eb;
        font-size: 0.9rem;
    }

    td {
        padding: 1rem;
        border-bottom: 1px solid #e5e7eb;
        color: #111827;
    }

    tr:hover {
        background: #f9fafb;
    }

    .badge {
        display: inline-block;
        padding: 0.25rem 0.75rem;
        border-radius: 9999px;
        font-size: 0.85rem;
        font-weight: 600;
    }

    .badge-green {
        background: #dcfce7;
        color: #166534;
    }

    .badge-orange {
        background: #fed7aa;
        color: #92400e;
    }

    .badge-red {
        background: #fee2e2;
        color: #991b1b;
    }

    .modal-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(5px);
        z-index: 50;
        align-items: center;
        justify-content: center;
        padding: 1rem;
    }

    .modal-overlay.active {
        display: flex;
    }

    .modal-content {
        background: white;
        border-radius: 1rem;
        box-shadow: 0 20px 25px rgba(0, 0, 0, 0.15);
        overflow: hidden;
        animation: slideIn 0.3s ease-out;
        max-width: 500px;
        width: 100%;
    }

    .modal-header {
        padding: 1.5rem;
        background: linear-gradient(to right, var(--success), #059669);
        color: white;
    }

    .modal-header h2 {
        margin: 0;
        font-size: 1.5rem;
        font-weight: 700;
    }

    .modal-body {
        padding: 1.5rem;
    }

    .modal-footer {
        display: flex;
        gap: 1rem;
        justify-content: flex-end;
        padding: 1rem;
        border-top: 1px solid #e5e7eb;
    }

    @keyframes slideIn {
        from {
            opacity: 0;
            transform: scale(0.95) translateY(10px);
        }
        to {
            opacity: 1;
            transform: scale(1) translateY(0);
        }
    }

    .progress-bar {
        width: 100%;
        height: 12px;
        background: #e5e7eb;
        border-radius: 9999px;
        overflow: hidden;
        margin: 0.5rem 0;
    }

    .progress-fill {
        height: 100%;
        border-radius: 9999px;
        transition: all 0.3s ease;
    }

    /* ===== TABLET (1024px - 768px) ===== */
    @media (max-width: 1024px) {
        .container-stock {
            padding: 1.25rem 0.75rem;
        }

        .stats-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
        }

        .stat-card {
            padding: 1.25rem;
        }

        .stat-value {
            font-size: 2rem;
        }

        .form-card {
            padding: 1.5rem;
        }

        th, td {
            padding: 0.75rem;
        }
    }

    /* ===== MOBILE (768px - 480px) ===== */
    @media (max-width: 768px) {
        .container-stock {
            padding: 1rem 0.5rem;
        }

        .navbar {
            padding: 0.75rem 0;
        }

        .navbar-content {
            gap: 0.75rem;
        }

        .navbar-brand {
            gap: 0.75rem;
        }

        .navbar-logo {
            width: 40px;
            height: 40px;
            font-size: 1.2rem;
        }

        .navbar-title {
            font-size: 1.25rem;
        }

        .navbar-subtitle {
            font-size: 0.75rem;
        }

        .stats-grid {
            grid-template-columns: 1fr;
            gap: 0.75rem;
            margin-bottom: 1.5rem;
        }

        .stat-card {
            padding: 1rem;
        }

        .stat-value {
            font-size: 1.75rem;
        }

        .stat-label {
            font-size: 0.8rem;
        }

        .whatsapp-card {
            padding: 1rem;
            margin-bottom: 1.5rem;
            border-radius: 0.75rem;
        }

        .whatsapp-card h3 {
            font-size: 1.25rem;
        }

        .whatsapp-card form {
            display: grid !important;
            grid-template-columns: 1fr !important;
            gap: 0.75rem !important;
        }

        .whatsapp-card form > div {
            grid-column: auto !important;
        }

        .whatsapp-info-box {
            padding: 0.75rem;
            margin-top: 0.75rem;
            border-radius: 0.5rem;
        }

        .whatsapp-info-box h4 {
            font-size: 0.9rem;
            margin-bottom: 0.5rem;
        }

        .whatsapp-info-box ul {
            font-size: 0.8rem;
            padding-left: 1.25rem;
        }

        .alert-section {
            padding: 1rem;
            margin-bottom: 1.5rem;
            border-radius: 0.75rem;
        }

        .alert-section h3 {
            font-size: 1.1rem;
            margin-bottom: 1rem;
        }

        .alert-section > div {
            grid-template-columns: 1fr !important;
            gap: 0.75rem !important;
        }

        .form-card {
            padding: 1rem;
            margin-bottom: 1.5rem;
            border-radius: 0.75rem;
        }

        .form-card h3 {
            font-size: 1.1rem;
            margin-bottom: 1rem;
        }

        .form-card form {
            grid-template-columns: 1fr !important;
            gap: 1rem !important;
        }

        .form-label {
            font-size: 0.85rem;
            margin-bottom: 0.4rem;
        }

        .form-input,
        .form-select,
        .form-textarea {
            padding: 0.65rem 0.85rem;
            font-size: 0.85rem;
            min-height: 40px;
            border-radius: 0.4rem;
        }

        .form-group {
            margin-bottom: 1rem;
        }

        .table-card {
            padding: 1rem;
            border-radius: 0.75rem;
        }

        .table-card h3 {
            font-size: 1.1rem;
            margin-bottom: 1rem;
        }

        table {
            font-size: 0.8rem;
        }

        th {
            padding: 0.6rem;
            font-size: 0.75rem;
        }

        td {
            padding: 0.6rem;
            font-size: 0.8rem;
        }

        .badge {
            font-size: 0.75rem;
            padding: 0.2rem 0.6rem;
        }

        .modal-content {
            max-width: 95vw;
        }

        .modal-header {
            padding: 1rem;
        }

        .modal-header h2 {
            font-size: 1.25rem;
        }

        .modal-body {
            padding: 1rem;
        }

        .modal-footer {
            gap: 0.5rem;
            padding: 0.75rem;
        }

        .btn-whatsapp {
            padding: 0.6rem 1.2rem;
            font-size: 0.85rem;
            gap: 0.4rem;
        }

        .btn-whatsapp-small {
            padding: 0.4rem;
            font-size: 0.9rem;
        }

        .phone-input {
            padding: 0.65rem 0.85rem 0.65rem 2.75rem;
            font-size: 0.9rem;
            min-height: 40px;
            border-radius: 0.4rem;
        }

        .phone-prefix {
            left: 0.85rem;
            font-size: 0.9rem;
        }

        .btn {
            padding: 0.6rem 0.9rem;
            font-size: 0.8rem;
            gap: 0.4rem;
        }
    }

    /* ===== SMALL MOBILE (480px - 360px) ===== */
    @media (max-width: 480px) {
        .container-stock {
            padding: 0.75rem 0.4rem;
        }

        .navbar {
            padding: 0.6rem 0;
        }

        .navbar-content {
            flex-direction: column;
            gap: 0.6rem;
            align-items: flex-start;
        }

        .navbar-brand {
            gap: 0.6rem;
        }

        .navbar-logo {
            width: 36px;
            height: 36px;
            font-size: 1rem;
        }

        .navbar-title {
            font-size: 1.1rem;
        }

        .navbar-subtitle {
            font-size: 0.7rem;
        }

        .stats-grid {
            gap: 0.6rem;
            margin-bottom: 1.25rem;
        }

        .stat-card {
            padding: 0.85rem;
        }

        .stat-value {
            font-size: 1.5rem;
        }

        .stat-label {
            font-size: 0.75rem;
        }

        .whatsapp-card {
            padding: 0.85rem;
            margin-bottom: 1.25rem;
            border-radius: 0.6rem;
            border: 1px solid #10b981;
        }

        .whatsapp-card h3 {
            font-size: 1.1rem;
        }

        .whatsapp-card p {
            font-size: 0.8rem;
        }

        .form-card {
            padding: 0.85rem;
            margin-bottom: 1.25rem;
        }

        .form-card h3 {
            font-size: 1.05rem;
        }

        .form-label {
            font-size: 0.8rem;
        }

        .form-input,
        .form-select,
        .form-textarea {
            padding: 0.6rem 0.75rem;
            font-size: 0.8rem;
            min-height: 38px;
        }

        .form-group {
            margin-bottom: 0.85rem;
        }

        .table-card {
            padding: 0.85rem;
        }

        .table-card h3 {
            font-size: 1.05rem;
        }

        table {
            font-size: 0.75rem;
        }

        th, td {
            padding: 0.5rem;
        }

        .badge {
            font-size: 0.7rem;
            padding: 0.15rem 0.5rem;
        }

        .modal-header h2 {
            font-size: 1.1rem;
        }

        .btn-whatsapp {
            padding: 0.55rem 1rem;
            font-size: 0.8rem;
        }

        .phone-input {
            padding: 0.6rem 0.75rem 0.6rem 2.6rem;
            font-size: 0.85rem;
        }

        .phone-prefix {
            font-size: 0.85rem;
        }
    }

    /* ===== EXTRA SMALL MOBILE (360px وأقل) ===== */
    @media (max-width: 360px) {
        .container-stock {
            padding: 0.6rem 0.3rem;
        }

        .navbar {
            padding: 0.5rem 0;
        }

        .navbar-logo {
            width: 32px;
            height: 32px;
            font-size: 0.9rem;
        }

        .navbar-title {
            font-size: 1rem;
        }

        .navbar-subtitle {
            font-size: 0.65rem;
        }

        .stats-grid {
            gap: 0.5rem;
        }

        .stat-card {
            padding: 0.75rem;
        }

        .stat-value {
            font-size: 1.3rem;
        }

        .stat-label {
            font-size: 0.7rem;
        }

        .whatsapp-card {
            padding: 0.75rem;
        }

        .form-card {
            padding: 0.75rem;
        }

        .table-card {
            padding: 0.75rem;
        }

        table {
            font-size: 0.7rem;
        }

        th, td {
            padding: 0.4rem;
        }

        .form-input,
        .form-select,
        .form-textarea {
            padding: 0.55rem 0.65rem;
            font-size: 0.75rem;
            min-height: 36px;
        }

        .btn {
            padding: 0.5rem 0.75rem;
            font-size: 0.75rem;
        }

        .btn-whatsapp {
            padding: 0.5rem 0.9rem;
            font-size: 0.75rem;
        }
    }

    /* ===== TABLE RESPONSIVE ===== */
    @media (max-width: 768px) {
        table {
            font-size: 0.75rem;
        }

        .table-card {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        table thead {
            position: sticky;
            top: 0;
            z-index: 5;
        }

        table th {
            white-space: nowrap;
        }
    }

    /* ===== FORM GRID ===== */
    @media (max-width: 768px) {
        .form-card form {
            grid-template-columns: 1fr !important;
        }

        .form-card form > div:last-child {
            grid-column: auto !important;
        }
    }

    /* ===== BUTTON GROUPS ===== */
    @media (max-width: 480px) {
        [style*="display: flex; gap: 1rem"] {
            flex-wrap: wrap;
            gap: 0.5rem !important;
        }
    }
</style>

<!-- Navbar -->
<div class="navbar">
    <div class="container-stock">
        <div class="navbar-content">
            <div class="navbar-brand">
                <div class="navbar-logo">
                    <i class="fas fa-boxes"></i>
                </div>
                <div>
                    <div class="navbar-title">📦 Gestion de Stock</div>
                    <div class="navbar-subtitle">Gérer votre inventaire et stock produits</div>
                </div>
            </div>
            <div style="display: flex; gap: 1rem; flex-wrap: wrap;">
                <div style="text-align: right;">
                    <p style="margin: 0; font-size: 0.85rem; color: #6b7280;">Connecté</p>
                    <p style="margin: 0; font-weight: 700; color: #111827;">{{ Auth::user()->name }}</p>
                </div>
                <a href="{{ route('dashboard') }}" class="btn btn-primary">
                    <i class="fas fa-home"></i> Dashboard
                </a>
                <a href="{{ route('sheet.data') }}" class="btn" style="background: var(--primary); color: white;">
                    <i class="fas fa-table"></i> Données
                </a>
            </div>
        </div>
    </div>
</div>

<!-- Main Content -->
<div class="container-stock">
    
    <!-- Statistics Cards -->
    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-label">
                <i class="fas fa-boxes" style="color: var(--primary);"></i> Total Produits
            </div>
            <div class="stat-value" style="color: var(--primary);">{{ $stats['total_products'] ?? 0 }}</div>
            <div style="font-size: 0.85rem; color: #6b7280;">Dans l'inventaire</div>
        </div>

        <div class="stat-card">
            <div class="stat-label">
                <i class="fas fa-exclamation-triangle" style="color: var(--warning);"></i> Stock Bas
            </div>
            <div class="stat-value" style="color: var(--warning);">{{ $stats['low_stock'] ?? 0 }}</div>
            <div style="font-size: 0.85rem; color: #6b7280;">Attention requise</div>
        </div>

        <div class="stat-card">
            <div class="stat-label">
                <i class="fas fa-times-circle" style="color: var(--danger);"></i> Rupture
            </div>
            <div class="stat-value" style="color: var(--danger);">{{ $stats['out_of_stock'] ?? 0 }}</div>
            <div style="font-size: 0.85rem; color: #6b7280;">Urgent</div>
        </div>

        <div class="stat-card">
            <div class="stat-label">
                <i class="fas fa-coins" style="color: var(--success);"></i> Valeur Stock
            </div>
            <div class="stat-value" style="color: var(--success);">{{ number_format($stats['total_value'] ?? 0, 0) }}</div>
            <div style="font-size: 0.85rem; color: #6b7280;">MAD</div>
        </div>
    </div>

    <!-- WhatsApp Settings Card -->
    <div class="whatsapp-card">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem;">
            <div>
                <h3 style="margin: 0; font-size: 1.5rem; font-weight: 700; color: #166534;">
                    <i class="fab fa-whatsapp" style="font-size: 1.75rem;"></i> Alertes WhatsApp
                </h3>
                <p style="margin: 0.5rem 0 0 0; color: #059669; font-size: 0.9rem;">
                    Recevez des notifications automatiques sur WhatsApp
                </p>
            </div>
            
            @if(Auth::user()->whatsapp_phone && Auth::user()->whatsapp_alerts_enabled)
                <span class="whatsapp-status whatsapp-enabled">
                    <i class="fas fa-check-circle"></i> Activé
                </span>
            @else
                <span class="whatsapp-status whatsapp-disabled">
                    <i class="fas fa-times-circle"></i> Désactivé
                </span>
            @endif
        </div>

        <form id="whatsappSettingsForm" style="display: grid; grid-template-columns: 1fr auto auto; gap: 1rem; align-items: end;">
            @csrf
            
            <div>
                <label class="form-label" style="color: #059669; margin-bottom: 0.5rem;">
                    <i class="fas fa-phone"></i> Numéro WhatsApp
                </label>
                <div class="phone-input-group">
                    <span class="phone-prefix">🇲🇦 +212</span>
                    <input 
                        type="text" 
                        name="whatsapp_phone" 
                        id="whatsappPhone"
                        value="{{ str_replace('212', '', Auth::user()->whatsapp_phone ?? '') }}"
                        placeholder="612345678"
                        class="phone-input"
                        maxlength="9"
                        pattern="[0-9]{9}"
                    >
                </div>
                <p style="font-size: 0.8rem; color: #059669; margin-top: 0.5rem;">
                    <i class="fas fa-info-circle"></i> Format: 0612345678 ou 612345678
                </p>
            </div>

            <div>
                <label class="form-label" style="color: #059669; margin-bottom: 0.5rem;">
                    <i class="fas fa-bell"></i> Activer
                </label>
                <label style="display: flex; align-items: center; cursor: pointer; background: white; padding: 0.75rem 1rem; border-radius: 0.5rem; border: 2px solid #10b981;">
                    <input 
                        type="checkbox" 
                        name="whatsapp_alerts_enabled" 
                        id="whatsappEnabled"
                        {{ Auth::user()->whatsapp_alerts_enabled ? 'checked' : '' }}
                        style="width: 20px; height: 20px; margin-right: 0.5rem; cursor: pointer;"
                    >
                    <span style="font-weight: 600; color: #059669; font-size: 0.9rem;">Actif</span>
                </label>
            </div>

            <div style="display: flex; gap: 0.5rem;">
                <button type="submit" class="btn-whatsapp">
                    <i class="fas fa-save"></i> Enregistrer
                </button>
                <button type="button" onclick="sendTestWhatsApp()" class="btn" style="background: #dbeafe; color: var(--primary); padding: 0.6rem 0.9rem; font-size: 0.85rem;">
                    <i class="fas fa-paper-plane"></i> Test
                </button>
            </div>
        </form>

        @if(Auth::user()->whatsapp_phone && Auth::user()->whatsapp_alerts_enabled)
        <div class="whatsapp-info-box">
            <h4 style="margin: 0 0 0.75rem 0; color: #059669; font-size: 1rem; font-weight: 700;">
                <i class="fas fa-bell"></i> Vous recevrez des alertes pour:
            </h4>
            <ul style="margin: 0; padding-left: 1.5rem; color: #166534; font-size: 0.9rem; line-height: 1.8;">
                <li>📉 <strong>Stock bas</strong> - Quand un produit atteint le seuil minimum</li>
                <li>🚨 <strong>Rupture</strong> - Quand un produit est en rupture de stock (0)</li>
                <li>📦 <strong>Mouvements</strong> - Lors d'ajouts ou retraits importants</li>
            </ul>
        </div>
        @else
        <div class="whatsapp-info-box" style="border-left-color: #f59e0b; background: #fef3c7;">
            <h4 style="margin: 0 0 0.5rem 0; color: #92400e; font-size: 1rem; font-weight: 700;">
                <i class="fas fa-info-circle"></i> Configuration requise
            </h4>
            <p style="margin: 0; color: #92400e; font-size: 0.9rem;">
                Veuillez entrer votre numéro WhatsApp et activer les notifications pour recevoir des alertes automatiques.
            </p>
        </div>
        @endif
    </div>

    <!-- Alerts Section -->
    @if($alerts->where('is_read', false)->count() > 0)
    <div class="alert-section">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem;">
            <h3 style="margin: 0; font-size: 1.5rem; font-weight: 700; color: #991b1b;">
                <i class="fas fa-bell alert-badge"></i> 🚨 Alertes Stock ({{ $alerts->where('is_read', false)->count() }})
            </h3>
            <button onclick="markAllAlertsRead()" style="background: var(--danger); color: white; padding: 0.5rem 1rem; border: none; border-radius: 0.5rem; cursor: pointer; font-weight: 600; transition: all 0.3s ease; font-size: 0.85rem;" onmouseover="this.style.background='#dc2626'" onmouseout="this.style.background='var(--danger)'">
                <i class="fas fa-check-double"></i> Tout lu
            </button>
        </div>

        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem;">
            @foreach($alerts->where('is_read', false)->take(6) as $alert)
            <div style="background: white; padding: 1.25rem; border-radius: 0.75rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); border-left: 4px solid {{ $alert->type === 'out_of_stock' ? 'var(--danger)' : 'var(--warning)' }};">
                <div style="display: flex; gap: 1rem; margin-bottom: 1rem;">
                    @if($alert->type === 'out_of_stock')
                        <div style="background: #fee2e2; color: var(--danger); width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0;">
                            ❌
                        </div>
                    @else
                        <div style="background: #fef3c7; color: var(--warning); width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0;">
                            ⚠️
                        </div>
                    @endif
                    <div>
                        <div style="font-weight: 700; color: #111827; font-size: 1.05rem;">{{ $alert->product->name ?? 'Produit' }}</div>
                        @if($alert->type === 'out_of_stock')
                            <div style="color: #991b1b; font-size: 0.9rem; margin-top: 0.25rem;">❌ Rupture de stock!</div>
                        @else
                            <div style="color: #92400e; font-size: 0.9rem; margin-top: 0.25rem;">⚠️ Stock: <strong>{{ $alert->current_stock }}</strong> {{ $alert->product->unit }}</div>
                        @endif
                        <div style="font-size: 0.8rem; color: #6b7280; margin-top: 0.5rem;">
                            <i class="fas fa-clock"></i> {{ $alert->created_at->diffForHumans() }}
                        </div>
                    </div>
                </div>

                <div style="display: flex; gap: 0.5rem;">
                    <button onclick="markAlertRead({{ $alert->id }})" style="flex: 1; background: #dbeafe; color: var(--primary); padding: 0.5rem; border: none; border-radius: 0.5rem; cursor: pointer; font-weight: 600; transition: all 0.3s ease; font-size: 0.8rem;" onmouseover="this.style.background='#bfdbfe'" onmouseout="this.style.background='#dbeafe'">
                        <i class="fas fa-check"></i> Lire
                    </button>
                    <button onclick="resolveAlert({{ $alert->id }})" style="flex: 1; background: #dcfce7; color: var(--success); padding: 0.5rem; border: none; border-radius: 0.5rem; cursor: pointer; font-weight: 600; transition: all 0.3s ease; font-size: 0.8rem;" onmouseover="this.style.background='#bbf7d0'" onmouseout="this.style.background='#dcfce7'">
                        <i class="fas fa-check-double"></i> Résoudre
                    </button>
                </div>
            </div>
            @endforeach
        </div>
    </div>
    @endif

    <!-- Add Product Form -->
    <div class="form-card">
        <h3 style="margin: 0 0 1.5rem 0; font-size: 1.5rem; font-weight: 700; color: #111827;">
            <i class="fas fa-plus-circle" style="color: var(--success);"></i> Ajouter un Nouveau Produit
        </h3>

        <form id="addProductForm" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem;">
            @csrf

            <div class="form-group">
                <label class="form-label">
                    <i class="fas fa-tag" style="color: var(--primary);"></i> Nom du produit *
                </label>
                <input type="text" name="name" required
                    class="form-input"
                    placeholder="Ex: iPhone 15 Pro">
            </div>

            <div class="form-group">
                <label class="form-label">
                    <i class="fas fa-dollar-sign" style="color: var(--success);"></i> Prix unitaire (MAD) *
                </label>
                <input type="number" name="price" step="0.01" min="0" required
                    class="form-input"
                    placeholder="0.00">
            </div>

            <div class="form-group">
                <label class="form-label">
                    <i class="fas fa-barcode" style="color: var(--secondary);"></i> SKU / Code
                </label>
                <input type="text" name="sku"
                    class="form-input"
                    placeholder="SKU-001">
            </div>

            <div class="form-group">
                <label class="form-label">
                    <i class="fas fa-balance-scale" style="color: var(--warning);"></i> Unité *
                </label>
                <select name="unit" required class="form-select">
                    <option value="pièce">Pièce</option>
                    <option value="kg">Kilogramme (kg)</option>
                    <option value="litre">Litre (L)</option>
                    <option value="mètre">Mètre (m)</option>
                    <option value="boîte">Boîte</option>
                    <option value="carton">Carton</option>
                    <option value="palette">Palette</option>
                </select>
            </div>

            <div class="form-group">
                <label class="form-label">
                    <i class="fas fa-boxes" style="color: var(--primary);"></i> Stock initial *
                </label>
                <input type="number" name="current_stock" min="0" required
                    class="form-input"
                    placeholder="0">
            </div>

            <div class="form-group">
                <label class="form-label">
                    <i class="fas fa-exclamation-triangle" style="color: var(--warning);"></i> Stock minimum *
                </label>
                <input type="number" name="minimum_stock" min="0" required
                    class="form-input"
                    placeholder="10" value="10">
            </div>

            <div class="form-group">
                <label class="form-label">
                    <i class="fas fa-archive" style="color: var(--secondary);"></i> Stock maximum
                </label>
                <input type="number" name="maximum_stock" min="0"
                    class="form-input"
                    placeholder="100">
            </div>

            <div style="grid-column: 1 / -1;" class="form-group">
                <label class="form-label">
                    <i class="fas fa-align-left"></i> Description
                </label>
                <textarea name="description" rows="3"
                    class="form-textarea"
                    placeholder="Description du produit (optionnel)"></textarea>
            </div>

            <div style="grid-column: 1 / -1; text-align: right;">
                <button type="submit" style="background: linear-gradient(to right, var(--success), #059669); color: white; padding: 0.75rem 2rem; border: none; border-radius: 0.5rem; font-weight: 600; font-size: 1rem; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);" onmouseover="this.style.transform='translateY(-2px)'" onmouseout="this.style.transform='translateY(0)'">
                    <i class="fas fa-plus-circle"></i> Ajouter le Produit
                </button>
            </div>
        </form>
    </div>

    <!-- Products Table -->
    <div class="table-card">
        <h3 style="margin: 0 0 1.5rem 0; font-size: 1.5rem; font-weight: 700; color: #111827;">
            <i class="fas fa-list" style="color: var(--primary);"></i> Liste des Produits ({{ $products->count() ?? 0 }})
        </h3>

        @if(($products->count() ?? 0) > 0)
            <table id="productsTable">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Produit</th>
                        <th style="text-align: center;">SKU</th>
                        <th style="text-align: center;">Prix</th>
                        <th style="text-align: center;">Stock</th>
                        <th style="text-align: center;">Niveau</th>
                        <th style="text-align: center;">Statut</th>
                        <th style="text-align: center;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($products as $index => $product)
                    <tr>
                        <td><strong>{{ $index + 1 }}</strong></td>
                        <td>
                            <div style="font-weight: 700; color: #111827; margin-bottom: 0.25rem;">{{ $product->name ?? 'N/A' }}</div>
                            @if($product->description)
                                <div style="font-size: 0.85rem; color: #6b7280;">{{ Str::limit($product->description, 50) }}</div>
                            @endif
                        </td>
                        <td style="text-align: center;">
                            @if($product->sku)
                                <code style="background: #f3e8ff; color: #a855f7; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.85rem; font-weight: 700;">{{ $product->sku }}</code>
                            @else
                                <span style="color: #9ca3af;">-</span>
                            @endif
                        </td>
                        <td style="text-align: center;">
                            <div style="font-weight: 700; font-size: 1.1rem; color: var(--success);">{{ number_format($product->price ?? 0, 2) }}</div>
                            <div style="font-size: 0.8rem; color: #6b7280;">MAD</div>
                        </td>
                        <td style="text-align: center;">
                            <div style="font-size: 1.5rem; font-weight: 700; color: {{ $product->isOutOfStock() ? 'var(--danger)' : ($product->isLowStock() ? 'var(--warning)' : 'var(--success)') }};">{{ $product->current_stock ?? 0 }}</div>
                            <div style="font-size: 0.8rem; color: #6b7280;">{{ $product->unit ?? 'pièce' }}</div>
                        </td>
                        <td style="text-align: center;">
                            <div class="progress-bar">
                                <div class="progress-fill" style="background: {{ $product->isOutOfStock() ? 'var(--danger)' : ($product->isLowStock() ? 'var(--warning)' : 'var(--success)') }}; width: {{ min($product->getStockPercentage() ?? 0, 100) }}%;"></div>
                            </div>
                            <div style="font-size: 0.8rem; color: #6b7280; margin-top: 0.25rem;">{{ $product->getStockPercentage() ?? 0 }}%</div>
                        </td>
                        <td style="text-align: center;">
                            @if($product->isOutOfStock())
                                <span class="badge badge-red">❌ Rupture</span>
                            @elseif($product->isLowStock())
                                <span class="badge badge-orange">⚠️ Bas</span>
                            @else
                                <span class="badge badge-green">✅ Normal</span>
                            @endif
                        </td>
                        <td style="text-align: center;">
                            <div style="display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap;">
                                <button onclick="openStockModal({{ $product->id }}, 'in', '{{ $product->name }}')" style="background: #dcfce7; color: var(--success); padding: 0.5rem; border: none; border-radius: 0.5rem; cursor: pointer; font-size: 1rem; transition: all 0.3s ease;" title="Ajouter">
                                    <i class="fas fa-plus-circle"></i>
                                </button>
                                <button onclick="openStockModal({{ $product->id }}, 'out', '{{ $product->name }}')" style="background: #fee2e2; color: var(--danger); padding: 0.5rem; border: none; border-radius: 0.5rem; cursor: pointer; font-size: 1rem; transition: all 0.3s ease;" title="Retirer">
                                    <i class="fas fa-minus-circle"></i>
                                </button>
                                <button onclick="viewMovements({{ $product->id }})" style="background: #dbeafe; color: var(--primary); padding: 0.5rem; border: none; border-radius: 0.5rem; cursor: pointer; font-size: 1rem; transition: all 0.3s ease;" title="Historique">
                                    <i class="fas fa-history"></i>
                                </button>
                                
                                @if(Auth::user()->whatsapp_phone && Auth::user()->whatsapp_alerts_enabled)
                                <button onclick="sendProductAlert({{ $product->id }}, '{{ $product->name }}')" class="btn-whatsapp-small" title="Envoyer alerte WhatsApp">
                                    <i class="fab fa-whatsapp"></i>
                                </button>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        @else
            <div style="text-align: center; padding: 3rem 1rem; color: #9ca3af;">
                <div style="font-size: 4rem; margin-bottom: 1rem;">📦</div>
                <div style="font-size: 1.5rem; font-weight: 600; color: #111827;">Aucun produit en stock</div>
                <div style="font-size: 1rem; color: #6b7280; margin-top: 0.5rem;">Ajoutez votre premier produit ci-dessus</div>
            </div>
        @endif
    </div>

</div>

<!-- Stock Update Modal -->
<div id="stockModal" class="modal-overlay">
    <div class="modal-content">
        <div class="modal-header">
            <h2><i class="fas fa-box"></i> <span id="stockModalTitle">Gérer Stock</span></h2>
        </div>
        <div class="modal-body">
            <p style="margin-bottom: 1rem; font-size: 1rem; color: #6b7280;">
                Produit: <strong id="stockProductName" style="color: var(--primary);"></strong>
            </p>

            <form id="stockUpdateForm">
                <div class="form-group">
                    <label class="form-label">
                        <i class="fas fa-hashtag"></i> Quantité *
                    </label>
                    <input type="hidden" id="stockProductId">
                    <input type="hidden" id="stockType">
                    <input type="number" id="stockQuantity" name="quantity" min="1" required
                        class="form-input"
                        placeholder="0">
                </div>

                <div class="form-group">
                    <label class="form-label">
                        <i class="fas fa-tags"></i> Raison
                    </label>
                    <select id="stockReason" name="reason" class="form-select">
                        <option value="">-- Sélectionner --</option>
                        <option value="achat">🛒 Achat / Réapprovisionnement</option>
                        <option value="vente">💰 Vente</option>
                        <option value="retour">↩️ Retour client</option>
                        <option value="perte">💔 Perte / Casse</option>
                        <option value="inventaire">📊 Ajustement inventaire</option>
                        <option value="autre">❓ Autre</option>
                    </select>
                </div>

                <div class="form-group">
                    <label class="form-label">
                        <i class="fas fa-sticky-note"></i> Notes (optionnel)
                    </label>
                    <textarea id="stockNotes" name="notes" rows="3"
                        class="form-textarea"
                        placeholder="Notes supplémentaires..."></textarea>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button onclick="submitStockForm()" style="flex: 1; background: var(--success); color: white; padding: 0.75rem; border: none; border-radius: 0.5rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease;">
                <i class="fas fa-check-circle"></i> Confirmer
            </button>
            <button onclick="closeStockModal()" style="flex: 1; background: #d1d5db; color: #374151; padding: 0.75rem; border: none; border-radius: 0.5rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; margin-left: 0.5rem;">
                <i class="fas fa-times-circle"></i> Annuler
            </button>
        </div>
    </div>
</div>

<!-- Movements Modal -->
<div id="movementsModal" class="modal-overlay">
    <div class="modal-content" style="max-width: 700px; max-height: 80vh; overflow-y: auto;">
        <div class="modal-header">
            <h2><i class="fas fa-history"></i> Historique des Mouvements</h2>
        </div>
        <div class="modal-body" id="movementsContent">
            <div style="text-align: center; padding: 2rem;">
                <i class="fas fa-spinner fa-spin" style="font-size: 2rem; color: var(--primary);"></i>
                <p style="color: #6b7280; margin-top: 1rem;">Chargement...</p>
            </div>
        </div>
        <div class="modal-footer">
            <button onclick="closeMovementsModal()" style="flex: 1; background: #d1d5db; color: #374151; padding: 0.75rem; border: none; border-radius: 0.5rem; font-weight: 600; cursor: pointer;">
                Fermer
            </button>
        </div>
    </div>
</div>

<script>
    // WhatsApp Settings
    document.getElementById('whatsappSettingsForm').addEventListener('submit', function(e) {
        e.preventDefault();
        
        let phone = document.getElementById('whatsappPhone').value.trim();
        const enabled = document.getElementById('whatsappEnabled').checked;
        
        phone = phone.replace(/[^0-9]/g, '');
        
        if (phone.startsWith('0')) {
            phone = phone.substring(1);
        }
        
        if (phone.length === 9) {
            phone = '212' + phone;
        }
        
        fetch('/whatsapp-settings', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            },
            body: JSON.stringify({
                whatsapp_phone: phone,
                whatsapp_alerts_enabled: enabled
            })
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                showSuccessModal('✅ Paramètres enregistrés!', 'Vos paramètres WhatsApp ont été mis à jour.');
                setTimeout(() => location.reload(), 1500);
            } else {
                showErrorModal('❌ Erreur', data.message || 'Erreur lors de la sauvegarde');
            }
        })
        .catch(e => {
            console.error('Error:', e);
            showErrorModal('❌ Erreur', 'Erreur de connexion');
        });
    });

    // Send Test WhatsApp
    function sendTestWhatsApp() {
        const phone = document.getElementById('whatsappPhone').value.trim();
        
        if (!phone) {
            showErrorModal('❌ Erreur', 'Veuillez entrer un numéro de téléphone');
            return;
        }
        
        fetch('/whatsapp-test', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            }
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                showSuccessModal('✅ Message envoyé!', data.message);
            } else {
                showErrorModal('❌ Erreur', data.message);
            }
        })
        .catch(e => {
            console.error('Error:', e);
            showErrorModal('❌ Erreur', 'Erreur de connexion');
        });
    }

    // Send Product Alert
    function sendProductAlert(productId, productName) {
        if (!confirm(`📱 Envoyer une alerte WhatsApp pour "${productName}"?`)) return;
        
        fetch(`/stock/${productId}/send-alert`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            }
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                showSuccessModal('✅ Alerte envoyée!', data.message);
            } else {
                showErrorModal('❌ Erreur', data.message);
            }
        })
        .catch(e => {
            console.error('Error:', e);
            showErrorModal('❌ Erreur', 'Erreur de connexion');
        });
    }

    // Stock Modal Functions
    function openStockModal(productId, type, productName) {
        document.getElementById('stockProductId').value = productId;
        document.getElementById('stockType').value = type;
        document.getElementById('stockProductName').textContent = productName;
        document.getElementById('stockQuantity').value = '';
        document.getElementById('stockReason').value = '';
        document.getElementById('stockNotes').value = '';
        
        const title = type === 'in' ? '➕ Ajouter au Stock' : '➖ Retirer du Stock';
        document.getElementById('stockModalTitle').textContent = title;
        
        document.getElementById('stockModal').classList.add('active');
        document.getElementById('stockQuantity').focus();
    }

    function closeStockModal() {
        document.getElementById('stockModal').classList.remove('active');
    }

    function submitStockForm() {
        const productId = document.getElementById('stockProductId').value;
        const type = document.getElementById('stockType').value;
        const quantity = document.getElementById('stockQuantity').value;

        if (!quantity || quantity <= 0) {
            showErrorModal('❌ Erreur', 'Veuillez entrer une quantité valide');
            return;
        }

        fetch(`/stock/products/${productId}/update`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            },
            body: JSON.stringify({
                type: type,
                quantity: parseInt(quantity),
                reason: document.getElementById('stockReason').value,
                notes: document.getElementById('stockNotes').value
            })
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                showSuccessModal('✅ Stock Mis à Jour!', 'Le stock a été mis à jour avec succès.');
                setTimeout(() => location.reload(), 1500);
            } else {
                showErrorModal('❌ Erreur', data.message);
            }
        })
        .catch(e => {
            console.error('Error:', e);
            showErrorModal('❌ Erreur', 'Erreur de connexion');
        });
    }

    function viewMovements(productId) {
        document.getElementById('movementsModal').classList.add('active');
        
        fetch(`/stock/products/${productId}/movements`)
            .then(r => r.json())
            .then(data => {
                if (data.success) {
                    displayMovements(data.product, data.movements);
                } else {
                    showErrorModal('❌ Erreur', 'Impossible de charger l\'historique');
                }
            })
            .catch(e => {
                console.error('Error:', e);
                showErrorModal('❌ Erreur', 'Erreur de connexion');
            });
    }

    function displayMovements(product, movements) {
        const container = document.getElementById('movementsContent');
        
        if (!movements || movements.length === 0) {
            container.innerHTML = `
                <div style="text-align: center; padding: 2rem; color: #9ca3af;">
                    <div style="font-size: 3rem; margin-bottom: 1rem;">📭</div>
                    <div style="font-size: 1.25rem; font-weight: 600; color: #111827;">Aucun mouvement</div>
                </div>
            `;
            return;
        }

        let html = `
            <div style="background: linear-gradient(135deg, #f0fdf4 0%, #dbeafe 100%); padding: 1.5rem; border-radius: 0.75rem; margin-bottom: 1.5rem;">
                <h4 style="margin: 0 0 1rem 0; font-size: 1.25rem; color: #111827; font-weight: 700;">${product.name}</h4>
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
                    <div>
                        <div style="font-size: 0.85rem; color: #6b7280;">Stock actuel</div>
                        <div style="font-size: 1.75rem; font-weight: 700; color: var(--success);">${product.current_stock} ${product.unit}</div>
                    </div>
                    <div>
                        <div style="font-size: 0.85rem; color: #6b7280;">Prix unitaire</div>
                        <div style="font-size: 1.75rem; font-weight: 700; color: var(--success);">${parseFloat(product.price).toFixed(2)} MAD</div>
                    </div>
                </div>
            </div>
            <div style="display: flex; flex-direction: column; gap: 1rem;">
        `;
        
        movements.forEach((movement) => {
            const typeIcon = movement.type === 'in' ? '➕' : (movement.type === 'out' ? '➖' : '🔄');
            const typeColor = movement.type === 'in' ? 'green' : (movement.type === 'out' ? 'red' : 'blue');
            const typeLabel = movement.type === 'in' ? 'Entrée' : (movement.type === 'out' ? 'Sortie' : 'Ajustement');
            
            let bgColor = '#dcfce7';
            let textColor = 'var(--success)';
            
            if (typeColor === 'red') {
                bgColor = '#fee2e2';
                textColor = 'var(--danger)';
            } else if (typeColor === 'blue') {
                bgColor = '#dbeafe';
                textColor = 'var(--primary)';
            }
            
            html += `
                <div style="background: white; border: 2px solid #e5e7eb; border-radius: 0.75rem; padding: 1rem;">
                    <div style="display: flex; gap: 1rem; align-items: center;">
                        <div style="background: ${bgColor}; color: ${textColor}; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem;">
                            ${typeIcon}
                        </div>
                        <div style="flex: 1;">
                            <div style="font-weight: 700; color: #111827;">
                                ${typeLabel}: <strong>${movement.quantity}</strong> ${product.unit}
                            </div>
                            <div style="font-size: 0.85rem; color: #6b7280; margin-top: 0.25rem;">
                                ${movement.stock_before} → ${movement.stock_after} ${product.unit}
                            </div>
                            ${movement.reason ? `<div style="font-size: 0.85rem; color: #6b7280; margin-top: 0.25rem;"><i class="fas fa-tag"></i> ${movement.reason}</div>` : ''}
                        </div>
                        <div style="text-align: right;">
                            <div style="font-size: 0.85rem; color: #6b7280;">${movement.user?.name || 'Système'}</div>
                            <div style="font-size: 0.8rem; color: #9ca3af; margin-top: 0.25rem;">
                                ${new Date(movement.created_at).toLocaleString('fr-FR')}
                            </div>
                        </div>
                    </div>
                </div>
            `;
        });
        
        html += '</div>';
        container.innerHTML = html;
    }

    function closeMovementsModal() {
        document.getElementById('movementsModal').classList.remove('active');
    }

    function markAlertRead(alertId) {
        fetch(`/stock/alerts/${alertId}/read`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            }
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                showSuccessModal('✅ Alerte marquée comme lue', '');
                setTimeout(() => location.reload(), 1000);
            }
        })
        .catch(e => console.error('Error:', e));
    }

    function resolveAlert(alertId) {
        if (!confirm('✅ Marquer cette alerte comme résolue?')) return;
        
        fetch(`/stock/alerts/${alertId}/resolve`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            }
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                showSuccessModal('✅ Alerte résolue!', '');
                setTimeout(() => location.reload(), 1000);
            }
        })
        .catch(e => console.error('Error:', e));
    }

    function markAllAlertsRead() {
        if (!confirm('Marquer toutes les alertes comme lues?')) return;
        location.reload();
    }

    function showSuccessModal(title, content) {
        const modal = document.createElement('div');
        modal.className = 'modal-overlay active';
        modal.innerHTML = `
            <div class="modal-content">
                <div class="modal-header" style="background: linear-gradient(to right, var(--success), #059669);">
                    <h2>${title}</h2>
                </div>
                <div class="modal-body">${content}</div>
                <div class="modal-footer">
                    <button onclick="this.closest('.modal-overlay').remove()" style="flex: 1; background: var(--success); color: white; padding: 0.75rem; border: none; border-radius: 0.5rem; cursor: pointer; font-weight: 600;">Fermer</button>
                </div>
            </div>
        `;
        document.body.appendChild(modal);
    }

    function showErrorModal(title, content) {
        const modal = document.createElement('div');
        modal.className = 'modal-overlay active';
        modal.innerHTML = `
            <div class="modal-content">
                <div class="modal-header" style="background: linear-gradient(to right, var(--danger), #dc2626);">
                    <h2>${title}</h2>
                </div>
                <div class="modal-body" style="color: #991b1b;">${content}</div>
                <div class="modal-footer">
                    <button onclick="this.closest('.modal-overlay').remove()" style="flex: 1; background: var(--danger); color: white; padding: 0.75rem; border: none; border-radius: 0.5rem; cursor: pointer; font-weight: 600;">Fermer</button>
                </div>
            </div>
        `;
        document.body.appendChild(modal);
    }

    document.addEventListener('keydown', function(event) {
        if (event.key === 'Escape') {
            closeStockModal();
            closeMovementsModal();
        }
    });

    document.getElementById('addProductForm').addEventListener('submit', function(e) {
        e.preventDefault();
        const formData = new FormData(this);
        const data = Object.fromEntries(formData);
        
        fetch('{{ route("stock.products.store") }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            },
            body: JSON.stringify(data)
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                showSuccessModal('✅ Produit Ajouté!', `${data.product.name} a été ajouté avec succès.`);
                setTimeout(() => location.reload(), 1500);
            } else {
                showErrorModal('❌ Erreur', data.message);
            }
        })
        .catch(e => {
            console.error('Error:', e);
            showErrorModal('❌ Erreur', 'Erreur de connexion');
        });
    });
</script>

@endsection