function handleFormSubmit(e) {
            e.preventDefault();
            
            const lockerNumber = document.getElementById('lockerNumber').value;
            const zone = document.getElementById('zone').value;
            
            fetch(`${API_URL}/lockers`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    number: lockerNumber,
                    zone: zone,
                    name: document.getElementById('lastName').value,
                    firstName: document.getElementById('firstName').value,
                    code: document.getElementById('code').value,
                    birthDate: document.getElementById('birthDate').value
                })
            })
            .then(res => {
                if (!res.ok) throw new Error('Erreur ' + res.status);
                closeModal();
                loadData();
                showStatus('Casier enregistré', 'success');
            })
            .catch(err => {
                showStatus('Erreur: ' + err.message, 'error');
            });
        }        function loadData() {
            fetch(`${API_URL}/lockers`)
                .then(res => {
                    if (!res.ok) throw new Error('Erreur ' + res.status);
                    return res.json();
                })
                .then(data => {
                    DATA = data;
                    console.log('Données chargées:', DATA.length);
                    renderAllTables();
                })
                .catch(err => {
                    console.error('Erreur chargement:', err);
                    alert('Erreur: Impossible de charger les données.\n\nAssurez-vous que:\n1. Le serveur Node.js est lancé (npm run dev)\n2. L\'URL est: ' + API_URL);
                });
        }        .sync-indicator {
            text-align: center;
            padding: 10px;
            font-size: 12px;
            color: #999;
            transition: all 0.3s;
        }

        .sync-indicator.syncing {
            color: #0066cc;
            font-weight: 500;
        }

        .sync-indicator.updated {
            color: #2e7d32;
            font-weight: 500;
        }        function loadData() {
            fetch(`${API_URL}/lockers`)
                .then(res => {
                    if (!res.ok) throw new Error('Erreur ' + res.status);
                    return res.json();
                })
                .then(data => {
                    DATA = data;
                    console.log('Données chargées:', DATA.length);
                    renderAllTables();
                })
                .catch(err => {
                    console.error('Erreur chargement:', err);
                    alert('Erreur: Impossible de charger les données.\n\nAssurez-vous que:\n1. Le serveur Node.js est lancé (npm run dev)\n2. L\'URL est: ' + API_URL);
                });
        }        function setupApp() {
            console.log('Détection de l\'API...');
            
            // Déterminer l'URL correcte
            const protocol = window.location.protocol;
            const host = window.location.host;
            API_URL = `${protocol}//${host}/api`;
            
            console.log('API_URL:', API_URL);
            
            // Attacher les événements
            document.querySelectorAll('.tab-button').forEach(btn => {
                btn.addEventListener('click', function() {
                    switchTab(this.dataset.zone);
                    loadData(); // Rafraîchir quand on change d'onglet
                });
            });

            document.getElementById('globalSearch').addEventListener('input', function(e) {
                if (e.target.value.trim()) {
                    searchLockers(e.target.value);
                } else {
                    renderAllTables();
                }
            });

            document.getElementById('lockerForm').addEventListener('submit', handleFormSubmit);

            // Charger les données
            loadData();
            checkServerStatus();
            
            // Rafraîchir automatiquement toutes les 60 secondes
            setInterval(() => {
                console.log('Rafraîchissement automatique...');
                loadData();
                checkServerStatus();
            }, 60000); // 60000 ms = 1 minute
        }        function openModal(zone) {
            document.getElementById('zone').value = zone;
            document.getElementById('modalTitle').textContent = 'Attribuer un casier';
            document.getElementById('lastName').value = '';
            document.getElementById('firstName').value = '';
            document.getElementById('code').value = '';
            document.getElementById('birthDate').value = '';
            document.getElementById('statusMessage').innerHTML = '';
            
            populateLockerSelect(zone);
            document.getElementById('modal').classList.add('active');
        }

        function openModalEdit(lockerNumber) {
            const locker = DATA.find(l => l.number === lockerNumber);
            if (!locker) return;
            
            document.getElementById('zone').value = locker.zone;
            document.getElementById('modalTitle').textContent = `Modifier ${locker.number}`;
            document.getElementById('lockerNumber').value = lockerNumber;
            document.getElementById('lastName').value = locker.name;
            document.getElementById('firstName').value = locker.firstName;
            document.getElementById('code').value = locker.code;
            document.getElementById('birthDate').value = locker.birthDate;
            document.getElementById('statusMessage').innerHTML = '';
            
            populateLockerSelect(locker.zone, lockerNumber);
            document.getElementById('modal').classList.add('active');
        }<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gestion des Casiers</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background: #f5f5f5;
            color: #333;
            line-height: 1.6;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        header {
            background: white;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }

        h1 {
            font-size: 28px;
            margin-bottom: 15px;
            font-weight: 600;
        }

        .header-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .server-status {
            padding: 8px 16px;
            border-radius: 20px;
            font-weight: 500;
            font-size: 13px;
        }

        .server-status.online {
            background: #e8f5e9;
            color: #2e7d32;
        }

        .server-status.offline {
            background: #ffebee;
            color: #c62828;
        }

        .search-bar {
            display: flex;
            gap: 10px;
        }

        .search-bar input {
            flex: 1;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 14px;
        }

        .search-bar input:focus {
            outline: none;
            border-color: #0066cc;
            box-shadow: 0 0 0 3px rgba(0,102,204,0.1);
        }

        .tabs {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            border-bottom: 2px solid #eee;
        }

        .tab-button {
            padding: 12px 20px;
            border: none;
            background: none;
            font-size: 14px;
            cursor: pointer;
            font-weight: 500;
            color: #666;
            border-bottom: 3px solid transparent;
            transition: all 0.2s;
            margin-bottom: -2px;
        }

        .tab-button.active {
            color: #0066cc;
            border-bottom-color: #0066cc;
        }

        .content-section {
            display: none;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            overflow: hidden;
        }

        .content-section.active {
            display: block;
        }

        .section-header {
            padding: 20px;
            background: #fafafa;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 15px;
        }

        .controls {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        button {
            padding: 10px 16px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.2s;
        }

        .btn-primary {
            background: #0066cc;
            color: white;
        }

        .btn-primary:hover {
            background: #0052a3;
        }

        .btn-secondary {
            background: #f0f0f0;
            color: #333;
        }

        .btn-secondary:hover {
            background: #e0e0e0;
        }

        select {
            padding: 10px 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 14px;
            background: white;
            cursor: pointer;
        }

        .table-container {
            overflow-x: auto;
            padding: 20px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;
        }

        th {
            background: #fafafa;
            padding: 12px;
            text-align: left;
            font-weight: 600;
            border-bottom: 2px solid #eee;
        }

        td {
            padding: 12px;
            border-bottom: 1px solid #eee;
        }

        tr:hover {
            background: #fafafa;
        }

        .cell-empty {
            color: #999;
            font-style: italic;
        }

        .status-empty {
            background: #e8f5e9;
            color: #2e7d32;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
        }

        .status-occupied {
            background: #fff3e0;
            color: #e65100;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
        }

        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }

        .modal.active {
            display: flex;
        }

        .modal-content {
            background: white;
            border-radius: 8px;
            padding: 30px;
            max-width: 500px;
            width: 90%;
            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
        }

        .modal-header {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 20px;
        }

        .form-group {
            margin-bottom: 15px;
        }

        label {
            display: block;
            font-size: 13px;
            font-weight: 500;
            margin-bottom: 5px;
            color: #555;
        }

        input[type="text"],
        input[type="date"],
        select {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 14px;
            font-family: inherit;
        }

        input:focus,
        select:focus {
            outline: none;
            border-color: #0066cc;
            box-shadow: 0 0 0 3px rgba(0,102,204,0.1);
        }

        .modal-footer {
            display: flex;
            gap: 10px;
            justify-content: flex-end;
            margin-top: 25px;
        }

        .modal-footer button {
            flex: 1;
        }

        .status-message {
            padding: 10px 15px;
            border-radius: 6px;
            margin-bottom: 15px;
            font-size: 13px;
        }

        .status-error {
            background: #ffebee;
            color: #c62828;
        }

        .status-success {
            background: #e8f5e9;
            color: #2e7d32;
        }

        .dropdown-menu {
            display: none;
            position: absolute;
            top: 100%;
            right: 0;
            background: white;
            border: 1px solid #ddd;
            border-radius: 6px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            z-index: 100;
            min-width: 150px;
        }

        .dropdown-menu.active {
            display: block;
        }

        .dropdown-menu button {
            display: block;
            width: 100%;
            padding: 10px 15px;
            border: none;
            background: none;
            text-align: left;
            cursor: pointer;
            font-size: 13px;
            border-bottom: 1px solid #f0f0f0;
        }

        .dropdown-menu button:last-child {
            border-bottom: none;
        }

        .dropdown-menu button:hover {
            background: #f5f5f5;
        }

        .btn-delete {
            color: #d32f2f !important;
        }

        .sync-indicator {
            text-align: center;
            padding: 10px;
            font-size: 12px;
            color: #999;
        }

        .menu-dot {
            position: relative;
            display: inline-block;
        }

        .menu-dot button {
            padding: 6px 10px;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <div class="header-info">
                <h1>Gestion des Casiers</h1>
                <div id="serverStatus" class="server-status offline">⚪ Vérification...</div>
            </div>
            <div class="search-bar">
                <input type="text" id="globalSearch" placeholder="Rechercher par nom...">
            </div>
        </header>

        <div class="tabs">
            <button class="tab-button active" data-zone="NORD">Zone NORD</button>
            <button class="tab-button" data-zone="SUD">Zone SUD</button>
            <button class="tab-button" data-zone="PCA">Zone PCA</button>
        </div>

        <div id="content-NORD" class="content-section active">
            <div class="section-header">
                <h2 style="font-size: 18px; font-weight: 600;">Zone NORD (N01 à N75)</h2>
                <div class="controls">
                    <button class="btn-primary" onclick="openModal('NORD')">+ Nouveau casier</button>
                    <select onchange="filterTable('NORD', this.value)">
                        <option value="all">Tous</option>
                        <option value="occupied">Occupés</option>
                        <option value="empty">Vides</option>
                    </select>
                    <select onchange="sortTable('NORD', this.value)">
                        <option value="number">Trier par numéro</option>
                        <option value="name">Trier par nom</option>
                    </select>
                    <button class="btn-secondary" onclick="exportData('json')">⬇ JSON</button>
                    <button class="btn-secondary" onclick="exportData('csv')">⬇ CSV</button>
                </div>
            </div>
            <div class="table-container">
                <table id="table-NORD">
                    <thead>
                        <tr>
                            <th>N° Casier</th>
                            <th>Nom</th>
                            <th>Prénom</th>
                            <th>Code ID</th>
                            <th>Date de naissance</th>
                            <th>Statut</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody id="tbody-NORD"></tbody>
                </table>
            </div>
        </div>

        <div id="content-SUD" class="content-section">
            <div class="section-header">
                <h2 style="font-size: 18px; font-weight: 600;">Zone SUD (S01 à S75)</h2>
                <div class="controls">
                    <button class="btn-primary" onclick="openModal('SUD')">+ Nouveau casier</button>
                    <select onchange="filterTable('SUD', this.value)">
                        <option value="all">Tous</option>
                        <option value="occupied">Occupés</option>
                        <option value="empty">Vides</option>
                    </select>
                    <select onchange="sortTable('SUD', this.value)">
                        <option value="number">Trier par numéro</option>
                        <option value="name">Trier par nom</option>
                    </select>
                    <button class="btn-secondary" onclick="exportData('json')">⬇ JSON</button>
                    <button class="btn-secondary" onclick="exportData('csv')">⬇ CSV</button>
                </div>
            </div>
            <div class="table-container">
                <table id="table-SUD">
                    <thead>
                        <tr>
                            <th>N° Casier</th>
                            <th>Nom</th>
                            <th>Prénom</th>
                            <th>Code ID</th>
                            <th>Date de naissance</th>
                            <th>Statut</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody id="tbody-SUD"></tbody>
                </table>
            </div>
        </div>

        <div id="content-PCA" class="content-section">
            <div class="section-header">
                <h2 style="font-size: 18px; font-weight: 600;">Zone PCA (PCA01 à PCA40)</h2>
                <div class="controls">
                    <button class="btn-primary" onclick="openModal('PCA')">+ Nouveau casier</button>
                    <select onchange="filterTable('PCA', this.value)">
                        <option value="all">Tous</option>
                        <option value="occupied">Occupés</option>
                        <option value="empty">Vides</option>
                    </select>
                    <select onchange="sortTable('PCA', this.value)">
                        <option value="number">Trier par numéro</option>
                        <option value="name">Trier par nom</option>
                    </select>
                    <button class="btn-secondary" onclick="exportData('json')">⬇ JSON</button>
                    <button class="btn-secondary" onclick="exportData('csv')">⬇ CSV</button>
                </div>
            </div>
            <div class="table-container">
                <table id="table-PCA">
                    <thead>
                        <tr>
                            <th>N° Casier</th>
                            <th>Nom</th>
                            <th>Prénom</th>
                            <th>Code ID</th>
                            <th>Date de naissance</th>
                            <th>Statut</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody id="tbody-PCA"></tbody>
                </table>
            </div>
        </div>

        <div class="sync-indicator" id="syncIndicator">✓ À jour</div>
    </div>

    <div id="modal" class="modal">
        <div class="modal-content">
            <div class="modal-header" id="modalTitle">Attribuer un casier</div>
            <div id="statusMessage"></div>
            <form id="lockerForm">
                <div class="form-group">
                    <label for="zone">Zone</label>
                    <select id="zone" required>
                        <option value="NORD">NORD</option>
                        <option value="SUD">SUD</option>
                        <option value="PCA">PCA</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="lockerNumber">N° Casier</label>
                    <select id="lockerNumber" required></select>
                </div>
                <div class="form-group">
                    <label for="lastName">Nom</label>
                    <input type="text" id="lastName" required>
                </div>
                <div class="form-group">
                    <label for="firstName">Prénom</label>
                    <input type="text" id="firstName" required>
                </div>
                <div class="form-group">
                    <label for="code">Code d'identification</label>
                    <input type="text" id="code" required>
                </div>
                <div class="form-group">
                    <label for="birthDate">Date de naissance</label>
                    <input type="date" id="birthDate" required>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn-secondary" onclick="closeModal()">Annuler</button>
                    <button type="submit" class="btn-primary">Enregistrer</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        let API_URL = 'http://localhost:5000/api';
        let DATA = [];
        let CURRENT_FILTER = { NORD: 'all', SUD: 'all', PCA: 'all' };

        // Initialisation
        document.addEventListener('DOMContentLoaded', function() {
            console.log('Page chargée');
            setupApp();
        });

        function setupApp() {
            console.log('Détection de l\'API...');
            
            // Déterminer l'URL correcte
            const protocol = window.location.protocol;
            const host = window.location.host;
            API_URL = `${protocol}//${host}/api`;
            
            console.log('API_URL:', API_URL);
            
            // Attacher les événements
            document.querySelectorAll('.tab-button').forEach(btn => {
                btn.addEventListener('click', function() {
                    switchTab(this.dataset.zone);
                });
            });

            document.getElementById('globalSearch').addEventListener('input', function(e) {
                if (e.target.value.trim()) {
                    searchLockers(e.target.value);
                } else {
                    renderAllTables();
                }
            });

            document.getElementById('lockerForm').addEventListener('submit', handleFormSubmit);

            // Charger les données
            loadData();
            checkServerStatus();
        }

        function checkServerStatus() {
            fetch(`${API_URL}/health`)
                .then(res => {
                    if (res.ok) {
                        document.getElementById('serverStatus').className = 'server-status online';
                        document.getElementById('serverStatus').textContent = '🟢 Connecté';
                    } else {
                        throw new Error('Not OK');
                    }
                })
                .catch(err => {
                    document.getElementById('serverStatus').className = 'server-status offline';
                    document.getElementById('serverStatus').textContent = '🔴 Déconnecté';
                    console.error('Serveur indisponible:', err);
                });
        }

        function loadData() {
            fetch(`${API_URL}/lockers`)
                .then(res => {
                    if (!res.ok) throw new Error('Erreur ' + res.status);
                    return res.json();
                })
                .then(data => {
                    DATA = data;
                    console.log('Données chargées:', DATA.length);
                    renderAllTables();
                })
                .catch(err => {
                    console.error('Erreur chargement:', err);
                    alert('Erreur: Impossible de charger les données.\n\nAssurez-vous que:\n1. Le serveur Node.js est lancé (npm run dev)\n2. L\'URL est: ' + API_URL);
                });
        }

        function switchTab(zone) {
            document.querySelectorAll('.tab-button').forEach(b => b.classList.remove('active'));
            document.querySelectorAll('.content-section').forEach(s => s.classList.remove('active'));
            
            document.querySelector(`[data-zone="${zone}"]`).classList.add('active');
            document.getElementById(`content-${zone}`).classList.add('active');
        }

        function renderAllTables() {
            renderTable('NORD');
            renderTable('SUD');
            renderTable('PCA');
        }

        function renderTable(zone) {
            const tbody = document.getElementById(`tbody-${zone}`);
            let lockers = DATA.filter(l => l.zone === zone);
            
            const filter = CURRENT_FILTER[zone] || 'all';
            if (filter === 'occupied') {
                lockers = lockers.filter(l => l.occupied);
            } else if (filter === 'empty') {
                lockers = lockers.filter(l => !l.occupied);
            }
            
            tbody.innerHTML = lockers.map(locker => `
                <tr>
                    <td><strong>${locker.number}</strong></td>
                    <td>${locker.occupied ? locker.name : '<span class="cell-empty">—</span>'}</td>
                    <td>${locker.occupied ? locker.firstName : '<span class="cell-empty">—</span>'}</td>
                    <td>${locker.occupied ? locker.code : '<span class="cell-empty">—</span>'}</td>
                    <td>${locker.occupied ? locker.birthDate : '<span class="cell-empty">—</span>'}</td>
                    <td>
                        ${locker.occupied 
                            ? '<span class="status-occupied">Occupé</span>' 
                            : '<span class="status-empty">Libre</span>'}
                    </td>
                    <td>
                        <div class="menu-dot">
                            <button class="btn-secondary" onclick="toggleDropdown(event)">⋮</button>
                            <div class="dropdown-menu">
                                <button onclick="openModalEdit('${locker.number}')">Modifier</button>
                                <button class="btn-delete" onclick="releaseLocker('${locker.number}')">Libérer</button>
                            </div>
                        </div>
                    </td>
                </tr>
            `).join('');
        }

        function filterTable(zone, value) {
            CURRENT_FILTER[zone] = value;
            renderTable(zone);
        }

        function sortTable(zone, value) {
            const tbody = document.getElementById(`tbody-${zone}`);
            const rows = Array.from(tbody.querySelectorAll('tr'));
            
            rows.sort((a, b) => {
                const idx = value === 'name' ? 1 : 0;
                return a.cells[idx].textContent.localeCompare(b.cells[idx].textContent);
            });
            
            rows.forEach(row => tbody.appendChild(row));
        }

        function searchLockers(query) {
            const results = DATA.filter(l => 
                (l.name + ' ' + l.firstName).toLowerCase().includes(query.toLowerCase())
            );
            
            if (results.length > 0) {
                const zone = results[0].zone;
                switchTab(zone);
                
                const tbody = document.getElementById(`tbody-${zone}`);
                tbody.innerHTML = results.map(locker => `
                    <tr>
                        <td><strong>${locker.number}</strong></td>
                        <td>${locker.occupied ? locker.name : '<span class="cell-empty">—</span>'}</td>
                        <td>${locker.occupied ? locker.firstName : '<span class="cell-empty">—</span>'}</td>
                        <td>${locker.occupied ? locker.code : '<span class="cell-empty">—</span>'}</td>
                        <td>${locker.occupied ? locker.birthDate : '<span class="cell-empty">—</span>'}</td>
                        <td>
                            ${locker.occupied 
                                ? '<span class="status-occupied">Occupé</span>' 
                                : '<span class="status-empty">Libre</span>'}
                        </td>
                        <td>
                            <div class="menu-dot">
                                <button class="btn-secondary" onclick="toggleDropdown(event)">⋮</button>
                                <div class="dropdown-menu">
                                    <button onclick="openModalEdit('${locker.number}')">Modifier</button>
                                    <button class="btn-delete" onclick="releaseLocker('${locker.number}')">Libérer</button>
                                </div>
                            </div>
                        </td>
                    </tr>
                `).join('');
            }
        }

        function openModal(zone) {
            document.getElementById('zone').value = zone;
            document.getElementById('modalTitle').textContent = 'Attribuer un casier';
            document.getElementById('lockerForm').reset();
            document.getElementById('statusMessage').innerHTML = '';
            
            populateLockerSelect(zone);
            document.getElementById('modal').classList.add('active');
        }

        function openModalEdit(lockerNumber) {
            const locker = DATA.find(l => l.number === lockerNumber);
            if (!locker) return;
            
            document.getElementById('modalTitle').textContent = `Modifier ${locker.number}`;
            document.getElementById('zone').value = locker.zone;
            document.getElementById('lockerNumber').value = lockerNumber;
            document.getElementById('lastName').value = locker.name;
            document.getElementById('firstName').value = locker.firstName;
            document.getElementById('code').value = locker.code;
            document.getElementById('birthDate').value = locker.birthDate;
            document.getElementById('statusMessage').innerHTML = '';
            
            populateLockerSelect(locker.zone, lockerNumber);
            document.getElementById('modal').classList.add('active');
        }

        function populateLockerSelect(zone, selected = null) {
            const select = document.getElementById('lockerNumber');
            const lockers = DATA.filter(l => l.zone === zone);
            
            select.innerHTML = lockers.map(locker => {
                const isAvailable = !locker.occupied || locker.number === selected;
                return `<option value="${locker.number}" ${!isAvailable ? 'disabled' : ''}>${locker.number}${isAvailable ? '' : ' (occupé)'}</option>`;
            }).join('');
            
            if (selected) {
                select.value = selected;
            }
        }

        function closeModal() {
            document.getElementById('modal').classList.remove('active');
        }

        function handleFormSubmit(e) {
            e.preventDefault();
            
            const lockerNumber = document.getElementById('lockerNumber').value;
            const zone = document.getElementById('zone').value;
            
            fetch(`${API_URL}/lockers`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    number: lockerNumber,
                    zone: zone,
                    name: document.getElementById('lastName').value,
                    firstName: document.getElementById('firstName').value,
                    code: document.getElementById('code').value,
                    birthDate: document.getElementById('birthDate').value
                })
            })
            .then(res => {
                if (!res.ok) throw new Error('Erreur ' + res.status);
                closeModal();
                loadData();
                showStatus('Casier enregistré', 'success');
            })
            .catch(err => {
                showStatus('Erreur: ' + err.message, 'error');
            });
        }

        function releaseLocker(lockerNumber) {
            if (!confirm('Libérer ce casier ?')) return;
            
            fetch(`${API_URL}/lockers/${lockerNumber}`, { method: 'DELETE' })
                .then(res => {
                    if (!res.ok) throw new Error('Erreur ' + res.status);
                    loadData();
                    showStatus('Casier libéré', 'success');
                })
                .catch(err => {
                    showStatus('Erreur: ' + err.message, 'error');
                });
        }

        function showStatus(msg, type) {
            const el = document.getElementById('statusMessage');
            el.className = 'status-message status-' + type;
            el.textContent = msg;
            setTimeout(() => {
                el.innerHTML = '';
            }, 3000);
        }

        function exportData(format) {
            const occupied = DATA.filter(l => l.occupied);
            
            if (format === 'json') {
                const json = JSON.stringify(occupied, null, 2);
                downloadFile(json, 'casiers.json', 'application/json');
            } else if (format === 'csv') {
                const csv = convertToCSV(occupied);
                downloadFile(csv, 'casiers.csv', 'text/csv');
            }
        }

        function convertToCSV(data) {
            const headers = ['N° Casier', 'Zone', 'Nom', 'Prénom', 'Code ID', 'Date de naissance'];
            const rows = data.map(locker => [
                locker.number, locker.zone, locker.name, locker.firstName, locker.code, locker.birthDate
            ]);
            
            return [
                headers.join(','),
                ...rows.map(row => row.map(cell => `"${cell}"`).join(','))
            ].join('\n');
        }

        function downloadFile(content, filename, mimeType) {
            const blob = new Blob([content], { type: mimeType });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = filename;
            document.body.appendChild(a);
            a.click();
            URL.revokeObjectURL(url);
            document.body.removeChild(a);
        }

        function toggleDropdown(e) {
            e.stopPropagation();
            const menu = e.target.nextElementSibling;
            document.querySelectorAll('.dropdown-menu.active').forEach(m => {
                if (m !== menu) m.classList.remove('active');
            });
            menu.classList.toggle('active');
        }

        document.addEventListener('click', function() {
            document.querySelectorAll('.dropdown-menu.active').forEach(m => m.classList.remove('active'));
        });
    </script>
</body>
</html>