@extends('layouts.app')
@section('title', 'Abonnements')
@section('page-title', 'Admin — Abonnements')

@section('content')
<style>
.toolbar{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap;}
.btn-add{height:36px;padding:0 18px;border-radius:7px;border:none;background:var(--yellow);color:var(--navy);font-size:13px;font-weight:800;cursor:pointer;display:flex;align-items:center;gap:6px;transition:background .2s;}
.btn-add:hover{background:#e0b000;}

.table-card{background:#fff;border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-bottom:24px;}
.table-card table{width:100%;border-collapse:collapse;font-size:13px;}
.table-card thead th{background:#f4f6fb;padding:10px 14px;text-align:left;font-size:11px;font-weight:800;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border);white-space:nowrap;}
.table-card tbody tr{border-bottom:1px solid #f0f2f7;cursor:pointer;transition:background .12s;}
.table-card tbody tr:last-child{border-bottom:none;}
.table-card tbody tr:hover{background:#f5f7fc;}
.table-card tbody tr.active-row{background:rgba(26,35,64,.05);box-shadow:inset 3px 0 0 var(--navy);}
.table-card td{padding:10px 14px;color:var(--text);vertical-align:middle;}
.table-footer{padding:9px 14px;font-size:12px;color:var(--text-muted);background:#f8f9fb;border-top:1px solid var(--border);}

.badge-actif{display:inline-block;font-size:11px;font-weight:800;padding:2px 8px;border-radius:4px;background:#E6FFFA;color:#276749;}
.badge-inactif{display:inline-block;font-size:11px;font-weight:800;padding:2px 8px;border-radius:4px;background:#F4F6FB;color:#718096;}

.fiche-card{background:#fff;border:1px solid var(--border);border-radius:10px;overflow:hidden;}
.fiche-header{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid var(--border);background:#f8f9fb;}
.fiche-title{font-size:15px;font-weight:800;color:var(--navy);}
.fiche-body{padding:22px;}

.section-sep{font-size:11px;font-weight:800;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;padding:0 0 8px;border-bottom:1px solid #f0f2f7;margin:0 0 14px;}
.fg{display:flex;flex-direction:column;gap:4px;}
.fg label{font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;}
.fc{height:36px;padding:0 10px;border:1px solid var(--border);border-radius:6px;font-size:13px;font-family:inherit;color:var(--text);background:#f8f9fb;transition:border-color .2s,background .2s;width:100%;}
.fc:focus{outline:none;border-color:var(--navy);background:#fff;}
textarea.fc{height:70px;padding:8px 10px;resize:vertical;}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.span3{grid-column:1/-1;}

.fiche-actions{display:flex;align-items:center;gap:8px;padding:16px 22px;border-top:1px solid var(--border);background:#f8f9fb;}
.btn{height:36px;padding:0 18px;border-radius:6px;font-size:13px;font-weight:700;cursor:pointer;border:none;display:inline-flex;align-items:center;gap:5px;transition:all .2s;}
.btn-save{background:var(--yellow);color:var(--navy);font-weight:800;}
.btn-save:hover{background:#e0b000;}
.btn-activer{background:transparent;border:1.5px solid #38A169;color:#38A169;}
.btn-activer:hover{background:#38A169;color:#fff;}
.btn-del{background:transparent;border:1.5px solid #E53E3E;color:#E53E3E;margin-left:auto;}
.btn-del:hover{background:#E53E3E;color:#fff;}

.prix-preview{background:#F8F9FF;border:1.5px solid var(--navy);border-radius:8px;padding:12px 16px;margin-top:16px;}
.prix-preview-title{font-size:11px;font-weight:800;color:var(--navy);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;}
.prix-line{display:flex;justify-content:space-between;align-items:center;font-size:13px;padding:3px 0;}
.prix-line strong{font-weight:800;color:var(--navy);}
.prix-total{border-top:1.5px solid var(--border);margin-top:6px;padding-top:6px;}

.alert{padding:10px 14px;border-radius:7px;font-size:13px;font-weight:600;margin-bottom:18px;display:flex;align-items:center;gap:8px;}
.alert-success{background:#F0FFF4;border:1px solid #9AE6B4;color:#276749;}
</style>

<div class="toolbar">
    <div style="font-size:14px;font-weight:700;color:var(--navy);">Tarifs annuels d'abonnement</div>
    <button class="btn-add" style="margin-left:auto;" onclick="nouveauTarif()">
        <svg viewBox="0 0 24 24" width="14" height="14" style="stroke:var(--navy);fill:none;stroke-width:2.5;stroke-linecap:round;"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
        Nouveau tarif
    </button>
</div>

<div class="table-card">
    <table>
        <thead>
            <tr>
                <th>Année</th>
                <th>Base HT / mois</th>
                <th>Société supp. HT</th>
                <th>Client mobile HT</th>
                <th>TVA</th>
                <th>Statut</th>
            </tr>
        </thead>
        <tbody id="tarifs-tbody">
            @forelse($tarifs as $t)
            <tr id="row-{{ $t->id }}" data-id="{{ $t->id }}" onclick="selectTarif({{ $t->id }})">
                <td style="font-weight:800;color:var(--navy);">{{ $t->annee }}</td>
                <td><strong>{{ number_format($t->prix_base_ht, 2, ',', ' ') }} €</strong></td>
                <td>{{ number_format($t->prix_societe_sup_ht, 2, ',', ' ') }} €</td>
                <td>{{ number_format($t->prix_client_mobile_ht, 2, ',', ' ') }} €</td>
                <td>{{ $t->tva_pct }}%</td>
                <td>
                    @if($t->actif)
                        <span class="badge-actif">Actif</span>
                    @else
                        <span class="badge-inactif">Inactif</span>
                    @endif
                </td>
            </tr>
            @empty
            <tr><td colspan="6" style="text-align:center;padding:32px;color:var(--text-muted);">Aucun tarif enregistré.</td></tr>
            @endforelse
        </tbody>
    </table>
    <div class="table-footer">{{ $tarifs->count() }} tarif{{ $tarifs->count()>1?'s':'' }}</div>
</div>

<div class="fiche-card" id="fiche-card" style="display:none;">
    <div class="fiche-header">
        <div class="fiche-title" id="fiche-title">Nouveau tarif</div>
        <span id="fiche-actif-badge"></span>
    </div>
    <div class="fiche-body">
        <div class="section-sep">Tarif mensuel HT</div>
        <div class="grid3" style="margin-bottom:14px;">
            <div class="fg">
                <label>Année *</label>
                <input type="number" id="f-annee" class="fc" placeholder="2026" min="2020" max="2099">
            </div>
            <div class="fg">
                <label>Base 1 société (€ HT/mois) *</label>
                <input type="number" id="f-base" class="fc" placeholder="0.00" step="0.01" min="0" oninput="previewPrix()">
            </div>
            <div class="fg">
                <label>TVA (%)</label>
                <input type="number" id="f-tva" class="fc" placeholder="20" step="0.01" min="0" max="100" value="20" oninput="previewPrix()">
            </div>
            <div class="fg">
                <label>Durée abonnement (mois)</label>
                <input type="number" id="f-duree" class="fc" placeholder="12" min="1" max="120" value="12">
            </div>
            <div class="fg">
                <label>Société supplémentaire (€ HT/mois)</label>
                <input type="number" id="f-soc-sup" class="fc" placeholder="0.00" step="0.01" min="0" oninput="previewPrix()">
            </div>
            <div class="fg">
                <label>Client mobile (€ HT/mois / client)</label>
                <input type="number" id="f-mobile" class="fc" placeholder="0.00" step="0.01" min="0" oninput="previewPrix()">
            </div>
        </div>

        <div class="prix-preview" id="prix-preview">
            <div class="prix-preview-title">Exemple de calcul — 1 société, 0 client mobile</div>
            <div class="prix-line"><span>Base</span><strong id="prev-base">0,00 €</strong></div>
            <div class="prix-line"><span>Sociétés supplémentaires (0)</span><strong id="prev-soc">0,00 €</strong></div>
            <div class="prix-line"><span>Clients mobiles (0)</span><strong id="prev-mob">0,00 €</strong></div>
            <div class="prix-line prix-total"><span>Total HT / mois</span><strong id="prev-ht">0,00 €</strong></div>
            <div class="prix-line"><span>Total TTC / mois</span><strong id="prev-ttc">0,00 €</strong></div>
        </div>

        <div class="fg span3" style="margin-top:14px;">
            <label>Notes</label>
            <textarea id="f-notes" class="fc" placeholder="Remarques internes..."></textarea>
        </div>
    </div>

    <div class="fiche-actions">
        <button class="btn btn-save" onclick="saveTarif()">
            <svg viewBox="0 0 24 24" width="13" height="13" style="stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;"><polyline points="20 6 9 17 4 12"/></svg>
            Enregistrer
        </button>
        <button class="btn btn-activer" id="btn-activer" style="display:none;" onclick="activerTarif()">
            ✓ Définir comme tarif actif
        </button>
        <button class="btn btn-del" id="btn-del" style="display:none;" onclick="deleteTarif()">
            Supprimer
        </button>
    </div>
</div>

@push('scripts')
<script>
const allTarifs = @json($tarifs->keyBy('id'));
let currentId = null;

function selectTarif(id) {
    currentId = id;
    const t = allTarifs[id];
    if (!t) return;
    document.querySelectorAll('#tarifs-tbody tr').forEach(r => r.classList.remove('active-row'));
    document.getElementById('row-' + id)?.classList.add('active-row');

    document.getElementById('fiche-title').textContent = 'Tarif ' + t.annee;
    document.getElementById('fiche-actif-badge').innerHTML = t.actif
        ? '<span class="badge-actif">Actif</span>'
        : '<span class="badge-inactif">Inactif</span>';

    document.getElementById('f-annee').value    = t.annee;
    document.getElementById('f-base').value     = t.prix_base_ht;
    document.getElementById('f-soc-sup').value  = t.prix_societe_sup_ht;
    document.getElementById('f-mobile').value   = t.prix_client_mobile_ht;
    document.getElementById('f-tva').value      = t.tva_pct;
    document.getElementById('f-duree').value    = t.duree_mois ?? 12;
    document.getElementById('f-notes').value    = t.notes ?? '';

    document.getElementById('btn-activer').style.display = t.actif ? 'none' : 'inline-flex';
    document.getElementById('btn-del').style.display     = t.actif ? 'none' : 'inline-flex';

    previewPrix();
    document.getElementById('fiche-card').style.display = '';
    document.getElementById('fiche-card').scrollIntoView({ behavior:'smooth', block:'nearest' });
}

function nouveauTarif() {
    currentId = null;
    document.querySelectorAll('#tarifs-tbody tr').forEach(r => r.classList.remove('active-row'));
    document.getElementById('fiche-title').textContent = 'Nouveau tarif';
    document.getElementById('fiche-actif-badge').innerHTML = '';
    document.getElementById('f-annee').value    = new Date().getFullYear();
    document.getElementById('f-base').value     = '';
    document.getElementById('f-soc-sup').value  = '';
    document.getElementById('f-mobile').value   = '';
    document.getElementById('f-tva').value      = '20';
    document.getElementById('f-duree').value    = '12';
    document.getElementById('f-notes').value    = '';
    document.getElementById('btn-activer').style.display = 'none';
    document.getElementById('btn-del').style.display     = 'none';
    previewPrix();
    document.getElementById('fiche-card').style.display = '';
    document.getElementById('f-annee').focus();
}

function previewPrix() {
    const base    = parseFloat(document.getElementById('f-base').value)    || 0;
    const socSup  = parseFloat(document.getElementById('f-soc-sup').value) || 0;
    const mobile  = parseFloat(document.getElementById('f-mobile').value)  || 0;
    const tva     = parseFloat(document.getElementById('f-tva').value)     || 20;
    // exemple : 1 société, 0 mobile
    const ht  = base;
    const ttc = ht * (1 + tva / 100);
    const fmt = v => v.toFixed(2).replace('.', ',') + ' €';
    document.getElementById('prev-base').textContent = fmt(base);
    document.getElementById('prev-soc').textContent  = fmt(0);
    document.getElementById('prev-mob').textContent  = fmt(0);
    document.getElementById('prev-ht').textContent   = fmt(ht);
    document.getElementById('prev-ttc').textContent  = fmt(ttc);
}

async function saveTarif() {
    const body = {
        annee:                  document.getElementById('f-annee').value,
        prix_base_ht:           document.getElementById('f-base').value,
        prix_societe_sup_ht:    document.getElementById('f-soc-sup').value,
        prix_client_mobile_ht:  document.getElementById('f-mobile').value,
        tva_pct:                document.getElementById('f-tva').value,
        duree_mois:             document.getElementById('f-duree').value,
        notes:                  document.getElementById('f-notes').value,
        _token: '{{ csrf_token() }}',
    };

    const url    = currentId ? '/admin/abonnements/' + currentId : '/admin/abonnements';
    const method = currentId ? 'PUT' : 'POST';

    const r = await fetch(url, { method, headers:{'Content-Type':'application/json','X-CSRF-TOKEN':'{{ csrf_token() }}'}, body:JSON.stringify(body) });
    const d = await r.json();
    if (d.success) location.reload();
    else alert('Erreur lors de l\'enregistrement.');
}

async function activerTarif() {
    if (!currentId) return;
    if (!confirm('Définir ce tarif comme tarif actif ? L\'ancien tarif actif sera désactivé.')) return;
    const r = await fetch('/admin/abonnements/' + currentId + '/activer', { method:'POST', headers:{'X-CSRF-TOKEN':'{{ csrf_token() }}'} });
    const d = await r.json();
    if (d.success) location.reload();
}

async function deleteTarif() {
    if (!currentId) return;
    if (!confirm('Supprimer ce tarif ?')) return;
    const r = await fetch('/admin/abonnements/' + currentId, { method:'DELETE', headers:{'X-CSRF-TOKEN':'{{ csrf_token() }}'} });
    const d = await r.json();
    if (d.success) location.reload();
    else alert(d.message || 'Erreur.');
}
</script>
@endpush
@endsection