<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gestion Clients - Auto École</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        /* Force vertical layout for action buttons - Inline styles to ensure they apply */
        .action-buttons-container {
            display: flex !important;
            flex-direction: column !important;
            flex-wrap: nowrap !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 8px !important;
            padding: 10px !important;
            background: #f8f9fa !important;
            border-radius: 8px !important;
            min-width: 60px !important;
            max-width: 80px !important;
            width: auto !important;
        }
        
        .action-buttons-container > * {
            display: block !important;
            width: 36px !important;
            flex-shrink: 0 !important;
            float: none !important;
            clear: both !important;
        }
        
        .action-buttons-container .btn-icon {
            display: flex !important;
            flex-direction: row !important;
            align-items: center !important;
            justify-content: center !important;
            width: 36px !important;
            height: 36px !important;
            margin: 0 auto !important;
            float: none !important;
            clear: both !important;
        }
    </style>
</head>
<body>
    <!-- Login Screen -->
    <div id="loginScreen" class="login-screen">
        <div class="login-container" id="loginContainer">
            <div class="login-content">
                <h2 class="login-title">Accès Administrateur</h2>
                <form id="loginForm" class="login-form">
                    <div class="login-input-group">
                        <label for="loginPassword">Mot de passe</label>
                        <input type="password" id="loginPassword" class="login-input" placeholder="Entrez votre mot de passe" required autofocus>
                    </div>
                    <button type="submit" class="btn btn-login">Se connecter</button>
                    <p id="loginError" class="login-error" style="display: none;">Mot de passe incorrect</p>
                </form>
            </div>
        </div>
        <!-- Loading Spinner -->
        <div id="loadingSpinner" class="loading-spinner" style="display: none;">
            <div class="modern-spinner">
                <div class="spinner-ring"></div>
                <div class="spinner-ring"></div>
                <div class="spinner-ring"></div>
            </div>
        </div>
    </div>

    <!-- Main Application (hidden until login) -->
    <div class="container" id="mainApp" style="display: none;">
        <header>
            <img src="Assets/logo.png" alt="Logo" class="header-logo" width="150" height="150">
            <h1>Gestion des Clients</h1>
            <p class="subtitle">BENZIE</p>
            <div class="total-price">
                <span class="total-label">Total des Prix:</span>
                <span class="total-value" id="totalPrice">0,00 €</span>
            </div>
        </header>

        <!-- Database Actions -->
        <div class="database-actions">
            <button type="button" class="btn btn-save" id="saveDatabaseBtn">
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path>
                    <polyline points="17 21 17 13 7 13 7 21"></polyline>
                    <polyline points="7 3 7 8 15 8"></polyline>
                </svg>
                Sauvegarder Base de Données
            </button>
            <button type="button" class="btn btn-load" id="loadDatabaseBtn">
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                    <polyline points="7 10 12 15 17 10"></polyline>
                    <line x1="12" y1="15" x2="12" y2="3"></line>
                </svg>
                Charger Base de Données
            </button>
            <input type="file" id="databaseFileInput" accept=".json" style="display: none;">
        </div>

        <!-- Search Bar -->
        <div class="search-container">
            <input type="text" id="searchInput" placeholder="Rechercher un client..." class="search-input">
            <svg class="search-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="11" cy="11" r="8"></circle>
                <path d="m21 21-4.35-4.35"></path>
            </svg>
        </div>

        <!-- Date Range Filter -->
        <div class="date-filter-container">
            <div class="date-filter-wrapper">
                <div class="date-filter-group">
                    <label for="dateFrom">Date de début</label>
                    <input type="date" id="dateFrom" class="date-input">
                </div>
                <div class="date-filter-separator">→</div>
                <div class="date-filter-group">
                    <label for="dateTo">Date de fin</label>
                    <input type="date" id="dateTo" class="date-input">
                </div>
                <button type="button" class="btn btn-clear" id="clearDateFilter">Effacer</button>
            </div>
        </div>

        <!-- Form Section -->
        <div class="form-section">
            <h2>Ajouter / Modifier un Client</h2>
            <form id="clientForm">
                <div class="form-grid">
                    <div class="form-group">
                        <label for="date">DATE</label>
                        <input type="date" id="date" required>
                    </div>
                    <div class="form-group">
                        <label for="nomClient">NOM CLIENT</label>
                        <input type="text" id="nomClient" required>
                    </div>
                    <div class="form-group">
                        <label for="nomAutoEcole">NOM D'AUTO ECOLE</label>
                        <div style="position: relative; display: flex; align-items: center;">
                            <input type="text" id="nomAutoEcole" required style="flex: 1; padding-right: 45px;">
                            <button type="button" id="copyNomAutoEcoleBtn" class="copy-btn" title="Copier">
                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                                    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                                </svg>
                            </button>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="telephone">TÉLÉPHONE</label>
                        <input type="tel" id="telephone" required>
                    </div>
                    <div class="form-group">
                        <label for="packMode">PACK MODE</label>
                        <select id="packMode" required>
                            <option value="">Sélectionner...</option>
                            <option value="NORMAL">NORMAL</option>
                            <option value="EXTENSION">EXTENSION</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="ville">VILLE D'AUTO ECOLE</label>
                        <input type="text" id="ville" required>
                    </div>
                    <div class="form-group">
                        <label for="adresse">ADRESSE D'AUTO ECOLE</label>
                        <input type="text" id="adresse" required>
                    </div>
                    <div class="form-group">
                        <label for="codeIdPc">ID</label>
                        <input type="text" id="codeIdPc" required>
                    </div>
                    <div class="form-group">
                        <label for="prix">PRIX</label>
                        <input type="text" id="prix" required>
                    </div>
                    <div class="form-group form-group-full">
                        <div class="side-by-side-fields" style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px;">
                            <div class="form-group">
                                <label for="carteNational">CARTE NATIONAL</label>
                                <input type="text" id="carteNational">
                            </div>
                            <div class="form-group">
                                <label for="numeroAgrement">N° D'AGRÉMENT</label>
                                <input type="text" id="numeroAgrement">
                            </div>
                            <div class="form-group">
                                <label for="observation">OBSERVATION</label>
                                <textarea id="observation" rows="3"></textarea>
                            </div>
                        </div>
                    </div>
                    <!-- KEY D'ACTIVATION field - hidden by default, shown when editing -->
                    <div class="form-group form-group-full" id="keyActivationGroup" style="display: none;">
                        <label for="keyActivation">KEY D'ACTIVATION</label>
                        <input type="text" id="keyActivation">
                    </div>
                </div>
                <div class="form-actions">
                    <button type="button" class="btn btn-primary btn-large" id="submitBtn">AJOUTER CLIENT</button>
                    <button type="button" class="btn btn-secondary" id="cancelBtn" style="display: none;">Annuler</button>
                </div>
            </form>
        </div>

        <!-- Subscription Duration Popup -->
        <div id="subscriptionPopup" class="popup-overlay">
            <div class="popup-content">
                <h3>Durée d'Abonnement</h3>
                <div class="popup-form-group">
                    <label for="dureeAbonnement">Sélectionnez la durée d'abonnement</label>
                    <select id="dureeAbonnement" class="popup-select">
                        <option value="">-- Sélectionner --</option>
                        <option value="7days - TRIAL">7days - TRIAL</option>
                        <option value="1 year">1 year</option>
                    </select>
                </div>
                <div class="popup-actions">
                    <button type="button" class="btn btn-primary" id="confirmSubscription">Confirmer</button>
                    <button type="button" class="btn btn-secondary" id="cancelSubscription">Annuler</button>
                </div>
            </div>
        </div>

        <!-- Table Section -->
        <div class="table-section">
            <h2>Liste des Clients</h2>
            <div class="table-container">
                <table id="clientTable">
                    <thead>
                        <tr>
                            <th class="filterable-header" data-filter="date">
                                DATE
                                <span class="filter-icon">🔽</span>
                            </th>
                            <th class="hidden-column">NOM CLIENT</th>
                            <th>NOM D'AUTO ECOLE</th>
                            <th class="hidden-column">TÉLÉPHONE</th>
                            <th class="filterable-header" data-filter="packMode">
                                PACK MODE
                                <span class="filter-icon">🔽</span>
                            </th>
                            <th class="filterable-header" data-filter="ville">
                                VILLE D'AUTO ECOLE
                                <span class="filter-icon">🔽</span>
                            </th>
                            <th class="hidden-column">ADRESSE D'AUTO ECOLE</th>
                            <th class="hidden-column">OBSERVATION</th>
                            <th class="hidden-column">KEY D'ACTIVATION</th>
                            <th class="hidden-column">CARTE NATIONAL</th>
                            <th class="hidden-column">N° D'AGRÉMENT</th>
                            <th class="hidden-column">ID</th>
                            <th class="filterable-header" data-filter="prix">
                                PRIX
                                <span class="filter-icon">🔽</span>
                            </th>
                            <th>ACTIONS</th>
                        </tr>
                    </thead>
                    <tbody id="tableBody">
                        <!-- Data will be inserted here -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Cloudflare API Configuration -->
    <script>
        // Set your Cloudflare Worker API URL here
        // For local development (run: npx wrangler dev): 'http://localhost:8787'
        // Production URL (deployed):
        window.CLOUDFLARE_API_URL = 'https://client-management-api.spexle-business.workers.dev';
    </script>
    <script src="script.js"></script>
</body>
</html>

