@extends('layouts.app')
@section('title', $reglement ? 'Modifier règlement' : 'Nouveau règlement')
@section('breadcrumb', 'Règlements / Formulaire')
@section('content')
<div class="page-header">
    <h1 class="page-title"><i class="fas fa-money-check" style="color:var(--info)"></i> {{ $reglement ? 'Modifier : '.$reglement->numero : 'Nouveau règlement' }}</h1>
    <a href="{{ route('reglements.index') }}" class="btn btn-secondary"><i class="fas fa-arrow-left"></i> Retour</a>
</div>
<form method="POST" action="{{ $reglement ? route('reglements.update', $reglement) : route('reglements.store') }}"
      x-data="{ tiersType: '{{ old('tiers_type', $reglement?->tiers_type ?? request('tiers_type', 'client')) }}', paiements: {{ json_encode($reglement?->paiements ?? [['mode_id'=>'','montant'=>0,'reference'=>'','banque'=>'','date_valeur'=>'']]) }} }">
    @csrf @if($reglement) @method('PUT') @endif
    @if($errors->any())<div class="alert alert-danger">@foreach($errors->all() as $e)<div>{{ $e }}</div>@endforeach</div>@endif

    <div class="grid-sidebar">
        <div class="card"><div class="card-header"><h3 class="card-title">Informations</h3></div><div class="card-body">
            <div class="form-grid form-grid-2">
                <div class="form-group"><label class="form-label">Type *</label>
                    <select name="tiers_type" class="form-control" x-model="tiersType" required>
                        <option value="client">Encaissement client</option>
                        <option value="fournisseur">Paiement fournisseur</option>
                    </select>
                </div>
                <div class="form-group"><label class="form-label">Tiers *</label>
                    <template x-if="tiersType === 'client'">
                        <select name="tiers_id" class="form-control" required>
                            <option value="">-- Choisir client --</option>
                            @foreach($clients as $c)<option value="{{ $c->id }}" {{ old('tiers_id',$reglement?->tiers_id)==$c->id?'selected':'' }}>{{ $c->nom }}</option>@endforeach
                        </select>
                    </template>
                    <template x-if="tiersType === 'fournisseur'">
                        <select name="tiers_id" class="form-control" required>
                            <option value="">-- Choisir fournisseur --</option>
                            @foreach($fournisseurs as $f)<option value="{{ $f->id }}" {{ old('tiers_id',$reglement?->tiers_id)==$f->id?'selected':'' }}>{{ $f->nom }}</option>@endforeach
                        </select>
                    </template>
                </div>
                <div class="form-group"><label class="form-label">Date *</label><input type="date" name="date" class="form-control" value="{{ old('date',$reglement?->date?->format('Y-m-d')??date('Y-m-d')) }}" required></div>
                <div class="form-group"><label class="form-label">Montant total *</label><input type="number" name="montant_total" class="form-control" step="0.001" min="0" value="{{ old('montant_total',$reglement?->montant_total??0) }}" required></div>
                <div class="form-group"><label class="form-label">Retenue à la source</label>
                    <select name="retenue_source_id" class="form-control"><option value="">-- Aucune --</option>
                        @foreach($retenues as $r)<option value="{{ $r->id }}" {{ old('retenue_source_id',$reglement?->retenue_source_id)==$r->id?'selected':'' }}>{{ $r->label }}</option>@endforeach
                    </select>
                </div>
            </div>
            <div class="form-group"><label class="form-label">Notes</label><textarea name="notes" class="form-control" rows="2">{{ old('notes',$reglement?->notes) }}</textarea></div>
        </div></div>

        <div class="card"><div class="card-header"><h3 class="card-title">Modes de paiement</h3>
            <button type="button" class="btn btn-sm btn-primary" @click="paiements.push({mode_id:'',montant:0,reference:'',banque:'',date_valeur:''})"><i class="fas fa-plus"></i></button>
        </div><div class="card-body">
            <template x-for="(p, i) in paiements" :key="i">
                <div style="border:1px solid #e2e8f0;border-radius:8px;padding:12px;margin-bottom:12px;">
                    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;">
                        <strong>Paiement <span x-text="i+1"></span></strong>
                        <button type="button" @click="paiements.splice(i,1)" style="color:#ef4444;background:none;border:none;cursor:pointer;" x-show="paiements.length>1"><i class="fas fa-times"></i></button>
                    </div>
                    <div class="form-group"><label class="form-label" style="font-size:12px;">Mode</label>
                        <select :name="'paiements['+i+'][mode_id]'" class="form-control form-control-sm" x-model="p.mode_id" required>
                            <option value="">-- Mode --</option>
                            @foreach($modes as $m)<option value="{{ $m->id }}">{{ $m->label }}</option>@endforeach
                        </select>
                    </div>
                    <div class="form-group"><label class="form-label" style="font-size:12px;">Montant</label>
                        <input type="number" :name="'paiements['+i+'][montant]'" x-model="p.montant" class="form-control form-control-sm" step="0.001" required>
                    </div>
                    <div class="form-group"><label class="form-label" style="font-size:12px;">Référence</label>
                        <input type="text" :name="'paiements['+i+'][reference]'" x-model="p.reference" class="form-control form-control-sm" placeholder="N° chèque/traite...">
                    </div>
                    <div class="form-group"><label class="form-label" style="font-size:12px;">Banque</label>
                        <input type="text" :name="'paiements['+i+'][banque]'" x-model="p.banque" class="form-control form-control-sm">
                    </div>
                    <div class="form-group"><label class="form-label" style="font-size:12px;">Date valeur</label>
                        <input type="date" :name="'paiements['+i+'][date_valeur]'" x-model="p.date_valeur" class="form-control form-control-sm">
                    </div>
                </div>
            </template>
        </div></div>
    </div>
    <div style="margin-top:20px;display:flex;gap:10px;">
        <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> Enregistrer</button>
        <a href="{{ route('reglements.index') }}" class="btn btn-secondary">Annuler</a>
    </div>
</form>
@endsection