<div class="container-fluid py-4">
    <x-title>Contracts &amp; e-signature settings</x-title>

    @if($error)
        <div class="alert alert-warning py-2">{{ $error }}</div>
    @endif

    @if($success)
        <div class="alert alert-success alert-dismissible fade show py-2">
            {{ $success }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <form wire:submit="save">
        <div class="row g-4">
            {{-- Connection --}}
            <div class="col-lg-5">
                <x-card>
                    <h5 class="mb-1"><i class="mdi mdi-key-outline me-1"></i>Fintrixor connection</h5>
                    <p class="text-muted small mb-3">This firm's own Fintrixor eSign account credentials.</p>

                    <div class="mb-3">
                        <label class="form-label">API key (Bearer token)</label>
                        <input type="password" class="form-control" wire:model="apiKey" autocomplete="off"
                               placeholder="{{ $apiKeyConfigured ? '•••••••• configured — leave blank to keep' : 'esign_…' }}">
                        @error('apiKey') <div class="text-danger small">{{ $message }}</div> @enderror
                        <div class="form-text">
                            @if($apiKeyConfigured)
                                <span class="text-success"><i class="mdi mdi-check-circle-outline"></i> Configured.</span> Enter a new value to replace it.
                            @else
                                <span class="text-warning"><i class="mdi mdi-alert-outline"></i> Not set — sending is disabled until a key is saved.</span>
                            @endif
                        </div>
                    </div>

                    <div class="mb-1">
                        <label class="form-label">API base URL <span class="text-muted">(optional)</span></label>
                        <input type="url" class="form-control" wire:model="baseUrl" placeholder="{{ $defaultBaseUrl }}">
                        @error('baseUrl') <div class="text-danger small">{{ $message }}</div> @enderror
                        <div class="form-text">Leave blank to use the system default ({{ $defaultBaseUrl }}).</div>
                    </div>
                </x-card>
            </div>

            {{-- Contracts --}}
            <div class="col-lg-7">
                <x-card>
                    <div class="d-flex justify-content-between align-items-center mb-1">
                        <h5 class="mb-0"><i class="mdi mdi-file-document-multiple-outline me-1"></i>Contracts</h5>
                        <button type="button" class="btn btn-sm btn-outline-primary" wire:click="addRow">
                            <i class="mdi mdi-plus"></i> Add contract
                        </button>
                    </div>
                    <p class="text-muted small mb-3">
                        This firm's contracts. Map each to the Fintrixor template id you created in your Fintrixor
                        dashboard; contracts left blank are <strong>not</strong> sent for e-signature (handled manually).
                    </p>

                    <div class="table-responsive">
                        <table class="table align-middle mb-0">
                            <thead class="table-light">
                            <tr>
                                <th scope="col" style="width:38%;">Name</th>
                                <th scope="col">Fintrixor template id</th>
                                <th scope="col" style="width:1%;"></th>
                            </tr>
                            </thead>
                            <tbody>
                            @forelse($rows as $i => $row)
                                <tr wire:key="row-{{ $i }}-{{ $row['id'] ?? 'new' }}">
                                    <td>
                                        <input type="text" class="form-control form-control-sm" wire:model="rows.{{ $i }}.name" placeholder="e.g. CFA">
                                        @error("rows.$i.name") <div class="text-danger small">{{ $message }}</div> @enderror
                                    </td>
                                    <td>
                                        <input type="text" class="form-control form-control-sm" wire:model="rows.{{ $i }}.fintrixor_template_id" placeholder="01J…  (blank = manual)">
                                    </td>
                                    <td>
                                        <button type="button" class="btn btn-sm btn-outline-danger" wire:click="removeRow({{ $i }})" title="Remove">
                                            <i class="mdi mdi-delete-outline"></i>
                                        </button>
                                    </td>
                                </tr>
                            @empty
                                <tr><td colspan="3" class="text-muted text-center py-3">No contracts yet — click “Add contract”.</td></tr>
                            @endforelse
                            </tbody>
                        </table>
                    </div>
                </x-card>
            </div>
        </div>

        <div class="mt-3">
            <button type="submit" class="btn btn-primary" wire:loading.attr="disabled" wire:target="save">
                <span wire:loading.remove wire:target="save">Save</span>
                <span wire:loading wire:target="save">Saving…</span>
            </button>
        </div>
    </form>

    {{-- Guidance --}}
    <div class="mt-4">
        <x-card>
            <h6 class="text-muted mb-2"><i class="mdi mdi-information-outline me-1"></i>Template merge variables</h6>
            <p class="small text-muted mb-2">
                When you build a template in Fintrixor, name its merge fields using these variable names and the
                system will fill them automatically when sending:
            </p>
            <code class="small d-block">client_full_name &middot; client_first_name &middot; client_last_name &middot; date &middot; reference &middot; date_of_birth &middot; current_address &middot; previous_name &middot; witness_name &middot; witness_occupation &middot; firm_name &middot; firm_email &middot; firm_tel</code>
        </x-card>
    </div>
</div>
