{% extends '@kohinos/admin/boffice/layout.html.twig' %}

{% set block_title = 'Monnaies' %}

{% block boffice_content %}
<div class="box box-primary">
    <div class="box-header with-border" style="display:flex;align-items:center;justify-content:space-between;">
        <h3 class="box-title"><i class="fa fa-money"></i> Gestion des monnaies</h3>
        <button type="button" class="btn btn-success btn-sm" id="boffice-inst-add-btn">
            <i class="fa fa-plus"></i> Ajouter une monnaie
        </button>
    </div>
    <div class="box-body">
        <div id="boffice-inst-loading" style="text-align:center;padding:30px;color:#999;">
            <i class="fa fa-spinner fa-spin fa-2x"></i>
            <p style="margin-top:10px;">Chargement...</p>
        </div>
        <div id="boffice-inst-list" style="display:none;">
            <table class="table table-hover" id="boffice-inst-table">
                <thead>
                    <tr>
                        <th style="width:50px;">Couleur</th>
                        <th>Nom</th>
                        <th style="width:120px;">Code couleur</th>
                        <th style="width:110px;text-align:center;">Utilisateurs</th>
                        <th style="width:100px;">Actions</th>
                    </tr>
                </thead>
                <tbody id="boffice-inst-tbody"></tbody>
            </table>
        </div>
        <div id="boffice-inst-empty" style="display:none;text-align:center;padding:30px;color:#999;">
            <i class="fa fa-money fa-2x"></i>
            <p style="margin-top:10px;">Aucune monnaie trouvée.</p>
        </div>
    </div>
</div>

{# Add/Edit modal #}
<div id="boffice-inst-modal-overlay" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:10002;overflow-y:auto;" role="dialog" aria-modal="true">
    <div style="position:relative;margin:80px auto;background:#fff;border-radius:8px;box-shadow:0 12px 40px rgba(0,0,0,.3);width:420px;max-width:96vw;">
        <div style="display:flex;align-items:center;justify-content:space-between;padding:14px 18px 12px;border-bottom:1px solid #e8e8e8;background:#f8f9fa;border-radius:8px 8px 0 0;">
            <h4 style="margin:0;font-size:15px;font-weight:700;color:#222;" id="boffice-inst-modal-title">Monnaie</h4>
            <button type="button" id="boffice-inst-modal-close" style="background:none;border:none;font-size:22px;line-height:1;color:#bbb;cursor:pointer;padding:0 2px;">&times;</button>
        </div>
        <div style="padding:18px 20px;">
            <form id="boffice-inst-form" autocomplete="off">
                <input type="hidden" id="boffice-inst-id">
                <div class="form-group">
                    <label style="font-size:12px;font-weight:600;color:#555;text-transform:uppercase;letter-spacing:.4px;">Nom <span style="color:#c00;">*</span></label>
                    <input type="text" id="boffice-inst-name" class="form-control" placeholder="Nom de la monnaie..." required>
                    <div class="help-block text-danger" id="boffice-inst-name-error" style="display:none;"></div>
                </div>
                <div class="form-group">
                    <label style="font-size:12px;font-weight:600;color:#555;text-transform:uppercase;letter-spacing:.4px;">Code couleur</label>
                    <div style="display:flex;align-items:center;gap:10px;">
                        <input type="color" id="boffice-inst-color-picker" style="width:44px;height:34px;padding:2px;border:1px solid #ccc;border-radius:4px;cursor:pointer;">
                        <input type="text" id="boffice-inst-color" class="form-control" placeholder="#3c8dbc" style="font-family:monospace;max-width:120px;">
                        <span id="boffice-inst-color-preview" style="display:inline-block;width:28px;height:28px;border-radius:50%;border:2px solid #ddd;"></span>
                    </div>
                    <p class="help-block" style="font-size:11px;margin-top:4px;">Format hexadécimal, ex: #3c8dbc</p>
                </div>
                <div style="display:flex;justify-content:flex-end;gap:8px;padding-top:10px;border-top:1px solid #eee;margin-top:4px;">
                    <button type="button" id="boffice-inst-cancel" class="btn btn-default btn-sm">Annuler</button>
                    <button type="submit" class="btn btn-primary btn-sm" id="boffice-inst-submit">
                        <i class="fa fa-save"></i> Enregistrer
                    </button>
                </div>
                <div id="boffice-inst-form-status" style="display:none;margin-top:8px;font-size:13px;"></div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block boffice_js %}
{{ encore_entry_script_tags('boffice-api') }}
{{ encore_entry_script_tags('boffice-installations') }}
{% endblock %}