@extends('layouts.app')
@section('title', $mutuelle ? 'Modifier la mutuelle' : 'Nouvelle mutuelle')
@section('page-title', 'Fichiers de base — Mutuelles')

@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; justify-content:space-between; flex-wrap:wrap; gap:10px; border-top:2px solid var(--border); padding-top:14px; }
    .act-left { display:flex; gap:10px; align-items:center; }
    .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 $m = $mutuelle; @endphp

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

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

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

    <div class="frow frow-1">
        <label class="f-label">Raison Sociale *</label>
        <input type="text" class="f-input" name="raison_sociale" value="{{ $m?->nom }}" required>
    </div>
    <div class="frow frow-1">
        <label class="f-label">Adresse 1</label>
        <input type="text" class="f-input" name="adresse1" value="{{ $m?->adresse1 }}">
    </div>
    <div class="frow frow-1">
        <label class="f-label">Adresse 2</label>
        <input type="text" class="f-input" name="adresse2" value="{{ $m?->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="{{ $m?->code_postal }}">
        <label class="f-label">Ville</label>
        <input type="text" class="f-input" style="min-width:260px;" name="commune" value="{{ $m?->ville }}" placeholder="Commune">
        <button type="button" class="icon-btn" title="Rechercher">
            <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>
    </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="{{ $m?->telephone }}">
    </div>
    <div class="frow frow-1">
        <label class="f-label">Type de Mutuelle</label>
        <select class="f-input f-select" name="type_mutuelle" style="max-width:400px;">
            <option value=""></option>
            @foreach(['Complémentaire santé','Prévoyance','Assurance maladie','Mutuelle entreprise'] as $t)
            <option value="{{ $t }}" {{ ($m?->type_mutuelle) === $t ? 'selected' : '' }}>{{ $t }}</option>
            @endforeach
        </select>
    </div>
</div>

{{-- Données techniques --}}
<div class="c-card">
    <div class="s-title">Données techniques</div>
    <div class="frow frow-1" style="margin-bottom:10px;">
        <label class="f-label">No Organisme Complémentaire</label>
        <input type="text" class="f-input" style="max-width:180px;" name="no_org_compl" value="{{ $m?->no_org_compl }}">
    </div>
    <div class="frow frow-1">
        <label class="f-label">Type de contrat</label>
        <input type="text" class="f-input" style="max-width:70px;" name="type_contrat" value="{{ $m?->type_contrat }}">
    </div>
</div>

{{-- Remarque --}}
<div class="c-card">
    <div class="s-title">Remarque</div>
    <textarea class="f-input" name="remarque" rows="4"
              style="width:100%; resize:vertical; box-sizing:border-box;">{{ $m?->remarque }}</textarea>
</div>

{{-- Actions --}}
<div class="c-card">
    <div class="action-bar">
        <div class="act-left">
            <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($m)
            <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('mutuelles.index') }}" class="btn-ghost">Quitter</a>
        </div>
    </div>
</div>

</form>

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

@endsection