@extends('layouts.app')
@section('title', 'Impayés')
@section('page-title', 'Edition — Impayés')

@push('styles')
<style>
    .ed-wrap{max-width:680px;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);}
    .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);}
    .check-lbl{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--text);cursor:pointer;}
    .check-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-top{display:grid;grid-template-columns:auto 1fr;gap:16px 40px;margin-bottom:24px;align-items:start;}
    .ed-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
    .ed-lbl{font-size:13px;font-weight:700;color:var(--text-muted);white-space:nowrap;}

    .ed-type{margin-bottom:20px;}
    .ed-type-title{font-size:15px;font-weight:900;color:var(--navy);margin-bottom:12px;}
    .ed-type-option{display:flex;align-items:center;gap:8px;margin-bottom:10px;}

    .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 haut --}}
        <div style="display:flex;align-items:flex-start;gap:40px;flex-wrap:wrap;margin-bottom:22px;">
            <div>
                <div class="ed-row">
                    <span class="ed-lbl">Du</span>
                    <input type="date" class="f-input" style="width:145px;">
                    <span class="ed-lbl">Au</span>
                    <input type="date" class="f-input" style="width:145px;">
                </div>
            </div>
            <div>
                <div class="ed-row" style="margin-bottom:10px;">
                    <span style="font-size:13px;font-weight:700;color:var(--text-muted);">Prise en compte des règlements après la date</span>
                    <label class="radio-lbl"><input type="radio" name="reglAD" value="oui" checked> Oui</label>
                    <label class="radio-lbl"><input type="radio" name="reglAD" value="non"> Non</label>
                </div>
                <div class="ed-row">
                    <span style="font-size:13px;font-weight:700;color:var(--text-muted);">Ignorer les factures dont le solde est inférieur à</span>
                    <input type="text" class="f-input" style="width:80px;">
                </div>
                <div class="ed-row" style="margin-top:6px;gap:20px;">
                    <label class="radio-lbl"><input type="radio" name="factType" value="tap"> TAP</label>
                    <label class="radio-lbl"><input type="radio" name="factType" value="libre"> Libre</label>
                    <label class="radio-lbl"><input type="radio" name="factType" value="lesdeux" checked> Les deux</label>
                </div>
            </div>
        </div>

        {{-- Type d'édition --}}
        <div class="ed-type">
            <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>

        {{-- Boutons impression / export --}}
        <div style="display:flex;align-items:center;justify-content:center;gap:24px;margin-bottom:20px;">
            <button class="icon-btn" title="Imprimer">
                <svg viewBox="0 0 24 24" style="width:38px;height:38px;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:38px;height:38px;fill:none;stroke-width:1.5;stroke-linecap:round;" 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"/>
                    <path d="M17 7l-3.5 5 3.5 5" stroke="#fff" stroke-width="1.8"/>
                    <line x1="13" y1="7" x2="11" y2="17" stroke="#fff" stroke-width="1.8"/>
                </svg>
            </button>
        </div>

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