@extends('layouts.app')
@section('title', 'Relances')
@section('page-title', 'Gestion — Relances')

@push('styles')
<style>
    .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;}
    .btn-y{background:var(--yellow);color:var(--navy);border:none;border-radius:20px;padding:7px 22px;font-family:'Nunito',sans-serif;font-size:13px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;gap:6px;}
    .btn-y:hover{background:var(--yellow-dark);}
    .btn-ghost{background:#fff;color:var(--text-muted);border:1.5px solid var(--border);border-radius:20px;padding:6px 20px;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;}
    .radio-lbl{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:var(--text);cursor:pointer;white-space:nowrap;}
    .radio-lbl input{accent-color:var(--navy);}

    /* Barre filtres */
    .rl-topbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px;}
    .rl-bar2{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px;}

    /* Table */
    .rl-wrap{border:1.5px solid var(--border);border-radius:12px;overflow:hidden;max-height:480px;overflow-y:auto;margin-bottom:20px;}
    .rl-wrap::-webkit-scrollbar{width:6px;}
    .rl-wrap::-webkit-scrollbar-thumb{background:#CBD0DC;border-radius:3px;}

    .rl-section-row td{background:#D8DCF0;font-size:13px;font-weight:900;color:var(--navy);padding:8px 14px;}

    table.rl-table{width:100%;border-collapse:collapse;}
    table.rl-table tbody tr{transition:background .1s;}
    table.rl-table tbody tr:hover{background:#EEF2FF;}
    table.rl-table tbody td{padding:6px 14px;font-size:13px;font-weight:600;color:var(--text);border-bottom:1px solid var(--border);vertical-align:middle;}
    table.rl-table tbody tr:last-child td{border-bottom:none;}

    .rl-facture{font-weight:900;color:var(--navy);}
    .rl-courrier{background:var(--yellow);color:var(--navy);font-size:11px;font-weight:900;padding:2px 10px;border-radius:20px;white-space:nowrap;display:inline-block;}
    .rl-sub{font-size:12px;color:var(--text-muted);font-weight:600;}
    .rl-amt{text-align:right;font-weight:700;white-space:nowrap;}
    .rl-check{accent-color:var(--navy);width:15px;height:15px;cursor:pointer;}

    /* Pied */
    .rl-footer{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-top:10px;border-top:2px solid var(--border);}
    .rl-footer label{font-size:13px;font-weight:700;color:var(--text-muted);}
</style>
@endpush

@section('content')

@php
$sections = [
    [
        'titre' => 'Relance au client',
        'lignes' => [
            ['fact'=>'TA0000019','date'=>'25/01/16','client'=>'ALBRECHT NADINE','period'=>'6 du 18/01/16 au 20/01/16','remb'=>'0','mt'=>'96,60€','regl'=>'0,00€','reste'=>'96,60€','courrier'=>'Courrier (1)','courrier2'=>'Règlement','regl2'=>'0,00€','reste2'=>'0,00€','checked'=>true],
            ['fact'=>'TA0000036','date'=>'01/02/20','client'=>'LASSAGNE CECILE',  'period'=>'4 du 02/01/20 au 23/01/20','remb'=>'0','mt'=>'219,72€','regl'=>'0,00€','reste'=>'219,72€','courrier'=>'','courrier2'=>'Règlement','regl2'=>'0,00€','reste2'=>'0,00€','checked'=>false],
            ['fact'=>'TA0000083','date'=>'13/11/25','client'=>'ALBISSIER JEANNE',  'period'=>'2 du 10/11/25','remb'=>'0','mt'=>'44,08€','regl'=>'0,00€','reste'=>'44,08€','courrier'=>'','courrier2'=>'Règlement','regl2'=>'0,00€','reste2'=>'0,00€','checked'=>false],
        ],
    ],
    [
        'titre' => 'Relance à la mutuelle',
        'lignes' => [
            ['fact'=>'00000014','date'=>'21/01/15','client'=>'ALBAN LUCIENNE',   'period'=>'0 du 29/10/14','remb'=>'65','mt'=>'58,42€','regl'=>'37,97€','reste'=>'20,45€','courrier'=>'Courrier (1)','sub'=>'CMU','courrier2'=>'Règlement','regl2'=>'37,97€','reste2'=>'0,00€','checked'=>false],
            ['fact'=>'TA0000035','date'=>'10/06/19','client'=>'SALMI MYRIAM',     'period'=>'2 du 10/06/19','remb'=>'65','mt'=>'67,56€','regl'=>'43,91€','reste'=>'23,65€','courrier'=>'Courrier (3)','sub'=>'Mutuelle du Midi','courrier2'=>'Règlement','regl2'=>'43,91€','reste2'=>'0,00€','checked'=>false],
        ],
    ],
    [
        'titre' => 'Relance à l\'organisme',
        'lignes' => [
            ['fact'=>'TA0000091','date'=>'16/11/25','client'=>'BOUIGUES Nicolas', 'period'=>'2 du 13/11/25','remb'=>'55','mt'=>'48,56€','regl'=>'26,71€','reste'=>'21,85€','courrier'=>'','sub'=>'CPAM PERPIGNAN','courrier2'=>'Règlement','regl2'=>'0,00€','reste2'=>'0,00€','checked'=>false],
            ['fact'=>'00000010','date'=>'06/01/15','client'=>'ALBAN LUCIENNE',   'period'=>'0 du','remb'=>'100','mt'=>'75,00€','regl'=>'70,00€','reste'=>'0,00€','courrier'=>'Courrier (1)','courrier2'=>'Règlement','regl2'=>'0,00€','reste2'=>'0,00€','checked'=>false],
            ['fact'=>'TA0000092','date'=>'17/11/25','client'=>'testo durand',     'period'=>'2 du 03/11/25','remb'=>'100','mt'=>'63,02€','regl'=>'63,02€','reste'=>'0,00€','courrier'=>'','sub'=>'CPAM AGEN','courrier2'=>'Règlement','regl2'=>'0,00€','reste2'=>'0,00€','checked'=>false],
        ],
    ],
];
@endphp

{{-- Barre filtres ligne 1 --}}
<div class="rl-topbar">
    <span style="font-size:13px;font-weight:700;color:var(--text-muted);">Rech. client</span>
    <select class="f-input f-select" style="width:260px;"><option value=""></option><option>ALBRECHT NADINE</option><option>ALBAN LUCIENNE</option><option>SALMI MYRIAM</option></select>
    <button style="background:none;border:none;cursor:pointer;padding:2px 4px;">
        <svg viewBox="0 0 24 24" style="width:16px;height:16px;stroke:var(--text-muted);fill:none;stroke-width:2;stroke-linecap:round;"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
    </button>
    <span style="font-size:13px;font-weight:700;color:var(--text-muted);">No Facture</span>
    <input type="text" class="f-input" style="width:150px;">
    <button class="btn-y">Valider</button>
</div>

{{-- Barre filtres ligne 2 --}}
<div class="rl-bar2">
    <span style="font-size:13px;font-weight:700;color:var(--text-muted);">Du</span>
    <input type="date" class="f-input" style="width:140px;">
    <span style="font-size:13px;font-weight:700;color:var(--text-muted);">Au</span>
    <input type="date" class="f-input" style="width:140px;">
    <label class="radio-lbl"><input type="radio" name="rlType" value="toutes" checked> Toutes</label>
    <label class="radio-lbl"><input type="radio" name="rlType" value="clients"> aux Clients</label>
    <label class="radio-lbl"><input type="radio" name="rlType" value="organismes"> aux Organismes</label>
    <label class="radio-lbl"><input type="radio" name="rlType" value="mutuelles"> aux Mutuelles</label>
</div>

{{-- Liste --}}
<div class="rl-wrap">
    <table class="rl-table">
        <tbody>
            @foreach($sections as $section)
            <tr class="rl-section-row"><td colspan="7">{{ $section['titre'] }}</td></tr>
            @foreach($section['lignes'] as $l)
            <tr>
                <td style="width:90px;"><span class="rl-facture">{{ $l['fact'] }}</span></td>
                <td style="width:75px;">{{ $l['date'] }}</td>
                <td>
                    {{ $l['client'] }}
                    @if(!empty($l['courrier']))<br><span class="rl-courrier">{{ $l['courrier'] }}</span>@endif
                    @if(!empty($l['sub']))<br><span class="rl-sub">{{ $l['sub'] }}</span>@endif
                </td>
                <td>{{ $l['period'] }}</td>
                <td class="rl-amt">{{ $l['remb'] }}</td>
                <td class="rl-amt">{{ $l['mt'] }}<br><span class="rl-sub">{{ $l['courrier2'] }}</span></td>
                <td class="rl-amt">{{ $l['regl'] }}<br><span class="rl-sub">{{ $l['regl2'] }}</span></td>
                <td class="rl-amt">{{ $l['reste'] }}<br><span class="rl-sub">{{ $l['reste2'] }}</span></td>
                <td style="width:30px;text-align:center;"><input type="checkbox" class="rl-check" {{ $l['checked'] ? 'checked' : '' }}></td>
            </tr>
            @endforeach
            @endforeach
        </tbody>
    </table>
</div>

{{-- Pied --}}
<div class="rl-footer">
    <label>Modèle</label>
    <select class="f-input f-select" style="width:340px;">
        <option>Rappel mutuelle</option>
        <option>Rappel client</option>
        <option>Rappel organisme</option>
        <option>Mise en demeure</option>
    </select>
    <button class="btn-y">
        <svg viewBox="0 0 24 24" style="width:14px;height:14px;stroke:var(--navy);fill:none;stroke-width:2;stroke-linecap:round;"><path d="M22 2L11 13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
        Génération des relances.
    </button>
    <a href="{{ route('dashboard') }}" class="btn-ghost" style="margin-left:auto;">Quitter</a>
</div>

@endsection