@extends('layouts.app')
@section('title', 'Règlements')
@section('page-title', 'Edition — Règlements')

@push('styles')
<style>
    .ed-wrap{max-width:640px;margin:0 auto;}
    .f-input{border:1.5px solid var(--border);border-radius:7px;padding:5px 9px;font-family:'Nunito',sans-serif;font-size:13px;font-weight:600;color:var(--text);background:#fff;outline:none;transition:border-color .2s;}
    .f-input:focus{border-color:var(--yellow);}
    .f-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;background-size:14px;padding-right:28px;}
    .radio-lbl{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--text);cursor:pointer;white-space:nowrap;}
    .radio-lbl input{accent-color:var(--navy);}
    .btn-ghost{background:#fff;color:var(--text-muted);border:1.5px solid var(--border);border-radius:20px;padding:7px 22px;font-family:'Nunito',sans-serif;font-size:13px;font-weight:700;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;}
    .btn-ghost:hover{background:#F4F6FB;}
    .icon-btn{background:none;border:none;cursor:pointer;padding:4px 8px;border-radius:6px;transition:background .15s;}
    .icon-btn:hover{background:#F0F2FF;}
    .ed-card{background:#fff;border:1.5px solid var(--border);border-radius:12px;padding:28px 32px;}
    .ed-type-title{font-size:15px;font-weight:900;color:var(--navy);margin-bottom:14px;}
    .ed-type-option{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
    .ed-actions{display:flex;align-items:center;justify-content:center;gap:28px;border-top:2px solid var(--border);padding-top:20px;margin-top:8px;}
</style>
@endpush

@section('content')

<div class="ed-wrap">
    <div class="ed-card">

        {{-- Filtres date + type --}}
        <div style="display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:24px;">
            <span style="font-size:13px;font-weight:700;color:var(--text-muted);">Du</span>
            <input type="date" class="f-input" style="width:145px;">
            <span style="font-size:13px;font-weight:700;color:var(--text-muted);">Au</span>
            <input type="date" class="f-input" style="width:145px;">
            <label class="radio-lbl" style="margin-left:16px;"><input type="radio" name="rglType" value="tap"> TAP</label>
            <label class="radio-lbl"><input type="radio" name="rglType" value="libre"> Libre</label>
            <label class="radio-lbl"><input type="radio" name="rglType" value="lesdeux" checked> Les deux</label>
        </div>

        {{-- Type d'édition + icônes --}}
        <div style="display:grid;grid-template-columns:1fr auto;gap:20px;align-items:start;margin-bottom:20px;">
            <div>
                <div class="ed-type-title">Type d'édition</div>
                <div class="ed-type-option">
                    <label class="radio-lbl"><input type="radio" name="typeEd" value="global" checked> Global</label>
                </div>
                <div class="ed-type-option">
                    <label class="radio-lbl"><input type="radio" name="typeEd" value="organisme"> Par Organisme</label>
                </div>
                <div class="ed-type-option">
                    <label class="radio-lbl"><input type="radio" name="typeEd" value="client"> Par Client</label>
                </div>
                <div class="ed-type-option" id="modeReglWrap" style="opacity:.4;pointer-events:none;">
                    <label class="radio-lbl"><input type="radio" name="typeEd" value="mode" id="radioMode"> Par mode de Règlement</label>
                    <select class="f-input f-select" style="width:160px;" id="modeReglSelect">
                        <option>Chèque</option>
                        <option>Virement</option>
                        <option>Espèces</option>
                        <option>CB</option>
                        <option>Prélèvement</option>
                    </select>
                </div>
            </div>
            <div style="display:flex;flex-direction:column;gap:10px;padding-top:30px;">
                <button class="icon-btn" title="Imprimer">
                    <svg viewBox="0 0 24 24" style="width:40px;height:40px;stroke:var(--text-muted);fill:none;stroke-width:1.5;stroke-linecap:round;">
                        <polyline points="6 9 6 2 18 2 18 9"/>
                        <path d="M6 18H4a2 2 0 01-2-2v-5a2 2 0 012-2h16a2 2 0 012 2v5a2 2 0 01-2 2h-2"/>
                        <rect x="6" y="14" width="12" height="8"/>
                    </svg>
                </button>
                <button class="icon-btn" title="Exporter Excel">
                    <svg viewBox="0 0 24 24" style="width:40px;height:40px;fill:none;" xmlns="http://www.w3.org/2000/svg">
                        <rect x="2" y="2" width="20" height="20" rx="3" fill="#1D6F42" stroke="#1D6F42"/>
                        <path d="M7 7l3.5 5L7 17" stroke="#fff" stroke-width="1.8" stroke-linecap="round"/>
                        <path d="M17 7l-3.5 5 3.5 5" stroke="#fff" stroke-width="1.8" stroke-linecap="round"/>
                        <line x1="13" y1="7" x2="11" y2="17" stroke="#fff" stroke-width="1.8"/>
                    </svg>
                </button>
            </div>
        </div>

        <div class="ed-actions">
            <a href="{{ route('dashboard') }}" class="btn-ghost">Quitter</a>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
// Activer le select mode règlement seulement quand la radio "Par mode" est cochée
document.querySelectorAll('input[name="typeEd"]').forEach(r => {
    r.addEventListener('change', function() {
        const wrap = document.getElementById('modeReglWrap');
        wrap.style.opacity = this.value === 'mode' ? '1' : '.4';
        wrap.style.pointerEvents = this.value === 'mode' ? 'auto' : 'none';
    });
});
document.getElementById('radioMode').addEventListener('click', function() {
    const wrap = document.getElementById('modeReglWrap');
    wrap.style.opacity = '1';
    wrap.style.pointerEvents = 'auto';
});
</script>
@endpush