@extends('layouts.app')
@section('title', $prescripteur ? 'Modifier le prescripteur' : 'Nouveau prescripteur')
@section('page-title', 'Fichiers de base — Prescripteurs')

@push('styles')
<style>
    .c-card { background:#fff; border-radius:12px; border:1px solid var(--border); padding:18px 22px; margin-bottom:14px; }
    .f-label { font-size:12px; font-weight:700; color:var(--text-muted); white-space:nowrap; }
    .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 0.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; }
    .frow   { display:grid; align-items:center; gap:6px 12px; margin-bottom:10px; }
    .frow-1 { grid-template-columns: 180px 1fr; }
    .frow-2 { grid-template-columns: 180px 1fr 180px 1fr; }
    .s-title { font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:1px; color:var(--navy); border-bottom:2px solid var(--yellow); padding-bottom:5px; margin-bottom:14px; }
    .action-bar { display:flex; align-items:center; gap:10px; border-top:2px solid var(--border); padding-top:14px; }
    .btn-y { background:var(--yellow); color:var(--navy); border:none; border-radius:20px; padding:8px 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:7px 18px; 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; }
    .btn-danger { background:#fff; color:#E53E3E; border:1.5px solid #E53E3E; border-radius:20px; padding:7px 18px; font-family:'Nunito',sans-serif; font-size:13px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
    .btn-danger:hover { background:#FFF5F5; }
    .icon-btn { background:none; border:none; cursor:pointer; padding:4px 6px; border-radius:5px; display:inline-flex; align-items:center; transition:background 0.15s; }
    .icon-btn:hover { background:#F4F6FB; }
</style>
@endpush

@section('content')

@php $p = $prescripteur; @endphp

<form method="POST" action="{{ $p ? route('prescripteurs.update', $p->id) : route('prescripteurs.store') }}" autocomplete="off">
@csrf
@if($p) @method('PUT') @endif

{{-- En-tête --}}
<div class="c-card">
    <h2 style="font-size:16px; font-weight:900; color:var(--navy); margin:0;">
        {{ $p ? ($p->civilite ? $p->civilite.' ' : '').$p->nom : 'Nouveau prescripteur' }}
    </h2>
</div>

{{-- Identité --}}
<div class="c-card">
    <div class="s-title">Identité</div>

    <div class="frow frow-2">
        <label class="f-label">Civilité</label>
        <select class="f-input f-select" name="civilite" style="max-width:160px;">
            <option value=""></option>
            @foreach(['Dr','Pr','M.','Mme'] as $civ)
            <option value="{{ $civ }}" {{ $p?->civilite === $civ ? 'selected' : '' }}>{{ $civ }}</option>
            @endforeach
        </select>
        <label class="f-label">Nom *</label>
        <input type="text" class="f-input" name="nom" value="{{ $p?->nom }}" required placeholder="Ex : MARTIN Bernard">
    </div>

    <div style="display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px;">
        <label class="f-label">Spécialité</label>
        <input type="text" class="f-input" style="width:80px;" name="specialite_code" value="{{ $p?->specialite_code }}" placeholder="Code">
        <input type="text" class="f-input" style="min-width:280px;" name="specialite" value="{{ $p?->specialite }}" placeholder="Ex : Médecin généraliste" list="spe-list">
        <datalist id="spe-list">
            <option value="Médecin généraliste">
            <option value="Cardiologue">
            <option value="Neurologue">
            <option value="Rhumatologue">
            <option value="Pneumologue">
            <option value="Oncologue">
            <option value="Chirurgien">
            <option value="Ophtalmologue">
            <option value="Dermatologue">
            <option value="Pédiatre">
            <option value="Gynécologue">
            <option value="Urologue">
            <option value="ORL">
            <option value="Psychiatre">
            <option value="Endocrinologue">
            <option value="Néphrologue">
            <option value="Hématologue">
            <option value="Gastro-entérologue">
            <option value="Radiologue">
            <option value="Anesthésiste">
        </datalist>
    </div>

    <div class="frow frow-2">
        <label class="f-label">No de Prescripteur</label>
        <input type="text" class="f-input" style="max-width:200px;" name="no_prescripteur" value="{{ $p?->no_prescripteur }}" placeholder="Ex : 123456789">
        <label class="f-label">No RPPS</label>
        <input type="text" class="f-input" style="max-width:200px;" name="no_rpps" value="{{ $p?->no_rpps }}" placeholder="Ex : 10002345678">
    </div>
</div>

{{-- Adresse --}}
<div class="c-card">
    <div class="s-title">Adresse</div>

    <div class="frow frow-1">
        <label class="f-label">Adresse 1</label>
        <input type="text" class="f-input" name="adresse1" value="{{ $p?->adresse1 }}">
    </div>
    <div class="frow frow-1">
        <label class="f-label">Adresse 2</label>
        <input type="text" class="f-input" name="adresse2" value="{{ $p?->adresse2 }}">
    </div>

    <div style="display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px;">
        <label class="f-label">C. Postal</label>
        <input type="text" class="f-input" style="width:80px;" name="cp" value="{{ $p?->code_postal }}">
        <label class="f-label">Commune</label>
        <input type="text" class="f-input" style="min-width:260px;" name="commune" value="{{ $p?->commune }}" placeholder="Commune">
    </div>

    <div class="frow frow-1">
        <label class="f-label">Téléphone</label>
        <input type="tel" class="f-input" style="max-width:200px;" name="telephone" value="{{ $p?->telephone }}">
    </div>
</div>

{{-- Actions --}}
<div class="c-card">
    <div class="action-bar">
        <button type="submit" class="btn-y">
            <svg viewBox="0 0 24 24" style="width:14px;height:14px;stroke:var(--navy);fill:none;stroke-width:2.5;stroke-linecap:round;"><polyline points="20 6 9 17 4 12"/></svg>
            Valider
        </button>
        @if($p)
        <button type="button" class="btn-danger" onclick="document.getElementById('del-form').submit()">
            <svg viewBox="0 0 24 24" style="width:14px;height:14px;stroke:#E53E3E;fill:none;stroke-width:2;stroke-linecap:round;"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6"/><path d="M9 6V4h6v2"/></svg>
            Supprimer
        </button>
        @endif
        <a href="{{ route('prescripteurs.index') }}" class="btn-ghost">Quitter</a>
    </div>
</div>

</form>

@if($p)
<form id="del-form" method="POST" action="{{ route('prescripteurs.destroy', $p->id) }}" onsubmit="return confirm('Supprimer ce prescripteur ?')">
    @csrf @method('DELETE')
</form>
@endif

@endsection