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

@push('styles')
<style>
    .pec-wrap{max-width:560px;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;}
    .pec-row{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
    .pec-lbl{font-size:13px;font-weight:700;color:var(--text-muted);min-width:160px;flex-shrink:0;}
    .radio-lbl{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:var(--text);cursor:pointer;}
    .radio-lbl input{accent-color:var(--navy);}
    .pec-question{font-size:13px;font-weight:700;color:var(--navy);margin-bottom:8px;}
    .pec-radio-grp{display:flex;align-items:center;gap:50px;margin-bottom:18px;padding-left:4px;}
    .pec-section{border-top:1px solid var(--border);padding-top:16px;margin-top:4px;}
    .btn-y{background:var(--yellow);color:var(--navy);border:none;border-radius:20px;padding:8px 26px;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: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;}
    .pec-actions{display:flex;align-items:center;justify-content:center;gap:30px;border-top:2px solid var(--border);padding-top:20px;margin-top:10px;}
</style>
@endpush

@section('content')

<div class="pec-wrap">

    {{-- NIR + Clé --}}
    <div class="pec-row">
        <span class="pec-lbl">NIR</span>
        <input type="text" class="f-input" style="flex:1;" maxlength="13">
        <span style="font-size:13px;font-weight:700;color:var(--text-muted);margin-left:8px;">Clé</span>
        <input type="text" class="f-input" style="width:50px;" maxlength="2">
    </div>

    {{-- Client étranger --}}
    <div class="pec-row">
        <span class="pec-lbl"></span>
        <label class="radio-lbl" style="gap:8px;">
            <input type="checkbox"> Client étranger
        </label>
    </div>

    {{-- Date de naissance + Rang --}}
    <div class="pec-row">
        <span class="pec-lbl">Date de Naissance</span>
        <input type="date" class="f-input" style="width:150px;">
        <span style="font-size:13px;font-weight:700;color:var(--text-muted);margin-left:12px;">Rang</span>
        <input type="text" class="f-input" style="width:42px;" maxlength="2">
    </div>

    {{-- Date de Prescription --}}
    <div class="pec-row">
        <span class="pec-lbl">Date de Prescription</span>
        <input type="date" class="f-input" style="width:150px;" value="{{ date('Y-m-d') }}">
    </div>

    {{-- Type prestation --}}
    <div class="pec-row">
        <span class="pec-lbl">Type prestation</span>
        <select class="f-input f-select" style="width:120px;">
            <option>TXI</option>
            <option>VSL</option>
            <option>AMB</option>
        </select>
    </div>

    {{-- Date de réalisation --}}
    <div class="pec-row">
        <span class="pec-lbl">Date de réalisation</span>
        <input type="date" class="f-input" style="width:150px;" value="{{ date('Y-m-d') }}">
    </div>

    {{-- Code grand régime --}}
    <div class="pec-row">
        <span class="pec-lbl">Code grand régime</span>
        <input type="text" class="f-input" style="width:60px;" maxlength="2">
    </div>

    {{-- Questions OUI/NON --}}
    <div class="pec-section">
        <div class="pec-question">S'agit-il de soins en rapport avec une Affection Longue Durée ?</div>
        <div class="pec-radio-grp">
            <label class="radio-lbl"><input type="radio" name="ald" value="oui" checked> Oui</label>
            <label class="radio-lbl"><input type="radio" name="ald" value="non"> Non</label>
        </div>

        <div class="pec-question">S'agit-il d'une prise en charge à 100% ?</div>
        <div class="pec-radio-grp">
            <label class="radio-lbl"><input type="radio" name="pc100" value="oui" checked> Oui</label>
            <label class="radio-lbl"><input type="radio" name="pc100" value="non"> Non</label>
        </div>

        <div class="pec-question">S'agit-il de soins en rapport avec article L115 ?</div>
        <div class="pec-radio-grp">
            <label class="radio-lbl"><input type="radio" name="l115" value="oui"> Oui</label>
            <label class="radio-lbl"><input type="radio" name="l115" value="non" checked> Non</label>
        </div>

        <div class="pec-question">S'agit-il de soins en rapport avec un Accident de Travail ?</div>
        <div class="pec-radio-grp">
            <label class="radio-lbl"><input type="radio" name="at" value="oui"> Oui</label>
            <label class="radio-lbl"><input type="radio" name="at" value="non" checked> Non</label>
        </div>
    </div>

    {{-- Actions --}}
    <div class="pec-actions">
        <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="M5 12.55a11 11 0 0114.08 0"/><path d="M1.42 9a16 16 0 0121.16 0"/><path d="M8.53 16.11a6 6 0 016.95 0"/><circle cx="12" cy="20" r="1" fill="currentColor"/></svg>
            Appel PEC
        </button>
        <a href="{{ route('dashboard') }}" class="btn-ghost">Retour</a>
    </div>

</div>
@endsection